/* ============================================================================
   Burton v7 — Site header
   ----------------------------------------------------------------------------
   The persistent sticky header: logo lockup, primary nav, search.
   The scroll state adds glass and border treatment via .is-scrolled.
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  z-index: var(--z-header);
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.site-header.is-scrolled {
  background: rgba(242, 251, 249, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--color-line);
}

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

/* ── Brand lockup ────────────────────────────────────────────────────────── */

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.site-brand:hover {
  color: var(--color-ink);
  opacity: 0.8;
}

.site-brand svg {
  height: 40px;
  width: auto;
}

@media (max-width: 720px) {
  .site-brand svg { height: 32px; }
}

/* ── Primary nav ─────────────────────────────────────────────────────────── */

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

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;  /* never wrap mid-label (e.g. 'Treat a Room') */
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover {
  color: var(--color-ink);
  background: var(--color-surface);
}

.site-nav__link.is-active {
  color: var(--color-accent);
}

.site-nav__link.is-active:hover {
  color: var(--color-accent-hover);
}

/* ── Dropdown menus ──────────────────────────────────────────────────────────
   A parent nav item gets `.site-nav__item--has-dropdown`. The submenu
   (`.site-nav__dropdown`) is absolutely positioned below the parent and
   hidden by default. It reveals on hover, `:focus-within` (keyboard),
   or when a JS toggle sets `.is-open` (mobile / touch).

   The parent link itself stays a real link to its hub URL — hovering
   shows the dropdown, clicking goes to the hub. This preserves SEO
   (real href) + UX (fast access to sub-cats via dropdown).
   ========================================================================= */

.site-nav__item {
  position: relative;
}

.site-nav__item--has-dropdown > .site-nav__link {
  gap: var(--space-1);
}

.site-nav__caret {
  width: 10px;
  height: 10px;
  transition: transform var(--duration-fast) var(--ease-out);
  opacity: 0.6;
}

.site-nav__item--has-dropdown:hover > .site-nav__link .site-nav__caret,
.site-nav__item--has-dropdown:focus-within > .site-nav__link .site-nav__caret,
.site-nav__item--has-dropdown.is-open > .site-nav__link .site-nav__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 220px;
  transform: translate(-50%, 4px);
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08),
              0 2px 8px rgba(15, 23, 42, 0.04);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              visibility 0s linear var(--duration-fast);
  z-index: calc(var(--z-header) + 1);
}

/* Invisible hover bridge so the dropdown doesn't close when the cursor
   travels from the parent link to the first dropdown item. */
.site-nav__dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}

.site-nav__item--has-dropdown:hover > .site-nav__dropdown,
.site-nav__item--has-dropdown:focus-within > .site-nav__dropdown,
.site-nav__item--has-dropdown.is-open > .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.site-nav__dropdown-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.site-nav__dropdown-link:hover,
.site-nav__dropdown-link:focus-visible {
  background: var(--color-surface);
  color: var(--color-accent);
  outline: none;
}

/* The "Overview" item links to the hub itself. Visually anchored with a
   divider beneath it so it reads as "parent first, children below". */
.site-nav__dropdown-link--overview {
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  position: relative;
  margin-bottom: var(--space-1);
  padding-bottom: calc(var(--space-2) + 4px);
}

.site-nav__dropdown-link--overview::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0;
  height: 1px;
  background: var(--color-line);
}

.site-nav__dropdown-link--overview:hover,
.site-nav__dropdown-link--overview:focus-visible {
  color: var(--color-accent-hover);
}

/* ── Header actions (search + mobile trigger) ────────────────────────────── */

.site-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.site-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.site-search-trigger:hover {
  border-color: var(--color-ink-muted);
  color: var(--color-ink);
}

.site-search-trigger__icon {
  width: 16px;
  height: 16px;
}

.site-search-trigger__label {
  min-width: 140px;
  text-align: left;
}

.site-search-trigger__kbd {
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
  color: var(--color-ink-subtle);
}

/* ── Mobile toggle ───────────────────────────────────────────────────────────
   Three spans we morph into an X on `aria-expanded="true"`. The button
   stays above the sheet (z-index) so the "X" is always tappable while the
   panel is open. */

.site-nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-line);
  cursor: pointer;
  /* Sits above the full-screen nav sheet so the X is always clickable. */
  z-index: calc(var(--z-overlay) + 1);
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.site-nav-toggle:hover {
  background: var(--color-surface);
  border-color: var(--color-line-strong);
}

.site-nav-toggle[aria-expanded="true"] {
  border-color: transparent;
  background: transparent;
  color: var(--color-ink);
}

.site-nav-toggle__bars {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 14px;
}

.site-nav-toggle__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.75px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 320ms var(--ease-out),
              opacity 200ms var(--ease-out),
              top 320ms var(--ease-out);
}

.site-nav-toggle__bar:nth-child(1) { top: 0; }
.site-nav-toggle__bar:nth-child(2) { top: calc(50% - 0.875px); }
.site-nav-toggle__bar:nth-child(3) { top: calc(100% - 1.75px); }

/* Open state — outer bars rotate into a crisp X, middle bar fades + scales out. */
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(1) {
  top: calc(50% - 0.875px);
  transform: rotate(45deg);
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.35);
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(3) {
  top: calc(50% - 0.875px);
  transform: rotate(-45deg);
}

/* ── Responsive ─────────────────────────────────────────────────────────────

   Three viewport tiers:
     - Mobile   (<=900)   : hamburger menu, icon-only search
     - Tablet   (901-1100): horizontal nav shown, compact padding,
                            still icon-only search (frees ~180px for nav)
     - Desktop  (>1100)   : full horizontal nav + labeled search
   ========================================================================= */

/* Tablet-desktop compact nav — the old 'iPad landscape / small laptop'
   dead zone. Horizontal nav fits but needs tighter spacing. */
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header__inner {
    gap: var(--space-4);
  }

  .site-nav__list {
    gap: 0;
  }

  .site-nav__link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
  }
}

/* Search trigger: icon-only from 1100px down. The 140px search label
   was the main reason nav items wrapped in the 900-1100 range. */
@media (max-width: 1100px) {
  .site-search-trigger__label,
  .site-search-trigger__kbd {
    display: none;
  }

  .site-search-trigger {
    padding: var(--space-2);
  }
}

/* ── Mobile nav sheet ────────────────────────────────────────────────────────
   Below 900px the nav becomes a full-viewport editorial sheet that drops
   from under the header. Typography is the anchor — big sans headlines for
   top-level links, muted serif for sub-items, a mono eyebrow above and a
   serif signature below to frame the sheet like a printed title page.

   The sheet is always in the DOM; `.is-open` animates opacity + transform
   (a 6px lift) for a calm, considered entrance. Items stagger in with
   nth-child delays so the reveal feels composed, not chaotic.
   ========================================================================= */
@media (max-width: 900px) {
  .site-header__inner {
    gap: var(--space-4);
  }

  .site-nav {
    position: fixed;
    inset: 0;
    top: var(--site-header-h, 80px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-10) var(--space-6) var(--space-12);
    /* Flat mint + a whisper of cyan at the top so the sheet reads as a
       distinct surface without fighting the header. */
    background:
      radial-gradient(120% 60% at 50% 0%,
                      rgba(207, 250, 254, 0.50) 0%,
                      rgba(207, 250, 254, 0) 55%),
      var(--color-bg);
    z-index: var(--z-overlay);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Hidden by default — .is-open animates in. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 280ms var(--ease-out),
                transform 320ms var(--ease-out),
                visibility 0s linear 320ms;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 280ms var(--ease-out),
                transform 320ms var(--ease-out),
                visibility 0s linear 0s;
  }

  /* Eyebrow — mono ◆ marker, tracked uppercase, muted ink. Matches the
     brand's .eyebrow language used across the rest of the site. */
  .site-nav::before {
    content: "◆  Explore";
    display: block;
    width: 100%;
    max-width: var(--container-narrow);
    margin: 0 auto var(--space-10);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 340ms var(--ease-out),
                transform 340ms var(--ease-out);
  }

  .site-nav.is-open::before {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 80ms;
  }

  /* Signature line — settles at the bottom of the sheet via margin-top auto.
     Serif italic, subtle ink, quiet punctuation of the panel. */
  .site-nav::after {
    content: "Burton Acoustix — Engineered sound, designed for life.";
    display: block;
    width: 100%;
    max-width: var(--container-narrow);
    margin: auto auto 0;
    padding-top: var(--space-12);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    color: var(--color-ink-subtle);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 340ms var(--ease-out),
                transform 340ms var(--ease-out);
  }

  .site-nav.is-open::after {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 440ms;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: var(--container-narrow);
    margin: 0 auto;
  }

  /* Hairline between items — no borders on individual links; cleaner. */
  .site-nav__item + .site-nav__item {
    border-top: 1px solid var(--color-line);
  }

  /* Stagger — each row fades + lifts in after the eyebrow. */
  .site-nav__item {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 380ms var(--ease-out),
                transform 380ms var(--ease-out);
  }

  .site-nav.is-open .site-nav__item { opacity: 1; transform: translateY(0); }
  .site-nav.is-open .site-nav__item:nth-child(1) { transition-delay: 160ms; }
  .site-nav.is-open .site-nav__item:nth-child(2) { transition-delay: 210ms; }
  .site-nav.is-open .site-nav__item:nth-child(3) { transition-delay: 255ms; }
  .site-nav.is-open .site-nav__item:nth-child(4) { transition-delay: 295ms; }
  .site-nav.is-open .site-nav__item:nth-child(5) { transition-delay: 330ms; }
  .site-nav.is-open .site-nav__item:nth-child(6) { transition-delay: 360ms; }

  /* Display-scale top-level link — the grand gesture. */
  .site-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-5) 0;
    font-family: var(--font-sans);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    color: var(--color-ink);
    background: transparent;
    border: none;
    border-radius: 0;
  }

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

  .site-nav__link.is-active {
    color: var(--color-accent);
  }

  /* Caret — larger on mobile; rotates + accent-tints on open. */
  .site-nav__caret {
    width: 14px;
    height: 14px;
    opacity: 0.4;
    transition: transform var(--duration-base) var(--ease-out),
                opacity var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
  }

  .site-nav__item--has-dropdown.is-open > .site-nav__link .site-nav__caret {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--color-accent);
  }

  /* Dropdown — collapsed by default, smooth height reveal. Using
     max-height so we don't need wrapper markup. Keeping `display: flex`
     (not `none`) lets transitions actually animate. */
  .site-nav__dropdown {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 320ms var(--ease-out),
                opacity 220ms var(--ease-out),
                padding 320ms var(--ease-out),
                visibility 0s linear 320ms;
  }

  .site-nav__dropdown::before {
    display: none;
  }

  .site-nav__item--has-dropdown.is-open > .site-nav__dropdown {
    max-height: 520px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Cancel the desktop reveal rule's `translate(-50%, 0)` that would
       otherwise shift the (now static-positioned) sub-list off to the
       left at this breakpoint. */
    transform: none;
    padding: var(--space-1) 0 var(--space-5);
    transition: max-height 400ms var(--ease-out),
                opacity 260ms var(--ease-out) 80ms,
                padding 320ms var(--ease-out),
                visibility 0s linear 0s;
  }

  /* Kill desktop hover/focus-within reveals on touch. Only .is-open wins. */
  .site-nav__item--has-dropdown:hover > .site-nav__dropdown,
  .site-nav__item--has-dropdown:focus-within > .site-nav__dropdown {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
  }

  .site-nav__item--has-dropdown.is-open:hover > .site-nav__dropdown,
  .site-nav__item--has-dropdown.is-open:focus-within > .site-nav__dropdown {
    max-height: 520px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  /* Sub-items — editorial serif, muted ink, dash lead-in. */
  .site-nav__dropdown-link {
    position: relative;
    display: block;
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    color: var(--color-ink-muted);
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .site-nav__dropdown-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--space-4);
    height: 1px;
    background: var(--color-line-strong);
    transition: width var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
  }

  .site-nav__dropdown-link:hover,
  .site-nav__dropdown-link:focus-visible {
    color: var(--color-accent-hover);
    background: transparent;
  }

  .site-nav__dropdown-link:hover::before,
  .site-nav__dropdown-link:focus-visible::before {
    width: var(--space-5);
    background: var(--color-accent);
  }

  /* Overview — sans semibold accent, no dash. Reads as "parent hub first". */
  .site-nav__dropdown-link--overview {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    color: var(--color-accent);
    padding-left: var(--space-6);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .site-nav__dropdown-link--overview::before {
    content: "→";
    background: transparent;
    width: auto;
    height: auto;
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    top: 50%;
    transform: translateY(-55%);
    color: currentColor;
  }

  /* Hide the desktop-only underline divider under Overview on mobile —
     the color + weight treatment already distinguishes it. */
  .site-nav__dropdown-link--overview::after {
    display: none;
  }

  .site-nav__dropdown-link--overview:hover::before,
  .site-nav__dropdown-link--overview:focus-visible::before {
    width: auto;
    background: transparent;
    color: var(--color-accent-hover);
  }

  .site-nav-toggle {
    display: inline-flex;
  }
}

/* Respect reduced-motion — kill every transition/transform in the nav so
   the sheet, eyebrow, signature, items, dropdown, and hamburger bars all
   snap instead of animate. We match the exact specificity of each source
   rule above so `transition: none` wins without `!important`. */
@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav.is-open,
  .site-nav::before,
  .site-nav.is-open::before,
  .site-nav::after,
  .site-nav.is-open::after,
  .site-nav__item,
  .site-nav.is-open .site-nav__item,
  .site-nav.is-open .site-nav__item:nth-child(1),
  .site-nav.is-open .site-nav__item:nth-child(2),
  .site-nav.is-open .site-nav__item:nth-child(3),
  .site-nav.is-open .site-nav__item:nth-child(4),
  .site-nav.is-open .site-nav__item:nth-child(5),
  .site-nav.is-open .site-nav__item:nth-child(6),
  .site-nav__dropdown,
  .site-nav__item--has-dropdown.is-open > .site-nav__dropdown,
  .site-nav-toggle__bar {
    transition: none;
  }
}