/* ==========================================================================
   FANGIN — Site Header / Navigation
   Fixed, transparent-over-video header using the secondary mark (F. / dot)
   plus the full wordmark, and the nav list pulled straight from the brand
   board's "STRATEGY / IDENTITY / BUILD / GROW / RESULTS" list.
   Maps cleanly to a WordPress `header.php` template part.
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 var(--edge-gutter);
  /* Single source of truth for everything in the header bar that needs to
     stay legible over whatever's scrolled underneath it — the logo, the
     desktop nav links (currentColor underline + text) and the mobile
     hamburger all just inherit this and list their own `transition: color`
     so each animates individually rather than one shared transition
     fighting itself. See the "Wordmark / mark" comment right below for why
     this replaced mix-blend-mode, and .site-header.is-dark for the other
     half of the toggle (main.js's initHeaderTheme()). */
  color: var(--color-ink);
  transition: color var(--duration-base) var(--ease-editorial);
}

.site-header.is-dark {
  color: var(--color-bone);
}

.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ---- Wordmark / mark ----
   Used to rely on mix-blend-mode: difference to stay legible over
   whatever's behind the fixed header — clever against a flat colour, but
   unreliable against real video/photo content (the hero footage, in
   particular) where the blended result can land on a muddy, low-contrast
   colour instead of a clean invert. Nicole flagged the logo going
   near-invisible against the hero video and asked for the mark to always
   be visible — an explicit two-state colour instead: plain ink (black) by
   default, since every inner page and most of the homepage sits on the
   light --color-bone background, switching to --color-bone itself only
   while a genuinely dark section is scrolled under the header. That
   switch is driven by .site-header.is-dark, toggled in main.js's
   initHeaderTheme() using the exact same dark-section tagging cursor.js
   already relies on ([data-cursor-theme="dark"] — the hero video stage
   and Selected Work's dark media panel are the only two dark sections on
   the page), so both the cursor and the logo agree on what counts as
   "dark" from one single source of truth. Inner pages have no dark
   sections at all, so .is-dark never gets set there and the logo simply
   stays ink — no JS dependency needed for that case to be correct.

   The colour itself now just inherits from .site-header/.site-header.is-dark
   above (single source of truth for the whole header bar) rather than
   being set here a second time — the desktop nav links and the mobile
   hamburger both inherited the same fix below, for the same reason: they
   were still on the old mix-blend-mode trick after the logo was moved off
   it, so they kept going invisible over light backgrounds the exact same
   way the logo used to. */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: color var(--duration-base) var(--ease-editorial);
}

.site-logo .logo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-periwinkle);
  display: inline-block;
  transform: translateY(2px);
}

/* ---- Nav ---- */
.site-nav {
  display: flex;
  align-items: center;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}

.site-nav a {
  position: relative;
  padding-bottom: 3px;
  transition: color var(--duration-base) var(--ease-editorial);
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--duration-base) var(--ease-editorial);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  right: 0;
}

.site-nav .nav-cta {
  border: 1px solid currentColor;
  padding: 8px 16px;
  border-radius: 999px;
}

.site-nav .nav-cta::after {
  display: none;
}

/* Used to carry mix-blend-mode: difference here at ≥901px (same trick the
   logo used to rely on) so the nav text stayed legible over the hero
   video — but it was never migrated when the logo moved to the explicit
   .site-header/.site-header.is-dark colour toggle above, so it kept going
   invisible over light backgrounds the same way the logo used to before
   that fix (this is what Nicole flagged: "the menu on desktop is still
   light... I can't see the menu"). Removed — .site-nav a has no colour of
   its own, so it now just inherits the same toggle everything else in the
   header does, and stays correct with zero extra rules to keep in sync.
   Below 900px the nav lives inside the mobile drawer's own solid ink
   panel instead (color: var(--color-bone) set explicitly there), which
   this inheritance doesn't touch. */

/* ---- Mobile menu toggle (hamburger) ----
   Hidden entirely above the 900px breakpoint — the full nav list has
   room to just sit in the header there, same as always. Same fix as the
   nav links above: this also still had mix-blend-mode (Nicole's second
   report — "the 3 lines on mobile... I can't see it on light bg"), now
   just inherits the header's colour toggle like everything else here. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-editorial);
}

.nav-toggle-bar {
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-editorial),
    opacity var(--duration-base) var(--ease-editorial);
}

/* Bars morph into an X once the drawer is open. */
.site-nav.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-nav.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  /* Below 900px the full nav list no longer fits in the header, so it
     becomes a slide-in drawer opened by .nav-toggle (see nav-toggle.js).
     Its solid ink background + explicit bone text colour just works
     normally here — nothing in the header carries mix-blend-mode any
     more at all (see the "Wordmark / mark" comment above), and this
     panel's own explicit color: var(--color-bone) below overrides
     whatever it would otherwise inherit from .site-header anyway. */
  .nav-toggle {
    display: flex;
  }

  .site-nav ul[data-nav-list] {
    position: fixed;
    inset: 0 0 0 auto;
    height: 100vh;
    height: 100dvh;
    width: min(80vw, 340px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    margin: 0;
    padding: calc(var(--header-height) + 24px) var(--edge-gutter) 40px;
    background: var(--color-ink);
    color: var(--color-bone);
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-editorial);
  }

  .site-nav.is-open ul[data-nav-list] {
    transform: translateX(0);
  }

  .site-nav .nav-link {
    display: block;
    font-size: 1.15rem;
    padding: 10px 0;
  }

  .site-nav .nav-cta {
    margin-top: 8px;
  }
}

/* Locks background scroll while the mobile drawer is open (set/removed
   by nav-toggle.js). */
body.nav-open-lock {
  overflow: hidden;
}