/* ==================================================================
   Nav — kwizzbit/site-header + kwizzbit/mobile-menu (shared chrome)
   Faithful slice of /HTML/nav.html. Tokens are canonical wp tokens; reset, body,
   sr-only, container, font-face stripped (global). Dropdowns, hamburger, mobile overlay.
   ================================================================== */

    /* ==========================================================
       SITE HEADER (kwizzbit/site-header) — minimal version
       Full spec already documented in COMPONENTS.md §1.
       Dropdown JS omitted here — chevrons shown but inert.

       LAYOUT: At desktop the inner uses a 3-col grid (1fr auto 1fr)
       so the nav is always geometrically centred regardless of how
       wide the logo or actions columns are. padding-inline is fixed
       at 36px at desktop so logo and CTA sit exactly 36px from
       their respective page edges, as requested.
       ========================================================== */
    /* Standard top nav, links centred via the 1fr / auto / 1fr grid below.
       The Get started button floats fixed top-right at all times (relume-style)
       — a great always-visible conversion CTA. Its footprint is reserved in the
       actions group so Login keeps its place. NOTE: this only stays centred
       because no component leaks a `display` onto .site-header (the contact
       pattern used to — fixed at source). */
    .site-header {
      background: var(--wp--preset--color--cream);
      min-height: 5.5rem;
      position: relative;
    }

    @media (min-width: 1024px) {
      .site-header__actions .btn--secondary {
        position: fixed;      /* floats over content + stays visible on scroll */
        /* Clear the announce bar (its measured height, published by nav.js)
           then centre in the 5.5rem header below it. Falls back to ~bar
           height before JS runs so there's no flash.
           The bar is PINNED to the viewport top at all times now
           (announce-bar.css), so this is the button's permanent home —
           the old .kwb-scrolled rise to 1.5rem is gone: it would park
           the button on top of the strip. */
        top: calc(var(--kwb-announce-h, 2rem) + 1.5rem);
        right: 36px;          /* matches the nav's 36px desktop gutter */
        z-index: 500;         /* floats over content; below cookie modal + loader */
        transition: top 0.35s var(--wp--custom--motion--ease-out),
                    background 0.2s ease,
                    transform 0.2s ease;
      }
      @media (prefers-reduced-motion: reduce) {
        .site-header__actions .btn--secondary { transition: none; }
      }
      /* Reserve the button's footprint (~140px) + a tight 6px gap.
         padding-right is the only lever here — gap: has no effect since
         the fixed button is out of the flex flow. */
      .site-header__actions {
        padding-right: 148px;
      }
    }

    .site-header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 5.5rem;
      /* Mobile: fluid gutter, no max-width — full viewport width always */
      padding-inline: var(--wp--custom--layout--gutter);
    }

    @media (min-width: 1024px) {
      .site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        /* Hard 36px against the viewport at ALL screen sizes, no cap */
        padding-inline: 36px;
      }
    }

    .site-logo {
      color: var(--wp--preset--color--coral);
      display: inline-flex;
      justify-self: start;
      /* anchor for the absolutely-positioned version tag */
      position: relative;
      transform-origin: left center;
      transition: transform var(--wp--custom--motion--dur-base)
                  var(--wp--custom--motion--ease-out);
    }
    .site-logo:hover { transform: rotate(-1deg); }

    /* ── Hover easter egg: "3.0" version tag ───────────────────────────
       Sits just past the wordmark's right edge as a small superscript tag.
       Tucked behind the edge (translateX) + invisible at rest; on hover it
       glides out and fades in — a quiet wink, no layout shift (absolute).
       Coral by default; auto-whitened on the About page because it lives
       inside .site-logo, which gets brightness(0) invert(1) there. */
    .site-logo__ver {
      position: absolute;
      left: 100%;
      top: -1px;                 /* lift it superscript-style toward the cap line */
      margin-left: 3px;
      font-family: var(--wp--preset--font-family--body);
      font-weight: 700;
      font-size: 11px;
      line-height: 1;
      letter-spacing: 0.01em;
      color: var(--wp--preset--color--coral);
      white-space: nowrap;
      pointer-events: none;      /* never intercepts the logo's click target */
      opacity: 0;
      transform: translateX(-7px);   /* tucked back under the right edge */
      transition: opacity 0.18s ease,
                  transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .site-logo:hover .site-logo__ver,
    .site-logo:focus-visible .site-logo__ver {
      opacity: 1;
      transform: translateX(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .site-logo__ver { transform: none; transition: opacity 0.18s ease; }
      .site-logo:hover .site-logo__ver,
      .site-logo:focus-visible .site-logo__ver { transform: none; }
    }

    .primary-nav {
      display: none;
    }
    @media (min-width: 1024px) {
      .primary-nav { display: block; }
    }

    .primary-nav__list {
      display: flex;
      /* 40px between each nav item */
      gap: 30px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .primary-nav__link {
      color: var(--wp--custom--color--nav-ink);
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      font-size: 15px;
      /* 42px height for the hover highlight, matching button height */
      height: 42px;
      padding: 0 0.625rem;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 0;
      transition:
        background-color var(--wp--custom--motion--dur-fast)
          var(--wp--custom--motion--ease-out);
    }
    .primary-nav__link:hover {
      /* Text colour unchanged on hover */
      color: var(--wp--custom--color--nav-ink);
      background-color: #EEDED0;
    }
    .primary-nav__link--active { font-weight: 700; }
    /* Bold + persistently highlight the top-level link (e.g. "Product") when
       the current page lives under it — class set by nav.js active-state logic. */
    .primary-nav__item--active > .primary-nav__link {
      font-weight: 700;
      background-color: #EEDED0;
    }
    .primary-nav__chevron {
      width: 8px;
      height: 5px;
      flex-shrink: 0;
      /* Nudge down slightly to optically align with text baseline */
      vertical-align: middle;
      position: relative;
      top: 1px;
      /* Animate the flip (see .primary-nav__item--open below) rather than snap */
      transition: transform 0.25s ease;
    }

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

    .site-header__actions {
      display: flex;
      align-items: center;
      /* Tight gap — Login sits close to Get started */
      gap: 6px;
      justify-self: end;
    }

    .site-header__login {
      color: var(--wp--custom--color--nav-ink);
      font-weight: 500;
      font-size: 0.9375rem;
      display: none; /* shown at desktop */
      text-decoration: none;
      /* Match the nav link highlight: 42px height, same horizontal padding */
      height: 42px;
      padding: 0 0.625rem;
      align-items: center;
      transition: background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
    }
    .site-header__login:hover {
      background-color: #EEDED0;
    }
    @media (min-width: 1024px) {
      .site-header__login { display: inline-flex; }
    }

    /* Mobile hamburger — visible < 1024px.
       Drawer overlay is a separate section (not yet built). */
    .hamburger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      width: 44px; height: 44px;
      background: transparent;
      border: none;
      color: var(--wp--custom--color--nav-ink);
      cursor: pointer;
    }
    @media (min-width: 1024px) {
      .hamburger { display: none; }
    }
    /* Two-bar icon that morphs to an X.
       CSS reads aria-expanded on the <button> — no class toggling needed in JS. */
    .hamburger__bar {
      display: block;
      width: 17px;
      height: 3px;
      background: currentColor;
      border-radius: 0;
      transform-origin: center center;
      transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.18s ease;
    }
    /* While the menu is OPEN, the burger must sit above the menu's
       full-screen backdrop (z 900) even when docked in the header —
       otherwise, at the top of the page, taps on the visible X land
       on the backdrop instead of the button. The backdrop's own
       close-on-tap makes that mostly indistinguishable, but it
       bypasses the button's guarded toggle path, and rapid tap
       sequences get messier for it. The floating state already pins
       at z 950; this covers the docked state. (On modes/about the
       header's scoped z-index:30 caps this within its stacking
       context — there the backdrop fallback still handles the tap,
       unchanged.) */
    .hamburger[aria-expanded="true"] {
      position: relative;
      z-index: 950;
    }

    /* gap: 5px + bar height 3px → center-to-center = 8px → translateY(4px) */
    .hamburger[aria-expanded="true"] .hamburger__bar:first-child {
      transform: translateY(4px) rotate(45deg);
    }
    .hamburger[aria-expanded="true"] .hamburger__bar:last-child {
      transform: translateY(-4px) rotate(-45deg);
    }
    @media (prefers-reduced-motion: reduce) {
      .hamburger__bar { transition: none; }
    }

    /* ==========================================================
       NAV DROPDOWNS
       White panel, 0px radius, glass effect with warm orange glow.
       Positioned below the nav, left-aligned to the trigger.
       ========================================================== */
    .primary-nav__item {
      position: relative;
    }

    .primary-nav__dropdown {
      display: none;
      position: absolute;
      /* 8px gap from trigger — bridged by ::before pseudo so cursor
         doesn't escape the <li> when moving from trigger to panel */
      top: calc(100% + 8px);
      left: 0;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(100px);
      -webkit-backdrop-filter: blur(100px);
      box-shadow:
        2px 2px 0px rgba(253, 106, 97, 0.20),
        0px 20px 50px rgba(255, 54, 35, 0.20);
      border-radius: 0;
      z-index: 100;
      white-space: nowrap;
    }

    /* Product + Learn: 168px wide, padding to hit 159px tall across 4 items */
    .primary-nav__dropdown--sm {
      width: 168px;
      padding: 10px 0;
    }

    /* Hosts dropdown is wider — two columns */
    .primary-nav__dropdown--wide {
      /* Fixed width — prevents Safari from crushing the columns.
         width:max-content lets the grid determine the panel size,
         capped so it doesn't run off screen. */
      width: max-content;
      max-width: 420px;
      display: none;
      padding: 10px 0;
    }

    .primary-nav__item--open .primary-nav__dropdown {
      display: block;
    }

    /* Invisible bridge fills the 8px gap so the cursor stays within
       the <li> as it moves from the nav link down to the panel */
    .primary-nav__dropdown::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 0;
      right: 0;
      height: 8px;
    }

    .primary-nav__dropdown-grid {
      display: grid;
      /* Fixed column widths — no fluid fractions that can collapse in Safari */
      grid-template-columns: 190px 190px;
      /* row-gap draws the 1px line between rows; column-gap stays 0. Using the
         grid gap (rather than per-li margin-top) keeps both columns on the same
         row baseline so their highlights align perfectly. */
      gap: 1px 0;
      padding-right: 10px;
    }

    .primary-nav__dropdown-link {
      display: flex;
      align-items: center;
      gap: 12px;
      /* 42px height for hover highlight */
      height: 42px;
      padding: 0 18px;
      color: var(--wp--custom--color--nav-ink);
      font-family: 'Roobert', system-ui, -apple-system, sans-serif;
      font-weight: 500;
      font-size: 14px;
      line-height: 1;
      text-decoration: none;
      transition:
        color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
        background-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out);
    }

    .primary-nav__dropdown-link:hover {
      color: var(--wp--custom--color--nav-ink);
      background-color: #F2E8DF;
    }

    /* Current sub-page — persistent highlight in the open dropdown.
       Class set by nav.js when the page matches this link. */
    .primary-nav__dropdown-link--active {
      background-color: #F2E8DF;
    }

    /* In the wide (Hosts) dropdown, bleed the highlight through the grid's
       padding-right so it stretches flush to the modal edge.
       SCOPED to the right-hand column only (nth-child(even) in row-major
       flow): if the left column also bled by -10px it would widen into the
       right column's track, making the right column's highlight look like it
       borrows space from the left. Left-column items stay inside their track.
       Apply to both hover AND active so the width is always identical. */
    .primary-nav__dropdown--wide .primary-nav__dropdown-grid li:nth-child(even) .primary-nav__dropdown-link:hover,
    .primary-nav__dropdown--wide .primary-nav__dropdown-grid li:nth-child(even) .primary-nav__dropdown-link--active {
      margin-right: -10px;
      padding-right: 28px;
    }

    /* 17px vertical space between items via margin-top on li siblings */
    .primary-nav__dropdown ul,
    .primary-nav__dropdown {
      list-style: none;
      padding-left: 0;
      margin: 0;
    }
    .primary-nav__dropdown li + li {
      margin-top: 1px;
    }
    /* …but in the wide 2-column grid, row spacing comes from the grid's row-gap.
       Zero the margin so the first right-column item isn't pushed 1px below the
       first left-column item (which would misalign the two columns' highlights). */
    .primary-nav__dropdown--wide .primary-nav__dropdown-grid li {
      margin-top: 0;
    }

    .primary-nav__dropdown-icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }

    /* Chevron rotates when dropdown is open */
    .primary-nav__item--open .primary-nav__chevron {
      transform: rotate(180deg) translateY(-1px);
    }

    /* ==========================================================
       TABLET/MOBILE (<1024px) — nav-related rules only
       ========================================================== */
    @media (max-width: 1023px) {
      /* Hide Get started button in nav at tablet/mobile — hamburger takes over */
      .site-header__actions .btn--secondary {
        display: none;
      }
    }

    /* ==========================================================
       MOBILE (<=640px) — nav-related rules only
       ========================================================== */
    @media (max-width: 640px) {
      .site-header {
        min-height: 3.5rem;
      }
      .site-header__inner {
        padding-inline: 4vw;
      }
    }


    /* ==========================================================
       MOBILE / TABLET MENU OVERLAY
       Only active < 1024px. Slides down, accordion sections.
       ========================================================== */
    @media (max-width: 1023px) {

      /* Full-screen TRANSPARENT tap-catcher. Covers the viewport so a
         tap anywhere outside the panel closes the menu (handler in
         nav.js) — but it lays NO tint of its own. The modal's focus-dim
         is instead a large soft dark shadow cast by the panel itself
         (see .mobile-menu__panel below): it stays in the panel's
         proximity (the top of the screen) and fades out well above the
         bottom, so — unlike any full-screen scrim, however faint — it
         never puts a tinted layer over iOS Safari's bottom overscroll
         strip, which was flashing a white seam as the toolbar shuffled.
         No tinted layer there = nothing that can seam.

         Scoped to <=1023px with the rest of the mobile menu, so it can
         never touch desktop (which has no hamburger at all). */
      .mobile-menu {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 900;
        background: transparent;
      }
      .mobile-menu.is-open {
        display: block;
      }


      /* The white card panel — slides down from below the header.
         top uses --kwb-announce-h (published by nav.js) so the panel always
         clears the announce bar + the header. 5.5rem is correct at ALL
         widths below 1024px: .site-header__inner has min-height 5.5rem with
         no mobile override, so the header measures 88px even at <=640px
         (see the page-id-97 note further down). Do not "shrink" this for
         mobile — a 3.5rem variant would overlap the header. */
      .mobile-menu__panel {
        position: absolute;
        top: calc(var(--kwb-announce-h, 0px) + 5.5rem - 8px);
        left: 10px;
        right: 10px;
        max-height: calc(100vh - var(--kwb-announce-h, 0px) - 5.5rem - 8px);
        overflow-y: auto;
        background: #FFFFFF;
        backdrop-filter: blur(100px);
        -webkit-backdrop-filter: blur(100px);
        box-shadow:
          2px 2px 0px rgba(253,106,97,0.20),
          0px 20px 50px rgba(255,54,35,0.20),
          /* The modal's focus-dim, cast by the panel instead of a
             full-screen scrim: a large, soft, downward-biased dark
             shadow. Dense near the panel, fading to nothing ~100px
             below it — so it dims the panel's proximity (roughly the
             top 2/3 of the screen) and never reaches the bottom
             overscroll strip. Fades in/out with the panel's opacity;
             the panel's own white sits on top, so it stays crisp. */
          0px 28px 90px 8px rgba(29, 11, 9, 0.30);
        border-radius: 0;
        display: flex;
        flex-direction: column;
        transform: translateY(-20px);
        opacity: 0;
        transition:
          transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
          opacity 240ms ease;
        pointer-events: auto;
      }

      .mobile-menu.is-visible .mobile-menu__panel {
        transform: translateY(0);
        opacity: 1;
      }

      .mobile-menu__nav {
        flex: 1;
        padding-top: 8px;
        padding-bottom: 4px;
      }

      /* No dividers between sections */
      .mobile-menu__section {
        /* no border */
      }

      /* Top-level nav items — 20px vertical spacing via padding */
      .mobile-menu__trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px 20px;
        background: none;
        border: none;
        font-family: var(--wp--preset--font-family--body);
        font-weight: 600;      /* SemiBold */
        font-size: 0.9375rem;  /* 15px */
        color: var(--wp--preset--color--ink);
        cursor: pointer;
        text-align: left;
        text-decoration: none;
        line-height: 1;
        transition: background-color 140ms ease;
      }
      /* Brief tap-feedback on the section title — clears instantly, not persistent */
      .mobile-menu__trigger:active {
        background-color: #F2E8DF;
        color: var(--wp--preset--color--coral);
      }
      /* Pricing / About are plain page links, not accordion toggles — they get coral
         text on tap (same as sublinks) but no background strip, since there's no
         sub-row beneath them to visually "open". Only sublinks inside accordion
         sections should show the full highlight treatment. */
      .mobile-menu__trigger--plain:active {
        background-color: transparent;
      }

      /* Extra space above each section so total gap = ~20px */
      .mobile-menu__section + .mobile-menu__section > .mobile-menu__trigger {
        padding-top: 20px;
      }
      .mobile-menu__nav > .mobile-menu__section:first-child > .mobile-menu__trigger {
        padding-top: 16px;
      }

      .mobile-menu__chevron {
        flex-shrink: 0;
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .mobile-menu__section--open > .mobile-menu__trigger .mobile-menu__chevron {
        transform: rotate(180deg);
      }

      .mobile-menu__submenu {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
        max-height: 0;
        transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      /* max-height driven entirely by JS */

      /* Sub-buttons: 15px Roobert SemiBold */
      .mobile-menu__sublink {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 20px;
        font-family: var(--wp--preset--font-family--body);
        font-weight: 500;     /* Medium */
        font-size: 0.875rem;  /* 14px */
        color: var(--wp--custom--color--nav-ink);
        text-decoration: none;
        transition: background-color 160ms ease;
      }

      /* Tap highlight suppressed on touch devices — hover-only on desktop */
      .mobile-menu__sublink,
      .mobile-menu__trigger {
        -webkit-tap-highlight-color: transparent;
      }
      /* Tap-press feedback on sub-links (the real action buttons inside the accordion) */
      .mobile-menu__sublink:active {
        background-color: #F2E8DF;
        color: var(--wp--preset--color--coral);
      }
      /* Coral tap-flash for page navigation links. CSS :active is unreliable on
         iOS Safari for <a> tags (page loads before the paint). JS adds .is-tapping
         on touchstart — fires on finger contact, before navigation — so the colour
         renders in the brief window between touch and page unload. */
      .mobile-menu__sublink.is-tapping,
      .mobile-menu__trigger--plain.is-tapping {
        color: var(--wp--preset--color--coral);
      }
      @media (hover: hover) {
        .mobile-menu__sublink:hover {
          background-color: #F2E8DF;
        }
      }

      /* Active state (parity with desktop): bold the section title and
         highlight the current sub-page. Classes set by nav.js. */
      .mobile-menu__section--active > .mobile-menu__trigger { font-weight: 700; }
      .mobile-menu__sublink--active { background-color: #F2E8DF; }

      .mobile-menu__sublink .primary-nav__dropdown-icon {
        flex-shrink: 0;
      }

      /* Actions: no top divider, equal-width buttons */
      .mobile-menu__actions {
        display: flex;
        gap: 12px;
        padding: 16px 20px 20px;
        /* Sticky so it stays pinned at bottom of the panel while scrolling */
        position: sticky;
        bottom: 0;
        background: #FFFFFF;
      }

      /* Login: same flex width as CTA, outlined style */
      .mobile-menu__login {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border: 1px solid #D1C6C2;
        font-family: var(--wp--preset--font-family--body);
        font-weight: 500;
        font-size: 0.9375rem;
        color: var(--wp--preset--color--ink);
        text-decoration: none;
      }

      /* Get started: secondary button style matching desktop nav */
      .mobile-menu__cta {
        flex: 1;
        justify-content: center;
        min-height: 44px;
        /* Override primary gradient — use secondary (dark) style */
        background: var(--wp--preset--gradient--btn-secondary) !important;
        box-shadow: none !important;
        padding-inline: 1rem !important;
      }
      .mobile-menu__cta:hover {
        background: var(--wp--preset--gradient--btn-secondary-hover) !important;
      }
      .mobile-menu__cta:active {
        background: var(--wp--preset--gradient--btn-secondary-hover) !important;
        transform: translateY(1px) !important;
      }

      /* Page scrolls freely underneath the modal */
      /* Prevent horizontal scroll at mobile/tablet.
         MUST be `clip`, never `hidden` (fixed 2026-07-15): `hidden`
         forces overflow-y to `auto`, turning html/body into scroll
         containers — which silently kills position:sticky against the
         viewport for EVERYTHING below 1024px (it broke the pinned
         announce bar; base.css's body{overflow-x:clip} comment
         documents this exact trap, and this leaked source rule was
         overriding it). `clip` trims sideways overflow identically
         without creating a scroll container. */
      html,
      body {
        overflow-x: clip;
        max-width: 100%;
      }
      /* Page remains scrollable behind the modal */
    }

    @media (min-width: 1024px) {
      .mobile-menu { display: none !important; }
    }

/* ── MODES PAGE — transparent nav over the hero backdrop ─────────────
   WordPress adds body.page-id-97 automatically on the Modes page.
   The header stays transparent and keeps its place in flow, while the modes
   segment is pulled up by exactly the header's height — so the cream
   pixel-grain canvas (modes.js) runs up behind the nav and shows through it.
   .modes-hero adds the same 5.5rem back as top padding, which preserves the
   designed nav-to-badge gap. The announce bar above is untouched and keeps
   its own background.
   Nav elements are the sitewide ink/coral defaults here (NOT inverted like
   About below) — the backdrop behind them is cream now, not dark artwork, so
   white text would vanish. This block exists only to keep z-index/transparency
   scoped to this page; the colour values below just restate the defaults.
   Entirely scoped — zero effect on any other page.
   ──────────────────────────────────────────────────────────────────── */
body.page-id-97 .site-header {
  background: transparent;
  z-index: 30;            /* .site-header is position:relative, so this paints it above the canvas pulled up beneath */
}
/* -5.5rem = the header's RENDERED height (88px), which holds at every width.
   Do not switch this to 3.5rem below 640px to match the min-height there: that
   is only a floor and never binds — the logo/hamburger row measures 88px on
   mobile too, so a 3.5rem pull-up leaves a 32px strip at the top of the header
   with no canvas behind it. */
body.page-id-97 .kwb-segment--modes { margin-top: -5.5rem; }

body.page-id-97 .primary-nav__link,
body.page-id-97 .site-header__login { color: var(--wp--custom--color--nav-ink); }
body.page-id-97 .primary-nav__link:hover,
body.page-id-97 .site-header__login:hover {
  color: var(--wp--custom--color--nav-ink);
  background-color: #EEDED0;
}
body.page-id-97 .primary-nav__link--active { font-weight: 700; }
body.page-id-97 .primary-nav__item--active > .primary-nav__link {
  background-color: #EEDED0;
  font-weight: 700;
}
body.page-id-97 .primary-nav__chevron polygon { fill: var(--wp--custom--color--nav-ink); stroke: var(--wp--custom--color--nav-ink); }
body.page-id-97 .hamburger { color: var(--wp--custom--color--nav-ink); }

/* ── ABOUT PAGE — inverted nav (blood-orange bg, white elements) ──────
   WordPress adds body.page-id-115 automatically on the About page.
   Entirely scoped — zero effect on any other page.
   ──────────────────────────────────────────────────────────────────── */
body.page-id-115 .site-header {
  background: var(--wp--preset--color--blood-orange);
}

/* Logo: brightness(0) collapses everything to black, invert(1) flips to white.
   Most reliable cross-browser approach — no SVG internals targeting needed.
   The shadow layer disappears too, leaving a clean flat white wordmark. */
body.page-id-115 .site-logo { filter: brightness(0) invert(1); }

/* Nav links + login */
body.page-id-115 .primary-nav__link,
body.page-id-115 .site-header__login { color: rgba(255,255,255,0.92); }
body.page-id-115 .primary-nav__link:hover,
body.page-id-115 .site-header__login:hover {
  color: white;
  background-color: rgba(255,255,255,0.12);
}
body.page-id-115 .primary-nav__link--active { font-weight: 700; color: white; }
/* Active section title on the inverted header — translucent white, not cream */
body.page-id-115 .primary-nav__item--active > .primary-nav__link {
  background-color: rgba(255, 255, 255, 0.12);
  color: white;
}

/* Chevrons */
body.page-id-115 .primary-nav__chevron polygon {
  fill: white;
  stroke: white;
}

/* Hamburger (mobile) */
body.page-id-115 .hamburger { color: white; }

/* Touch: the .mobile-menu__cta hover lives inside a max-width media block
   (CSS can't nest @media), so kill its lingering "stuck" hover gradient on
   touch devices here at top level. The :active push-down (in that block)
   provides the real press feedback. */
@media (hover: none) {
  .mobile-menu__cta:hover {
    background: var(--wp--preset--gradient--btn-secondary) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FLOATING BURGER (< 1024px) — the mobile/tablet counterpart to the
   desktop fixed Get-started button, sharing its exact choreography.

   Three independent beats, each on its own <html> flag:

   1. .kwb-burger-ready (nav.js, once it has measured the burger's
      docked position and published --kwb-burger-top/--kwb-burger-right)
      — the burger becomes permanently position:fixed AT ITS OWN
      DOCKED COORDINATES. Pixel-identical swap, invisible. Being
      always-fixed is what lets `top` transition smoothly in BOTH
      directions later: there is no pin/unpin handoff left to snap.
      No JS → no flag → plain docked burger, gracefully.

   2. .kwb-nav-floating (any scroll, > 2px) — the translucent glass
      circle fades in behind the icon. Fades back out at the top.

   3. .kwb-scrolled (existing flag: real scrolling under way) — the
      burger GLIDES UP to sit tight under the PINNED offer strip
      (announce-bar.css keeps the strip at the viewport top at all
      times), and glides back down to settle into the header on
      return. Same 0.35s ease as the desktop CTA's motion family.

   It is the SAME button, not a second copy — every open/close, aria
   and panel behaviour in nav.js carries over untouched.

   The circle's translucent fill is load-bearing, not decoration: the
   bare ink bars would vanish over the blood-orange bands and the
   photo grids, and on Modes/About the burger is overridden to white,
   which would disappear the moment it floated onto a cream section.

   Everything animates via TRANSITIONS on the base state, never a
   keyframe: they run both directions, and if anything ever stops the
   animation clock the burger simply shows its resting style — it can
   never be stranded invisible or mid-flight.

   Selectors are (0,3,0) so they beat body.page-id-97/115 .hamburger
   (0,2,1) on specificity rather than source order.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Resting state: the circle is already there, just fully transparent,
     so every fade/glide runs in both directions through this one
     transition. `top` matches the desktop CTA's rise timing exactly.

     The backdrop-filter MUST start at zero-strength and ride the same
     transition as the fill: applied instantly at full strength, the
     saturate() briefly showed the raw page behind the circle boosted
     to 160% before any white had built up — over coral content that
     read as a bright coral flash on fade-in (user saw it live).
     Ramping blur+saturate in step with the fill removes the window
     where the filter runs ahead of the white. Browsers that can't
     interpolate filter lists fall back to the old instant swap —
     never worse than before. */
  .site-header__actions .hamburger {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px) saturate(100%);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    transition:
      top 0.35s var(--wp--custom--motion--ease-out),
      background-color 0.3s ease,
      backdrop-filter 0.3s ease,
      -webkit-backdrop-filter 0.3s ease,
      box-shadow 0.3s ease,
      color 0.3s ease;
  }
  /* QA finding, 2026-08 (Max): pressing OS back to a scrolled position visibly
     animated the burger UP into its risen state, instead of just being there.
     Root cause: Beats 2/3 (.kwb-nav-floating / .kwb-scrolled, below) are
     computed from window.scrollY in nav.js — correct on a genuine live scroll,
     but on arriving at a page already scrolled (any back/forward navigation,
     bfcache-restored or freshly reloaded) that computation can land a beat
     after first paint, so the burger briefly paints DOCKED, then the correct
     risen state applies and the transition above eases it up — visibly, and
     wrongly, since nothing the visitor did should have animated it.
     nav.js applies `.kwb-nav-instant` for one synchronous tick around EVERY
     "the page just became visible" moment (initial load AND `pageshow`,
     bfcache-restored or not) — suspending transitions here means whichever
     state Beats 1-3 land on is simply THERE, no animate-in, then this class is
     removed so normal scroll-driven motion is completely unaffected. (0,2,1)
     — the `html` type selector — beats the base rule above's (0,2,0) cleanly,
     no !important needed. */
  html.kwb-nav-instant .site-header__actions .hamburger {
    transition: none;
  }

  /* Beat 1 — pinned at its own measured docked position (invisible). */
  .kwb-burger-ready .site-header__actions .hamburger {
    position: fixed;
    top: var(--kwb-burger-top, 1rem);
    right: var(--kwb-burger-right, 10px);
    width: 44px;
    height: 44px;
    /* Above the .mobile-menu backdrop (900) so a tap while the menu is
       open lands on the real button and closes it, rather than being
       caught by the backdrop. Below the cookie modal + page loader. */
    z-index: 950;
  }

  /* Beat 2 — the glass circle fades in the moment scrolling begins.
     Same family as the cookie modal's liquid-glass panel, scaled
     down; the blur keeps the two ink bars legible over busy imagery
     without going to an opaque fill. */
  .kwb-nav-floating .site-header__actions .hamburger {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 10px 30px rgba(255, 54, 35, 0.16);
    color: var(--wp--custom--color--nav-ink);
  }

  /* Beat 3 — once real scrolling is under way (.kwb-scrolled), rise to
     sit tight UNDER the pinned offer strip. The strip never leaves the
     viewport now (announce-bar.css), so the rise target is the bar's
     measured height + 8px, not the raw viewport top — the old 12px
     would park the circle on top of the offer. Must come after Beat 1
     in the file — equal (0,3,0) specificity, source order decides. */
  .kwb-scrolled .site-header__actions .hamburger {
    top: calc(var(--kwb-announce-h, 2.4375rem) + 8px);
  }

  /* The menu panel follows the burger through every beat, so it always
     drops from directly beneath the circle, never from where the
     header used to be. */
  .kwb-nav-floating .mobile-menu .mobile-menu__panel {
    top: calc(var(--kwb-burger-top, 1rem) + 44px + 8px);
    max-height: calc(100vh - var(--kwb-burger-top, 1rem) - 44px - 8px - 10px);
  }
  .kwb-scrolled.kwb-nav-floating .mobile-menu .mobile-menu__panel {
    top: calc(var(--kwb-announce-h, 2.4375rem) + 8px + 44px + 8px);
    max-height: calc(100vh - var(--kwb-announce-h, 2.4375rem) - 8px - 44px - 8px - 10px);
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header__actions .hamburger { transition: none; }
  }
}

/* "Soon" badge on in-progress nav links (Tutorial, Academy). Mirrors the
   article category-label style (coral, 10% coral wash, uppercase). Pushed to
   the row's trailing edge in both the desktop dropdown and the mobile menu,
   which are flex rows. Temporary — remove when those pages go live. */
.nav-soon {
  /* Sit snug after the label. The dropdown/sublink rows are flex with a gap
     between items; pull the badge back so it hugs the text instead. Desktop
     dropdown gap is 12px → -6px leaves ~6px. */
  margin-left: -0.375rem;
  flex: 0 0 auto;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: 0.5625rem; /* 9px */
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--coral);
  background: rgba(255, 54, 35, 0.10);
  padding: 0.1875rem 0.375rem;
  border-radius: 0;
}
/* Mobile/tablet hamburger menu rows use a wider 14px gap → pull back a touch
   more so the badge hugs the label as closely as it does on desktop. */
.mobile-menu__sublink .nav-soon {
  margin-left: -0.5rem;
}