/* The header and the footer that every page shares.
 *
 * Self-contained on purpose. The pages of this site grew in four different
 * colour vocabularies, so a chrome built on any one of them would look
 * different depending on which page it landed in. Everything it needs is
 * declared here, under its own --ch- prefix. The
 * only thing it borrows from the page is the font stack, and it falls back to
 * a system sans when the page never loaded one.
 */

.siteHead, .siteFoot, .skip {
  --ch-surface:#ffffff;
  --ch-head:rgba(255,255,255,.93);
  --ch-rule:#F7C531;
  --ch-ink:#153F52;
  --ch-body:#41565F;
  --ch-soft:#EAF5FC;
  --ch-flag-bg:#FEF6DC;
  --ch-flag-ink:#90690F;
  --ch-accent:#1875AA;
  --ch-line:#BFE3F5;
  --ch-cta:#43842F;
  --ch-cta-ink:#ffffff;
  --ch-cta-shadow:rgba(86,168,60,.35);
  --ch-mark:#F7C531;
  --ch-shadow:rgba(27,127,184,.22);
  --ch-foot:#174D2C;
  --ch-foot-t:#BFDCC8;
  --ch-foot-t2:#91B99E;
  --ch-foot-link:#DFF0E5;
  --ch-foot-strong:#ffffff;
  --ch-foot-rule:rgba(255,255,255,.12);
  --ch-sans:'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ch-display:'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* How tall the header is, for anything on the page that has to sit below it:
   a sticky progress bar, a sticky column, a bar pinned to the bottom. */
:root{--ch-head-h:81px;}
@media (max-width:860px){ :root{--ch-head-h:69px;} }

/* ---------- skip link ---------- */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:var(--ch-accent);
  color:#fff;padding:10px 18px;border-radius:0 0 12px 12px;font-family:var(--ch-sans);font-weight:700;
  text-decoration:none;}
.skip:focus{inset-inline-start:16px;}

/* ---------- header ---------- */
/* header.siteHead, not .siteHead: some pages still carry a bare `header{}`
   rule from their own stylesheet, and this has to outrank it. */
header.siteHead{position:sticky;top:0;z-index:50;display:block;padding:0;margin:0;
  background:var(--ch-head);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:3px solid var(--ch-rule);font-family:var(--ch-sans);}
.siteHead-in{max-width:1220px;margin:0 auto;padding:0 clamp(16px,5vw,64px);
  display:flex;align-items:center;gap:18px;height:78px;}
.siteHead .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.siteHead .brand img{height:56px;width:auto;display:block;}
.siteHead .brand .who{font-family:var(--ch-display);font-weight:800;color:var(--ch-ink);
  font-size:15px;line-height:1.25;}

.mainNav{display:flex;align-items:center;gap:clamp(6px,1.6vw,20px);margin-inline-start:auto;
  font-family:var(--ch-display);font-size:15.5px;font-weight:600;}
.mainNav a{color:var(--ch-ink);text-decoration:none;padding:9px 4px;border-radius:8px;
  position:relative;white-space:nowrap;}
.mainNav a:hover{color:var(--ch-accent);}
.mainNav a[aria-current="page"]{color:var(--ch-accent);}
.mainNav a[aria-current="page"]::after{content:"";position:absolute;inset-inline:4px;bottom:2px;
  height:3px;border-radius:3px;background:var(--ch-mark);}
.mainNav .flag{background:var(--ch-flag-bg);color:var(--ch-flag-ink);padding:6px 12px;
  border-radius:40px;font-size:14px;font-weight:800;}
.mainNav .flag[aria-current="page"]{color:var(--ch-flag-ink);}

.headActions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.siteHead .cta{background:var(--ch-cta);color:var(--ch-cta-ink);text-decoration:none;
  font-family:var(--ch-display);font-weight:800;font-size:15px;padding:11px 22px;border-radius:40px;
  white-space:nowrap;box-shadow:0 6px 18px var(--ch-cta-shadow);}
.siteHead .cta:hover{transform:translateY(-1px);}
.siteHead .iconBtn{appearance:none;border:2px solid var(--ch-line);background:var(--ch-surface);
  color:var(--ch-ink);border-radius:40px;width:42px;height:42px;display:flex;align-items:center;
  justify-content:center;padding:0;cursor:pointer;}
.siteHead .iconBtn:hover{transform:translateY(-1px);}
.siteHead .iconBtn svg{width:20px;height:20px;}
/* .siteHead .menuBtn, not .menuBtn: the icon-button rule above sets
   display:flex and would otherwise win. */
.siteHead .menuBtn{display:none;}
.siteHead .back{color:var(--ch-ink);text-decoration:none;font-family:var(--ch-display);
  font-weight:600;font-size:15px;white-space:nowrap;}
.siteHead .back:hover{color:var(--ch-accent);}

/* ---------- the menu on a phone ---------- */
@media (max-width:860px){
  .siteHead-in{height:66px;gap:10px;}
  .siteHead .brand img{height:46px;}
  .siteHead .brand{gap:8px;}
  .siteHead .brand .who{font-size:13px;}
  .siteHead .menuBtn{display:flex;margin-inline-start:auto;}
  .mainNav{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ch-surface);border-bottom:3px solid var(--ch-rule);padding:8px 0 16px;
    box-shadow:0 18px 40px var(--ch-shadow);transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;max-height:calc(100dvh - 66px);overflow-y:auto;}
  .mainNav[data-open="true"]{transform:none;opacity:1;pointer-events:auto;}
  .mainNav a{padding:15px clamp(16px,5vw,64px);border-radius:0;font-size:17px;}
  /* On a stacked list a bar under the word reads as a stray line, so the
     current page is marked by its own row instead. */
  .mainNav a[aria-current="page"]{background:var(--ch-soft);}
  .mainNav a[aria-current="page"]::after{display:none;}
  .mainNav .flag{margin:10px clamp(16px,5vw,64px);align-self:flex-start;}
  .mainNav .cta{margin:12px clamp(16px,5vw,64px) 4px;text-align:center;padding:14px 22px;font-size:16px;}
  .headActions .cta{display:none;}
}
@media (min-width:861px){ .mainNav .cta{display:none;} }

/* ---------- slim variant, for the payment forms ---------- */
.siteHead.slim .mainNav, .siteHead.slim .menuBtn{display:none;}
.siteHead.slim .headActions{margin-inline-start:auto;}

/* ---------- footer ---------- */
footer.siteFoot{background:var(--ch-foot);color:var(--ch-foot-t);margin-top:64px;padding:0;
  font-family:var(--ch-sans);}
.siteFoot-in{max-width:1220px;margin:0 auto;padding:44px clamp(16px,5vw,64px) 0;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;}
.siteFoot h2{font-family:var(--ch-display);font-size:14px;font-weight:800;letter-spacing:.04em;
  color:var(--ch-foot-strong);margin:0 0 14px;}
.siteFoot a{color:var(--ch-foot-link);text-decoration:none;}
.siteFoot a:hover{color:var(--ch-foot-strong);text-decoration:underline;}
.siteFoot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;}
.siteFoot .footBrand img{height:68px;width:auto;margin-bottom:14px;}
.siteFoot .footBrand p{margin:0 0 8px;font-size:14.5px;line-height:1.7;}
/* Footer text takes the footer colour even on pages whose own stylesheet
   colours every p and li (privacy did, and the address went dark grey on
   dark green). */
.siteFoot p,.siteFoot li{color:var(--ch-foot-t);}
.siteFoot .footBrand .name{color:var(--ch-foot-strong);font-weight:700;font-size:16px;}
.siteFoot .footBrand .reg{color:var(--ch-foot-t2);font-size:13.5px;}
.siteFoot-bottom{max-width:1220px;margin:36px auto 0;padding:22px clamp(16px,5vw,64px) 30px;
  border-top:1px solid var(--ch-foot-rule);display:flex;flex-wrap:wrap;gap:10px 22px;
  justify-content:space-between;font-size:13.5px;color:var(--ch-foot-t2);}
@media (max-width:860px){
  .siteFoot-in{grid-template-columns:1fr;gap:26px;padding-top:34px;}
  footer.siteFoot{margin-top:44px;}
}