/* ══════════════════════════════════════════════════════════════════════
   CHP Home — cookie consent banner (UK PECR / ICO), two-layer
   Single source of truth. Linked by every page that shows the banner;
   do not re-inline these rules in a page <style> block.

   Colour variables are referenced with literal fallbacks because three
   policy pages (cookies / privacy / terms) do not define --orange-d,
   and cookies.html previously hard-coded #FF8200. The fallbacks keep the
   banner identical on every page regardless of that :root difference.
   ══════════════════════════════════════════════════════════════════════ */

#cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:960;
  background:#1f2937;border-top:3px solid var(--orange,#FF8200);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  box-shadow:0 -4px 32px rgba(0,0,0,.25);
}
#cookie-banner.cb-visible{transform:translateY(0)}

/* Hiding a layer.
   .cb-hidden is the ONLY supported way to hide a layer. The layer elements
   carry `display:flex`, and an author `display:flex` rule beats the UA's
   default `[hidden]{display:none}` — so the plain `hidden` attribute alone
   would NOT hide them. The `!important` here, and the [hidden] safety net
   below, both exist for that reason. Do not remove either. */
#cookie-banner .cb-hidden{display:none!important}
#cookie-banner [hidden]{display:none!important}

.cb-inner{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:1100px;margin:0 auto;
  padding:14px clamp(20px,5vw,48px);
}
.cb-text{
  flex:1;min-width:200px;
  font-size:13px;color:rgba(255,255,255,.8);line-height:1.55;margin:0;
}
.cb-text a{color:rgba(255,255,255,.6);text-decoration:underline;}
.cb-text a:hover{color:#fff}
.cb-actions{display:flex;gap:10px;align-items:center;flex-shrink:0;flex-wrap:wrap}

/* Reject must carry the same visual weight as Accept: the ICO treats a banner
   that emphasises "accept" over "reject" as non-compliant. Orange stays the
   brand action, but reject is no longer a faint secondary. Do not dial this
   back down. Both buttons share cb-btn, so padding, height, font size and
   weight cannot drift apart. */
.cb-btn{
  padding:9px 18px;border-radius:6px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;
  min-height:40px;white-space:nowrap;
}
.cb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cb-reject{
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.55);
  transition:background .15s,border-color .15s;
}
.cb-reject:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.22)}
.cb-accept{
  background:var(--orange,#FF8200);color:#fff;
  border:1px solid var(--orange,#FF8200);
  transition:background .15s,border-color .15s;
}
.cb-accept:hover{
  background:var(--orange-d,#E06A00);
  border-color:var(--orange-d,#E06A00);
}

/* "Manage options" is a third, deliberately quieter control. It is an
   ADDITION to Reject all, never a replacement for it: a first layer that
   hides "reject" behind a settings link is the pattern the ICO objects to. */
.cb-manage{
  background:none;border:none;padding:9px 4px;
  font-family:inherit;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.75);text-decoration:underline;
  cursor:pointer;min-height:40px;white-space:nowrap;
  transition:color .15s;
}
.cb-manage:hover{color:#fff}
.cb-manage:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ── Layer 2: per-category options ───────────────────────────────────── */
.cb-panel{
  flex-direction:column;align-items:stretch;gap:14px;
  padding-top:16px;padding-bottom:18px;
}
.cb-panel-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.cb-panel-title{
  margin:0;font-size:14px;font-weight:700;color:#fff;
}
.cb-panel-note{
  margin:0;font-size:12px;color:rgba(255,255,255,.6);line-height:1.5;
}
.cb-cats{display:flex;flex-direction:column;gap:10px;margin:0}
.cb-cat{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:12px 14px;
}
.cb-cat-name{
  margin:0 0 2px;font-size:13px;font-weight:700;color:#fff;
}
.cb-cat-desc{
  margin:0;font-size:12px;color:rgba(255,255,255,.65);line-height:1.5;
}
.cb-cat-fixed{
  flex-shrink:0;font-size:12px;font-weight:700;
  color:rgba(255,255,255,.7);white-space:nowrap;padding-top:2px;
}

/* Switch. The underlying control is a real <input type="checkbox">, kept in
   the accessibility tree and keyboard-operable; only its painting is custom.
   It ships UNCHECKED and is never pre-ticked — pre-ticked optional consent
   is not valid consent. */
.cb-switch{
  position:relative;flex-shrink:0;
  display:inline-flex;align-items:center;
  width:46px;height:26px;margin-top:2px;
}
.cb-switch input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;z-index:2;
}
.cb-switch-track{
  position:absolute;inset:0;border-radius:999px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.35);
  transition:background .15s,border-color .15s;
  pointer-events:none;
}
.cb-switch-track::after{
  content:"";position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .15s;
}
.cb-switch input:checked ~ .cb-switch-track{
  background:var(--orange,#FF8200);
  border-color:var(--orange,#FF8200);
}
.cb-switch input:checked ~ .cb-switch-track::after{transform:translateX(20px)}
.cb-switch input:focus-visible ~ .cb-switch-track{outline:2px solid #fff;outline-offset:2px}

.cb-panel-actions{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  justify-content:flex-end;
}

/* Confirm carries the same weight as Accept all on layer 2, so declining
   analytics is exactly one click from here — same as accepting. */
.cb-confirm{
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.55);
  transition:background .15s,border-color .15s;
}
.cb-confirm:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.22)}

@media(max-width:600px){
  .cb-inner{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 20px 18px}
  .cb-panel{align-items:stretch}
  .cb-actions,.cb-panel-actions{width:100%}
  .cb-btn,.cb-manage{width:100%;text-align:center}
  .cb-cat{align-items:center}
}

@media(prefers-reduced-motion:reduce){
  #cookie-banner{transition:none}
  .cb-switch-track,.cb-switch-track::after{transition:none}
}