/* Floating pill nav (copied from the homepage inline styles) for subpages.
   EXPERIMENT 2026-08-04: persistent top nav on /learn and /stories with an
   active state on the current page's link. Delete this file + the nav markup
   on those two pages to revert to the simple logo/CTA nav in article.css. */

nav.site-nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 9px 9px 20px;
  background: #132138;
  border-radius: 50px;
  box-shadow: 0 10px 34px rgba(19,33,56,0.26);
  max-width: calc(100vw - 24px);
  border-bottom: none;
}
nav.site-nav .nav-logo {
  display: flex; align-items: center; gap: 9px;
  font-size: 18px; font-weight: 800; letter-spacing: -0.03em;
  color: #fff; text-decoration: none; white-space: nowrap;
}
nav.site-nav .nav-logo img { width: 20px; height: 27px; display: block; }
nav.site-nav .nav-menu { display: flex; align-items: center; gap: 4px; }
nav.site-nav .nav-link {
  padding: 8px 15px; border-radius: 50px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.72); text-decoration: none; white-space: nowrap;
  transition: color 140ms ease, background 140ms ease;
}
nav.site-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,0.09); }
nav.site-nav .nav-link.active {
  color: #132138; background: #fff; font-weight: 700;
}
nav.site-nav .nav-link.active:hover { color: #132138; background: rgba(255,255,255,0.92); }
nav.site-nav .nav-cta {
  margin-left: 6px;
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: #132138;
  border: none; border-radius: 50px; padding: 10px 16px 10px 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: -0.02em;
  white-space: nowrap;
}
nav.site-nav .nav-cta-label { pointer-events: none; }
nav.site-nav .nav-cta-icon { display: inline-flex; color: #132138; transition: transform 160ms ease, opacity 160ms ease; }
nav.site-nav .nav-cta-icon:hover { opacity: 0.7; transform: scale(0.92); }
nav.site-nav .nav-cta-icon svg { width: 24px; height: 24px; display: block; }
nav.site-nav .nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; background: transparent;
  color: #fff; cursor: pointer; border-radius: 50px;
}
nav.site-nav .nav-toggle:hover { background: rgba(255,255,255,0.09); }
nav.site-nav .nav-toggle svg { width: 22px; height: 22px; }

/* The fixed nav floats over content; give the page room at the top. */
body.has-float-nav main { padding-top: 200px; }

@media (max-width: 760px) {
  nav.site-nav {
    left: 12px; right: 12px; transform: none; max-width: none;
    justify-content: space-between; padding: 8px 8px 8px 18px;
  }
  nav.site-nav .nav-toggle { display: flex; }
  nav.site-nav .nav-menu {
    display: none;
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #132138; border-radius: 22px; padding: 10px;
    box-shadow: 0 14px 40px rgba(19,33,56,0.34);
  }
  nav.site-nav.open .nav-menu { display: flex; }
  nav.site-nav .nav-link { padding: 13px 16px; font-size: 15px; text-align: center; }
  nav.site-nav .nav-cta { margin: 6px 0 0; justify-content: center; padding: 13px 18px; font-size: 15px; }
}