/* ================================================================
   SUPRBAD NAVIGATION — HEADER STATES
   Three states: expanded (homepage initial) / compact (scroll) /
   inner (non-homepage, always compact).

   State is set via data-header-state on the <header> element.
   CSS owns all visual output from these data attributes.
   ================================================================ */

/* ── Reset & Base ──────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--sb-font-utility);
  font-weight: var(--sb-weight-light);
  font-size: 14px;
  color: var(--sb-color-text);
  background: var(--sb-color-bg);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background: var(--sb-color-bg);
}

/* ── Header Shell ──────────────────────────────────────────────── */

.sb-nav-header {
  position: -webkit-sticky;
  position: sticky;

  /* --sb-vv-offset: set by initViewportCompensator() (sb-header.js) to
     visualViewport.offsetTop on Android Chrome, where the visual viewport
     can sit below the layout viewport that sticky anchors to (URL-bar
     show/hide). 0px everywhere else — identical to a literal top: 0. */
  top: var(--sb-vv-offset, 0);
  left: 0;
  right: 0;
  z-index: var(--sb-z-header);
  background: var(--sb-color-bg);

  /* Solid cover for the band ABOVE the header while --sb-vv-offset > 0
     (mid browser-chrome transition the header is pushed down by the
     offset; without this the scrolling page shows through that strip).
     A hard box-shadow (0 blur / 0 spread, offset upward by the same
     amount) paints an exact header-sized block in background colour
     above the header, at the header's own z-index. At rest the offset
     is 0 → the shadow sits exactly behind the header → invisible, and
     no compositing layer is created (Safari 12 constraint below). */
  box-shadow: 0 calc(-1 * var(--sb-vv-offset, 0px)) 0 0 var(--sb-color-bg);

  /* will-change: transform omitted intentionally — the header itself does not
     animate via transform (only child elements do). Declaring it here promoted
     the sticky element to a GPU compositing layer, causing the fixed desktop
     menu panel (z-index 200) to be occluded by the lower-z-index sticky header
     (z-index 50) on Safari 12 / iOS WebKit due to incorrect compositing order. */
}

/* Top rule — always visible */
.sb-nav-header::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--sb-color-border);
}

/* Bottom rule */
.sb-nav-header::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--sb-color-border);
}

/* ── Header Inner Layout ───────────────────────────────────────── */

.sb-nav-header__row {
  display: flex;
  align-items: center;
  padding: 0 var(--sb-header-px);
  gap: 40px;
  transition:
    height var(--sb-dur-header) var(--sb-ease-std),
    padding-top var(--sb-dur-header) var(--sb-ease-std),
    padding-bottom var(--sb-dur-header) var(--sb-ease-std);
}

/* ── Logo Block ────────────────────────────────────────────────── */

.sb-nav-header__logos {
  flex-shrink: 0;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* Expanded logo: single SVG lockup (wordmark + boltmark) */
.sb-nav-header__logo-expanded {
  display: flex;
  align-items: center;
  transition:
    opacity var(--sb-dur-header) var(--sb-ease-std),
    transform var(--sb-dur-header) var(--sb-ease-std);
}

.sb-nav-header__logo-expanded svg {
  width: 160px;
  height: auto;
  display: block;
}

/* Compact logo: wordmark SVG (default + inverted for menu-open state) */
.sb-nav-header__logo-compact {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition:
    opacity var(--sb-dur-header) var(--sb-ease-std),
    transform var(--sb-dur-header) var(--sb-ease-std);
}

/* Compact wordmark SVG sizing */
.sb-nav-logo-default svg,
.sb-nav-logo-inverted svg {
  height: 20px;
  width: auto;
  display: block;
}

/* Wordmark inversion swap: default hides when menu is open; inverted shows */
.sb-nav-logo-inverted {
  display: none;
}
body[data-nav-open='true'] .sb-nav-header .sb-nav-logo-default {
  display: none;
}
body[data-nav-open='true'] .sb-nav-header .sb-nav-logo-inverted {
  display: block;
}

/* ── Primary Navigation ────────────────────────────────────────── */

.sb-nav-primary {
  flex: 1;
  display: flex;
  justify-content: center;
}

.sb-nav-primary__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 48px;
}

.sb-nav-primary__item {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sb-font-primary);
  font-weight: var(--sb-weight-black);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--sb-color-text);
  padding: 18px 12px;
  position: relative;
  transition:
    color 120ms ease,
    opacity 120ms ease;
}

.sb-nav-primary__item::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--sb-color-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 150ms var(--sb-ease-std);
}

.sb-nav-primary__item:hover::after,
.sb-nav-primary__item[data-active='true']::after {
  transform: scaleX(1);
}

.sb-nav-primary__item[data-disabled='true'] {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Utility Navigation ────────────────────────────────────────── */

.sb-nav-utility {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

.sb-nav-utility__item {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sb-font-utility);
  font-weight: var(--sb-weight-light);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sb-color-text);
  padding: 0 12px;
  transition: opacity 120ms ease;
}

.sb-nav-utility__item:hover {
  opacity: 0.6;
}

.sb-nav-utility__sep {
  color: var(--sb-color-border);
  font-size: 12px;
  user-select: none;
}

/* ── Desktop Search Form ───────────────────────────────────────── */

/* .sb-nav-search-control holds both the trigger (in flow — reserves
   width so Account/Cart never shift) and the form (position:absolute
   so it overlays the trigger and expands leftward without reflowing
   adjacent flex items).
   Tabindex=-1 on input/submit keeps them out of tab order when
   closed; initSearch() promotes them on open, demotes on close.    */

.sb-nav-search-control {
  position: relative;
  display: flex;
  align-items: center;
}

/* Trigger fades out when open (stays in flow to hold its width) */
.sb-nav-header[data-search-open='true'] .sb-nav-search-trigger {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

/* Separator between search and Account fades with trigger */
.sb-nav-header[data-search-open='true'] .sb-nav-search-sep {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

/* Form: absolute, anchored right — expands leftward into primary nav */
.sb-nav-search-form {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 0;
  opacity: 0;
  pointer-events: none;
  border: 1px solid transparent;
  border-radius: var(--sb-radius-sm); /* F2: shared radius scale */
  background: var(--sb-color-bg);
  z-index: 1;
  transition:
    width 200ms var(--sb-ease-std),
    opacity 200ms var(--sb-ease-std),
    border-color 200ms var(--sb-ease-std);
}

.sb-nav-header[data-search-open='true'] .sb-nav-search-form {
  width: 260px;
  opacity: 1;
  pointer-events: auto;
  border-color: var(--sb-color-border);
}

.sb-nav-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--sb-font-utility);
  font-weight: var(--sb-weight-light);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sb-color-text);
  padding: 0 10px;
  height: 32px;
  outline: none;
}

.sb-nav-search-input::placeholder {
  color: var(--sb-color-text-muted);
  opacity: 1;
}

.sb-nav-search-submit {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  border-left: 1px solid var(--sb-color-border);
  cursor: pointer;
  color: var(--sb-color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: opacity 120ms ease;
}

.sb-nav-search-submit:hover {
  opacity: 0.6;
}

.sb-nav-search-submit svg {
  width: 14px;
  height: 14px;
}

/* ── State: Expanded ───────────────────────────────────────────── */

.sb-nav-header[data-header-state='expanded'] .sb-nav-header__row {
  padding-top: 12px;
  padding-bottom: 12px;
}

.sb-nav-header[data-header-state='expanded'] .sb-nav-header__logo-expanded {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.sb-nav-header[data-header-state='expanded'] .sb-nav-header__logo-compact {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px);
}

/* ── State: Compact ────────────────────────────────────────────── */

.sb-nav-header[data-header-state='compact'] .sb-nav-header__row {
  padding-top: 0;
  padding-bottom: 0;
  height: var(--sb-header-h-compact);
}

.sb-nav-header[data-header-state='compact'] .sb-nav-header__logo-expanded {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.sb-nav-header[data-header-state='compact'] .sb-nav-header__logo-compact {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.sb-nav-header[data-header-state='compact'] .sb-nav-primary__item {
  font-size: 16px;
}

/* ── State: Inner Page ─────────────────────────────────────────── */

.sb-nav-header[data-header-state='inner'] .sb-nav-header__row {
  padding-top: 0;
  padding-bottom: 0;
  height: var(--sb-header-h-compact);
}

.sb-nav-header[data-header-state='inner'] .sb-nav-header__logo-expanded {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.sb-nav-header[data-header-state='inner'] .sb-nav-header__logo-compact {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

/* ── Inner Page: Breadcrumb + Context Bar ──────────────────────── */

.sb-nav-context-bar {
  display: none;
  padding: 10px var(--sb-header-px);
  border-top: 1px solid var(--sb-color-border);
}

body[data-page-type='inner'] .sb-nav-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sb-nav-breadcrumb {
  font-family: var(--sb-font-utility);
  font-size: 11px;
  font-weight: var(--sb-weight-light);
  letter-spacing: 0.08em;
  color: var(--sb-color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sb-nav-breadcrumb a {
  color: var(--sb-color-text-muted);
  text-decoration: none;
}

.sb-nav-breadcrumb a:hover {
  color: var(--sb-color-text);
}

.sb-nav-breadcrumb__sep {
  opacity: 0.4;
}

.sb-nav-breadcrumb__current {
  color: var(--sb-color-text);
  font-weight: var(--sb-weight-regular);
}

.sb-nav-context-count {
  font-family: var(--sb-font-utility);
  font-size: 11px;
  font-weight: var(--sb-weight-light);
  letter-spacing: 0.06em;
  color: var(--sb-color-text-muted);
}

/* ── Scroll Sentinel ───────────────────────────────────────────── */

.sb-scroll-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
  visibility: hidden;

  /* Positioned in the document flow, just below where the
     expanded header's tagline ends. When it exits the viewport
     top edge, the header compresses. */
}

/* ── Mobile: Hide desktop header elements ──────────────────────── */

@media (max-width: 767px) {
  .sb-nav-primary,
  .sb-nav-utility {
    display: none;
  }

  .sb-nav-header__row {
    padding-left: var(--sb-header-px-mobile);
    padding-right: var(--sb-header-px-mobile);
  }

  .sb-nav-header[data-header-state='expanded'] .sb-nav-header__row {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .sb-nav-context-bar {
    padding-left: var(--sb-header-px-mobile);
    padding-right: var(--sb-header-px-mobile);
  }

  /* Mobile hamburger trigger — 44px minimum touch target */
  .sb-nav-mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
    margin-left: auto;
    color: var(--sb-color-text);
  }

  .sb-nav-mobile-trigger svg {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 768px) {
  .sb-nav-mobile-trigger {
    display: none;
  }
}

/* ── Focus visibility ──────────────────────────────────────────── */

/* :focus-visible fires on keyboard navigation only — not on mouse
   clicks. Browser defaults are suppressed; explicit outline here
   ensures keyboard users always see a focus indicator.            */

.sb-nav-primary__item:focus-visible,
.sb-nav-utility__item:focus-visible,
.sb-nav-mobile-trigger:focus-visible {
  outline: 2px solid var(--sb-color-text);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── WP Admin Bar: sticky-header top offsets ───────────────────── */

/* position:sticky resolves top against the viewport edge, not the
   document flow. html.admin-bar { margin-top } handles scroll=0 but
   has no effect on where sticky anchors during scroll. The admin bar
   is position:fixed at all widths where the nav is in desktop mode:
   32px tall at ≥783px, 46px tall at 768–782px (WP breakpoint differs
   from the nav's own 768px mobile/desktop split). Below 768px the nav
   renders in mobile layout and is stable without an explicit offset. */

@media (min-width: 783px) {
  body.admin-bar .sb-nav-header {
    top: 32px;
  }
}

/* 768–782px seam: nav is in desktop mode but admin bar is still 46px. */
@media (min-width: 768px) and (max-width: 782px) {
  body.admin-bar .sb-nav-header {
    top: 46px;
  }
}

/* ── Navigation Mode: header inversion when desktop menu is open ── */

/* Overrides the three structural tokens that cascade to all visible */

/* elements in compact state: background, text, borders. Scoped to  */

/* .sb-nav-header only — does not affect the menu panel (sibling).  */

body[data-nav-open='true'] .sb-nav-header {
  --sb-color-bg: var(--sb-color-bg-dark);
  --sb-color-text: var(--sb-color-text-on-dark);
  --sb-color-border: var(--sb-color-border-dark);
}

/* Separator uses the border token which resolves to near-invisible
   dark-on-dark (#2e2e2e on #1a1a1a) in Navigation Mode. Override to
   muted-on-dark to keep separators balanced with surrounding text.  */
body[data-nav-open='true'] .sb-nav-header .sb-nav-utility__sep {
  color: var(--sb-color-text-muted-on-dark);
}