/* ============================================================
   SITE HEADER — canonical navigation shared across all pages
   Matches index.html master styling (navy + cream palette)
   ============================================================ */

:root{
  --sh-navy:#1E3A5F;
  --sh-navy-dark:#162D4A;
  --sh-navy-deep:#0F2237;
  --sh-navy-glow:rgba(22,52,90,.08);
  --sh-dark:#1c1917;
  --sh-text:#44403c;
  --sh-text-light:#78716c;
  --sh-bg:#fdfcf9;
  --sh-bg-alt:#f8f7f3;
  --sh-border:rgba(22,52,90,.08);
  --sh-shadow-sm:0 1px 3px rgba(28,25,23,.06);
  --sh-shadow:0 2px 8px rgba(28,25,23,.06),0 1px 3px rgba(28,25,23,.04);
  --sh-shadow-lg:0 20px 48px rgba(28,25,23,.1),0 8px 16px rgba(28,25,23,.06);
  --sh-shadow-navy:0 8px 32px rgba(22,52,90,.18);
}

/* reset scoped to header */
.site-nav,.site-nav *,.site-nav *::before,.site-nav *::after,
.site-mobile-menu,.site-mobile-menu *,.site-mobile-menu *::before,.site-mobile-menu *::after{
  box-sizing:border-box;
}

/* push-down spacer so content never sits under fixed nav */
body.has-site-nav{padding-top:64px}

/* NAV BAR */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(253,252,249,.93);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid rgba(22,52,90,.08);
  transition:box-shadow .3s;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.site-nav.scrolled{box-shadow:0 2px 20px rgba(28,25,23,.06),0 0 40px rgba(22,52,90,.04)}
.site-nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;max-width:1160px;margin:0 auto;padding:0 24px;gap:16px;
}

/* LOGO */
.site-nav-logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  color:inherit;flex-shrink:0;
}
.site-nav-logo svg{width:36px;height:36px;flex-shrink:0}
.site-nav-logo-text{
  font-weight:800;font-size:.95rem;color:var(--sh-dark);line-height:1.2;
  white-space:nowrap;
}

/* LINKS */
.site-nav-links{display:flex;align-items:center;gap:2px}
.site-nav-links>a{
  padding:8px 14px;color:var(--sh-text);text-decoration:none;
  font-size:.875rem;font-weight:500;border-radius:8px;
  transition:color .2s,background .2s;cursor:pointer;
  background:none;border:none;font-family:inherit;
  white-space:nowrap;
}
.site-nav-links>a:hover{color:var(--sh-navy);background:var(--sh-navy-glow)}
.site-nav-links>a.active{color:var(--sh-navy);background:var(--sh-navy-glow)}

/* CTA + MENU BUTTON */
.site-nav-cta{display:flex;gap:8px;align-items:center}
.site-menu-btn{
  display:none;background:none;border:none;cursor:pointer;
  color:var(--sh-dark);padding:6px;border-radius:6px;
}
.site-menu-btn:hover{background:var(--sh-bg-alt)}
.site-menu-btn svg{width:24px;height:24px}

/* MOBILE MENU */
.site-mobile-menu{
  display:none;position:fixed;top:64px;left:0;right:0;bottom:0;
  background:rgba(255,251,245,.98);z-index:999;
  padding:24px;overflow-y:auto;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.site-mobile-menu.open{transform:translateX(0);display:block}
.site-mobile-menu a{
  display:block;padding:14px 0;color:var(--sh-dark);
  text-decoration:none;font-size:1.05rem;font-weight:600;
  border-bottom:1px solid var(--sh-border);
}
.site-mobile-menu a.active{color:var(--sh-navy)}
.site-mobile-menu-cta{
  padding-top:20px;display:flex;flex-direction:column;gap:10px;
}
.site-mobile-menu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:10px;font-weight:600;font-size:.9rem;
  text-decoration:none;transition:all .25s;
}
.site-mobile-menu-btn.primary{
  background:linear-gradient(160deg,var(--sh-navy),var(--sh-navy-dark));
  color:#fff;box-shadow:0 2px 8px rgba(22,52,90,.15);
}
.site-mobile-menu-btn.primary:hover{
  background:linear-gradient(160deg,var(--sh-navy-dark),var(--sh-navy-deep));
}
.site-mobile-menu-btn.wa{
  background:#fff;color:#128C7E;border:1.5px solid #25D366;
}

/* RESPONSIVE */
@media (max-width: 960px){
  .site-nav-links{display:none}
  .site-nav-cta{display:none}
  .site-menu-btn{display:flex;align-items:center;justify-content:center}
}
@media (max-width: 480px){
  .site-nav-inner{padding:0 16px}
  .site-nav-logo-text{font-size:.85rem}
}

/* ensure nav sits above legacy/page content */
header.topbar,header.topbar *{display:none !important}