/* 01 · Header — spec §4 "01 · Header".
   Desktop (>=1024px): a 200px-tall bar — utility row (76px) + centred,
   overlapping logo + centred nav. Mobile (<1024px): a 64px bar + a
   dialog-based drawer (see src/js/sections/header.js). */
@layer components {
  /* z-index matters here specifically: the nav dropdowns (position:absolute,
     top:100% of their trigger) sit close enough to the header's own bottom
     edge that they extend past it into the Hero section's screen space.
     Without this, .site-header and .hero are both position:relative with
     z-index:auto, so they fall back to DOM order for stacking — and since
     .hero comes later in the document, it painted on top of the dropdown,
     covering the links with the hero image (invisible, not an error: the
     links were still there and still worked, just not visible or clickable
     — confirmed via elementFromPoint returning .hero__media at the link's
     own coordinates). Only caught because Hero didn't exist yet when the
     header's dropdown was first built and screenshotted open — it had
     nothing to be covered by until later. */
  .site-header {
    position: relative;
    z-index: 10;
    background-color: var(--ink-950);
    color: var(--text-on-dark);
  }

  /* ---- Desktop: utility row --------------------------------------------- */
  .header-utility {
    position: relative; /* anchors the fading hairline, spans the full page width */
  }

  .header-utility::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    /* Full-bleed gradient (not the container): at the page edges it's the
       hairline colour, fading to transparent ~38–62% across, which is what
       makes it disappear ~180px either side of the centred logo (spec §4). */
    background: linear-gradient(90deg, var(--gold-hairline) 0, transparent 38%, transparent 62%, var(--gold-hairline) 100%);
  }

  .header-utility__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
  }

  .header-badges {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .header-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-on-dark-muted);

    & .icon {
      color: var(--gold-400);
    }
  }

  .header-icons {
    display: flex;
    align-items: center;
    gap: 48px;
  }

  .header-icon-btn {
    position: relative;
    display: inline-flex;
    color: var(--gold-200);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color var(--dur) var(--ease);

    &:hover,
    &:focus-visible {
      color: var(--gold-400);
    }
  }

  .header-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--gold-500);
    color: var(--ink-900);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  /* ---- Desktop: logo lockup ---------------------------------------------
     Absolutely centred so it can overlap both the utility row and the nav
     row beneath it without either row reserving space for it. */
  .header-logo {
    position: absolute;
    top: 14px;
    left: 50%;
    translate: -50% 0;
    z-index: 2;
  }

  .header-logo img {
    display: block;
    width: 240px;
    height: auto;
  }

  /* Declared unconditionally (not inside the mobile media query below, where
     this image's actual 36px sizing lives) because this element carries
     loading="lazy" — DevTools' "lazy images need explicit dimensions" check
     looks at the declared CSS regardless of the current viewport or of the
     closed <dialog> ancestor currently hiding it, so scoping the ratio to
     "only when it's visible" left it flagged outside that range. */
  .header-drawer__head img {
    aspect-ratio: 1000 / 511; /* logo-lockup.png's real ratio */
  }

  /* ---- Desktop: nav ------------------------------------------------------ */
  .header-nav {
    display: flex;
    justify-content: center;
  }

  .header-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 43px;
    list-style: none;
    margin: 0;
    padding: 72px 0 28px;
  }

  .header-nav__item {
    position: relative;
  }

  .header-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 8px; /* reserves the gap the underline sits in */
    background: none;
    border: none;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-nav);
    letter-spacing: var(--ls-nav);
    text-transform: uppercase;
    color: var(--text-on-dark);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dur) var(--ease);

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background-color: var(--gold-400);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform var(--dur) var(--ease);
    }

    &:hover,
    &:focus-visible,
    &.is-active {
      color: var(--gold-400);

      &::after {
        transform: scaleX(1);
      }
    }
  }

  .header-nav__chevron {
    margin-left: 6px;
    transition: transform var(--dur) var(--ease);
  }

  .header-nav__item:has(> [aria-expanded="true"]) .header-nav__chevron {
    transform: rotate(180deg);
  }

  .header-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    margin-top: 8px;
    min-width: 200px;
    background-color: var(--ink-700);
    border: 1px solid var(--gold-hairline);
    padding-block: 8px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur) var(--ease),
      visibility var(--dur);

    & a {
      display: block;
      padding: 10px 20px;
      font-family: var(--font-body);
      font-size: var(--fs-nav);
      color: var(--text-on-dark-muted);
      text-decoration: none;
      white-space: nowrap;
      transition:
        color var(--dur) var(--ease),
        background-color var(--dur) var(--ease);

      &:hover,
      &:focus-visible {
        color: var(--gold-400);
        background-color: color-mix(in srgb, var(--gold-400) 10%, transparent);
      }
    }
  }

  .header-nav__item:is(:hover, :focus-within):has(.header-dropdown) .header-dropdown,
  .header-nav__item:has(> [aria-expanded="true"]) .header-dropdown {
    opacity: 1;
    visibility: visible;
  }

  /* ---- Mobile / tablet: bar + hamburger + drawer -------------------------
     .header-mobile-logo is a deliberately separate class from .header-logo:
     the desktop logo is absolutely positioned (it overlaps two rows), and
     sharing one class would mean fighting that positioning back off for the
     inline mobile placement instead of just not applying it. */
  .header-bar,
  .header-hamburger,
  .header-drawer,
  .header-mobile-logo {
    display: none;
  }

  @media (max-width: 1023.98px) {
    .header-utility,
    .header-nav,
    .header-logo {
      display: none;
    }

    .header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--header-h-mobile);
    }

    .header-hamburger {
      display: inline-flex;
      color: var(--gold-200);
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
    }

    .header-mobile-logo {
      display: inline-flex;
    }

    .header-mobile-logo img {
      display: block;
      height: 44px;
      width: auto;
    }

    /* Full-viewport dialog: the transparent area outside .header-drawer__panel
       is what a click closes (see header.js) — the native, no-hand-rolled-
       backdrop-handler version of "click outside to dismiss".
       display is set only on &[open]: dialog's UA stylesheet is what hides a
       closed dialog (display:none) — overriding display unconditionally here
       would fight that and render the closed drawer as a permanent, always-
       visible box instead of leaving it hidden until showModal() runs. */
    .header-drawer {
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--text-on-dark);

      &::backdrop {
        background-color: rgb(12 10 8 / 0.6);
      }

      &[open] {
        display: flex;
      }
    }

    .header-drawer__panel {
      width: min(320px, 86vw);
      height: 100%;
      margin-right: auto; /* panel grows from the left, where the hamburger is */
      background-color: var(--ink-700);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding: var(--space-5) var(--space-5) var(--space-6);
    }

    .header-drawer__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: var(--space-5);
      margin-bottom: var(--space-3);
      border-bottom: 1px solid var(--gold-hairline);
    }

    .header-drawer__head img {
      display: block;
      height: 36px;
      width: auto;
    }

    .header-drawer__close {
      display: inline-flex;
      color: var(--gold-200);
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
    }

    .header-drawer__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .header-drawer__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      min-height: 56px;
      background: none;
      border: none;
      border-bottom: 1px solid var(--gold-hairline);
      padding-block: 0;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 1rem; /* 16px, spec: nav items 16px uppercase in the drawer */
      letter-spacing: var(--ls-nav);
      text-transform: uppercase;
      color: var(--text-on-dark);
      text-decoration: none;
      text-align: left;
      cursor: pointer;

      &:hover,
      &:focus-visible,
      &.is-active {
        color: var(--gold-400);
      }

      & .icon {
        color: var(--gold-400);
      }
    }

    /* Search / Account rows: smaller, not uppercase nav-weight labels */
    .header-drawer__utility .header-drawer__row {
      font-weight: 400;
      font-size: var(--fs-body);
      text-transform: none;
      letter-spacing: 0;
      gap: 12px;
      justify-content: flex-start;
    }

    .header-drawer__chevron {
      transition: transform var(--dur) var(--ease);
    }

    [aria-expanded="true"] .header-drawer__chevron {
      transform: rotate(180deg);
    }

    /* 0fr -> 1fr grid-rows is a CSS-only expand/collapse; header.js also sets
       `inert` on the collapsed inner list so its links drop out of the tab
       order (grid-collapsing height alone does not remove them). */
    .header-drawer__submenu {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows var(--dur) var(--ease);
    }

    [aria-expanded="true"] + .header-drawer__submenu {
      grid-template-rows: 1fr;
    }

    .header-drawer__submenu-inner {
      overflow: hidden;
      min-height: 0;
      list-style: none;
      margin: 0;
      padding: 0;

      & a {
        display: flex;
        min-height: 44px;
        align-items: center;
        padding-left: var(--space-4);
        font-family: var(--font-body);
        font-size: var(--fs-body);
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-on-dark-muted);
        text-decoration: none;

        &:hover,
        &:focus-visible {
          color: var(--gold-400);
        }
      }
    }

    .header-drawer__badges {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      list-style: none;
      margin-top: var(--space-6);
      padding: 0;
    }

    .header-drawer__badges .header-badge {
      color: var(--text-on-dark-muted);
    }
  }

  /* Icon-only buttons render at their icon's own size (24px) with no
     surrounding padding — same 44px touch-target floor as .btn/.arrow-btn
     (components.css), applied here since these aren't built from either
     class. The icon stays visually 24px; only the hit area grows. */
  @media (pointer: coarse) {
    .header-hamburger,
    .header-icon-btn,
    .header-drawer__close {
      min-width: 44px;
      min-height: 44px;
    }
    /* The 44px box centres the 24px icon; the cart badge then sits on the icon's
       top-right corner instead of the box's far edge. */
    .header-icon-btn {
      align-items: center;
      justify-content: center;
    }

    .header-cart-badge {
      top: 4px;
      right: 4px;
    }
  }
}