/* Shared nav/footer chrome for every public marketing/blog page (home.php, features.php,
   pricing.php, blog.php, blog-archive.php, blog-post.php) — extracted after six near-
   identical copies quietly drifted apart (pricing.php's navbar-brand used a different
   font than home/features; features.php/blog*.php's active nav-link rendered in
   illegible black text; pricing.php had no active-state handling or Blog link at all).

   Depends on each page's own <style> having already defined, in its :root:
     --chrome-bg, --chrome-ink, --chrome-ink-muted, --chrome-border  (fixed dark chrome
       tokens, same values everywhere: #000 / #fff / rgba(255,255,255,.65) / rgba(255,255,255,.12))
     --signal, --signal-ink   (this page's accent color/its own text color)
     --font-body               (the wordmark's font)
   and, only for --border/--ink-muted/--panel-alt (the light-theme fallbacks in
   .btn-outline-ink's base rule, overridden below anyway inside nav/footer) — those three
   are optional; the nav/footer-scoped override wins over the base rule regardless.

   Load this AFTER Bootstrap's own CSS. Bootstrap's `.navbar-nav .nav-link.active` is a
   3-class compound selector; a bare `.nav-link.active{color:...}` (specificity 2 classes)
   used to lose to it and silently render the current page's own nav link in Bootstrap's
   default near-black active color -- invisible against this fixed-black navbar. Fixed
   here with !important rather than out-specificity-ing Bootstrap class-for-class, since
   that's one CSS change away from breaking again the next time Bootstrap's own selector
   gains a class. */

.navbar{background:var(--chrome-bg);border-bottom:1px solid var(--chrome-border);}
.navbar-brand{font-family:var(--font-body);font-weight:700;font-size:20px;color:var(--chrome-ink)!important;}
.navbar-brand span{color:var(--signal);}
.nav-link{color:var(--chrome-ink-muted)!important;font-size:14.5px;}
.nav-link:hover{color:var(--chrome-ink)!important;}
.nav-link.active{color:var(--chrome-ink)!important;font-weight:600;}

.btn-accent{background:var(--signal);border-color:var(--signal);color:var(--signal-ink);font-weight:600;}
.btn-accent:hover{background:color-mix(in srgb, var(--signal) 85%, black);border-color:color-mix(in srgb, var(--signal) 85%, black);color:var(--signal-ink);}
.btn-outline-ink{border-color:var(--border,var(--chrome-border));color:var(--ink,var(--chrome-ink));font-weight:600;}
.btn-outline-ink:hover{background:var(--panel-alt,rgba(255,255,255,.08));color:var(--ink,var(--chrome-ink));}
/* On the fixed-dark navbar/footer specifically, an outline button needs its own
   always-light treatment instead of following --ink/--border (which may still be dark
   text on a dark page if the visitor's OS is in light mode). */
.navbar .btn-outline-ink,footer .btn-outline-ink{border-color:var(--chrome-border);color:var(--chrome-ink);}
.navbar .btn-outline-ink:hover,footer .btn-outline-ink:hover{background:rgba(255,255,255,.08);color:var(--chrome-ink);}

footer{background:var(--chrome-bg);border-top:1px solid var(--chrome-border);}
footer .navbar-brand{color:var(--chrome-ink)!important;}
footer a{text-decoration:none;color:var(--chrome-ink-muted);}
footer a:hover{color:var(--chrome-ink);}
footer .text-muted{color:var(--chrome-ink-muted)!important;}