/* css/nav.css — the one navigation skin, loaded LAST on every page (index included).
   The bar's layout lives in the base rules that css/index.css and css/site.css share
   (nav.top, .nav-in, .nav-links, .nav-trigger, .nav-drop, .burger, .nav-panel …); those
   are identical on every page. This file carries every rule that used to differ between
   the home page and the inner pages — the scrolled surface, the link colours, the demo
   button, the language menu — so the bar looks and behaves the same wherever a reader
   lands. Scrolled, the bar is night glass over a dark band and white paper over a light one
   (the .paper block below; js/nav.js decides which). Change the bar here, once. */

/* ---------- the bar at the top of the page: type floating on the hero ---------- */
nav.top {
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
nav.top .logo { color: #fff; }
nav.top .nav-links a,
nav.top .nav-trigger, nav.top:not(.scrolled) .nav-trigger,
nav.top .lang-btn { color: rgba(255,255,255,.84); }
nav.top .nav-links a:hover,
nav.top .nav-trigger:hover, nav.top:not(.scrolled) .nav-trigger:hover,
nav.top .nav-item.open .nav-trigger, nav.top:not(.scrolled) .nav-item.open .nav-trigger,
nav.top .lang-btn:hover { color: #fff; }
nav.top .burger span { background: rgba(255,255,255,.9); }

/* the demo button is brand blue in every state, on every page */
nav.top .nav-cta .btn,
nav.top.scrolled .nav-cta .btn {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 10px 24px -14px rgba(13,79,211,.9);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  --calico-halo: var(--blue);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
nav.top .nav-cta .btn:hover,
nav.top.scrolled .nav-cta .btn:hover { background: var(--dark); border-color: var(--dark); --calico-halo: var(--dark); }

/* ---------- scrolled over a dark band: one night glass bar ---------- */
nav.top.scrolled {
  background: rgba(4,16,43,.78);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: rgba(255,255,255,.12); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 12px 40px -24px rgba(2,8,26,.9);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  nav.top.scrolled { background: rgba(4,16,43,.96); }
}
nav.top.scrolled .logo { color: #fff; }
nav.top.scrolled .nav-links a,
nav.top.scrolled .nav-trigger,
nav.top.scrolled .lang-btn { color: rgba(255,255,255,.88); }
nav.top.scrolled .nav-links a:hover,
nav.top.scrolled .nav-trigger:hover,
nav.top.scrolled .nav-item.open .nav-trigger,
nav.top.scrolled .lang-btn:hover { color: #fff; }
nav.top.scrolled .burger span { background: #fff; }

/* the page you are on */
nav.top .nav-links .nav-drop a[aria-current],
nav.top .nav-flat[aria-current],
.mgroup-p a[aria-current], .mflat[aria-current] { color: #fff; }
nav.top .nav-flat[aria-current] { text-decoration: underline; text-decoration-color: rgba(255,255,255,.5);
  text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- language menu: night glass, like the dropdowns ---------- */
.lang-menu { background: rgba(6,20,50,.94); border-color: rgba(255,255,255,.16);
  box-shadow: 0 28px 64px -26px rgba(2,8,26,.92); }
.lang-menu li { color: rgba(255,255,255,.88); }
.lang-menu li:hover, .lang-menu li:focus-visible { background: rgba(255,255,255,.10); color: #fff; }
.lang-menu li[aria-selected="true"]::after { color: #7FA9F8; }

/* ---------- the open mobile panel is night, so the bar above it goes night too ---------- */
nav.top.menu-open, nav.top.menu-open.scrolled { background: rgba(4,16,43,.97); border-bottom-color: rgba(255,255,255,.12);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
nav.top.menu-open .logo, nav.top.menu-open .lang-btn { color: #fff; }
nav.top.menu-open .burger span { background: #fff; }

/* ---------- over paper: ink type and the blue mark; scrolled, a white bar ----------
   js/nav.js reads --nav-skin from the band under the middle of the bar and puts .paper on the
   bar while that band is light, scrolled or not. The map of skins lives here, next to the bar it
   drives: a new dark band skin joins the dark list; a one-off band can say so inline
   (style="--nav-skin: dark"). Since 2026-09-23 index.html is white from the hero down
   (header.hero.hero--home, section.band, footer.site.paper are light), so its bar shows ink type
   and the blue mark before any scroll; the inner pages keep their dark heroes and the white type
   above. The surface (white glass, hairline, shadow) still waits for .scrolled. */
:root { --nav-skin: light; }
header.hero, section.night, section.cta, footer.site { --nav-skin: dark; }
header.hero.hero--home, section.band, footer.site.paper { --nav-skin: light; }

/* the open mobile panel is night, so the bar above it stays night: hence :not(.menu-open) */
nav.top.scrolled.paper:not(.menu-open) {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(4,16,43,.02), 0 12px 40px -24px rgba(4,16,43,.35);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  nav.top.scrolled.paper:not(.menu-open) { background: rgba(255,255,255,.98); }
}
nav.top.paper:not(.menu-open) .logo { color: var(--blue); }          /* the blue mark, #0D4FD3 */
nav.top.paper:not(.menu-open) .nav-links a,
nav.top.paper:not(.menu-open) .nav-trigger,
nav.top.paper:not(.menu-open) .lang-btn { color: rgba(28,26,23,.86); }  /* --ink */
nav.top.paper:not(.menu-open) .nav-links a:hover,
nav.top.paper:not(.menu-open) .nav-trigger:hover,
nav.top.paper:not(.menu-open) .nav-item.open .nav-trigger,
nav.top.paper:not(.menu-open) .lang-btn:hover { color: var(--blue); }
nav.top.paper:not(.menu-open) .burger span { background: var(--ink); }

/* the page you are on */
nav.top.paper:not(.menu-open) .nav-links .nav-drop a[aria-current],
nav.top.paper:not(.menu-open) .nav-flat[aria-current] { color: var(--blue); }
nav.top.paper:not(.menu-open) .nav-flat[aria-current] { text-decoration-color: rgba(13,79,211,.45); }

/* the dropdowns hang off a white bar, so they go paper with it */
nav.top.paper:not(.menu-open) .nav-drop {
  background: rgba(255,255,255,.97); border-color: var(--line);
  box-shadow: 0 28px 64px -26px rgba(4,16,43,.38);
}
nav.top.paper:not(.menu-open) .nav-drop-title { color: var(--sub); }
nav.top.paper:not(.menu-open) .nav-links .nav-drop a { color: var(--ink); }
nav.top.paper:not(.menu-open) .nav-links .nav-drop a:hover,
nav.top.paper:not(.menu-open) .nav-links .nav-drop a:focus-visible { background: var(--light); color: var(--blue); }

/* and so does the language menu */
nav.top.paper:not(.menu-open) .lang-menu { background: rgba(255,255,255,.98); border-color: var(--line);
  box-shadow: 0 28px 64px -26px rgba(4,16,43,.38); }
nav.top.paper:not(.menu-open) .lang-menu li { color: var(--ink); }
nav.top.paper:not(.menu-open) .lang-menu li:hover,
nav.top.paper:not(.menu-open) .lang-menu li:focus-visible { background: var(--light); color: var(--blue); }
nav.top.paper:not(.menu-open) .lang-menu li[aria-selected="true"]::after { color: var(--blue); }

/* ---------- small screens ---------- */
/* logo + burger + language + demo button measure 342px, so the button ran off the
   right edge of a 320px screen (the home page never carried this rule) */
@media (max-width: 340px) {
  .nav-in { gap: 8px; }                 /* the 28px page gutter stays: the logo lines up with the copy below */
  .logo svg { height: 20px; }
  .burger { width: 30px; padding: 0 4px; }
  .lang-btn { padding: 9px 4px; }
  .nav-cta .btn { padding: 0 8px; font-size: 9.5px; letter-spacing: .01em; }
}
/* the panel starts under the 68px bar; keep it there at every phone width */
@media (max-width: 1100px) { .nav-panel { top: 68px; } }

@media (prefers-reduced-motion: reduce) {
  nav.top, nav.top .nav-cta .btn { transition: none; }
}