/* ============================================================
   BlueSystm — mobile-nav.css
   The phone navigation ("curtain"), from Design's Home.dc.html.

   LINKED AFTER EACH PAGE'S INLINE <style>, on purpose. The .navbar
   rules below are the same specificity as the page's own, so the only
   thing that decides them is source order — a link in the usual place
   (before the <style>) would lose. Keep the tag where it is.

   Pairs with assets/js/mobile-nav.js and the .nav-trigger /
   .nav-curtain markup. All motion lives here; the script only opens
   and closes.
   ============================================================ */

/* ── The trigger ─────────────────────────────────────────── */
.nav-trigger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  /* Same colour story as the desktop links: white while the bar is bare over
     the hero, ink once the pill is under it. Design had this fixed at --dark
     because the mobile bar was always frosted; it is not any more. */
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard);
}
.navbar.scrolled .nav-trigger { color: var(--dark); }
/* (0,3,0), so it wins over .navbar.scrolled .nav-trigger — the curtain behind
   it is light, so the bars are ink whatever the page was doing. */
.navbar.nav-is-open .nav-trigger { color: var(--dark); }
.nav-trigger-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 13px;
}
.nav-trigger-bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-standard),
              top var(--dur-fast) var(--ease-standard),
              bottom var(--dur-fast) var(--ease-standard);
}
.nav-trigger-bars span:first-child { top: 0; }
.nav-trigger-bars span:last-child { bottom: 0; }
.nav-trigger[aria-expanded="true"] { color: var(--dark); }
.nav-trigger[aria-expanded="true"] .nav-trigger-bars span:first-child { top: 5.75px; transform: rotate(45deg); }
.nav-trigger[aria-expanded="true"] .nav-trigger-bars span:last-child { bottom: 5.75px; transform: rotate(-45deg); }

/* ── The curtain ─────────────────────────────────────────── */
.nav-curtain {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) - 1);
  /* The same surface the bar itself uses — --frost over a 20px blur — so the
     open menu reads as the pill extended down the screen rather than a
     different material arriving. No border: the pill needs one to define its
     edge, a full-bleed curtain has no edge to define. */
  background: var(--frost);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: clip-path var(--dur-fast) var(--ease-out),
              visibility 0s linear var(--dur-fast);
}
.nav-curtain.open {
  clip-path: inset(0 0 0% 0);
  visibility: visible;
  transition: clip-path var(--dur-base) var(--ease-out), visibility 0s;
}
.nav-curtain-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: calc(84px + env(safe-area-inset-top, 0px)) var(--sp-5)
           calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
}
.nav-curtain-links a {
  display: block;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--dark);
}
.nav-curtain-links a:last-child { border-bottom: 1px solid var(--border); }
.nav-curtain-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--blue);
  border-radius: var(--r-pill);
  color: #FFFFFF;
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
/* about.html and contact.html carry a page-level `a:hover { color:
   var(--blue-hover) }` at (0,1,1), which outranks .nav-curtain-cta at
   (0,1,0) — the label would go cobalt on a cobalt fill and vanish. Two
   classes settle it. Touch has no hover, but a narrow desktop window does. */
.nav-curtain-cta:hover,
.nav-curtain-links a:hover { color: var(--dark); }
.nav-curtain-note {
  margin-top: var(--sp-4);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  /* Two centred lines with one word stranded on the second reads as a mistake.
     `balance` evens them out; browsers without it just wrap as before. */
  text-wrap: balance;
}

/* Entrances: one 55ms beat apart, in reading order. Design wrote four link
   delays for a four-link nav; the Trades page is gone, so it is three links
   and the CTA moves up to the fourth beat rather than leaving a hole. */
.nav-curtain-links a,
.nav-curtain-cta,
.nav-curtain-note {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.nav-curtain.open .nav-curtain-links a,
.nav-curtain.open .nav-curtain-cta,
.nav-curtain.open .nav-curtain-note {
  opacity: 1;
  transform: none;
}
.nav-curtain.open .nav-curtain-links a:nth-child(1) { transition-delay: 55ms; }
.nav-curtain.open .nav-curtain-links a:nth-child(2) { transition-delay: 110ms; }
.nav-curtain.open .nav-curtain-links a:nth-child(3) { transition-delay: 165ms; }
.nav-curtain.open .nav-curtain-cta,
.nav-curtain.open .nav-curtain-note { transition-delay: 220ms; }

@media (min-width: 901px) { .nav-curtain { display: none; } }

/* ── The bar's chrome inverts with the bar, at every width ───────────────
   Bare over the video hero the cobalt wordmark sits too close in tone to the
   sky, and a solid cobalt pill is the only hard edge on an otherwise weightless
   bar. Both go white while the bar has no surface, and both come back to cobalt
   as the pill materialises past 20px of scroll — one behaviour to reason about
   rather than a phone rule and a desktop rule.

   This shows on the home page only. Contact, How It Works and About ship
   `class="navbar scrolled"` in their markup and nothing ever takes it off —
   how-it-works-behaviors.js says so in as many words — so their bar is on the
   cobalt side from load, which is what keeps a white pill off a white page.

   The logo carries the SAME two filter functions in both states rather than
   `none` on one side, so the crossfade always has matching functions to
   interpolate. */
.navbar-logo img {
  filter: brightness(0) invert(1);
  transition: filter var(--dur-base) var(--ease-standard);
}
.navbar.scrolled .navbar-logo img { filter: brightness(1) invert(0); }

/* The page's own rule sets this colour with !important, so this has to as
   well — and does it from a stylesheet that is linked after the page's
   <style>, at higher specificity, so the scrolled state still outranks it. */
.navbar .navbar-cta {
  background: #FFFFFF;
  color: var(--blue) !important;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.navbar.scrolled .navbar-cta {
  background: var(--blue);
  color: #FFFFFF !important;
}
.navbar .navbar-cta:hover { background: rgba(255, 255, 255, 0.88); }
.navbar.scrolled .navbar-cta:hover { background: var(--blue-hover); }

/* ── The bar at phone widths ─────────────────────────────── */
/* The bar behaves exactly as it does on the desktop home page: bare on load,
   pill past 20px of scroll. Design had the frosted pill on from load here —
   that override is gone, so the .navbar / .navbar.scrolled rules on the page
   govern both widths and there is one behaviour to reason about, not two.
   Opening the curtain still takes the surface off: the bar is sitting on ink
   at that point and does not need one. */
@media (max-width: 900px) {
  .navbar-links,
  .navbar-cta { display: none; }

  /* Clears the notch. Everything else about the bar comes from the page. */
  .navbar { top: calc(12px + env(safe-area-inset-top, 0px)); }

  /* The logo's two states are no longer phone-only — they moved above the
     breakpoint so the bar behaves the same at both widths. What stays here is
     the curtain case, which only exists on a phone.

     Last on purpose: same specificity as the .scrolled rule it has to beat,
     so source order is what decides it. The curtain is the bar's own frosted
     glass now, so with it open the logo is cobalt whatever the page —
     including on the home hero, where the bar is otherwise bare and the logo
     white. */
  .navbar.nav-is-open .navbar-logo img { filter: brightness(1) invert(0); }

  .navbar.nav-is-open,
  .navbar.nav-is-open.scrolled {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
  }
  .nav-trigger { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-curtain { transition: visibility 0s; }
  .nav-trigger-bars span { transition: none; }
  .nav-curtain-links a,
  .nav-curtain-cta,
  .nav-curtain-note {
    transform: none;
    transition: opacity 120ms linear;
  }
  .nav-curtain.open .nav-curtain-links a,
  .nav-curtain.open .nav-curtain-cta,
  .nav-curtain.open .nav-curtain-note { transition-delay: 0s; }
}