/* ============================================================================
   SADER — s-header
   Site chrome: a transparent header floating over the hero that goes solid
   espresso once scrolled (driven by app.js: .is-scrolled / .is-transparent).
   The header carries data-theme="dark" so light text + brass tokens read both
   over the cinematic hero video AND on the solid espresso bar.
   Logical properties throughout — RTL flips for free.
   ============================================================================ */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  /* Slow, confident chrome transition between transparent <-> solid. */
  transition: background-color var(--dur-slow) var(--ease);
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

/* A whisper-soft top scrim keeps the light wordmark/nav legible over a bright
   frame of the hero video while the header is still transparent. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.18) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease);
}

/* SOLID state — flat espresso bar with no bottom divider. */
.site-header.is-scrolled {
  background-color: var(--espresso);
  border: 0;
  box-shadow: none;
}
.site-header.is-scrolled::before { opacity: 0; }

/* The bar grid: wordmark | nav | actions. */
.s-header__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  block-size: var(--header-h);
  transition: block-size var(--dur-slow) var(--ease);
}
@media (max-width: 900px) {
  .s-header__bar { block-size: var(--header-h-mobile); }
}

/* ==========================================================================
   WORDMARK
   ========================================================================== */
.s-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
  white-space: nowrap;
}
/* SADER logo (replaces the text wordmark). White SVG inherits on the dark
   header; scales with the bar height. */
.s-header__logo {
  display: block;
  block-size: clamp(28px, 2.4vw, 34px);
  inline-size: auto;
  transition: opacity var(--dur-fast) var(--ease);
}
.s-header__brand:hover .s-header__logo { opacity: 0.78; }
.s-header__wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  letter-spacing: 0.34em;
  line-height: 1;
  /* The wordmark is letter-spaced; pad the inline-end so the last glyph's
     trailing space doesn't visually pull the lockup off-centre. */
  padding-inline-end: 0.34em;
  color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}
/* Arabic wordmark wants its own tracking — Naskh letterforms connect. */
[dir="rtl"] .s-header__wordmark { letter-spacing: 0; padding-inline-end: 0; }

.s-header__since {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  /* hairline tick before the date, echoing the .eyebrow language */
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--line-brass);
}
@media (max-width: 1100px) {
  .s-header__since { display: none; }
}

/* ==========================================================================
   DESKTOP NAV — spare, typographic, with an animated brass underline.
   ========================================================================== */
.s-header__nav { justify-self: center; }
.s-header__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-5), 2.4vw, var(--space-8));
}
.s-header__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}
/* Brass rule that grows from the inline-start on hover/focus (auto-mirrors). */
.s-header__link-text { position: relative; }
.s-header__link-text::after {
  content: "";
  position: absolute;
  inset-block-end: -4px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1px;
  background-color: var(--accent);
  transition: inline-size var(--dur-base) var(--ease);
}
.s-header__link:hover,
.s-header__link:focus-visible { color: var(--text); }
.s-header__link:hover .s-header__link-text::after,
.s-header__link:focus-visible .s-header__link-text::after { inline-size: 100%; }
/* Current page (set by app.js): label lit, brass rule permanently drawn. */
.s-header__link[aria-current="page"] { color: var(--text); }
.s-header__link[aria-current="page"] .s-header__link-text::after { inline-size: 100%; }

/* ==========================================================================
   END ACTIONS — language switch, quiet portal CTA, mobile toggle.
   ========================================================================== */
.s-header__actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--space-4), 1.6vw, var(--space-6));
}
.s-header__portal { white-space: nowrap; }

/* Hide the desktop nav + quiet CTA on small screens (drawer takes over). */
@media (max-width: 900px) {
  .s-header__nav,
  .s-header__portal { display: none; }
}

/* ==========================================================================
   HAMBURGER TOGGLE — refined two-rule mark that morphs to an X when open.
   Hidden on desktop; the morph is keyed off <html>.nav-open (set by app.js).
   ========================================================================== */
.s-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-end: calc(var(--space-2) * -1);
  color: var(--text);
}
@media (max-width: 900px) {
  .s-header__toggle { display: inline-flex; }
}
.s-header__toggle-lines {
  position: relative;
  display: block;
  inline-size: 26px;
  block-size: 12px;
}
.s-header__toggle-line {
  position: absolute;
  inset-inline: 0;
  block-size: 1.5px;
  background-color: currentColor;
  transition: transform var(--dur-base) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.s-header__toggle-line:first-child { inset-block-start: 0; }
.s-header__toggle-line:last-child  { inset-block-end: 0; }

/* Morph to an X while the drawer is open. */
.nav-open .s-header__toggle-line:first-child {
  transform: translateY(5.25px) rotate(45deg);
}
.nav-open .s-header__toggle-line:last-child {
  transform: translateY(-5.25px) rotate(-45deg);
}

/* ==========================================================================
   FULL-SCREEN DRAWER — espresso world, monumental serif links, generous air.
   Hidden by default (display:none); app.js removes [hidden] + adds .is-open.
   ========================================================================== */
.s-header__drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--ink-brown);
  /* Open/close: fade + a soft drift down from the top. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-slow) var(--ease),
              visibility 0s linear var(--dur-base);
}
.s-header__drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-slow) var(--ease),
              visibility 0s;
}
@media (min-width: 901px) {
  /* Never show the drawer on desktop even if a stray .is-open lingers. */
  .s-header__drawer { display: none; }
}

.s-header__drawer-inner {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-5) clamp(var(--space-8), 8vh, var(--space-11));
}

.s-header__drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--header-h-mobile);
  margin-block-end: clamp(var(--space-7), 8vh, var(--space-11));
}
.s-header__wordmark--drawer {
  font-size: var(--fs-h4);
  color: var(--text);
}

/* Close control — a hairline X in a tap target. */
.s-header__close {
  position: relative;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-end: calc(var(--space-2) * -1);
  color: var(--text);
}
.s-header__close-mark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 22px;
  block-size: 22px;
  transform: translate(-50%, -50%);
}
[dir="rtl"] .s-header__close-mark { transform: translate(50%, -50%); }
.s-header__close-mark::before,
.s-header__close-mark::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1.5px;
  background-color: currentColor;
}
.s-header__close-mark::before { transform: rotate(45deg); }
.s-header__close-mark::after  { transform: rotate(-45deg); }

/* The link stack. */
.s-header__drawer-nav { flex: 1 1 auto; }
.s-header__drawer-list {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-2), 1.4vh, var(--space-4));
}
.s-header__drawer-link {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}
.s-header__drawer-link:hover,
.s-header__drawer-link:focus-visible { color: var(--accent-strong); }
/* Current page (set by app.js) — same brass as hover, held. */
.s-header__drawer-link[aria-current="page"] { color: var(--accent-strong); }

/* Brass index ornament before each link (e.g. 01 … 06). */
.s-header__drawer-index {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  /* nudge the small numeral to sit with the cap line of the serif link */
  transform: translateY(-0.55em);
  font-variant-numeric: lining-nums;
}
/* Arabic-Indic numerals (٠١…) read far smaller than Latin at 11px, so they
   get lost next to the large Arabic titles — bump the size and drop the
   tracking / heavy lift. */
[dir="rtl"] .s-header__drawer-index {
  font-size: var(--fs-h4);
  letter-spacing: 0;
  transform: translateY(-0.1em);
}

/* Drawer footer — CTA + language switch, separated by a faint rule. */
.s-header__drawer-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block-start: clamp(var(--space-6), 6vh, var(--space-8));
  border-block-start: 1px solid var(--line);
}
.s-header__drawer-cta { align-self: flex-start; }
/* Keep the language pill at its intrinsic width — the column-flex drawer foot
   would otherwise stretch it to the full width. */
.s-header__drawer-foot .lang-switch { align-self: flex-start; }

/* ==========================================================================
   SENTINEL — a 1px marker ~80px down the document. app.js observes it to
   flip the header solid. Invisible + non-interactive.
   ========================================================================== */
.s-header__sentinel {
  position: absolute;
  inset-block-start: 80px;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
  pointer-events: none;
}