/**
 * Base layer: reset, typography, layout primitives, accessibility helpers.
 *
 * Use LOGICAL properties only (margin-inline-start, padding-inline, inset-inline-end…)
 * so the same CSS works for Arabic (RTL) and French (LTR) without a separate rtl.css.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--az-surface);
	color: var(--az-ink);
	font-family: var(--az-font);
	line-height: 1.6;
}

img,
svg,
video {
	max-inline-size: 100%;
	block-size: auto;
}

a {
	color: var(--az-orange-text);
}

:focus-visible {
	outline: 2px solid var(--az-orange);
	outline-offset: 2px;
}

/* Layout primitives */
.az-container {
	inline-size: 100%;
	max-inline-size: var(--az-container);
	margin-inline: auto;
	padding-inline: var(--az-gutter);
}

.az-section {
	padding-block: 24px;
}

/* Accessibility */
.screen-reader-text,
.az-sr-only {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.az-skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 16px;
	z-index: 1000;
	padding: 12px 16px;
	background: var(--az-orange);
	color: var(--az-ink);
	font-weight: 700;
	border-radius: var(--az-radius-sm);
}

.az-skip-link:focus {
	inset-block-start: 16px;
}

.az-main:focus {
	outline: none;
}

/* Default content area for pages not yet custom-designed (phases 2–5). */
.az-page__header {
	padding-block: 28px 8px;
}

.az-page__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.az-page__content {
	padding-block-end: 24px;
	padding-inline: var(--az-gutter);
}

/* Blocks sit in the container width; their own backgrounds stay inside it. */
.az-page__content > * {
	max-inline-size: calc(var(--az-container) - 2 * var(--az-gutter));
	margin-inline: auto;
}

.home .az-page__content {
	padding-block-start: var(--az-gutter);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}