/* =============================================================================
   Elequate — shared mobile navigation (burger + sheet)
   -----------------------------------------------------------------------------
   WHY THIS FILE EXISTS

   Every page on elequate.io hid its `.nav-links` at `max-width: 768px` and put
   NOTHING in their place. On a phone the site had no menu at all: the legal
   pages and /masterminds/ rendered a bar containing only the logo, because their
   Sign In link and CTA live INSIDE `.nav-links`. This file is the replacement —
   one burger button and one sheet, loaded by every page that hides its nav links.

   HOW IT IS SHARED

   The site has no build step (no package.json, no template engine, no include
   directive), so there is nothing to inline a partial with. Rather than paste an
   identical CSS+JS block into 18 documents and let it drift, the shared behaviour
   lives in two real files — this one and `mobile-nav.js` — that every page links.
   A `<link rel="stylesheet">` in `<head>` is render-blocking, so unlike a
   JS-injected nav there is no flash: the burger is styled before first paint.

   Load it AFTER the page's own inline `<style>` block (i.e. immediately before
   `</head>`). Several rules below intentionally override a page-level mobile
   rule at equal specificity — `.logo img { height: 36px }` supersedes the 48px
   that /funnel-assessment/ had set for itself — and the cascade decides those by
   source order.

   DESKTOP IS UNTOUCHED — BY CONSTRUCTION, NOT BY CARE

   `.nav-burger` and `.nav-sheet` are `display: none` in the base rule, so both
   elements contribute nothing to layout and nothing to the accessibility tree at
   any width. Every rule that reveals them, and every rule that changes an
   existing selector, sits inside `@media (max-width: 768px)`. The `min-width:
   769px` block at the bottom is a belt-and-braces guard: even if JS leaves the
   open class on after a resize, desktop cannot render the sheet.
   ============================================================================= */

/* Base: absent everywhere. Desktop (>= 769px) never sees either element. */
.nav-burger,
.nav-sheet {
  display: none;
}

@media (max-width: 768px) {

  /* ---------------------------------------------------------------------------
     THE BAR
     `.nav-links` is already `display: none` in each page's own stylesheet; what
     is left is logo + (optional) CTA + burger. `margin-left: auto` on the CTA
     collapses the space-between distribution into "logo left, controls right",
     which is what /platform/ had already worked out for itself.

     The logo drops 56px -> 36px and the CTA button loses 10px of horizontal
     padding and 1px of type. At 360px the old bar spent 209px of a 360px row on
     the logo alone; these two rules were already proven on /funnel-assessment/
     and never propagated.
     --------------------------------------------------------------------------- */
  .nav-container { gap: 8px; }
  .nav-cta { margin-left: auto; }
  .logo img { height: 36px; }
  .nav-cta .btn { padding: 12px 18px; font-size: 14px; white-space: nowrap; }

  /* ---------------------------------------------------------------------------
     PHONE TIER
     Adding a 44px burger to a bar that was already at its limit put it OVER.
     Measured on the homepage at 360px: 24px of nav padding each side leaves a
     312px row, and logo 129.1 + gap + CTA 157.3 + gap + burger 44 wanted 354.4 —
     so the burger's right edge landed at 378.5 and the document scrolled
     sideways. Trimming the logo to 30px (107.6) and the CTA to 13px type with
     12px of horizontal padding (136.6) brings the row to 304.2 and leaves 7.8px
     of slack, with the 44px target intact.

     430px, not 400px: it has to cover the 428/430pt Plus and Pro Max classes,
     which carry the same bar. Above it the bar already had room to spare.
     --------------------------------------------------------------------------- */
  @media (max-width: 430px) {
    .logo img { height: 30px; }
    .nav-cta .btn { padding: 11px 12px; font-size: 13px; }
  }

  /* ---------------------------------------------------------------------------
     THE BURGER
     44x44 is the WCAG 2.1 AA target size (SC 2.5.5) and Apple's HIG minimum. The
     bars are 2px so the middle one can become the crossbar of an X without the
     shape thickening.
     --------------------------------------------------------------------------- */
  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    /* Transparent-nav pages set `.nav-links a { color: var(--white) }` explicitly
       because `body` is `color: var(--text-dark)` on EVERY page, dark hero or
       not — so `currentColor` is the wrong colour here and cannot be inherited.
       White is the default because 13 of the 18 pages float the nav over the
       dark blueprint hero; the five light-nav legal pages add `.on-light`. */
    color: var(--white, #ffffff);
    -webkit-tap-highlight-color: transparent;
  }

  /* Fixed white nav bar: /dpa/, /fulfillment-policy/, /privacy-policy/, /terms/,
     /legal-disclaimers/. Same geometry, brand body-text ink. */
  .nav-burger.on-light { color: var(--text-dark, #1e3a5f); }

  .nav-burger:focus-visible {
    outline: 2px solid var(--cyan-accent, #21c0ff);
    outline-offset: 2px;
  }

  /* The middle bar is the element; the outer two are its pseudo-elements.
     `content` is deliberately NOT declared on `.nav-burger-bars` itself — on a
     real element Chrome treats a `content` declaration as content replacement,
     which suppresses that element's ::before/::after and would leave one bar. */
  .nav-burger-bars {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .nav-burger-bars::before,
  .nav-burger-bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .nav-burger-bars::before { transform: translateY(-7px); }
  .nav-burger-bars::after  { transform: translateY(7px); }

  /* ---------------------------------------------------------------------------
     THE SHEET
     Full-viewport overlay in the brand's menu-back colour: BRAND.md gives
     `--bg-secondary #0d1e36` ("Deep Water") the role "modal/menu/card backs", so
     rgba(13,30,54,0.94) IS that token at 94%. No new colour values.

     `100svh` (not 100vh) because iOS Safari reports 100vh as the LARGE viewport
     — the height the page would have if the URL bar were collapsed — which makes
     a full-height overlay taller than the screen it is covering.
     --------------------------------------------------------------------------- */
  .nav-sheet {
    display: none;
    position: fixed;
    inset: 0;
    /* Above every page's `nav { z-index: 100 }`. The sheet is a SIBLING of <nav>,
       not a child, so it is not trapped inside that stacking context. */
    z-index: 200;
    background: rgba(13, 30, 54, 0.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    /* Scroll chaining would move the page behind the overlay on iOS. */
    overscroll-behavior: contain;
  }

  .nav-sheet.is-open {
    display: flex;
    flex-direction: column;
  }

  .nav-sheet-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 16px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  .nav-sheet-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Matches `nav { padding: 20px 24px }` minus this panel's own 24px inline
       padding, so the X lands where the burger was. */
    min-height: 44px;
  }

  .nav-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    color: var(--white, #ffffff);
    -webkit-tap-highlight-color: transparent;
  }

  .nav-sheet-close:focus-visible {
    outline: 2px solid var(--cyan-accent, #21c0ff);
    outline-offset: 2px;
  }

  .nav-sheet-close svg { width: 22px; height: 22px; display: block; }

  .nav-sheet-links {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
  }

  .nav-sheet-links a {
    display: flex;
    align-items: center;
    /* 56px, comfortably past the 44px minimum, because these are the only
       navigation controls on the page. */
    min-height: 56px;
    padding: 4px 0;
    color: var(--white, #ffffff);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }

  .nav-sheet-links a:active { color: var(--cyan-accent, #21c0ff); }

  .nav-sheet-links a[aria-current='page'] { color: var(--cyan-accent, #21c0ff); }

  .nav-sheet-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: auto;
    padding: 14px 24px;
    background: var(--cyan-accent, #21c0ff);
    color: var(--white, #ffffff);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
}

/* -----------------------------------------------------------------------------
   DESKTOP GUARD
   If the viewport crosses 768px while the sheet is open, the JS closes it — but
   this makes the outcome independent of the JS running at all.
   ----------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .nav-burger,
  .nav-sheet,
  .nav-sheet.is-open { display: none !important; }
}

/* Scroll lock. Set on <html> rather than <body> so it does not fight the
   `body { overflow-x: hidden }` that most pages declare. */
html.nav-sheet-open,
html.nav-sheet-open body { overflow: hidden; }
