/* ─────────────────────────────────────────────────────────────────────
   site-chrome.css — single source for the shared header (.site-nav) and
   footer (.site-footer) styling.

   WHY: the canonical nav + footer MARKUP is injected by
   scripts/apply_site_includes.py from website/_includes/{nav,footer}.html.
   Pages that build their own CSS inline (no /index.css link) previously
   had to re-declare the chrome styles by hand, and several drifted —
   the footer markup was updated to .footer-grid/.footer-col/.footer-bot
   while their inline CSS still styled the old .foot-inner, so the footer
   rendered unstyled. This file is the one place those styles live for
   inline pages; link it once and the chrome can no longer drift.

   Pages that link /index.css already get these rules from there and do
   NOT need this file. scripts/verify_site_chrome.py enforces that every
   page can resolve the nav + footer classes from inline CSS or a linked
   stylesheet, and push_website.sh runs that check before every deploy.

   Values mirror the canonical blocks in index.css. Custom properties use
   fallbacks so the file is self-contained even on a page that forgets a
   :root token.
   ───────────────────────────────────────────────────────────────────── */

/* ---------- Navigation ---------- */
header.site-nav {
  position: sticky; top: 0; z-index: 30;
  background: var(--dark-bg, #0a1628);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.site-nav .nav-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 1.1rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.site-nav .brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--white, #fff); font-size: 1.02rem; letter-spacing: -.005em; }
.site-nav .brand-mark { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; vertical-align: middle; }
.site-nav .nav-links { display: flex; align-items: center; gap: 1.75rem; font-size: .94rem; list-style: none; }
.site-nav .nav-links a { color: var(--text-dim, #94a3b8); font-weight: 500; transition: color .15s ease; }
.site-nav .nav-links a:hover, .site-nav .nav-links a.active { color: var(--white, #fff); }
.site-nav .nav-cta {
  display: inline-flex; align-items: center;
  background: var(--white, #fff);
  color: var(--dark-bg, #0a1628) !important;
  padding: .5rem 1rem; border-radius: 8px; font-weight: 600; font-size: .9rem;
  transition: opacity .15s ease;
}
.site-nav .nav-cta:hover { opacity: .88; }
.site-nav .hamburger-toggle {
  display: none;
  background: none; border: 0; color: var(--white, #fff);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  padding: .4rem .6rem; border-radius: 6px;
}
.site-nav .hamburger-toggle:hover { background: rgba(255,255,255,.05); }
.site-nav .hamburger-toggle:focus-visible { outline: 2px solid var(--cyan, #30b8dc); outline-offset: 2px; }
.site-nav .mobile-nav { display: none; }
@media (max-width: 840px) {
  .site-nav .nav-wrap { padding: 1rem 1.25rem; }
  .site-nav .desktop-nav, .site-nav .desktop-cta { display: none; }
  .site-nav .hamburger-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav .mobile-nav[aria-hidden="false"] {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; right: 1rem; left: 1rem;
    background: var(--dark-bg, #0a1628);
    border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 10px;
    padding: .5rem; margin-top: .5rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    z-index: 1000;
  }
  .site-nav .mobile-nav a { padding: .85rem 1rem; color: var(--text-dim, #94a3b8); font-size: .98rem; font-weight: 500; border-radius: 6px; }
  .site-nav .mobile-nav a:hover, .site-nav .mobile-nav a.active { color: var(--white, #fff); background: rgba(255,255,255,.04); }
  .site-nav .mobile-nav .mobile-nav-cta { margin-top: .35rem; background: var(--white, #fff); color: var(--dark-bg, #0a1628); text-align: center; font-weight: 600; }
  .site-nav .mobile-nav .mobile-nav-cta:hover { opacity: .9; }
}

/* ---------- Footer ---------- */
footer.site-footer {
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  margin-top: 0; padding: 4rem 2rem 2.5rem;
  background: rgba(0,0,0,.18);
}
.site-footer .footer-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
}
.site-footer .footer-brand { color: var(--text-dim, #94a3b8); font-size: .9rem; max-width: 38ch; }
.site-footer .footer-brand p { margin-top: .9rem; line-height: 1.6; }
.site-footer .footer-col h4 {
  color: var(--white, #fff); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 1rem;
}
.site-footer .footer-col a { display: block; color: var(--text-dim, #94a3b8); font-size: .9rem; margin-bottom: .55rem; text-decoration: none; }
.site-footer .footer-col a:hover { color: var(--white, #fff); }
.site-footer .footer-bot {
  max-width: 1200px; margin: 3rem auto 0; padding-top: 1.75rem;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text-muted, #6889a8); font-size: .82rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
@media (max-width: 840px) { .site-footer .footer-grid { grid-template-columns: 1fr 1fr; } .site-footer .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer .footer-grid { grid-template-columns: 1fr; } }