/* Coin Bank section nav — mounted verbatim from the round-3 handoff
   (design/round-3/handoff/section-navigation.css), with only the deltas
   documented in NOTE-section-nav.md applied:
   - font: site's own (Inter) instead of the handoff's Arial fallback.
   - breakpoint: 900px -> 1447px (rail needs a >=100px gutter, which only
     exists from 1448px: 24 inset + 60 rail + 16 breathing).
   - scrim: added (the handoff's compact list has no backdrop of its own).
   - yield: added — the compact pill hides while it would overlap the
     Home A hero converter card and nothing is current yet (see
     section-nav.js). An already-open list is never hidden this way.
   - page padding-bottom: reserves room so the fixed pill never sits over
     the page's last CTA once the list can no longer expand upward past it.
   Mount directly beneath body, outside transformed/overflow-hidden
   ancestors — see BaseLayout.astro, where it's a sibling of .site-frame. */
.cb-section-nav { --nav-bg:#FFFFFF; --nav-ink:#293344; --nav-muted:#5E6675; --nav-edge:#D6DBE4; --nav-focus:#14644F; position:fixed; z-index:40; right:24px; top:50%; transform:translateY(-50%); color:var(--nav-ink); font:14px/1.2 var(--font-sans, Arial, Helvetica, sans-serif); }
.cb-section-nav[data-theme="dark"] { --nav-bg:#353B47; --nav-ink:#FFFFFF; --nav-muted:#C4CAD5; --nav-edge:#626C7A; --nav-focus:#4FDFAE; }
.cb-section-nav * { box-sizing:border-box; }
.cb-section-nav__list { list-style:none; margin:0; padding:6px; width:60px; background:var(--nav-bg); border:1px solid var(--nav-edge); border-radius:30px; box-shadow:0 12px 35px #17223214; transition:width 240ms cubic-bezier(.22,1,.36,1),background 200ms ease; }
.cb-section-nav li { position:relative; margin:0; padding:0; }
.cb-section-nav a { min-height:44px; display:flex; gap:5px; align-items:center; padding:0 7px; border-radius:22px; color:var(--nav-muted); text-decoration:none; white-space:nowrap; }
.cb-section-nav__number { font-size:12px; font-variant-numeric:tabular-nums; }
.cb-section-nav__dot { flex:0 0 5px; height:5px; border-radius:50%; background:currentColor; opacity:.75; }
.cb-section-nav__label { position:absolute; right:66px; padding:10px 14px; border-radius:999px; background:var(--nav-bg); color:var(--nav-ink); border:1px solid var(--nav-edge); opacity:0; pointer-events:none; box-shadow:0 5px 20px #1722320D; }
.cb-section-nav a[aria-current="location"] { background:#4FDFAE; color:#293344; font-weight:700; }
.cb-section-nav a[aria-current="location"] .cb-section-nav__dot { background:#14644F; opacity:1; }
.cb-section-nav a[aria-current="location"] .cb-section-nav__label { opacity:1; }
.cb-section-nav:is(:hover,:focus-within) .cb-section-nav__list { width:188px; }
.cb-section-nav:is(:hover,:focus-within) .cb-section-nav__label { position:static; opacity:1; background:none; border:0; padding:0 0 0 5px; box-shadow:none; color:inherit; }
.cb-section-nav a:hover { color:var(--nav-ink); background:#808C9C1A; }
.cb-section-nav a[aria-current="location"]:hover { color:#293344; background:#72E8C0; }
.cb-section-nav a:focus-visible,.cb-section-nav__toggle:focus-visible { outline:3px solid var(--nav-focus); outline-offset:3px; }
.cb-section-nav__toggle { display:none; }
/* Use this variable in the existing page's scroll padding if it has a fixed header. */
[data-cb-section] { scroll-margin-top:var(--cb-scroll-offset,110px); }

/* Scrim behind the open compact list — not in the handoff (its list has no
   backdrop); NOTE-section-nav.md asks for one so the open list reads as a
   modal overlay over the page. Mounted right after .cb-section-nav (see
   SectionNav.astro) so the `~` selector below can react to its
   data-open, and sits just under the nav's own z-index so the opaque
   list/pill still paint on top despite the later DOM position. A click on
   the scrim isn't inside .cb-section-nav either way, so it still falls
   outside `nav.contains(event.target)` and closes via the existing
   document click handler regardless of DOM order. */
.cb-section-nav-scrim { position:fixed; inset:0; z-index:39; background:rgba(41,51,68,.4); opacity:0; pointer-events:none; transition:opacity 240ms cubic-bezier(.22,1,.36,1); }

@media(max-width:1447px),(max-height:520px) {
 .cb-section-nav { top:auto; right:max(16px,env(safe-area-inset-right)); bottom:calc(16px + var(--cb-bottom-bar,0px) + env(safe-area-inset-bottom)); transform:none; transition:opacity 240ms cubic-bezier(.22,1,.36,1); }
 .cb-section-nav__toggle { display:flex; align-items:center; gap:20px; border:1px solid var(--nav-edge); border-radius:999px; padding:0 18px; min-height:48px; background:var(--nav-bg); color:var(--nav-ink); font:700 14px/1.2 var(--font-sans, Arial, Helvetica, sans-serif); box-shadow:0 8px 28px #17223220; cursor:pointer; }
 .cb-section-nav .cb-section-nav__list { display:none; width:188px; position:absolute; bottom:60px; right:0; max-height:calc(100dvh - 160px); overflow-y:auto; border-radius:24px; }
 .cb-section-nav[data-open="true"] .cb-section-nav__list { display:block; }
 .cb-section-nav .cb-section-nav__label { position:static; opacity:1; background:none; border:0; padding:0 0 0 5px; box-shadow:none; color:inherit; }
 .cb-section-nav[data-open="true"] ~ .cb-section-nav-scrim { opacity:1; pointer-events:auto; }
 /* The pill yields to the Home A hero converter card instead of covering
    it; an already-open list overrides this (never hidden by scrolling). */
 .cb-section-nav[data-yield="true"]:not([data-open="true"]) { opacity:0; pointer-events:none; }
 /* Reserves room so the page's last CTA is never under the fixed pill.
    Targets #contact directly rather than body: the homepage has a
    footer after the contact CTA, so body's own bottom edge is well past
    it — padding there would sit below the footer and never affect the
    CTA's clearance from the pill. Measured overlap without this: the
    CTA's bottom and the pill's top overlapped by ~8px at 375px wide. */
 body:has(> .cb-section-nav) #contact { padding-bottom:80px; }
}
@media(prefers-reduced-motion:reduce) { .cb-section-nav__list, .cb-section-nav, .cb-section-nav-scrim { transition:none; } }