/* ==========================================================================
   Alqima Urban — Header (Stage 02 system, Stage 05 brand)

   [ menu ]        Alqima Urban        [ language ]

   - 1fr | auto | 1fr grid → the brand is always mathematically centred.
   - Logical placement → mirrors in RTL (menu at the reading start).
   - Transparent over the hero; a floating hairline-glass surface fades in on
     scroll; hides on scroll-down, returns on scroll-up / keyboard focus.
   - Stays on top of the fullscreen menu (its controls remain usable).
   ========================================================================== */

.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--z-header);
	height: calc(var(--header-h) + var(--safe-t));
	padding-block-start: var(--safe-t);   /* v1.3: controls clear the notch / Dynamic Island */
	transition: transform 0.7s var(--ease-out);
	pointer-events: none;            /* only the controls catch the pointer */
}

.site-header.is-hidden {
	transform: translateY(-110%);
}

/* Floating glass surface: inset from the viewport edges, hairline border,
   faint inner highlight, no shadow. */
.site-header__glass {
	position: absolute;
	inset-block: calc(0.625rem + var(--safe-t)) 0.625rem;
	inset-inline: 0.625rem;
	border-radius: var(--r-md);
	background: var(--glass-header);
	border: 1px solid var(--glass-line);
	box-shadow: none; /* Final: hairline only — no shadow, no inner glow */
	/* brightness(0.48) dims whatever is behind the glass (Apple-style material):
	   the tint stays light (navy .34) but off-white controls keep ≥ 4.5:1
	   even over a bright photograph or an Off White band (measured). */
	-webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(140%) brightness(0.48);
	backdrop-filter: blur(var(--glass-blur-lg)) saturate(140%) brightness(0.48);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.6s var(--ease-soft), transform 0.8s var(--ease-out), background-color 0.5s var(--ease-soft), border-color 0.5s var(--ease-soft);
}

.site-header.is-scrolled .site-header__glass,
.is-light-page .site-header__glass {
	opacity: 1;
	transform: none;
}

/* Final stage — a lighter, floating header. Over dark content (hero,
   navy / burgundy sections, imagery, the footer) it is navy glass at 34 %
   with a strong blur; over Off White / Beige the same glass turns light
   (off-white at 62 %) and the controls and wordmark turn navy, like iOS
   materials adapting to what is beneath. nav.js sets .is-over-light from
   what passes under the header (IntersectionObserver, no scroll handler).
   Without JS, light pages use the light material. Never solid, no shadow. */
.site-header.is-over-light,
html:not(.js) .is-light-page .site-header {
	--c-text: var(--color-navy);
	--c-text-2: rgb(var(--rgb-navy) / 0.8);
	--c-text-3: rgb(var(--rgb-navy) / 0.68);
	--c-accent: var(--color-burgundy);
	--c-focus-halo: rgb(var(--rgb-off-white) / 0.9);
	color: var(--c-text);
}

.site-header.is-over-light .site-header__glass,
html:not(.js) .is-light-page .site-header__glass {
	background: var(--glass-header-light);
	border-color: var(--glass-header-line-light);
	-webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(140%) brightness(1.06);
	backdrop-filter: blur(var(--glass-blur-lg)) saturate(140%) brightness(1.06);
}

.site-header .brand,
.site-header .icon-button {
	transition: color 0.45s var(--ease-soft), opacity 0.4s var(--ease-soft), scale 0.25s var(--ease-out);
}

/* The menu overlay is always navy: the header returns to its dark tone. */
.site-header.is-menu-open {
	--c-text: var(--color-off-white);
	--c-text-2: rgb(var(--rgb-off-white) / 0.76);
	--c-accent: var(--color-beige);
	color: var(--c-text);
}

.site-header.is-menu-open .site-header__glass {
	opacity: 0;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header__glass {
		background: var(--glass-tint-solid);
	}

	/* No blur available: the light material must be near-opaque to stay readable. */
	.site-header.is-over-light .site-header__glass,
	html:not(.js) .is-light-page .site-header__glass {
		background: rgb(var(--rgb-off-white) / 0.96);
	}
}

.site-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	height: 100%;
}

.site-header__start,
.site-header__center,
.site-header__end {
	display: flex;
	align-items: center;
	pointer-events: auto;
}

.site-header__start {
	justify-self: start;
}

.site-header__center {
	justify-self: center;
}

.site-header__end {
	justify-self: end;
}

/* ------------------------------------------------------------------ Brand */
/* Typographic wordmark in the page language: "Alqima Urban" (Inter) or
   "القمة العمرانية" (IBM Plex Sans Arabic) — exact casing, never
   uppercased. The burgundy-on-beige mark is the brand's small signature. */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.75rem;
	color: var(--c-text);
}

.brand__mark {
	width: 6px;
	height: 6px;
	background: var(--c-accent);
	flex: none;
}

.brand__word {
	font-family: var(--f-latin);
	font-size: 1.0625rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
}

.brand__word[lang="ar"] {
	font-family: var(--f-arabic);
	font-size: 1.125rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
	line-height: 1.2;
}

/* Centre optically: the mark sits outside the measured word. */
.site-header__center .brand {
	position: relative;
}

.site-header__center .brand__mark {
	position: absolute;
	inset-inline-end: calc(100% + 0.75rem);
}

.brand__logo {
	width: auto;
	max-height: 1.75rem;
}

/* ------------------------------------------------------------ Icon button */
.icon-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	color: var(--c-text);
	border-radius: var(--r-sm);
}

/* ------------------------------------------------------------ Menu button */
/* v1.3 — Two thin editorial lines (the second shorter) morph into a square,
   hairline X built from the very same lines (no icon swap):
     open  = the lines meet at the centre, then rotate to ±45°;
     close = they un-rotate first, then part again.
   The two phases come from transition-delays per state, so the motion is
   pure CSS (no JS, no extra DOM) and reverses cleanly if clicked mid-way.
   Total ≈ 0.5 s. The X measures ≈ 14 × 14 px inside a 44 × 44 px target. */
.menu-button__icon {
	position: relative;
	display: block;
	width: 1.75rem;
	height: 0.6875rem;
	transition: scale 0.35s var(--ease-out);
}

.menu-button__line {
	position: absolute;
	inset-inline-start: 0;
	height: 1px;
	background: currentColor;
	transform-origin: center;
	/* closing: un-rotate now, then part (delay) */
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		width 0.34s var(--ease-out) 0.18s,
		inset-block-start 0.34s var(--ease-out) 0.18s;
}

.menu-button__line:first-child {
	inset-block-start: 0;
	width: 100%;
}

.menu-button__line:last-child {
	inset-block-start: calc(100% - 1px);
	width: 58%;
}

/* Hover nudge only while closed (Stage 08 fix: in RTL the hover rule out-
   ranked the open state and un-rotated one line of the close mark). */
@media (hover: hover) {
	.menu-button:not([aria-expanded="true"]):hover .menu-button__line:first-child {
		transform: translateX(2px);
	}

	[dir="rtl"] .menu-button:not([aria-expanded="true"]):hover .menu-button__line:first-child {
		transform: translateX(-2px);
	}

	.menu-button:not([aria-expanded="true"]):hover .menu-button__line:last-child {
		width: 100%;
	}

	/* Open: the X draws in slightly — quiet confirmation, no colour change. */
	.menu-button[aria-expanded="true"]:hover .menu-button__icon {
		scale: 0.86;
	}
}

.menu-button:active .menu-button__icon {
	scale: 0.86;
}

/* Open → close mark: meet at the centre, then rotate (delay). */
.menu-button[aria-expanded="true"] .menu-button__line {
	inset-block-start: calc(50% - 0.5px);
	width: 100%;
	transition:
		inset-block-start 0.22s cubic-bezier(0.4, 0, 0.2, 1),
		width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.42s var(--ease-out) 0.16s;
}

/* 28px line × 0.72 ≈ 20px diagonal → a true square X (≈ 14px). */
.menu-button[aria-expanded="true"] .menu-button__line:first-child {
	transform: rotate(45deg) scaleX(0.72);
}

.menu-button[aria-expanded="true"] .menu-button__line:last-child {
	transform: rotate(-45deg) scaleX(0.72);
}

/* -------------------------------------------------------- Language control */
.lang-control {
	position: relative;
}

.lang-control__button {
	padding-inline: 0.5rem;
	font-size: 1rem;
}

.lang-control__button .icon--globe {
	transition: transform 0.9s var(--ease-out);
}

@media (hover: hover) {
	.lang-control__button:hover .icon--globe {
		transform: rotate(18deg);
	}
}

.lang-control__code {
	font-family: var(--f-latin);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: 0.18em;
	margin-inline-end: -0.18em;
	color: var(--c-text-2);
}

/* (Final stage: the language popover was removed — the globe is a direct
   toggle. Its states: hover turns the globe, focus ring, press.) */

/* --------------------------------------------------------------- Mobile */
@media (max-width: 47.99em) {
	.site-header__glass {
		inset-block: calc(0.5rem + var(--safe-t)) 0.5rem;
		inset-inline: 0.5rem;
	}

	.brand__word {
		font-size: 1rem;
	}

	.brand__word[lang="ar"] {
		font-size: 1.0625rem;
	}

	.lang-control__code {
		display: none;
	}
}