/* ============================================================
   AIDE — cookie consent banner + preferences panel.
   Self-hosted, no third-party banner library. Uses the site's
   own tokens; Reject is styled EXACTLY as prominently as Accept
   (same class, same size, same contrast) — PECR/ICO guidance is
   that rejecting must be as easy as accepting.
   ============================================================ */

/* Footer legal row — lives here because consent.css is the one stylesheet
   loaded on every page, including the legal pages. */
.footer__legal{margin-top:2px}
.footer__legal a{font-size:var(--text-meta-lg)}
.footer__legal a[data-cookie-settings]{cursor:pointer}

.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  padding:var(--space-3);
  display:none;                 /* consent.js shows it only when needed */
}
.cc.on{display:block}

/* 19A: copy and actions sit side by side so the bar stays short. At 244px tall
   it covered the hero's CTAs on a 1366x768 laptop; this holds it near 90px.
   It wraps to stacked below 720px, where there is no room for two columns. */
.cc__in{
  max-width:1100px;margin:0 auto;
  border:1px solid var(--line);
  background:rgba(16,21,29,.94);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-radius:var(--radius-card);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.85),inset 0 1px rgba(255,255,255,.06);
  padding:14px var(--space-5);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.cc__copy{flex:1 1 380px;min-width:0}

.cc__title{font-size:var(--text-ui);font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
.cc__text{font-size:var(--text-meta-lg);line-height:1.5;color:var(--muted);max-width:720px}
.cc__text a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* keeps the pair together so a wrap never strands a leading "·" on its own line */
.cc__links{white-space:nowrap}

/* All three actions share one class and one size — none is de-emphasised. */
/* margin-top removed: the actions are now a side-by-side column, not a row
   stacked under the copy. flex:none stops them being squeezed by the text. */
.cc__actions{display:flex;gap:10px;flex-wrap:wrap;flex:none;align-items:center}
.cc__btn{
  font-family:var(--font);font-size:14.5px;font-weight:650;
  border-radius:var(--radius-pill);padding:10px 18px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);
  transition:transform .16s ease,border-color .2s ease,background .2s ease;
  min-width:132px;text-align:center;
}
.cc__btn:hover{transform:translateY(-1px);border-color:#465268;background:rgba(255,255,255,.09)}
.cc__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- preferences panel ---------- */
/* flex-basis:100% makes the panel take its own row under the flex bar. */
.cc__panel{display:none;flex:0 0 100%;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.cc__panel.on{display:block}

.cc__cat{
  display:flex;gap:var(--space-4);align-items:flex-start;justify-content:space-between;
  padding:var(--space-4) 0;border-bottom:1px solid var(--line);
}
.cc__cat:last-of-type{border-bottom:0}
.cc__cat h4{font-size:var(--text-body);font-weight:650;color:var(--text);margin-bottom:5px}
.cc__cat p{font-size:var(--text-meta-lg);line-height:1.5;color:var(--muted);max-width:640px}
.cc__always{
  flex:none;font-family:var(--mono);font-size:var(--text-small);letter-spacing:.05em;
  color:var(--emerald);white-space:nowrap;padding-top:2px;
}

/* toggle */
.cc__toggle{flex:none;display:inline-flex;align-items:center;cursor:pointer;padding-top:2px}
.cc__toggle input{position:absolute;opacity:0;width:0;height:0}
.cc__track{
  width:46px;height:26px;border-radius:var(--radius-pill);
  background:#232b39;border:1px solid var(--line);
  position:relative;transition:background .2s ease,border-color .2s ease;
}
.cc__track::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#6b7789;transition:transform .2s ease,background .2s ease;
}
.cc__toggle input:checked + .cc__track{background:rgba(79,140,255,.28);border-color:var(--accent)}
.cc__toggle input:checked + .cc__track::after{transform:translateX(20px);background:var(--accent)}
.cc__toggle input:focus-visible + .cc__track{outline:2px solid var(--accent);outline-offset:2px}

.cc__save{margin-top:18px}

@media (prefers-reduced-motion:reduce){
  .cc,.cc__btn,.cc__track,.cc__track::after{transition:none}
  .cc__btn:hover{transform:none}
}

@media (max-width:640px){
  .cc__in{padding:18px}
  .cc__btn{flex:1 1 100%;min-width:0}
  .cc__cat{flex-wrap:wrap;gap:10px}
}

/* 19A: below 720px there is no room for two columns — stack the bar.
   The button rule is scoped to 641-720px ONLY: at 640px and below the rule
   above already gives each action its own full-width row, and overriding that
   here would squeeze three buttons into a 390px line where "Manage
   preferences" cannot fit. Equal prominence has to survive every width. */
@media (max-width:720px){
  .cc__in{display:block;padding:15px var(--space-4)}
  .cc__actions{margin-top:14px}
}
@media (max-width:720px) and (min-width:641px){
  .cc__btn{flex:1 1 auto;min-width:0;padding:10px 14px;font-size:var(--text-meta-lg)}
}

/* touch targets (responsive audit, 23 Sep 2026) */
@media (max-width:720px){ .cc__btn{min-height:var(--hit-min)} }