/* Shared top nav — included on every content page. The header is
   *always* the floating pill (no full-width block state), so there's
   no jarring size flip on scroll. .is-scrolled still flips (via JS) —
   on mobile it collapses the stacked nav; on desktop it's a no-op.

   The JS in site-header.js publishes the header's live bottom-edge Y
   as --header-safe-top; this rule uses it to inset every page's first
   content below the pill, matching height changes as the header
   expands / collapses. */
body:has(.site-header) {
  padding-top: var(--header-safe-top, 5rem);
  transition: padding-top var(--dur-medium) var(--ease-out-expo);
}

.site-header {
  position: fixed;
  top: 0.75rem;
  left: 1rem;
  right: 1rem;
  z-index: 100;
  padding: 0.75rem 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Palette-driven tint — uses --fg-rgb so the pill auto-swaps:
     warm cream haze on dark bg, warm dark haze on light bg. Both
     read as an elevated surface over their respective backdrops
     without needing per-mode overrides. Softer blur + shadow than
     the previous "Vision Pro" treatment — reads as glass, not tech. */
  background: rgba(var(--fg-rgb), 0.06);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
[data-theme="light"] .site-header {
  /* Lighter drop shadow on the cream backdrop — the fg-rgb tint
     alone gives enough contrast; heavy shadow would darken the
     page mood. */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.site-header > * { pointer-events: auto; }

.site-header__brand {
  display: block;
  outline: none;
  transition: opacity var(--dur-quick) var(--ease-standard);
}
.site-header__brand:hover,
.site-header__brand:focus-visible {
  opacity: 0.75;
}
.site-header__brand img {
  display: block;
  /* Desktop-only: 10% bigger (28px → 31px). Mobile uses width-based sizing. */
  height: 31px;
  width: auto;
}

/* Right-side group holds nav + theme toggle so `justify-content: space-between`
   keeps the brand on the left and the whole group on the right. */
.site-header__end {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-header__nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.site-header__nav a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  opacity: 0.45;
  transition: opacity var(--dur-quick) var(--ease-standard),
              color   var(--dur-medium) var(--ease-standard);
  outline: none;
}
.site-header__nav a.is-current { opacity: 1; }
.site-header__nav a:focus-visible { opacity: 1; }
@media (hover: hover) {
  .site-header__nav a:hover { opacity: 1; }
}

/* Theme toggle — refined pill. Softer proportions (48×26 with a
   larger, glowing accent thumb), faint fill in the track, thin
   hairline border. Thumb slides on a subtle-spring curve; hover
   scales it up slightly and intensifies the accent glow. */
.site-header__theme-toggle {
  position: relative;
  width: 48px;
  /* Mobile base — 25% shorter than the previous 26px. Desktop takes
     another 25% off further down. */
  height: 20px;
  padding: 0;
  border: 1px solid rgba(var(--fg-rgb), 0.35);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border-radius: 999px;
  cursor: var(--cursor-url) 16 16, pointer;
  outline: none;
  opacity: 0.9;
  flex: none;
  transition:
    border-color var(--dur-medium) var(--ease-standard),
    background   var(--dur-medium) var(--ease-standard),
    opacity      var(--dur-quick)  var(--ease-standard);
}
.site-header__theme-toggle:hover,
.site-header__theme-toggle:focus-visible {
  opacity: 1;
  border-color: rgba(var(--fg-rgb), 0.6);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.site-header__theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}
.site-header__theme-toggle:active {
  transform: scale(0.96);
  transition: transform var(--dur-instant) var(--ease-standard);
}

.site-header__theme-toggle-thumb {
  position: absolute;
  /* Mobile base thumb — fits inside the 20px track (2 + 14 + 2 + 2
     borders = 20). Desktop overrides further below with a smaller
     10×10 thumb for the 15px track. */
  top: 2px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  /* Multi-layer accent glow — reads as cyan in dark mode, red in
     light mode via --accent-rgb. Base intensity is subtle; hover
     bumps it. */
  box-shadow:
    0 0 0.55em rgba(var(--accent-rgb), 0.5),
    0 0 1.1em  rgba(var(--accent-rgb), 0.28),
    0 1px 3px  rgba(0, 0, 0, 0.28);
  /* `translate` + `scale` are separate transform properties in
     modern CSS — hover-scale doesn't fight the light-mode slide. */
  translate: 0 0;
  scale: 1;
  transition:
    translate  var(--dur-medium) cubic-bezier(0.16, 1.15, 0.3, 1),
    scale      var(--dur-quick)  var(--ease-out-expo),
    background var(--dur-medium) var(--ease-standard),
    box-shadow var(--dur-medium) var(--ease-standard);
}
[data-theme="light"] .site-header__theme-toggle-thumb {
  /* Slide: 46 (content) − 3 (left) − 14 (thumb) − 3 (right) = 26. */
  translate: 26px 0;
}
.site-header__theme-toggle:hover .site-header__theme-toggle-thumb {
  scale: 1.08;
  box-shadow:
    0 0 0.85em rgba(var(--accent-rgb), 0.75),
    0 0 1.7em  rgba(var(--accent-rgb), 0.42),
    0 1px 3px  rgba(0, 0, 0, 0.28);
}

/* Desktop: another 25% off the toggle height (20px → 15px). Reads
   as a minimal linear indicator at desktop scale. Thumb shrinks to
   a 10×10 dot to sit inside the 13px content area with balanced
   1.5px top / bottom breathing room. */
@media (min-width: 641px) {
  .site-header__theme-toggle { height: 15px; }
  .site-header__theme-toggle-thumb {
    top: 1.5px;
    width: 10px;
    height: 10px;
  }
  [data-theme="light"] .site-header__theme-toggle-thumb {
    /* Slide: 46 (content) − 3 (left) − 10 (thumb) − 3 (right) = 30. */
    translate: 30px 0;
  }
}

/* Hamburger button — mobile-only. Injected on every page by
   site-header.js so it must be hidden by default (base rule) and
   flipped on inside the mobile @media block below. Without this, the
   browser's default <button> rendering leaves it visible on desktop. */
.site-header__menu { display: none; }

/* ─── Desktop scroll state ────────────────────────────────────────────
   Once the user scrolls (site-header.js flips .is-scrolled at 20px),
   the pill halves its length — left/right both animate from 1rem →
   25%, so the pill sits centred at 50% of the viewport. Padding + the
   internal gaps tighten a hair so the same brand / nav / toggle fit
   cleanly inside the narrower pill without wrapping.
   Scoped to (min-width: 641px) so it does not fight the mobile
   collapse behaviour further below. */
@media (min-width: 641px) {
  .site-header {
    transition: left    var(--dur-medium) var(--ease-out-expo),
                right   var(--dur-medium) var(--ease-out-expo),
                padding var(--dur-medium) var(--ease-out-expo);
  }
  .site-header.is-scrolled {
    left: 25%;
    right: 25%;
    padding: 0.6rem 1.3rem;
  }
  .site-header.is-scrolled .site-header__nav { gap: 1rem;   }
  .site-header.is-scrolled .site-header__end { gap: 0.9rem; }
}

@media (max-width: 640px) {
  /* Compact pill (default state on mobile) — DĒDĒ logo far left,
     hamburger button far right. Nav + toggle live inside
     .site-header__end and are HIDDEN until the hamburger toggles
     .is-menu-open. Matches the Studio Dumbar mobile shape. */
  .site-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 65%, transparent);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    /* Every property that flips between compact-pill and full-screen
       overlay is transitioned so the open/close feels like one motion. */
    transition:
      top           var(--dur-medium) var(--ease-out-expo),
      left          var(--dur-medium) var(--ease-out-expo),
      right         var(--dur-medium) var(--ease-out-expo),
      bottom        var(--dur-medium) var(--ease-out-expo),
      padding       var(--dur-medium) var(--ease-out-expo),
      border-radius var(--dur-medium) var(--ease-out-expo),
      background    var(--dur-medium) var(--ease-standard);
  }
  .site-header__brand img {
    /* Mobile logo −25% from the previous sizing (13.75vw / 200 / 112). */
    width: 10.3vw;
    max-width: 150px;
    min-width: 84px;
    height: auto;
  }

  /* ─── Hamburger button ──────────────────────────────────────────
     4-line motif to match the DĒDĒ cursor icon. Injected by
     site-header.js so every existing page picks it up automatically
     without touching per-page HTML. Absolute-positioned spans give
     us precise control for the morph-to-X on open. */
  .site-header__menu {
    display: block;
    position: relative;
    width: 28px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: var(--cursor-url) 16 16, pointer;
    outline: none;
    flex: none;
  }
  .site-header__menu span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--fg);
    border-radius: 1px;
    transform-origin: center;
    transition:
      transform var(--dur-medium) var(--ease-out-expo),
      opacity   var(--dur-medium) var(--ease-out-expo),
      top       var(--dur-medium) var(--ease-out-expo);
  }
  .site-header__menu span:nth-child(1) { top: 0;    }
  .site-header__menu span:nth-child(2) { top: 6px;  }
  .site-header__menu span:nth-child(3) { top: 12px; }
  .site-header__menu span:nth-child(4) { top: 18px; }

  /* Nav + toggle group — hidden in the compact pill. */
  .site-header__end { display: none; }

  /* ─── Menu-open overlay ────────────────────────────────────────
     .is-menu-open flips the header into a full-viewport panel:
     brand stays top-left, hamburger morphs to an X top-right, nav
     items stack big + left-aligned below, theme toggle sits at the
     bottom-left. The site-bg blobs (z-index: -1) stay visible
     through the blurred backdrop for continuity with the rest of
     the site. */
  .site-header.is-menu-open {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem 1.5rem 2rem;
    border-radius: 0;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
            backdrop-filter: blur(20px) saturate(1.4);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 2rem 0;
  }
  .site-header.is-menu-open .site-header__brand { grid-column: 1; grid-row: 1; }
  .site-header.is-menu-open .site-header__menu  { grid-column: 2; grid-row: 1; align-self: start; }
  /* Bottom-anchored row containing nav (left) + toggle (right level
     with the last nav item). Row occupies the full remaining height,
     children align-items: end so both stick to the bottom edge. */
  .site-header.is-menu-open .site-header__end {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    height: 100%;
  }
  .site-header.is-menu-open .site-header__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .site-header.is-menu-open .site-header__nav a {
    display: block;
    font-family: "Inter Tight",
                 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(3rem, 13vw, 5.5rem);
    letter-spacing: -0.02em;
    text-transform: none;
    line-height: 1.05;
    opacity: 0.35;
    transform: none;
    max-height: none;
    overflow: visible;
    transition: opacity var(--dur-medium) var(--ease-standard);
  }
  .site-header.is-menu-open .site-header__nav a.is-current { opacity: 1; }
  /* Toggle sits to the RIGHT of the nav column, aligned to bottom so
     its vertical centre lines up with the last nav item (CONTACT). */
  .site-header.is-menu-open .site-header__theme-toggle {
    align-self: flex-end;
    margin-bottom: 0.5rem;   /* small nudge so it centers on CONTACT's cap-height */
    order: unset;
    flex: none;
  }

  /* Hamburger → X morph. Lines 1 + 4 fade out and collapse; lines
     2 + 3 slide to centre and rotate ±45° to form the crossing X. */
  .site-header.is-menu-open .site-header__menu span:nth-child(1),
  .site-header.is-menu-open .site-header__menu span:nth-child(4) {
    opacity: 0;
    transform: scaleX(0);
  }
  .site-header.is-menu-open .site-header__menu span:nth-child(2) {
    top: 10px;
    transform: rotate(45deg);
  }
  .site-header.is-menu-open .site-header__menu span:nth-child(3) {
    top: 10px;
    transform: rotate(-45deg);
  }

  /* Body: lock scroll + zero out the header-safe padding while the
     overlay covers everything. */
  body:has(.site-header.is-menu-open) {
    padding-top: 0;
    overflow: hidden;
  }
  /* Scroll-to-top button irrelevant while the menu is open. */
  body:has(.site-header.is-menu-open) .scroll-top { display: none; }

  /* Compact-on-scroll: keep the tiny padding shrink for a bit of
     motion, but suppress it while the overlay is open. */
  .site-header.is-scrolled:not(.is-menu-open) {
    padding: 0.55rem 1rem;
  }
}