/*
 * header.css — global site header (PLAN Step 5). Sticky top chrome for the real
 * site: the brand lockup (the actual logo SVG, the canonical Step 1 treatment)
 * on a matte-dark bar with a hairline base. Consumes tokens.css only.
 *
 * Sub-step 1 (here) establishes the sticky bar + lockup. Primary nav + cart
 * affordance (sub-step 2) and the mobile nav (sub-step 3) layer in next.
 */

.site-header {
  position: sticky;
  top: 0;
  /* Structural stacking value (not a design token): keeps the bar above the
     scrolling page content and its transformed reveal layers, which sit later
     in the DOM. Same raw-integer stacking convention already used in
     coming-soon.css. */
  z-index: 5;
  background-color: var(--color-bg);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-16);
}

/* — Brand lockup — the actual logo SVG at a compact header scale: height tracks
   the spacing scale, width auto preserves the 331:96 aspect ratio. — */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-header__logo {
  height: var(--space-32);
  width: auto;
}

/* — Right-hand group: primary nav + cart + mobile toggle, pushed to the far side
   by the inner's space-between. Below --bp-lg the nav lifts out of flow (into a
   panel), so this holds the cart + toggle; at --bp-lg the nav rejoins inline. — */
.site-header__end {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

/* — Primary nav —
   Mobile-first: a full-width panel that drops below the sticky bar. It's absolute
   within .site-header (a sticky element is a positioned containing block), hidden
   until the toggle's aria-expanded flips to true. At --bp-lg it reverts to an
   inline row in the bar and the toggle disappears. — */
.site-header__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  background-color: var(--color-bg);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

/* Open state — single source of truth is the toggle's aria-expanded, read here
   with :has() (so the JS only ever flips that one attribute). */
.site-header:has(.site-header__toggle[aria-expanded="true"]) .site-header__nav {
  /* Drop the open panel one hairline lower so it clears the bar's bottom border. */
  top: calc(100% + var(--border-hairline));
  display: block;
  animation: spalux-nav-in var(--duration-fast) var(--ease-out) both;
}

@keyframes spalux-nav-in {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--space-8)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile: links stack vertically, padded to the container gutter. */
.site-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  padding-block: var(--space-16);
  padding-inline: var(--container-pad);
}

.site-nav__link {
  display: block;
  padding-block: var(--space-12);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  /* Only the text color changes on hover — scope to it (never `all`). */
  transition: color var(--duration-fast);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-text);
}

/* Current page reads brighter than its muted siblings. */
.site-nav__link[aria-current="page"] {
  color: var(--color-text);
}

/* — Cart affordance — a monoline glyph button; inert until the Cart API binds it
   at Step 7. Padding gives a comfortable touch target around the icon. — */
.site-header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: var(--space-8);
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration-fast);
}

.site-header__cart:hover,
.site-header__cart:focus-visible {
  color: var(--color-text);
}

.site-header__cart svg {
  width: var(--space-24);
  height: var(--space-24);
}

/* Count bubble — sits on the cart glyph's top-right; hidden while the cart is
   empty (the [hidden] attribute, toggled by shopify.js). */
.site-header__cart-count {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-16);
  height: var(--space-16);
  padding: 0 var(--space-4);
  background-color: var(--color-brand);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--type-caption);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
}

/* The flex display above outranks the UA [hidden] rule, so restate it: an empty
   cart hides the bubble entirely (shopify.js toggles the [hidden] attribute). */
.site-header__cart-count[hidden] {
  display: none;
}

/* — Mobile menu toggle — same glyph-button treatment as the cart; hidden at
   --bp-lg. The visible icon swaps hamburger <-> close via aria-expanded. — */
.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: var(--space-8);
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration-fast);
}

.site-header__toggle:hover,
.site-header__toggle:focus-visible {
  color: var(--color-text);
}

.site-header__toggle-icon {
  width: var(--space-24);
  height: var(--space-24);
}

/* Hamburger by default; swap to the close mark once expanded. */
.site-header__toggle-icon--close {
  display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon--open {
  display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon--close {
  display: block;
}

/* — From --bp-lg up: nav is an inline row back in the bar; the toggle is gone. — */
@media (min-width: 1024px) /* --bp-lg */ {
  .site-header__nav {
    position: static;
    display: block;
    background: none;
    border: 0;
    animation: none;
  }

  .site-nav {
    flex-direction: row;
    gap: var(--space-24);
    padding: 0;
  }

  .site-nav__link {
    padding-block: 0;
  }

  .site-header__toggle {
    display: none;
  }

  /* Neutralize any leftover open-state animation if the viewport crosses the
     breakpoint while the mobile panel was open. */
  .site-header:has(.site-header__toggle[aria-expanded="true"]) .site-header__nav {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__link,
  .site-header__cart,
  .site-header__toggle {
    transition: none;
  }
  .site-header:has(.site-header__toggle[aria-expanded="true"]) .site-header__nav {
    animation: none;
  }
}