/* Shared header + footer for every page (React homepage and static pages).
   Loaded after seo.css on static pages, so rules here win. Keep it
   class-scoped: the homepage also runs Tailwind, so no element selectors. */
:root{
  --shell-navy:#1a2744;
  --shell-blue:#2563eb;
  --shell-sky:#dbeafe;
  --shell-slate:#475569;
  --shell-muted:#64748b;
  --shell-line:#dbe3ef;
}
.site-header,.page-footer{font-family:"Source Sans 3",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(219,227,239,.85)}
.site-header-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 24px;box-sizing:border-box}
.site-brand{display:inline-flex;align-items:center;gap:12px;color:var(--shell-navy);text-decoration:none;flex-shrink:0}
.site-brand:hover{text-decoration:none}
.site-brand img{width:38px;height:38px;border-radius:50%;box-shadow:0 4px 14px rgba(15,23,42,.10);display:block}
.site-brand strong{display:block;font-size:.98rem;line-height:1.1;font-weight:700}
.site-brand small{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-muted)}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px}
.site-nav a{color:var(--shell-slate);font-size:.94rem;font-weight:600;text-decoration:none}
.site-nav a:not(.nav-cta){padding:8px 10px;border-radius:999px}
.site-nav a:hover{text-decoration:none;color:var(--shell-navy)}
.site-nav a:not(.nav-cta):hover,.site-nav a:not(.nav-cta).is-active,.site-nav a:not(.nav-cta)[aria-current="page"]{background:var(--shell-sky);color:var(--shell-navy)}
.site-nav .nav-cta{padding:10px 14px;border-radius:999px;background:var(--shell-blue);color:#fff;box-shadow:0 10px 18px rgba(37,99,235,.18)}
.site-nav .nav-cta:hover{color:#fff;background:#1d4ed8}

.page-footer{max-width:1120px;margin:0 auto;padding:24px 24px 34px;box-sizing:border-box;color:var(--shell-muted);font-size:.94rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.page-footer a{color:var(--shell-blue);text-decoration:none}
.page-footer a:hover{text-decoration:underline}
.footer-links{display:flex;flex-wrap:wrap;gap:14px}
.footer-links a{color:var(--shell-muted);font-weight:600}

@media (max-width:920px){
  .site-header-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .site-nav{justify-content:flex-start}
}
/* Phones: one scrollable row of links plus the CTA, instead of three wrapped rows. */
@media (max-width:639px){
  .site-header-inner{flex-direction:row;align-items:center;flex-wrap:wrap;padding:10px 16px;gap:8px 12px}
  .site-brand small{display:none}
  .site-brand img{width:32px;height:32px}
  .site-nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:4px;justify-content:flex-start;scrollbar-width:none;margin:0 -16px;padding:0 16px;width:calc(100% + 32px)}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{white-space:nowrap;font-size:.9rem}
  .site-nav a:not(.nav-cta){padding:6px 10px}
  /* CTA sits beside the brand on row one, outside the scrolling link row. */
  .site-header-inner{position:relative}
  .site-nav .nav-cta{position:absolute;top:10px;right:16px;width:auto;padding:6px 12px}
  .page-footer{flex-direction:column;align-items:flex-start;padding:24px 16px 34px}
}

/* Phone menu button (nav-toggle.js adds .js-nav and the button). Without JS
   the scrollable link row above still applies. */
.nav-toggle{display:none}
@media (max-width:639px){
  .js-nav .site-header-inner{flex-wrap:wrap}
  .js-nav .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;width:40px;height:40px;padding:0 9px;border:1px solid var(--shell-line);border-radius:10px;background:#fff;cursor:pointer;box-sizing:border-box}
  .js-nav .nav-toggle span{display:block;height:2px;border-radius:2px;background:var(--shell-navy);transition:transform .2s ease,opacity .2s ease}
  .js-nav .nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .js-nav .nav-open .nav-toggle span:nth-child(2){opacity:0}
  .js-nav .nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .js-nav .site-nav{display:none;order:3;width:100%;margin:0;padding:6px 0 8px;flex-direction:column;align-items:stretch;gap:2px;overflow:visible}
  .js-nav .site-header.nav-open .site-nav{display:flex}
  .js-nav .site-nav a:not(.nav-cta){padding:11px 12px;font-size:1rem;border-radius:10px}
  .js-nav .site-nav .nav-cta{position:static;margin-top:6px;padding:12px 14px;text-align:center;border-radius:12px}
}