/* ══════════════════════════════════════════════════════════════════════════
   floom-nav.css — the mobile nav (≤900px)

   The bar and the drop-down panel are one sheet of paper. Before this the
   panel painted its own background while the bar behind it stayed
   transparent, so the hero showed through a 72px strip directly above an
   opaque menu and the two read as unrelated layers.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --fl-nav-h:    72px;
  /* The floating bar: an island 12px down, 60px tall. 12 + 60 lands its lower
     edge on exactly 72px, which is where the mega panel, the mobile panel and
     every sticky rail already expect the nav to end — so it can float without
     any of them moving. */
  /* 12 + 60 still lands the bar's lower edge on 72px, which every panel and
     sticky rail is pinned to, and both sit on the 4px grid. */
  --fl-nav-top:  12px;
  --fl-nav-pill: 60px;
  /* The shell the bar and the footer share. --fl-gutter (floom-theme.css,
     the 12-column grid's page margin) is how far their CONTENT sits from the
     viewport edge; the bar reaches 16px closer than that and pads the
     difference back, so the bar, the grid and the footer land on the same x
     at every width. The shell is the grid plus its two margins, so past
     1440 the bar and the footer stop where the content does. */
  --fl-shell-max: calc(var(--fl-grid-max) + 2 * var(--fl-gutter));
  --fl-nav-line: rgba(24,24,24,.10);  /* dark ink at low alpha, so it sits
                                            correctly on white and on canvas */
}

/* ══ the floating island ═══════════════════════════════════════════════════
   The base rule lives in each page's inline <style> as a full-width bar at
   top 0; this lifts it off the edges. Centring is done with auto margins
   against a max-width, NEVER a transform: a transform of any value makes the
   bar the containing block for its own fixed children, and the mega panel is
   one of those.
   ══════════════════════════════════════════════════════════════════════════ */
.nav{
  top: var(--fl-nav-top);
  /* The same columns every section uses: the bar reaches 16px past the
     grid on each side and .nav-inner pads that back, so the logo sits on the
     grid's first column edge and the button on its last. */
  left: 16px; right: 16px;
  height: var(--fl-nav-pill);
  max-width: calc(var(--fl-shell-max) - 32px);
  margin-inline: auto;
  border-radius: 18px;
  border-bottom: none;
}
.nav .nav-inner{ padding-inline: round(calc(var(--fl-gutter) - 16px), 4px); }
/* The CTA is a pill inside a pill: 10px of bar showing above and below it, and
   a radius that echoes the bar's own rather than fighting it. */
.nav .btn-primary,
.nav .btn-accent{
  min-height: 42px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1;
}
@media (max-width: 600px){
  .nav{ left: 12px; right: 12px; border-radius: 16px; }
  .nav .nav-inner{ padding-inline: round(calc(var(--fl-gutter) - 12px), 4px); }
}

/* ══ transparent, at every scroll position ═════════════════════════════════
   The bar never becomes a surface. It used to grow a glass pane at 40px of
   scroll — a tinted gradient, a blur, a specular arc along its top edge and a
   cast shadow — and over a dark section that read as a dark band with a
   hairline ruled across it, painted onto the very hero the bar is sitting on.

   On the current design the bar is page content at the top of the document
   (floom-apple.css makes it `position: absolute`) and leaves with the page, so
   there is nothing for a pane to separate it from. The glass went with it:
   --fl-glass / --fl-glass-fade / --fl-glass-blur and the :root.nav-dark flip
   existed only to paint this band and nothing else ever read them.

   `.scrolled` is still SET by floom-fx's stickyNav — floom-apple.css keys the
   control colours off it — it just no longer paints anything.
   ══════════════════════════════════════════════════════════════════════════ */
.nav{
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
}

/* The menu panel carries its own surface and its own shadow; the bar must not
   cast a second one across it. */
.nav.menu-open{ box-shadow: none; }
.nav.menu-open::after{ opacity: 0; }

/* ── out of the way, and back ──────────────────────────────────────────────
   Scrolling down parks the bar above the viewport; stopping brings it back.

   The resting state must be transform:NONE, not translateY(0). A transform
   of any other value — and `will-change: transform` on its own — makes the
   bar the containing block for its own fixed children, and the mega panel is
   one of those. At rest there is no transform here at all, so the panel
   positions against the viewport as it should; while the bar is away the
   panel is closed, so nothing is riding on it.

   The bar carries its own transition list rather than inheriting the page's
   `all .3s ease`, so the slide can be timed separately from the glass fade:
   away briskly, back a little slower and softer. */

.nav{
  transition:
    transform  .34s cubic-bezier(.22, 1, .36, 1),
    background .3s ease,
    box-shadow .3s ease,
    border-color .3s ease,
    -webkit-backdrop-filter .3s ease,
            backdrop-filter .3s ease;
}
.nav.nav-hidden{
  /* Far enough to clear its own top offset, or a sliver stays on screen. */
  transform: translateY(calc(-100% - var(--fl-nav-top) - 6px));
  transition-duration: .26s, .3s, .3s, .3s, .3s, .3s;
  transition-timing-function: cubic-bezier(.4, 0, 1, 1), ease, ease, ease, ease, ease;
}

@media (prefers-reduced-motion: reduce){
  /* A bar that comes and goes is itself motion. It simply stays. */
  .nav, .nav.nav-hidden{ transform: none; transition: none; }
}

/* ── the bar's foreground over dark ────────────────────────────────────────
   Smoked glass over ink paints the pane at about #312e2e, and the links are
   ink too — measured at #312e2e against #312e2e, which is a contrast ratio of
   1.0 and simply invisible. The whole foreground flips.

   rgba(250,246,241,.78) lands on #c5c5c5 over that pane: 8.2:1. The wordmark
   and the hovered link go to full white; the CTA inverts so it keeps an edge
   instead of dissolving into the ground it is sitting on. */

/* `.is-mega` joins `.on-dark` everywhere below: the open sheet is ink at 92%
   over a 55%-black scrim, so the bar is standing on a dark ground no matter
   what the page behind it was. Without it a light page kept its grey ink and
   the links read at 1.9:1 against the scrim — present, and invisible. */
.nav.on-dark .logo,
.nav.is-mega .logo,
.nav.on-dark .logo-text,
.nav.is-mega .logo-text{ color: #faf6f1; }

.nav.on-dark .nav-links a,
.nav.is-mega .nav-links a,
.nav.on-dark .nv-trigger,
.nav.is-mega .nv-trigger{ color: rgba(250,246,241,.78); }
.nav.on-dark .nav-links a:hover,
.nav.is-mega .nav-links a:hover,
.nav.on-dark .nv-trigger:hover,
.nav.is-mega .nv-trigger:hover,
.nav.on-dark .nv-trigger[aria-expanded="true"],
.nav.is-mega .nv-trigger[aria-expanded="true"]{ color: #FFFFFF; }

.nav.on-dark .nav-toggle{ color: #faf6f1; }

.nav.on-dark .btn-primary,
.nav.on-dark .btn-accent,
.nav.on-dark .fl-btn{
  background: #faf6f1;
  color: #181818;
  border-color: transparent;
}
.nav.on-dark .btn-primary:hover,
.nav.on-dark .btn-accent:hover,
.nav.on-dark .fl-btn:hover{ background: #FFFFFF; color: #181818; }

/* The switch should read as the bar passing under a section, not as a blink. */
.nav .logo, .nav .logo-text, .nav .nav-links a, .nav .nv-trigger, .nav .nav-toggle,
.nav .btn-primary, .nav .btn-accent, .nav .fl-btn{
  transition: color .28s ease, background .28s ease;
}

/* ── the bar becomes a surface while the menu is open ────────────────────── */
.nav.menu-open{
  background: var(--fl-canvas, #FFFFFF);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  border-bottom-color: transparent;
}

/* ── the panel ───────────────────────────────────────────────────────────── */
.mobile-menu{
  /* Laid out at all times and hidden with visibility, so there is a state to
     animate from — display:none has nothing to transition. */
  display: flex;
  /* An island under the floating pill, on the pill's own insets. */
  top: round(calc(var(--fl-nav-top, 12px) + var(--fl-nav-pill, 60px) + 8px), 4px);
  left: 12px; right: 12px;
  padding: 8px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  gap: 0;
  background: var(--fl-canvas, #FFFFFF);
  border-bottom: none;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5),
    0 28px 52px -26px rgba(24,24,24,.32),
    0 4px 12px -6px rgba(24,24,24,.1);

  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .24s ease,
              transform .42s var(--fl-ease, cubic-bezier(.16, 1, .3, 1)),
              visibility 0s linear .42s;
}
.mobile-menu.open{
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;          /* visibility flips immediately on open */
}

.mobile-menu a{
  display: flex;
  align-items: center;
  min-height: 52px;                      /* comfortably past the 44pt floor */
  padding: 12px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--fl-ink, #181818);
  border-bottom: 1px solid var(--fl-nav-line);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease,
              transform .44s var(--fl-ease, cubic-bezier(.16, 1, .3, 1));
}
.mobile-menu a:last-child{ border-bottom: none; }
.mobile-menu a:active{ color: var(--accent, #ff3c00); }

.mobile-menu.open a{ opacity: 1; transform: none; }
.mobile-menu.open a:nth-child(1){ transition-delay:  40ms; }
.mobile-menu.open a:nth-child(2){ transition-delay:  85ms; }
.mobile-menu.open a:nth-child(3){ transition-delay: 130ms; }
.mobile-menu.open a:nth-child(4){ transition-delay: 175ms; }
.mobile-menu.open a:nth-child(5){ transition-delay: 220ms; }
.mobile-menu.open a:nth-child(6){ transition-delay: 265ms; }

/* ── hamburger → close ───────────────────────────────────────────────────── */
.nav-toggle svg path{
  transform-box: view-box;
  transform-origin: 12px 12px;           /* centre of the 24×24 view box */
  transition: transform .38s var(--fl-ease, cubic-bezier(.16, 1, .3, 1)),
              opacity .18s ease;
}
/* Lucide's `menu` sits at y 5 / 12 / 19, so the outer bars travel 7px to meet
   in the middle before they cross. Each bar moves to the middle FIRST and
   turns there (the right-hand function applies first), so the two diagonals
   share one centre. Written the other way round each bar turned about the
   middle while still 7px off it and landed 3px from the other: an uneven,
   tilted-looking cross. The home page draws it this way already. */
.nav.menu-open .nav-toggle svg path:nth-of-type(1){ transform: rotate(45deg) translateY(7px); }
.nav.menu-open .nav-toggle svg path:nth-of-type(2){ opacity: 0; transform: scaleX(.3); }
.nav.menu-open .nav-toggle svg path:nth-of-type(3){ transform: rotate(-45deg) translateY(-7px); }

/* Above the breakpoint the panel is gone outright — it must never be reachable
   by keyboard while the full nav is showing. */
@media (min-width: 901px){
  .mobile-menu{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .mobile-menu,
  .mobile-menu a,
  .nav-toggle svg line{ transition: none !important; }
  .mobile-menu,
  .mobile-menu a{ transform: none !important; }
}