/* Elf Watch shared header and footer (14 Oct 2026, review items S1/D6).
   One header and one footer on every page. Everything is namespaced .ew-header / .ew-footer and
   uses element+class selectors (and !important only where page CSS forces logo or footer styles),
   so page CSS cannot leak in and these rules cannot leak out.
   Needs /fonts.css (Plus Jakarta Sans + Inter, self-hosted). Menu toggle: /js/site-chrome.js.
   The logo is only ever /img/logo.png, on the sky, with no filter (check-logo.py). */

header.ew-header,footer.ew-footer{
  --ew-navy:#16296A;--ew-red:#D0353C;--ew-red-dark:#B32A31;--ew-sky:#B8D2FC;--ew-ink:#16296A;--ew-muted:#33456F;
  box-sizing:border-box;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
header.ew-header *,header.ew-header *::before,header.ew-header *::after,
footer.ew-footer *,footer.ew-footer *::before,footer.ew-footer *::after{box-sizing:border-box}

/* ---------- Header ---------- */
/* order keeps it first / last on pages whose body is a flex column */
header.ew-header{position:relative;z-index:60;display:block;width:100%;order:-1;flex:0 0 auto;margin:0;padding:0;border:0;box-shadow:none;
  background:rgba(184,210,252,.94)}
header.ew-header::before,header.ew-header::after{content:none;display:none}
.ew-header .ew-header__in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:24px;
  padding:10px max(24px,env(safe-area-inset-right)) 10px max(24px,env(safe-area-inset-left));min-height:84px}
.ew-header a.ew-header__logo{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0;border-radius:12px;background:none;padding:0}
header.ew-header img.ew-logo{display:block;height:64px!important;width:auto!important;max-width:none;margin:0;padding:0;
  background:none!important;box-shadow:none!important;border:0;border-radius:0;filter:none!important}

.ew-header nav.ew-nav{display:flex;align-items:center;justify-content:center;gap:4px;flex:1 1 auto;margin:0;padding:0;
  background:none;position:static;box-shadow:none}
.ew-header nav.ew-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;
  font-family:'Inter',system-ui,sans-serif;font-size:15px;font-weight:600;line-height:1.2;color:var(--ew-navy);
  text-decoration:none;background:none;white-space:nowrap;letter-spacing:0;text-transform:none}
.ew-header nav.ew-nav a:hover{color:var(--ew-red);background:rgba(255,255,255,.45)}
.ew-header nav.ew-nav a[aria-current="page"]{color:var(--ew-red)}

.ew-header a.ew-header__cta,.ew-footer a.ew-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
  min-height:46px;padding:0 22px;border:0;border-radius:999px;background:var(--ew-red);color:#fff;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:15px;font-weight:800;line-height:1;letter-spacing:0;
  text-decoration:none;white-space:nowrap;box-shadow:0 10px 22px -12px rgba(208,53,60,.8);transition:background .2s,transform .2s}
.ew-header a.ew-header__cta:hover,.ew-footer a.ew-cta:hover{background:var(--ew-red-dark);color:#fff;transform:translateY(-1px)}

.ew-header button.ew-header__toggle{display:none;flex:0 0 auto;width:46px;height:46px;margin:0;padding:0;border-radius:14px;
  border:1.5px solid rgba(22,41,106,.25);background:rgba(255,255,255,.7);color:var(--ew-navy);cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;font:inherit;box-shadow:none}
.ew-header button.ew-header__toggle span{display:block;width:20px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.ew-header button.ew-header__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ew-header button.ew-header__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.ew-header button.ew-header__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.ew-header a:focus-visible,.ew-header button:focus-visible,.ew-footer a:focus-visible{outline:3px solid var(--ew-navy);outline-offset:3px}

/* Phones and small tablets: logo, the button and the menu toggle; the menu opens as a panel */
@media(max-width:960px){
  .ew-header .ew-header__in{gap:10px;min-height:70px;padding-top:8px;padding-bottom:8px;
    padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  header.ew-header img.ew-logo{height:54px!important}
  .ew-header a.ew-header__cta{margin-left:auto;min-height:44px;padding:0 16px;font-size:14px}
  .ew-header button.ew-header__toggle{display:inline-flex}
  .ew-header nav.ew-nav{display:none;position:absolute;top:100%;left:12px;right:12px;margin-top:4px;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;border-radius:20px;background:#fff;
    box-shadow:0 18px 40px -14px rgba(22,41,106,.45)}
  .ew-header nav.ew-nav.is-open{display:flex}
  .ew-header nav.ew-nav a{min-height:50px;padding:0 16px;border-radius:14px;font-size:17px}
  .ew-header nav.ew-nav a:hover{background:#EEF4FF}
}
@media(max-width:340px){
  header.ew-header img.ew-logo{height:46px!important}
  .ew-header a.ew-header__cta{padding:0 12px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .ew-header a.ew-header__cta,.ew-footer a.ew-cta,.ew-header button.ew-header__toggle span{transition:none}
  .ew-header a.ew-header__cta:hover,.ew-footer a.ew-cta:hover{transform:none}
}

/* ---------- Footer ---------- */
footer.ew-footer{position:relative;z-index:1;display:block;width:100%;order:99;flex:0 0 auto;margin:0;padding:48px 0 max(28px,env(safe-area-inset-bottom));
  border:0;border-top:1px solid rgba(22,41,106,.12);background:rgba(232,240,254,.75);color:var(--ew-ink);
  font-size:15px;line-height:1.6;text-align:left;overflow:visible}
footer.ew-footer::before,footer.ew-footer::after{content:none!important;display:none!important;animation:none!important}
.ew-footer .ew-footer__in{max-width:1200px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left))}
.ew-footer .ew-footer__top{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.ew-footer a.ew-footer__logo{display:inline-flex;line-height:0;flex:0 0 auto;background:none;padding:0}
footer.ew-footer img.ew-logo{display:block;height:76px!important;width:auto!important;max-width:none;margin:0!important;padding:0!important;
  background:none!important;box-shadow:none!important;border:0;border-radius:0!important;filter:none!important}
.ew-footer p.ew-footer__tag{margin:0;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:15px;font-weight:700;line-height:1.45;color:var(--ew-navy)}
.ew-footer nav.ew-footer__links{display:flex;flex-wrap:wrap;gap:4px 6px;margin:0 0 0 auto;padding:0;background:none;position:static}
.ew-footer nav.ew-footer__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:999px;
  font-size:14px;font-weight:600;line-height:1.2;color:var(--ew-navy);text-decoration:none;background:none}
.ew-footer nav.ew-footer__links a:hover{color:var(--ew-red);background:rgba(255,255,255,.6)}
.ew-footer .ew-footer__bottom{display:flex;justify-content:space-between;gap:32px;margin-top:28px;padding-top:20px;
  border-top:1px solid rgba(22,41,106,.15)}
.ew-footer .ew-footer__bottom p,.ew-footer p.ew-footer__music{margin:0;font-size:12px;line-height:1.6;color:var(--ew-muted)}
.ew-footer .ew-footer__bottom p:first-child{max-width:640px}
.ew-footer p.ew-footer__music{margin-top:14px}
.ew-footer .ew-footer__bottom a,.ew-footer p.ew-footer__music a{color:var(--ew-navy);text-decoration:underline;text-underline-offset:2px}

@media(max-width:760px){
  footer.ew-footer{padding-top:36px}
  .ew-footer .ew-footer__in{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .ew-footer .ew-footer__top{gap:16px 20px}
  footer.ew-footer img.ew-logo{height:64px!important}
  .ew-footer nav.ew-footer__links{margin:4px 0 0 -10px;width:calc(100% + 10px);display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
  .ew-footer nav.ew-footer__links a{font-size:15px}
  .ew-footer .ew-footer__bottom{flex-direction:column;gap:10px}
}
/* Elf calls before 6th November (Paul, 2 Nov 2026; js/calls-gate.js sets html.calls-open from 00:00 UK that day).
   Details stay hidden until then, even with no script; the "coming" line and notify button go once open. */
html:not(.calls-open) [data-calls="detail"]{display:none!important}
html.calls-open [data-calls="soon"]{display:none!important}
html:not(.studio-open) [data-studio="detail"]{display:none!important}
html.studio-open [data-studio="soon"]{display:none!important}
.ew-callsoon{margin:14px 0;padding:16px 18px;border-radius:18px;background:#EEF3FF;border:1px solid #0B1D4D1F;color:#172744}
.ew-callsoon p{margin:0 0 12px;font-weight:700;font-size:17px;line-height:1.4}
.ew-callnotify{display:grid;gap:10px;justify-items:start}
.ew-callnotify__note{margin:0;font-size:14px;color:#26365F;min-height:1px}
.ew-callnotify__note:empty{display:none}
.ew-callnotify__note.err{color:#B3122A}
.ew-callnotify__done{margin:0;padding:12px 16px;border-radius:14px;background:#E8F5EC;color:#14603a;font-weight:700;font-size:16px}
.ew-callnotify__form{display:grid;gap:10px;width:100%;max-width:460px}
.ew-callnotify__label{font-weight:700;color:#172744}
.ew-callnotify__row{display:flex;gap:8px;flex-wrap:wrap}
.ew-callnotify__row input{flex:1 1 220px;min-height:50px;padding:0 14px;border:2px solid #0B1D4D33;border-radius:14px;font:inherit;font-size:16px}
.ew-callnotify__consent{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:#26365F;text-align:left;font-weight:400}
.ew-callnotify__consent input{margin-top:3px}
.ew-callnotify__btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border:0;border-radius:999px;background:#C8102E;color:#fff;font:800 16px/1.2 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.ew-callnotify__btn:disabled{opacity:.7;cursor:default}
@media(max-width:480px){.ew-callnotify__btn,.ew-callnotify__row .button{width:100%}}
/* "Hear a sample call" (home/call-sample.js; the Elf calls launch). A big, friendly play button. */
.ew-sample{display:grid;gap:6px;justify-items:start;margin:4px 0}
.ew-sample__btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 24px 0 10px;border:2px solid #0B1D4D;border-radius:999px;background:#fff;color:#0B1D4D;font:800 17px/1.2 'Plus Jakarta Sans',sans-serif;cursor:pointer;box-shadow:0 6px 0 #0B1D4D22}
.ew-sample__btn:active{transform:translateY(2px)}
.ew-sample__play{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:#1F8A4C;position:relative}
.ew-sample__play::after{content:'';position:absolute;left:15px;top:11px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff}
.ew-sample__btn.is-playing .ew-sample__play{background:#C8102E}
.ew-sample__btn.is-playing .ew-sample__play::after{left:13px;top:13px;width:14px;height:14px;border:0;background:#fff;border-radius:2px}
.ew-sample__who{margin:0;font-size:14px;color:#26365F}
@media (prefers-reduced-motion: no-preference){.ew-sample__btn.is-playing .ew-sample__play{animation:ewRing 1s ease-in-out infinite}}
@keyframes ewRing{50%{box-shadow:0 0 0 8px #C8102E33}}
@media(max-width:480px){.ew-sample__btn{width:100%;justify-content:flex-start}}

/* Round 3 (2 Nov 2026): the Elf calls "Tell me" form: consent above the button, a 24px box in a 44px tap area. */
.hm-callnotify__consent,.ew-callnotify__consent{min-height:44px;align-items:center;cursor:pointer}
.hm-callnotify__consent input,.ew-callnotify__consent input{width:24px;height:24px;margin:0;flex:0 0 24px}
.hm-callnotify__row input,.ew-callnotify__row input{flex:1 1 100%}
.hm-callnotify__go,.ew-callnotify__go{width:100%;justify-content:center}
/* the radar camera's sound button: a 44px tap area */
.rc-sound{min-height:44px;padding:0 14px!important;gap:8px}
.rc-sound svg{flex:none}

/* Round 5: footer links and the cookie buttons are 44px tap targets on every pointer type. */
.ew-footer a{display:inline-flex;align-items:center;min-height:44px}
.ewck button{min-height:44px!important}

/* ---------- Sign-in row (5 Nov 2026, js/site-chrome.js): under the header on phones, under the baubles on a computer ---------- */
.ew-header .ew-acct{position:relative;z-index:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0;padding:22px 16px 12px}
.ew-header .ew-acct__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 14px;border-radius:999px;cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:700;line-height:1.15;text-align:center;text-decoration:none;
  color:#fff;background:rgba(11,29,77,.72);border:1.5px solid rgba(255,255,255,.6)}
.ew-header a.ew-acct__btn--main{color:#16296A;background:#fff;border-color:#fff}
.ew-header .ew-acct__btn:hover{filter:brightness(1.08)}
.ew-header .ew-acct__btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ew-header .ew-acct__who{flex:0 0 100%;margin:0;font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:600;line-height:1.3;color:#fff;text-align:center;overflow-wrap:anywhere}
.ew-header .ew-acct__who span{display:inline-block;padding:3px 12px;border-radius:999px;background:rgba(11,29,77,.72)}
@media(max-width:340px){
  .ew-header .ew-acct{padding-left:8px;padding-right:8px;gap:6px}
  .ew-header .ew-acct__btn{padding:0 10px;font-size:13px}
}
@media(min-width:961px){
  .ew-header .ew-acct{position:absolute;z-index:2;top:170px;right:24px;max-width:360px;justify-content:flex-end;padding:0}
  .ew-header .ew-acct__who{text-align:right}
}

/* One sign-in door (Paul, 10 Nov 2026): a slim glass pill, "Already tracking? Sign in", with a person icon */
.ew-header .ew-acct--one{padding:10px 16px 8px}
.ew-header a.ew-acct__one{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 14px;border-radius:999px;background:rgba(11,29,77,.72);border:2px solid #F5C24A;color:#fff;text-decoration:none;font:600 15px Inter,system-ui,sans-serif;box-shadow:0 6px 16px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ew-header a.ew-acct__one svg{width:18px;height:18px;fill:#F5C24A;flex:none}
.ew-header a.ew-acct__one b{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;background:#fff;color:#16296A;font:800 15px 'Plus Jakarta Sans',Inter,sans-serif}
.ew-header a.ew-acct__one:hover b{background:#FFF3D1}
.ew-header a.ew-acct__one:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (min-width:961px){.ew-header .ew-acct--one{padding:0}}
.ew-header a.ew-acct__one span{max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 14px Inter,sans-serif;color:#FFF3D1}
@media (max-width:420px){.ew-header a.ew-acct__one span{display:none}}