/* header.css — Site header / navigation · Figma D 2188:8764 (1920x72) / M 2188:9160 (390x72)
   Source: brief/header.md §2 / §5 / §6 + cache/header.desktop.json (nav-left gap 32, labels Denim 400 20/1.26,
   underline rect at y 29) + _figma/tree.mobile.txt (burger 32 @x16, logo 84.09x24 @x153, icons 32 @x294 / 342).
   Scoped to .header / .header__* only (GLOBAL-SCOPE LOCK). Mobile-first: base = 390 anchor, 768 pseudo-tablet,
   1024 desktop. Formulas: pipeline/components/fluid-formulas.md (anchor 390, --vw-base 1920). */

/* ---- Section root: Pattern A, sticky (BA-H1), white bar, no border / shadow (D-H8) ---- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-white);
  /* Drawer top edge = the bar's bottom edge in the viewport; js/header.js measures it on open (the announcement
     above the header is not sticky, so the bar is at y 45 unscrolled and y 0 once stuck). Fallback = bar height. */
  --header-drawer-top: 72px;
}

/* ---- Bar: 1fr auto 1fr keeps the logo at the exact viewport centre (D-H5); fixed 72 tall (D-H6) ---- */
.header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* §2: M-base 72 / D-base 72 → M-min 59, M-max 72 (holds at 72 above the anchor, FD-184) */
  height: clamp(59px, calc(72px + (var(--max-vw) - 390px) * 0.015), 72px);
}

.header__left,
.header__right {
  display: flex;
  align-items: center;
  min-width: 0;
}
.header__left  { justify-content: flex-start; }
.header__right {
  justify-content: flex-end;
  /* right group gap 16 (user icon ↔ cart icon): M-min 13, M-max 16 */
  gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
}

/* ---- Logo (D-H2: one file, sized by height; ratio 98.1106 / 28) ---- */
.header__logo {
  display: block;
  justify-self: center;
  line-height: 0;
}
.header__logo-img {
  /* M-base 24 (glyphs 84.09x24), D-base 28 → M-min 20, M-max 28 (reached at vw ≈ 657) */
  height: clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 28px);
  width: auto;
  aspect-ratio: 98.1106 / 28;
}

/* ---- Desktop text links: hidden on 0–1023 (their labels live in the drawer, BA-H2) ---- */
.header__links {
  display: none;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  /* nav-left / nav-right itemSpacing 32 → D-min 17 */
  gap: clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
}
.header__links--right { justify-content: flex-end; }

.header__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-ink);
  white-space: nowrap;           /* D-H4: every label is single-line in Figma */
  text-decoration: none;
}
/* D-H3: the hidden `underline` rectangle = hover state — 1px ink, full label width, 4px below the label box */
.header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + clamp(2px, calc(4px * (var(--max-vw) / var(--vw-base))), 4px));
  height: 1px;
  background: var(--color-ink);
  opacity: 0;
  transition: opacity .15s ease;
}
.header__link:hover::after,
.header__link:focus-visible::after { opacity: 1; }

/* "Cart [0]": two texts, gap 4 (D-min 2); the count is static (BA-H4), updated through data-cart-count */
.header__link--cart {
  gap: clamp(2px, calc(4px * (var(--max-vw) / var(--vw-base))), 4px);
}
.header__cart-count { white-space: nowrap; }

/* ---- Burger (0–1023): 32x32 box, exported icon as <img> (D-H7), 44px hit area via ::before (D-H9) ---- */
.header__burger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-ink);
  cursor: pointer;
  line-height: 0;
}
.header__burger::before {
  content: "";
  position: absolute;
  inset: -6px;
}
.header__burger-img {
  width: 32px;
  height: 32px;
}
/* BA-H5: open state = a CSS × built from the burger's own geometry (two 21.33-long, 1.33-thick ink lines, ±45°) */
.header__burger-close {
  display: none;
  position: absolute;
  inset: 0;
}
.header__burger-close::before,
.header__burger-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21.33px;
  height: 1.33px;
  margin-left: -10.665px;
  margin-top: -0.665px;
  border-radius: 1px;
  background: var(--color-ink);
}
.header__burger-close::before { transform: rotate(45deg); }
.header__burger-close::after  { transform: rotate(-45deg); }

/* ---- Icon links (0–1023): 32x32 at the right content edge, 44px hit area (D-H9) ---- */
.header__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  line-height: 0;
}
.header__icon::before {
  content: "";
  position: absolute;
  inset: -6px;
}
.header__icon-img {
  width: 32px;
  height: 32px;
}

/* ---- Drawer (0–1023) = Figma 1119:2367 "Device=Mobile, Menu=Open" (2026-10-20): white panel from the bar's bottom
   edge to the viewport bottom; inner column padding 0 20 (= gutter + 4); 6 rows 57 tall (16 + 25.2 + 16, 1px ink-40
   bottom rule INSIDE); photo 1119:2399 350x185 16 below the list. Link label = "Navigation link" 20 / 1.26, ls 0. ---- */
.header__drawer {
  position: fixed;
  top: var(--header-drawer-top, var(--header-h, 72px));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-white);
}
.header__drawer[hidden] { display: none; }
.header__drawer-inner {
  padding-left: calc(var(--gutter) + 4px);
  padding-right: calc(var(--gutter) + 4px);
}
.header__drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.header__drawer-item {
  border-bottom: 1px solid var(--color-ink-40);
}
.header__drawer-link {
  display: block;
  padding-top: 16px;
  padding-bottom: 15px;                /* 16 − the 1px rule: Figma strokes INSIDE the 57 row */
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  /* M-base 20 (Figma 390) = M-max (FD-184: max(M-base, D-base 20)); M-min 18 below the anchor */
  font-size: clamp(18px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  line-height: 1.26;
  letter-spacing: 0;
  color: var(--color-ink);
  white-space: nowrap;
  text-decoration: none;
}
.header__drawer-link:hover,
.header__drawer-link:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.header__drawer-link:focus-visible { outline-offset: -2px; }
.header__drawer-media {
  margin-top: 16px;
  aspect-ratio: 350 / 185;
  overflow: hidden;
}
.header__drawer-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .header__link::after { transition: none; }
}

/* ============================================
   PSEUDO-TABLET (768–1023) — no tablet layer; the mobile bar continues (brief §6 "stack"):
   every value is already at its M-max at 767 (bar 72, logo 28, gaps 16) and holds (FD-184).
============================================ */
@media (min-width: 768px) {
  .header__bar { height: 72px; }
  .header__right { gap: 16px; }
  .header__logo-img { height: 28px; }
}

/* ============================================
   DESKTOP (1024+) — text links appear, burger / icons / drawer leave the DOM flow (D-H1)
============================================ */
@media (min-width: 1024px) {
  .header__bar {
    /* D-base 72 → D-min 38 (BA-P3: the whole bar scales with --max-vw at 1024) */
    height: clamp(38px, calc(72px * (var(--max-vw) / var(--vw-base))), 72px);
  }
  .header__right { gap: 0; }
  .header__links { display: flex; }
  .header__logo-img {
    /* D-base 28 → D-min 15 */
    height: clamp(15px, calc(28px * (var(--max-vw) / var(--vw-base))), 28px);
  }
  .header__burger,
  .header__icon,
  .header__drawer { display: none; }
}