/**
 * Header + desktop dropdown navigation, plus the Phase 5 mobile navigation
 * (full-screen editorial overlay, not a generic Bootstrap-style drawer —
 * see the "Mobile navigation" block at the bottom of this file and
 * template-parts/navigation/nav-mobile.php).
 * Spec source: PDF p.2–3 build notes (see tokens.css for the confirmed values used here).
 */

.site-header {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-ash);
}

/* Homepage-only: header overlays the hero instead of sitting in normal flow.
   `--announcement-height-actual` is measured live by header.php's inline
   script (the announcement bar's real rendered height, which can exceed the
   fixed --announcement-height token when its text wraps to two lines on
   narrow viewports) — the fixed token is only a same-request fallback. */
.home .site-header {
  position: absolute;
  inset-inline: 0;
  top: var(--announcement-height-actual, var(--announcement-height));
  background: linear-gradient(to bottom, rgba(23, 19, 15, 0.55), rgba(23, 19, 15, 0) 85%);
}
/* Dev/QA-only: pushes the header below the RTL preview banner too, once
   header.php's inline script has measured it — see that file for why a
   fixed value can't work here (the banner's height varies by viewport). */
.rtl-preview.home .site-header {
  top: calc(var(--announcement-height-actual, var(--announcement-height)) + var(--rtl-banner-height, 60px));
}

.site-header__inner {
  position: relative; /* dropdown panels anchor their vertical position to this box */
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Desktop: three explicit zones (logo / center nav / SHOP) instead of the
   two-child flex above, so the logo can sit at the true left edge and SHOP
   at the true right edge with guaranteed breathing space between each zone
   and the nav — client feedback was that all three felt crowded together.
   Grid keeps this stable across widths rather than relying on margins on
   individual items. Mobile's simpler logo + nav-mobile-actions flex above
   is untouched. */
@media (min-width: 1024px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: var(--space-8);
  }
  .site-logo {
    justify-self: start;
  }
  .primary-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .primary-nav__shop {
    justify-self: end;
  }
}

/* ---- Logo ----
 * Real extracted vector mark (see haven_logo_markup() / MISSING-ASSETS.md),
 * not a text approximation. `--logo-header-height` is the one number to
 * change to resize it everywhere it appears in the header. */
.site-logo {
  --logo-header-height: 34px;
  display: block;
  color: var(--color-paper-on-dark);
  flex: none;
}
.site-logo svg {
  display: block;
  height: var(--logo-header-height);
  width: auto;
}

/* ---- Top-level nav ---- */
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: nowrap;
}

.primary-nav__item {
  flex: none; /* never let flex shrink text onto a second line — the whole point of matching the 1440px design canvas */
}

.primary-nav__link {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-paper-on-dark);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-2);
  opacity: 0.88;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}
.primary-nav__link:hover,
.primary-nav__link:focus-visible,
.primary-nav__item--dropdown.is-open .primary-nav__link {
  opacity: 1;
}

.primary-nav__chevron {
  font-size: 0.6em;
  transition: transform var(--transition-fast);
}
.primary-nav__item--dropdown.is-open .primary-nav__chevron {
  transform: rotate(180deg);
}

.primary-nav__link--button {
  border: 1px solid var(--color-line-on-dark);
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-00);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.primary-nav__link--button:hover,
.primary-nav__link--button:focus-visible {
  background: var(--color-paper-on-dark);
  color: var(--color-ash);
}

/* ---- Dropdown panel ---- */
.primary-nav__item--dropdown {
  position: static; /* panel positions against .site-header__inner, not this li — see below */
}

.nav-panel {
  position: absolute;
  top: 100%;
  left: 0; /* overridden per-panel by navigation.js to align with its trigger's left edge */
  min-width: 260px;
  background: var(--color-ash);
  border-top: var(--nav-panel-rule-width) solid var(--color-cherry-temp);
  border-radius: var(--radius-none);
  box-shadow: none;
  padding: var(--nav-panel-inset);
  padding-bottom: var(--nav-panel-bottom-padding);
  z-index: var(--z-dropdown);

  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--nav-panel-rise)));
  transition:
    opacity var(--nav-panel-motion-duration) var(--nav-panel-motion-easing),
    transform var(--nav-panel-motion-duration) var(--nav-panel-motion-easing),
    visibility 0s linear var(--nav-panel-motion-duration);
  pointer-events: none;
}

.primary-nav__item--dropdown.is-open .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--nav-panel-motion-duration) var(--nav-panel-motion-easing),
    transform var(--nav-panel-motion-duration) var(--nav-panel-motion-easing);
  pointer-events: auto;
}

.nav-panel__heading {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--nav-heading-size);
  letter-spacing: var(--nav-heading-tracking);
  text-transform: uppercase;
  color: var(--color-paper-on-dark);
}

.nav-panel__rule {
  width: 24px;
  height: 0;
  margin-inline: 0;
  margin-block: var(--space-3) var(--space-4);
  border: none;
  border-block-start: 1px solid var(--color-cherry-temp);
}

.nav-panel__links {
  display: flex;
  flex-direction: column;
  gap: var(--nav-panel-link-gap);
}

.nav-panel__link {
  position: relative;
  display: inline-block;
  padding-left: 14px;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--nav-link-size);
  color: var(--color-paper-on-dark-soft);
  transition: color var(--transition-fast);
}
.nav-panel__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 2px;
  background: var(--color-cherry-temp);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.nav-panel__link:hover,
.nav-panel__link:focus-visible {
  color: var(--color-paper-on-dark);
}
.nav-panel__link:hover::before,
.nav-panel__link:focus-visible::before {
  opacity: 1;
}
.nav-panel__link.is-current {
  color: var(--color-paper-on-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- Backdrop dim behind an open panel ("55% Noir") ---- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-noir-temp);
  opacity: 0;
  z-index: var(--z-backdrop);
  pointer-events: none;
  transition: opacity var(--nav-panel-motion-duration) var(--nav-panel-motion-easing);
}
.nav-backdrop.is-visible {
  opacity: var(--nav-backdrop-opacity);
  pointer-events: auto;
}

/* ================= Mobile navigation (Phase 5) ================= */

/* Groups the SHOP link + MENU trigger as one flex child of .site-header__inner
   so that box's `justify-content: space-between` still only ever sees two
   groups (logo, this one) — without this wrapper a 3-item space-between
   would push SHOP into the middle of the header instead of next to MENU. */
.nav-mobile-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Mobile header SHOP link — sits between the logo and the MENU trigger.
   Sourced from haven_nav_items() (the same button-style item desktop shows
   in the primary nav list), not hardcoded — see nav-mobile.php. Same bordered
   editorial-button language as .primary-nav__link--button. */
.nav-mobile-header-link {
  display: none;
  align-items: center;
  border: 1px solid var(--color-line-on-dark);
  /* Client feedback 2026-09-01: ~10% smaller than the site's normal small-
     UI scale (var(--fs-00)/var(--space-2)/var(--space-4)) and softened
     corners, mobile only — kept as a live calc() off those shared tokens
     rather than new hardcoded numbers, so this stays proportional if the
     base scale ever changes, without touching the tokens themselves (used
     everywhere else on the site at full size). min-height dropped from
     44px to 40px to match — still a reasonable touch target, not just a
     smaller label inside an unchanged-height box. border-radius restrained
     (not a pill) — Haven's general button language is square (see
     --radius-none in tokens.css); this is a deliberate, scoped exception
     for these two mobile chrome buttons only. */
  padding: calc(var(--space-2) * 0.9) calc(var(--space-4) * 0.9);
  min-height: 40px;
  border-radius: 6px;
  color: var(--color-paper-on-dark);
  font-family: var(--font-ui);
  font-size: calc(var(--fs-00) * 0.9);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-mobile-header-link:hover,
.nav-mobile-header-link:focus-visible {
  background: var(--color-paper-on-dark);
  color: var(--color-ash);
}

/* Trigger: hidden on desktop, shown below 1024px. Text label + a compact
   two-line mark rather than a generic 3-bar hamburger icon, to stay in the
   same understated editorial-UI language as the SHOP button next to it.
   A restrained translucent dark background (not a solid block) keeps the
   label/icon readable over the Hero photo's lighter areas without looking
   like a heavy UI chrome element. */
.nav-trigger {
  display: none;
  align-items: center;
  gap: calc(var(--space-3) * 0.9);
  background: rgba(23, 19, 15, 0.45);
  border: none;
  /* ~10% smaller + softened corners, mobile only — see the matching
     comment on .nav-mobile-header-link above (same 2026-09-01 pass, same
     reasoning: calc() off the shared tokens, not new hardcoded values). */
  border-radius: 6px;
  color: var(--color-paper-on-dark);
  font-family: var(--font-ui);
  font-size: calc(var(--fs-00) * 0.9);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: calc(var(--space-3) * 0.9);
  min-height: 40px;
}
.nav-trigger__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4.5px;
  width: 20px;
}
.nav-trigger__line {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-mobile-open .nav-trigger__line:first-child {
  transform: translateY(3px) rotate(45deg);
}
.nav-mobile-open .nav-trigger__line:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

/* Full-screen overlay panel. `tabindex="-1"` (markup) makes it the initial
   focus target on open (see navigation-mobile.js) — it's not a real control,
   so it gets no visible focus ring of its own. */
.nav-mobile:focus {
  outline: none;
}
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  background: var(--color-noir-temp);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--nav-panel-motion-duration) var(--nav-panel-motion-easing), visibility 0s linear var(--nav-panel-motion-duration);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--nav-panel-motion-duration) var(--nav-panel-motion-easing);
}
.nav-mobile__inner {
  min-height: 100%;
  padding: var(--space-5) var(--container-padding) var(--space-8);
}
.nav-mobile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}
.nav-mobile__logo {
  --logo-header-height: 30px;
  display: block;
  color: var(--color-paper-on-dark);
}
.nav-mobile__logo svg {
  display: block;
  height: var(--logo-header-height);
  width: auto;
}
.nav-mobile__close {
  background: none;
  border: 1px solid var(--color-line-on-dark);
  color: var(--color-paper-on-dark);
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-mobile__nav {
  margin-top: var(--space-5);
}
.nav-mobile__list {
  display: flex;
  flex-direction: column;
}
.nav-mobile__item {
  border-block-end: 1px solid var(--color-line-on-dark);
}
.nav-mobile__link,
.nav-mobile__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: var(--space-4);
  font-family: var(--font-display);
  /* Rebalanced from a flat --fs-3 (28px): at 7-8 stacked rows, that size
     made the menu itself the dominant visual element on screen rather than
     an easy-to-scan list. clamp() keeps it comfortably readable on the
     smallest supported phone width (~360px) without scaling up past a
     controlled ceiling on larger phones. */
  font-size: clamp(1.125rem, 4.5vw, 1.375rem);
  line-height: 1.25;
  color: var(--color-paper-on-dark);
  background: none;
  border: none;
  text-align: start;
  cursor: pointer;
  /* A large, comfortable tap target for every top-level item — see
     Phase 5 "Touch Targets" requirement — without visually enlarging the
     text itself. */
  min-height: 44px;
}
.nav-mobile__link--button {
  display: inline-flex;
  width: auto;
  margin-block-start: var(--space-4);
  border: 1px solid var(--color-line-on-dark);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-mobile__chevron {
  font-size: 0.65em;
  color: var(--color-paper-on-dark-soft);
  transition: transform var(--transition-fast);
  flex: none;
  margin-inline-start: var(--space-4);
}
.nav-mobile__item--dropdown[data-expanded="true"] .nav-mobile__chevron {
  transform: rotate(180deg);
}

/* Collapsed by default (see the `inert` attribute in nav-mobile.php) — a
   generous fixed max-height rather than measuring real content lets this
   animate smoothly with plain CSS; the tallest real submenu (About, 6
   links) comfortably clears it well before the ceiling. */
.nav-mobile__sublist {
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms ease;
}
.nav-mobile__sublist.is-open {
  max-height: 480px;
}
.nav-mobile__sublist > ul {
  padding-block-end: var(--space-4);
}
.nav-mobile__sublist ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.nav-mobile__sublink {
  display: block;
  /* Logical start-edge rule, mirrors correctly under RTL. */
  border-inline-start: 2px solid var(--color-cherry-temp);
  padding-inline-start: var(--space-4);
  padding-block: var(--space-2);
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 300;
  /* Rebalanced alongside the top-level items above — kept clearly smaller
     than the parent item so the hierarchy still reads at a glance. */
  font-size: clamp(0.85rem, 3.2vw, 0.95rem);
  color: var(--color-paper-on-dark-soft);
}
.nav-mobile__sublink:hover,
.nav-mobile__sublink:focus-visible {
  color: var(--color-paper-on-dark);
}

/* Locks background scroll while the panel is open — see
   assets/js/navigation-mobile.js. */
body.nav-mobile-open {
  overflow: hidden;
}

@media (max-width: 1023px) {
  /* Desktop nav is hidden below 1024px; mobile nav takes over. Mobile has
     its own SHOP link (.nav-mobile-header-link, in .nav-mobile-actions) —
     without hiding this too, the desktop-only SHOP zone stayed visible
     alongside it and pushed the MENU button off-screen. */
  .primary-nav { display: none; }
  .primary-nav__shop { display: none; }
  .nav-trigger { display: flex; }
  .nav-mobile-header-link { display: inline-flex; }
}
/* Adding the SHOP link next to MENU introduced horizontal overflow on the
   narrowest supported phones (360px) — logo + both buttons no longer fit
   at their normal padding/gap. Tighten just those three values below 375px;
   390px and up are unaffected. */
@media (max-width: 374px) {
  .nav-mobile-actions {
    gap: var(--space-2);
  }
  .nav-mobile-header-link {
    padding-inline: var(--space-3);
  }
  .nav-trigger {
    padding: var(--space-2);
  }
}
/* Found 2026-09-01 while QA'ing an unrelated announcement-bar fix (the
   task's own required test range includes 320px, not previously tested):
   even with the tightening above, logo + SHOP + MENU still overflowed by
   ~23px at exactly 320px width. One tier tighter, scoped to the narrowest
   phones still in real use; 360px and up are unaffected (confirmed still
   passing at their existing, less-aggressive values). */
@media (max-width: 359px) {
  .nav-mobile-actions {
    gap: 2px;
  }
  .nav-mobile-header-link {
    padding-inline: 6px;
  }
  .nav-trigger {
    padding-block: var(--space-2);
    padding-inline: 2px;
  }
}
@media (min-width: 1024px) {
  .nav-trigger,
  .nav-mobile-header-link,
  .nav-mobile { display: none; }
}

/* ---- Language switcher (Phase 8) — only rendered when Arabic is Enabled,
   see template-parts/navigation/language-switcher.php. Deliberately plain
   text links, not flag icons/a dropdown — restrained, matches Haven's
   minimal nav treatment. Desktop: inline after the nav list. Mobile: below
   the nav list, above the panel's bottom edge. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--fs-000);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.primary-nav .lang-switch {
  margin-inline-start: var(--space-6);
  padding-inline-start: var(--space-6);
  border-inline-start: 1px solid var(--color-line-on-dark);
}
.nav-mobile .lang-switch {
  margin-block-start: var(--space-6);
  font-size: var(--fs-0);
}
.lang-switch__link {
  color: var(--color-paper-on-dark-soft);
  opacity: 0.8;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.lang-switch__link:hover,
.lang-switch__link:focus-visible {
  opacity: 1;
}
.lang-switch__link.is-current {
  color: var(--color-paper-on-dark);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lang-switch__sep {
  color: var(--color-line-on-dark);
}