/* ============================================================
   Site header + footer — loaded globally from app/layout.js so every
   page gets them, including the September pages that use theme.css
   rather than premium.css.
   The logo is the white version, so the header is navy once it sticks.
   ============================================================ */
:root{
  --nv-navy:#14143F; --nv-navy2:#1E1E55; --nv-coral:#FF5A6E; --nv-coral2:#FF8A6B;
  --nv-line:rgba(255,255,255,.14); --nv-mut:#A6A6CC;
}

/* ---------- HEADER ---------- */
/* Solid by default. The server renders the bar with no state class at all, so
   until nav.js runs it has to be readable on its own — a transparent default
   left the white logo and white links sitting on whatever happened to be
   behind them, which on the homepage was nothing dark. Pages whose hero slides
   under the header get .sh--top back from nav.js immediately. */
.sh{position:sticky;top:0;z-index:900;font-family:"Instrument Sans",system-ui,sans-serif;
  background:var(--nv-navy);
  transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}
.sh--top{background:transparent}
.sh--stuck{background:rgba(20,20,63,.94);backdrop-filter:saturate(1.4) blur(12px);
  box-shadow:0 10px 36px -18px rgba(0,0,0,.6)}
/* pages whose hero is NOT dark need the solid bar from the start */
.sh--solid{background:var(--nv-navy)}

.sh-in{max-width:1200px;margin:0 auto;padding:0 28px;height:72px;display:flex;align-items:center;gap:28px}
.sh-logo{display:flex;align-items:center;flex:0 0 auto}
.sh-logo img{height:30px;width:auto;display:block}

.sh-menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.sh-menu > li{list-style:none;position:relative}
.sh-menu > li > a,.sh-menu > li > button{display:flex;align-items:center;gap:6px;padding:10px 14px;
  font-size:14.5px;font-weight:500;color:#E6E6F5;text-decoration:none;background:none;border:0;
  cursor:pointer;border-radius:8px;transition:color .2s,background .2s;font-family:inherit}
.sh-menu > li > a:hover,.sh-menu > li > button:hover{color:#fff;background:rgba(255,255,255,.08)}
.sh-menu > li > button::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .25s}
.sh-menu > li[data-open="1"] > button::after{transform:rotate(-135deg) translateY(1px)}

/* dropdown */
.sh-drop{position:absolute;top:calc(100% + 10px);left:0;min-width:270px;background:#fff;
  border:1px solid #E8E8F2;border-radius:14px;padding:10px;margin:0;
  box-shadow:0 28px 70px -30px rgba(20,20,63,.5);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s,transform .22s,visibility .22s}
.sh-menu > li[data-open="1"] .sh-drop,
.sh-menu > li:hover .sh-drop{opacity:1;visibility:visible;transform:none}
.sh-drop li{list-style:none}
.sh-drop a{display:block;padding:10px 14px;border-radius:9px;font-size:14.5px;color:#2A2A45;
  text-decoration:none;transition:background .18s,color .18s}
.sh-drop a:hover{background:#F4F4FB;color:var(--nv-navy)}
.sh-drop a b{display:block;font-weight:600;font-size:14.5px}
.sh-drop a span{display:block;font-size:12.5px;color:#7A7A9C;margin-top:1px}

/* min-width:0 so a flex child can be squeezed instead of forcing the bar wider
   than the page — without it the CTA group pushed the header past the viewport
   and gave the whole site a horizontal scrollbar */
.sh-cta{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0}
.sh-tel{font-size:14.5px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;
  padding:9px 14px;border-radius:99px;border:1px solid var(--nv-line);transition:background .2s}
.sh-tel:hover{background:rgba(255,255,255,.1)}
.sh-btn{background:linear-gradient(94deg,var(--nv-coral),var(--nv-coral2));color:#fff;
  font-size:14.5px;font-weight:650;padding:11px 20px;border-radius:99px;text-decoration:none;
  white-space:nowrap;box-shadow:0 12px 28px -12px rgba(255,90,110,.7);transition:transform .22s}
.sh-btn:hover{transform:translateY(-1px)}

/* burger */
.sh-burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px;
  border-radius:9px}
.sh-burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;margin:5px 0;
  transition:transform .28s,opacity .22s}
.sh[data-nav="1"] .sh-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sh[data-nav="1"] .sh-burger span:nth-child(2){opacity:0}
.sh[data-nav="1"] .sh-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1380px){
  .sh-in{height:64px;padding:0 20px;gap:14px}
  .sh-burger{display:block}
  .sh-cta .sh-tel{display:none}
  .sh-menu{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--nv-navy);padding:14px 20px 26px;margin:0;max-height:calc(100dvh - 64px);
    overflow-y:auto;transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .25s,transform .25s,visibility .25s;border-top:1px solid var(--nv-line)}
  .sh[data-nav="1"] .sh-menu{opacity:1;visibility:visible;transform:none}
  .sh-menu > li > a,.sh-menu > li > button{width:100%;justify-content:space-between;padding:14px 4px;
    font-size:16px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0}
  .sh-drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:transparent;padding:0 0 8px;display:none}
  .sh-menu > li[data-open="1"] .sh-drop{display:block}
  .sh-menu > li:hover .sh-drop{display:none}
  .sh-menu > li[data-open="1"]:hover .sh-drop{display:block}
  .sh-drop a{color:#C9C9E4;padding:11px 14px}
  .sh-drop a:hover{background:rgba(255,255,255,.07);color:#fff}
  .sh-drop a span{color:#8A8AB8}
}

/* the hero sits under a transparent header, so pull it up */
.ee.hero{margin-top:-72px;padding-top:72px}
@media(max-width:1380px){.ee.hero{margin-top:-64px;padding-top:64px}}

/* ---------- FOOTER ---------- */
.sf{background:var(--nv-navy);color:#C9C9E4;font-family:"Instrument Sans",system-ui,sans-serif;
  padding:72px 0 0;margin-top:0}
.sf-in{max-width:1200px;margin:0 auto;padding:0 28px}
/* brand column plus four link columns; the gap tightens because five columns
   at 44px apart start wrapping on a 1280px laptop */
.sf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:52px}
.sf-brand img{height:30px;width:auto;margin-bottom:18px;display:block}
.sf-brand p{font-size:14.5px;line-height:1.7;color:var(--nv-mut);margin:0 0 20px;max-width:34ch}
.sf-nap{font-size:14.5px;line-height:1.8;color:var(--nv-mut);margin:0}
.sf-nap a{color:#fff;text-decoration:none;font-weight:600}
.sf-nap a:hover{color:var(--nv-coral)}
.sf h3{font-family:"Bricolage Grotesque","Instrument Sans",system-ui;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 18px;font-weight:700}
.sf ul{margin:0;padding:0}
.sf li{list-style:none;margin-bottom:11px}
.sf li a{color:var(--nv-mut);text-decoration:none;font-size:14.5px;transition:color .2s}
.sf li a:hover{color:#fff}
.sf-social{display:flex;gap:10px;margin-top:22px}
.sf-social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--nv-line);
  display:grid;place-items:center;color:#C9C9E4;transition:background .2s,color .2s,transform .2s}
.sf-social a:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-2px)}
.sf-social svg{width:17px;height:17px;fill:currentColor}
.sf-bottom{border-top:1px solid var(--nv-line);padding:22px 0 28px;display:flex;
  justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:13.5px;color:#8A8AB8}
.sf-bottom a{color:#8A8AB8;text-decoration:none}
.sf-bottom a:hover{color:#fff}
.sf-bottom nav{display:flex;gap:20px;flex-wrap:wrap}

@media(max-width:900px){
  .sf-grid{grid-template-columns:1fr 1fr;gap:34px}
  .sf-brand{grid-column:1 / -1}
}
@media(max-width:560px){
  .sf{padding-top:52px}
  .sf-grid{grid-template-columns:1fr}
  .sf-bottom{flex-direction:column;align-items:flex-start}
}

/* On a narrow phone the logo, the burger and a full-width "Free diagnosis"
   button do not fit on one line, and the overflow becomes a horizontal
   scrollbar on every page. Shrink the button rather than drop it — it is the
   only call to action in the header once the menu is behind the burger. */
@media(max-width:430px){
  .sh-in{padding:0 14px;gap:10px}
  .sh-logo img{height:26px}
  .sh-btn{padding:9px 13px;font-size:13px;box-shadow:none}
  .sh-burger{padding:8px}
}
@media(max-width:350px){
  .sh-btn{display:none}
}

/* Last-resort guard. Every known cause above is fixed, but a header that
   overflows puts a scrollbar under every page on the site, so clip rather than
   scroll if anything new ever widens it. clip, not hidden: hidden on a sticky
   element creates a scroll container and breaks position:sticky. */
.sh{max-width:100%;overflow-x:clip}