/* site-nav.css - THE sitewide navbar (owner rule 2026-07-12: one common navbar).
   Canonical design = the /roadmap/ page .nav (www/roadmap-f2.css). Values are
   inlined verbatim from roadmap-f2.css so pages outside the roadmap design
   system render pixel-identically. Scoped under .sitenav so it never collides
   with legacy .nav / .masthead rules still present on older pages.
   KEEP IN SYNC with roadmap-f2.css .nav (the roadmap family keeps its own
   markup + rules; this file replicates them for every other page family).
   Companion: www/site-nav.js (mobile drawer for pages without their own). */

.sitenav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb;font-family:Inter,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
.sitenav *,.sitenav *::before,.sitenav *::after{box-sizing:border-box}
.sitenav .snav-wrap{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:20px;height:62px;flex-wrap:nowrap;min-width:0}
.sitenav .snav-brand{display:inline-flex;align-items:center;gap:10px;font-family:'Inter Tight',Inter,sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;color:#14161b;white-space:nowrap;flex:none;text-decoration:none}
.sitenav .snav-brand:hover,.sitenav .snav-brand:focus{color:#14161b;text-decoration:none}
.sitenav .snav-brand span{white-space:nowrap}
.sitenav .snav-brand .co{color:#868b94}
.sitenav .brand-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#16233a;color:#fff;font-family:'Inter Tight',Inter,sans-serif;font-weight:700;font-size:18px;line-height:1;letter-spacing:-.03em;flex:none}
.sitenav .brand-mark::after{content:"";position:absolute;right:6px;bottom:6px;width:5px;height:5px;border-radius:50%;background:#1f9d5b}
.sitenav .snav-links{display:flex;gap:4px;margin-left:8px}
.sitenav .snav-links a{padding:8px 12px;border-radius:9px;font-weight:600;font-size:14.5px;color:#4b5058;text-decoration:none;transition:background .15s,color .15s}
.sitenav .snav-links a:hover{background:#f1f3f6;color:#14161b;text-decoration:none}
.sitenav .snav-links a.on{color:#14161b}
.sitenav .snav-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none;white-space:nowrap}
.sitenav .snav-btn{display:inline-flex;align-items:center;gap:6px;background:#14161b;color:#fff;padding:9px 15px;border-radius:11px;font-weight:600;font-size:14px;white-space:nowrap;flex:none;text-decoration:none;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .25s cubic-bezier(.2,.7,.3,1),background .15s}
.sitenav .snav-btn:hover{background:#000;color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(20,23,28,.18);text-decoration:none}
.sitenav .snav-btn:link,.sitenav .snav-btn:visited,.sitenav .snav-btn:focus{color:#fff}
.sitenav .masthead-auth-link{font-size:14px;font-weight:600;color:#14161b;border-bottom:2px solid #e2e5ea;padding-bottom:1px;text-decoration:none}
.sitenav .masthead-auth-link:hover{border-color:#14161b;color:#14161b;text-decoration:none}
.sitenav .auth-anon{display:none;align-items:center}
body.state-anon .sitenav .auth-anon{display:inline-flex}
.sitenav .snav-links a{white-space:nowrap}
.sitenav .ex-caret,.mobile-sidebar-panel .ex-caret,.snav-drawer .ex-caret{display:inline-block;width:14px;height:14px;margin-left:5px;font-size:0;line-height:0;position:relative;vertical-align:-2px;border:1.2px solid currentColor;border-radius:4px;opacity:.62;transition:transform .2s,opacity .15s}
/* drawer rows: flex so the caret pill centers on the text line (inline-block
   alignment drifts ~9px low inside the drawer's line boxes; the .snav-dlink
   base rule further down is flex for the same reason) */
.mobile-sidebar-panel .mnav-link{display:flex;align-items:center}
.sitenav .ex-caret::before,.mobile-sidebar-panel .ex-caret::before,.snav-drawer .ex-caret::before{content:'';position:absolute;left:3.4px;top:2.9px;width:5px;height:5px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg)}
.sitenav .snav-links a:hover .ex-caret{opacity:1}

/* Site search (owner rule 2026-07-13: search bar back, universally).
   Desktop: compact inline field. Mobile: one magnifier icon; tapping it opens
   a slide-down row under the navbar (site-nav.js) - minimal, uncluttered. */
.snav-search{display:none;align-items:center;position:relative}
.snav-search .snav-sicon{position:absolute;left:10px;color:#868b94;pointer-events:none;display:block}
.snav-search input{width:148px;height:36px;padding:0 10px 0 31px;border:1px solid #e2e5ea;border-radius:10px;background:#fff;font:500 13.5px Inter,-apple-system,sans-serif;color:#14161b;transition:width .18s,border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.snav-search input::placeholder{color:#9ba0a8}
.snav-search input:focus{outline:none;border-color:#b9bdc4;width:190px;box-shadow:0 0 0 3px rgba(20,22,27,.05)}
.snav-sbtn{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:none;background:none;border:1px solid #e2e5ea;border-radius:10px;padding:0;color:#14161b;cursor:pointer}
.snav-sbtn:hover{background:#f1f3f6}
.snav-sbtn svg{display:block}
@media(min-width:768px){.snav-search{display:inline-flex}}
@media(max-width:767px){.snav-sbtn{display:inline-flex}}
.snav-spanel{position:absolute;top:100%;left:0;right:0;background:#fdfdfe;border-bottom:1px solid #e5e7eb;padding:10px 14px;display:none;z-index:49;box-shadow:0 14px 28px -18px rgba(20,23,28,.25)}
.snav-spanel.open{display:block}
.snav-spanel form{position:relative;display:flex;margin:0}
.snav-spanel .snav-sicon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#868b94;pointer-events:none}
.snav-spanel input{flex:1;width:100%;height:42px;padding:0 12px 0 36px;border:1px solid #e2e5ea;border-radius:11px;background:#fff;font:500 15px Inter,-apple-system,sans-serif;color:#14161b;-webkit-appearance:none;appearance:none}
.snav-spanel input:focus{outline:none;border-color:#b9bdc4}
/* Small screens: keep the bar minimal - burger, brand, CTA, search icon,
   avatar; the Sign in text link moves into the drawer. */
@media(max-width:480px){body.state-anon .sitenav .auth-anon,body.state-anon nav.nav .auth-anon,.sitenav .auth-anon,nav.nav .auth-anon{display:none}.sitenav .snav-right,nav.nav .right{gap:8px}
/* signed in, the Get-certified pill would push the avatar past the right edge;
   the CTA stays reachable in the drawer, the avatar wins the bar */
body.state-pro .sitenav .snav-btn{display:none}}
@media(max-width:430px){.snav-sbtn{width:34px;height:34px}}

/* Burger: hidden on desktop; shown on mobile where the nav links collapse.
   Unscoped (.snav-burger is a unique new class) so the roadmap family's
   existing .nav markup can adopt it too. Pages with their own drawer keep
   their existing button id/onclick and just add this class for the look. */
.snav-burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:none;background:none;border:1px solid #e2e5ea;border-radius:10px;padding:0;color:#14161b;cursor:pointer}
.snav-burger:hover{background:#f1f3f6}
.snav-burger svg{display:block}

@media(max-width:767px){
  .sitenav .snav-links{display:none}
  /* Align the roadmap-family links breakpoint (760px in roadmap-f2.css) to
     the sitewide 767px so the burger and links never show together. */
  nav.nav .links{display:none}
  .snav-burger{display:inline-flex}
}
@media(max-width:560px){.sitenav .snav-wrap{gap:12px;padding-left:16px;padding-right:16px}.sitenav .snav-brand{white-space:nowrap}}
@media(max-width:430px){.sitenav .snav-wrap{gap:8px;padding-left:12px;padding-right:12px}.sitenav .snav-brand{font-size:16px;gap:8px}.sitenav .brand-mark{width:26px;height:26px;font-size:15px}.sitenav .snav-btn{padding:8px 12px;font-size:13px}.sitenav .snav-btn .a{display:none}}
@media(max-width:360px){.sitenav .snav-wrap{gap:6px;padding-left:10px;padding-right:10px}.sitenav .snav-brand{font-size:15px}.sitenav .snav-btn{padding:7px 10px;font-size:12.5px}}

/* Generic mobile nav drawer (site-nav.js) for pages without their own
   sidebar drawer: roadmap family, standalone pages, index/jel pages. */
.snav-drawer{position:fixed;inset:0;z-index:90;display:none}
.snav-drawer.open{display:block}
.snav-drawer .snav-scrim{position:absolute;inset:0;background:rgba(20,22,27,.44)}
.snav-drawer .snav-panel{position:absolute;top:0;left:0;bottom:0;width:82%;max-width:320px;background:#fff;box-shadow:0 0 44px rgba(13,20,38,.35);padding:18px 18px 24px;overflow-y:auto;font-family:Inter,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
.snav-drawer .snav-close{position:absolute;top:10px;right:12px;width:36px;height:36px;background:none;border:0;font-size:26px;line-height:1;color:#4b5058;cursor:pointer}
.snav-drawer .snav-dtitle{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#868b94;margin:6px 0 10px}
.snav-drawer .snav-dlink{display:flex;align-items:center;padding:11px 10px;border-radius:9px;font-weight:600;font-size:15.5px;color:#14161b;text-decoration:none}
.snav-drawer .snav-dlink:hover{background:#f1f3f6;text-decoration:none;color:#14161b}
.snav-drawer .snav-dcta{display:block;text-align:center;margin-top:14px;background:#14161b;color:#fff;padding:12px 14px;border-radius:11px;font-weight:600;font-size:14.5px;text-decoration:none}
.snav-drawer .snav-dcta:hover{background:#000;color:#fff;text-decoration:none}
.snav-drawer .snav-dsignin{display:block;text-align:center;margin-top:12px;font-weight:600;font-size:14px;color:#14161b;text-decoration:none}
html.snav-lock,html.snav-lock body{overflow:hidden}

/* Dark mode (tutorial template pages support html.dark). */
html.dark .sitenav{background:#0e0f12;border-bottom-color:#262a31}
html.dark .sitenav .snav-brand{color:#e8eaee}
html.dark .sitenav .snav-brand .co{color:#6e7382}
html.dark .sitenav .brand-mark{background:#1b2942;color:#fff}
html.dark .sitenav .snav-links a{color:#b0b5bf}
html.dark .sitenav .snav-links a:hover{background:#1a1d22;color:#e8eaee}
html.dark .sitenav .snav-links a.on{color:#e8eaee}
html.dark .sitenav .snav-btn{background:#e8eaee;color:#12141a}
html.dark .sitenav .snav-btn:hover{background:#fff;color:#12141a}
html.dark .sitenav .snav-btn:link,html.dark .sitenav .snav-btn:visited,html.dark .sitenav .snav-btn:focus{color:#12141a}
html.dark .sitenav .masthead-auth-link{color:#c3cad9;border-bottom-color:#2a2f3a}
html.dark .sitenav .masthead-auth-link:hover{border-color:#c3cad9;color:#e8eaee}
html.dark .sitenav .snav-burger{border-color:#262a31;color:#c3cad9}
html.dark .sitenav .snav-burger:hover{background:#1a1d22}
html.dark .snav-drawer .snav-panel{background:#101216}
html.dark .snav-drawer .snav-dlink{color:#e8eaee}
html.dark .snav-drawer .snav-dlink:hover{background:#1a1d22}
html.dark .snav-search input,html.dark .snav-spanel input{background:#14161a;border-color:#262a31;color:#e8eaee}
html.dark .snav-search input:focus,html.dark .snav-spanel input:focus{border-color:#3a4150}
html.dark .snav-sbtn{border-color:#262a31;color:#c3cad9}
html.dark .snav-sbtn:hover{background:#1a1d22}
html.dark .snav-spanel{background:#101216;border-bottom-color:#262a31}