/* Shared header + footer chrome — single source of truth for the nav and footer.
   Loaded AFTER each page's stylesheet (see includes/head.php) so these rules win.
   Change the nav/footer look here once and it applies to every page. */

/* Brand typeface (obs. 1 + 13): the pages were on the Segoe UI placeholder; production
   uses Inter. Overriding --sans applies it site-wide through var(--sans). */
:root { --sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; }

/* Reserve the scrollbar gutter on every page so the centered header doesn't shift
   between short pages (no scrollbar) and tall ones (scrollbar). */
html { scrollbar-gutter: stable; }
.nav, .footer { font-family:var(--sans); }

/* Sticky header — identical on EVERY page: pinned on scroll, one fixed height,
   and a single full-width navy accent line beneath it.
   Why this lives here and nowhere else: each per-page stylesheet defined its own
   `.nav { border-bottom:3px solid navy }` (1120px-wide, centered) while the home
   page had none — so the blue line's length changed from page to page. We define
   the accent ONCE, on the full-width .site-header, and neutralize every per-page
   nav border so the line is the same width/height/length everywhere. */
.site-header { position:sticky; top:0; z-index:200; background:var(--paper); border-bottom:3px solid var(--navy); }
.site-header .nav { border-bottom:0 !important; max-width:1120px; margin:0 auto; padding:20px 24px; }
/* Keep the nav on one row everywhere and identical page to page. Per-page CSS had
   drifted (who-we-help.css uses different tokens, a wider --maxw, and its own .cta
   sizing), which made its nav items wrap. Pin the layout essentials here so every
   header lays out the same regardless of which page stylesheet loaded. */
.site-header .navcta { padding:9px 18px; }
.site-header .navlinks { gap:26px; align-items:center; flex-wrap:nowrap; }
.site-header .navlinks > a, .site-header .navlinks .dropdown > a { white-space:nowrap; }
/* Logo light/dark switch — the nav ships BOTH a light and a dark logo image and
   hides one by theme. who-we-help.css was missing this rule, so both logos showed
   at once, doubling the logo width and shoving the whole nav (and its blue line)
   right. Own it here so every header shows exactly one logo, same width everywhere. */
.site-header .logo .logo-dark { display:none; }
@media (prefers-color-scheme:dark){ .site-header .logo .logo-light{ display:none; } .site-header .logo .logo-dark{ display:block; } }
:root[data-theme="dark"] .site-header .logo .logo-light{ display:none; } :root[data-theme="dark"] .site-header .logo .logo-dark{ display:block; }
:root[data-theme="light"] .site-header .logo .logo-light{ display:block; } :root[data-theme="light"] .site-header .logo .logo-dark{ display:none; }

/* Mobile menu (≤820px): center every item and float "Request a Demo" to the top
   (Rock, 2026-08-07). The per-page media blocks left-aligned the items with an
   uneven indent on the dropdown sub-links; own the mobile layout here so it's
   centered and identical on every page. */
@media (max-width:820px){
  /* Cap the open menu to the space under the header and let it scroll with a finger.
     It's absolutely positioned under the sticky header, so a menu taller than the
     screen was unreachable at the bottom (Rock, 2026-08-07). ~120px = header height. */
  .site-header .navlinks { text-align:center; max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .site-header .navlinks > a:not(.cta),
  .site-header .navlinks .dropdown > a,
  .site-header .navlinks .dropdown-menu a { text-align:center; padding-left:24px; padding-right:24px; }
  .site-header .navlinks .cta { order:-1; align-self:center; margin:10px auto 16px; }
}

/* Footer — single source of truth, identical on every page (Rock, 2026-08-07).
   The footer markup is shared (includes/footer.php) but its styling had been copied
   into all ~24 per-page stylesheets, and the copies drifted (subpages lost the
   max-width + centering the home page uses). Rather than police 24 copies, chrome.css
   now defines the WHOLE footer look here; loaded last, it wins over any per-page copy
   at equal specificity, so every footer matches the home page exactly and new pages
   need no footer CSS of their own. Mirrors how .site-header owns the header. */
.footer { background:var(--paper-2); border-top:1px solid var(--line); padding:48px 24px 24px; }
.footer .cols { display:grid; grid-template-columns:repeat(5,1fr); gap:24px; max-width:1120px; margin:0 auto; }
@media (max-width:860px){ .footer .cols{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .footer .cols{ grid-template-columns:1fr; } }
.footer h4 { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:0 0 12px; }
.footer a { display:block; color:var(--ink); text-decoration:none; font-size:14px; margin-bottom:8px; }
.footer .newsletter { display:flex; gap:0; margin:36px auto 0; max-width:420px; border:1px solid var(--line); }
.footer .newsletter input { flex:1; border:0; padding:12px 14px; font-size:14px; background:var(--card); color:var(--ink); }
.footer .newsletter button { border:0; background:var(--teal); color:#fff; padding:12px 18px; font-weight:700; font-size:13.5px; cursor:pointer; }
.footer .bottom { display:flex; justify-content:space-between; align-items:center; max-width:1120px; margin:36px auto 0; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); flex-wrap:wrap; gap:10px; }

/* Hide the reCAPTCHA badge/branding on the contact form + newsletter modal (obs.) */
.grecaptcha-badge { visibility:hidden !important; }
.hs-recaptcha, .hs_recaptcha, .legal-consent-container .hs-richtext:has(a[href*="recaptcha"]) { display:none !important; }

/* Newsletter -> HubSpot modal (obs. 15) */
.newsletter button { cursor:pointer; }
.nl-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.nl-modal[hidden] { display:none; }
.nl-modal-backdrop { position:absolute; inset:0; background:rgba(8,40,104,.55); }
.nl-modal-card { position:relative; background:var(--card); max-width:520px; width:100%; max-height:90vh; overflow:auto; padding:0; box-shadow:0 24px 70px rgba(8,40,104,.4); }
/* Branded modal header: dark-green bar with the white logo + a white close X (Rock, 2026-08-07) */
.nl-modal-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--teal); padding:16px 20px; }
.nl-modal-logo { height:34px; width:auto; display:block; }
.nl-modal-body { padding:26px 30px 30px; }
.nl-modal-card h3 { margin:0 0 18px; font-size:20px; font-weight:800; color:var(--ink); }
.nl-modal-x { background:none; border:0; font-size:28px; line-height:1; color:#fff; cursor:pointer; padding:0; }

/* Header nav links: uppercase, a little larger, tracked (obs. 1) */
.nav .navlinks > a:not(.cta),
.nav .navlinks .dropdown > a {
  text-transform:uppercase;
  font-size:15px;
  font-weight:700;
  letter-spacing:.05em;
}