/* 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:#0d3826;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:#6fe0a4}
.sitenav .snav-links{display:flex;gap:4px;margin-left:auto;margin-right:auto}
.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:#155c40;color:#fff;padding:8px 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:#10452f;color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,69,47,.28);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:#155c40;color:#fff;padding:12px 14px;border-radius:11px;font-weight:600;font-size:14.5px;text-decoration:none}
.snav-drawer .snav-dcta:hover{background:#10452f;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:#10452f;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:#f4f5f7;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}

/* Desktop Dashboard tab (runtime-injected into .snav-links / .links).
   Hidden until auth-hydrate marks body.state-pro; drawer row is handled in
   JS at creation time. */
.snav-links .snav-dash,.links .snav-dash{display:none}
body.state-pro .snav-links .snav-dash,body.state-pro .links .snav-dash{display:inline-block}
/* Dashboard tab: signed-in users only (auth-hydrate marks body.state-pro). Hidden by default so anonymous visitors see no layout shift. */
.sitenav .snav-dash{display:none}
body.state-pro .sitenav .snav-dash{display:inline-flex}
body.state-pro .mnav-dash{display:flex!important}

/* 2026-08-15: search is icon-only at every width (the spanel dropdown
   handles input), freeing the row so the links sit centered. */
.sitenav .snav-search,nav.nav .snav-search{display:none!important}
/* 2026-08-26: companion to the rule above. The v16 duplicate-magnifier fix
   set .snav-sbtn's BASE display to none, which silently removed the search
   icon from .sitenav pages at desktop (home had no search at all). On
   .sitenav pages the icon is the ONLY search entry point, every width. */
.sitenav .snav-sbtn,nav.nav .snav-sbtn{display:inline-flex}

/* 2026-08-29: the three dropdowns share one type system. The Courses (.rn-) and
   Practice (.xn-) panels used to inherit the page body font (IBM Plex on tutorials);
   Inter everywhere now, matching the main links and the Tutorials panel. */
.sitenav .rn-drop,.sitenav .xn-drop,.sitenav .tn-drop,.rn-sheet,.xn-sheet,.tn-sheet{font-family:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}