/* ============================================================
   studentvisahealthinsurancespain.com — SITE CHROME
   Header / nav / footer. Shared by all pages.
   Ported from the My Spanish DNV pattern, reskinned to SVHIS tokens.

   Namespaced `site-` throughout: page fragments are frozen and style
   no bare header/nav/footer selectors and no .site-* classes, so this
   file cannot collide with them. Verified before writing.
   ============================================================ */

/* Base reset. Owner report 24 Aug 2026: pages whose inline styles carry no
   reset (the four legal pages) showed the hero and footer 8px short of the
   viewport on both sides — the browser's default body margin. Chrome is on
   every page, so chrome owns the reset. */
html,body{margin:0;padding:0}

:root{
  --blue:#0079C8;
  --navy:#001846;
  --green:#1B883C;
  --ink:#1a2233;
  --muted:#5b6577;
  --line:#e3e8ef;
  --grey:#f5f7fa;
  --wrap:1400px;
  --hdr-h:74px;
  /* SHI's primary-CTA pink. Adopted deliberately for button parity with
     spanish-healthinsurance.com — the quote button there is #D02670 with a navy
     hover. Not a page-content colour; used only for the primary CTA. */
  --cta:#D02670;
  --cta-hover:#001846;
}

/* No horizontal overflow anywhere — hard requirement. */
html,body{max-width:100%;overflow-x:clip}

/* Explicit light ground. Without this the page background is transparent, so a
   visitor with prefers-color-scheme: dark gets the browser's dark canvas behind
   our navy text — the H1 and body copy render almost invisible. This site has a
   single light palette; `color-scheme: only light` also stops the UA
   dark-ifying form controls, scrollbars and autofill against it. */
:root{color-scheme:only light}
html{background:#fff}
body{background:#fff;color:var(--ink)}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:900;
  background:#fff;border-bottom:1px solid var(--line);
  font-family:Montserrat,system-ui,sans-serif;
}
.site-nav{
  max-width:var(--wrap);margin:0 auto;
  min-height:var(--hdr-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:14px 24px;
}
.site-header{border-bottom:1px solid #e4e8ee}
/* CTA cluster sits hard right, SHI layout */
.site-actions{display:flex;gap:10px;align-items:center;flex-shrink:0}
.arr{display:inline-block;transition:transform .15s}
a:hover .arr{transform:translateX(4px)}
/* Brand lockup — Sanitas "parte de Bupa" mark + divider + wordmark.
   Ported from the Spanish NLV staging header (.snhi-brand) so the two sites
   read as one family. The Sanitas mark is a third-party trademark used under
   the owner's Exclusive Sanitas Agent appointment, exactly as on NLV. */
.site-logo{
  display:flex;align-items:center;gap:14px;
  min-height:44px;text-decoration:none;margin-right:auto;
  /* NLV sets flex-shrink:0 here. Do NOT copy that: this wordmark is longer, so
     at 375px the lockup measured 344px wide and pushed the burger to left:380 —
     off-screen and collapsed to 20px. It must be allowed to shrink. */
  flex-shrink:1;min-width:0;
}
.site-logo img{height:34px;width:auto;display:block}
.site-logo .site-logo-div{
  width:1px;height:30px;background:var(--line);flex-shrink:0;
}
.site-logo .site-logo-wm{
  font-weight:800;color:var(--navy);font-size:14px;
  letter-spacing:-.3px;line-height:1.15;white-space:nowrap;
  min-width:0;overflow:hidden;
}
.site-logo .site-logo-wm b{color:var(--blue);font-weight:800}
.site-logo .site-logo-sub{
  display:block;font-size:10px;font-weight:600;
  color:var(--muted);letter-spacing:0;margin-top:1px;
  white-space:normal;
}
@media(max-width:520px){
  /* At 375px there is not room for the Sanitas mark, our wordmark, the CTA and
     the burger. Measured: the wordmark box was crushed to 18px while
     overflow:visible let its text spill ~500px straight across the CTA.
     On our own site our name wins; the Sanitas mark still carries the
     partnership on desktop and in the footer on every page. */
  .site-logo{gap:0;flex:1 1 auto}
  .site-logo img,
  .site-logo .site-logo-div{display:none}
  .site-logo .site-logo-wm{
    font-size:13px;line-height:1.2;
    white-space:normal;overflow:hidden;
    /* "StudentVisaHealthInsuranceSpain" is ONE token with no spaces, so
       white-space:normal alone cannot wrap it — it just overflowed and was
       clipped mid-word. This lets it break onto a second line. */
    overflow-wrap:anywhere;word-break:break-word;
  }
  .site-logo .site-logo-sub{display:none}
  .site-nav{padding:12px 16px;gap:.5rem}
  .site-actions{gap:6px}
}

/* ---------- UTILITY TOPBAR (SHI pattern) ---------- */
.site-topbar{
  background:var(--navy);color:#fff;
  font-family:Montserrat,system-ui,sans-serif;font-size:.8rem;
}
.site-topbar-inner{
  max-width:var(--wrap);margin:0 auto;
  padding:.5rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem 1.4rem;flex-wrap:wrap;
}
.site-topbar a{color:#fff;text-decoration:none;font-weight:600}
.site-topbar a:hover{text-decoration:underline}
.site-topbar-contact{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center}
.site-topbar-note{color:#9db8d6;font-weight:500}
@media(max-width:600px){
  .site-topbar-inner{justify-content:center;text-align:center}
  .site-topbar-note{display:none}
}

.site-links{
  display:flex;align-items:center;gap:.25rem;
  list-style:none;margin:0;padding:0;
}
.site-links a{
  display:inline-block;padding:.55rem .7rem;border-radius:8px;
  font-size:.895rem;font-weight:600;color:var(--navy);
  text-decoration:none;white-space:nowrap;
  transition:background .15s,color .15s;
}
.site-links a:hover{background:var(--grey);color:var(--blue)}
.site-links a[aria-current="page"]{color:var(--blue);background:#eaf4fb}

/* Primary CTA — Get a quote. SHI geometry and colour. */
.site-cta{
  background:var(--cta);color:#fff!important;
  padding:12px 22px;border-radius:6px;
  font-weight:700;font-size:14px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  box-shadow:0 2px 6px rgba(208,38,112,.28);
  transition:background .15s,transform .15s,box-shadow .15s;
}
.site-cta:hover{
  background:var(--cta-hover);color:#fff!important;
  transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,24,70,.35);
}
/* Secondary — Apply. SHI's outline treatment. */
.site-apply{
  color:var(--blue);border:2px solid var(--blue);
  padding:10px 18px;border-radius:6px;
  font-weight:600;font-size:14px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  transition:background .15s,color .15s;
}
.site-apply:hover{background:var(--blue);color:#fff}

/* Mi Sanitas — client login chip in the topbar, SHI styling. */
.site-mi{
  background:var(--blue);color:#fff!important;
  padding:7px 16px;border-radius:4px;
  font-weight:700;font-size:13px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  transition:background .15s;
}
.site-mi:hover{background:#009AE0;color:#fff!important;text-decoration:none}

/* Visible focus everywhere — same standard as the FAQ accordions. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.site-drawer a:focus-visible,
.site-drawer button:focus-visible,
.site-breadcrumb a:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px;border-radius:6px;
}

/* Skip link */
.site-skip{
  position:absolute;left:-9999px;top:0;
  background:var(--navy);color:#fff;padding:.7rem 1.1rem;
  border-radius:0 0 8px 0;font-weight:700;z-index:1000;
}
.site-skip:focus{left:0}

/* ---------- BURGER ---------- */
.site-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;flex-shrink:0;
  background:transparent;border:0;cursor:pointer;border-radius:8px;
}
.site-burger span{
  display:block;height:2.5px;width:100%;border-radius:2px;
  background:var(--navy);transition:transform .22s,opacity .18s;
}
.site-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.site-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.site-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- MOBILE DRAWER ---------- */
.site-drawer{
  position:fixed;inset:0 0 0 auto;
  width:min(88vw,380px);max-width:100%;
  background:#fff;z-index:950;
  transform:translateX(100%);transition:transform .26s ease;
  overflow-y:auto;overscroll-behavior:contain;
  padding:1.1rem 1.25rem 2.5rem;
  box-shadow:-14px 0 40px rgba(0,24,70,.16);
  font-family:Montserrat,system-ui,sans-serif;
}
.site-drawer.is-open{transform:translateX(0)}
.site-drawer[hidden]{display:none}
.site-drawer-head{display:flex;justify-content:flex-end;margin-bottom:.4rem}
.site-drawer-close{
  width:44px;height:44px;font-size:1.4rem;line-height:1;
  background:transparent;border:0;color:var(--navy);cursor:pointer;border-radius:8px;
}
.site-drawer a{
  display:block;padding:.85rem .35rem;
  border-bottom:1px solid var(--line);
  color:var(--navy);text-decoration:none;font-weight:600;font-size:1rem;
}
.site-drawer a[aria-current="page"]{color:var(--blue)}
.site-drawer a.site-cta,
.site-drawer a.site-apply,
.site-drawer a.site-mi{
  justify-content:center;border-bottom:0;margin-top:.9rem;
}
.site-scrim{
  position:fixed;inset:0;background:rgba(0,24,70,.42);
  z-index:940;opacity:0;transition:opacity .26s;
}
.site-scrim.is-open{opacity:1}
.site-scrim[hidden]{display:none}
body.site-nav-open{overflow:hidden}

@media(max-width:1040px){
  .site-links{display:none}
  .site-burger{display:flex}
  .site-actions .site-apply{display:none}
}
@media(max-width:640px){
  .site-actions .site-cta{padding:9px 14px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .site-drawer,.site-scrim,.site-burger span{transition:none}
}

/* ---------- FOOTER — ported from the SHI footer (owner, 24 Aug 2026) ----------
   Same grid (1.5fr brand / three link cols / 1.2fr Get In Touch), same type
   scale, same responsive collapse: 2 columns at 900px with the brand spanning
   both, single column at 520px. The registration line lives in a full-width
   disclosure bar below the inner shell, exactly as on SHI. Like SHI's own
   header/footer, the footer uses the system font stack. */
.site-footer{
  background:#001E4B;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding:60px 0 0;margin-top:0;line-height:1.5;
}
.site-footer a{text-decoration:none;color:inherit}
.sf-inner{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.sf-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px}

.sf-brand .fb-mark{height:60px;width:auto;display:block;margin-bottom:18px}
.sf-brand>p{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.92);margin:0 0 20px;max-width:340px}
.sf-brand .fb-experts{height:38px;width:auto;margin:4px 0 10px;display:block}
.sf-brand .fb-wm{
  display:block;font-weight:800;font-size:15px;color:#fff;
  letter-spacing:-.3px;line-height:1.25;margin:0 0 10px;overflow-wrap:anywhere;
}
.sf-brand .fb-wm b{color:#5eb3ec;font-weight:800}
.sf-agent{font-size:13px;line-height:1.6;color:rgba(255,255,255,.85);margin:0;max-width:340px}
.sf-agent b{color:#fff;font-weight:700}

.site-footer h2{
  font-size:14px;text-transform:uppercase;letter-spacing:1.2px;
  margin:0 0 16px;color:#fff;font-weight:700;
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:8px 0}
.site-footer li a{font-size:14px;color:#e8ecf3;transition:color .15s;overflow-wrap:anywhere}
.site-footer li a:hover{color:#fff;text-decoration:underline}

.sf-cta-stack{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.sf-pink-btn{
  display:block;background:#E4006D;color:#fff;padding:11px 16px;border-radius:4px;
  font-weight:700;font-size:14px;text-align:center;transition:background .15s;
}
.sf-pink-btn:hover{background:#C00059;color:#fff}
.sf-out-row{display:flex;gap:8px}
.sf-out-btn{
  flex:1;border:2px solid rgba(255,255,255,.6);color:#fff;padding:9px 10px;
  border-radius:4px;font-weight:700;font-size:13px;text-align:center;transition:all .15s;
}
.sf-out-btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}

.sf-contact-item{display:flex;gap:10px;margin:10px 0;font-size:14px;color:#cfd7e3;align-items:flex-start}
.sf-contact-item svg{flex-shrink:0;width:16px;height:16px;fill:var(--blue);margin-top:3px}
.sf-contact-item a{color:#cfd7e3;transition:color .15s;overflow-wrap:anywhere}
.sf-contact-item a:hover{color:#fff;text-decoration:underline}

.sf-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:24px 0;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
}
.sf-bottom p{font-size:13px;opacity:.7;margin:0;color:#fff}
.sf-bottom nav{display:flex;gap:20px;flex-wrap:wrap}
.sf-bottom nav a{font-size:13px;color:#cfd7e3}
.sf-bottom nav a:hover{color:#fff;text-decoration:underline}

.sf-disclosure{
  background:rgba(0,0,0,.2);padding:16px 32px;text-align:center;
  font-size:12px;color:rgba(255,255,255,.75);line-height:1.6;
}

@media(max-width:900px){
  .sf-grid{grid-template-columns:1fr 1fr;gap:32px}
  .sf-brand{grid-column:1 / -1}
}
@media(max-width:520px){
  .sf-grid{grid-template-columns:1fr}
  .sf-bottom{flex-direction:column;text-align:center}
  .sf-inner{padding:0 20px}
}

/* ---- Consent layer (self-built; see chrome.js CONSENT) ---- */
.svc{position:fixed;left:0;right:0;bottom:0;z-index:9000;padding:14px;display:flex;justify-content:center;pointer-events:none}
.svc-gate{top:0;background:rgba(0,24,70,.55);align-items:center}
.svc .svc-card{pointer-events:auto;max-width:680px;width:100%;background:#fff;border:1.5px solid #e3e8ef;border-radius:14px;box-shadow:0 10px 40px rgba(0,24,70,.25);padding:20px 22px;font-family:'Montserrat',sans-serif}
.svc-h{font-size:16px;font-weight:800;color:#001846;margin:0 0 8px}
.svc-p{font-size:12.5px;color:#4A5568;line-height:1.6;margin:0 0 14px}
.svc-p a{color:#0079C8;font-weight:700;text-decoration:none}
.svc-p a:hover{text-decoration:underline}
.svc-cats{display:flex;flex-direction:column;gap:9px;margin:0 0 14px}
.svc-cat{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:#4A5568;line-height:1.5;cursor:pointer}
.svc-cat input{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:#0079C8}
.svc-cat b{color:#001846}
.svc-btns{display:flex;flex-wrap:wrap;gap:10px}
.svc-btn{font-family:inherit;font-size:13px;font-weight:800;border-radius:8px;padding:11px 18px;cursor:pointer;border:2px solid #001846;background:#fff;color:#001846;transition:background .15s,color .15s}
.svc-btn:hover{background:#F3F5F8}
.svc-btn.svc-accept,.svc-btn.svc-reject{background:#001846;color:#fff}
.svc-btn.svc-accept:hover,.svc-btn.svc-reject:hover{background:#0079C8;border-color:#0079C8}
body.svc-lock{overflow:hidden}
@media(max-width:520px){.svc .svc-card{padding:16px}.svc-btns{flex-direction:column}.svc-btn{width:100%}}