/* ============ Cookie Consent Banner ============
   Uses the site's existing CSS custom properties (--panel, --blood, --ink,
   etc.) so it automatically matches whichever theme (black/maroon) is active
   -- no separate theming needed. Lives in its own file so it can be dropped
   or updated independently of the main stylesheet. */

.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:var(--panel); border-top:2px solid var(--blood);
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
  transform:translateY(110%); transition:transform .35s ease;
  font-family:'JetBrains Mono',monospace;
}
.cc-banner.cc-visible{ transform:translateY(0); }
/* respect reduced-motion preference -- no animation, just appear */
@media (prefers-reduced-motion: reduce){
  .cc-banner{ transition:none; }
}

.cc-inner{ max-width:1120px; margin:0 auto; padding:16px; }
.cc-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }

.cc-text{ flex:1 1 340px; font-size:12px; line-height:1.6; color:var(--ink); }
.cc-text a{ color:var(--blood-bright); text-decoration:underline; }
.cc-text a:focus-visible{ outline:2px solid var(--blood-bright); outline-offset:2px; }

.cc-actions{ display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; }

.cc-btn{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  padding:10px 16px; border:1px solid var(--line); background:var(--bg);
  color:var(--ink); cursor:pointer; transition:border-color .12s,color .12s;
}
.cc-btn:hover{ border-color:var(--blood); color:var(--blood-bright); }
.cc-btn:focus-visible{ outline:2px solid var(--blood-bright); outline-offset:2px; }

.cc-btn-primary{ background:var(--blood-bright); border-color:var(--blood-bright); color:#fff; }
.cc-btn-primary:hover{ opacity:.88; color:#fff; }

.cc-btn-text{ background:none; border:none; text-decoration:underline; color:var(--grey); padding:10px 4px; }
.cc-btn-text:hover{ color:var(--blood-bright); }

/* ---- Settings panel (expands within the banner) ---- */
.cc-settings{ display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.cc-settings.cc-open{ display:block; }

.cc-toggle-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--line-soft);
}
.cc-toggle-row:last-of-type{ border-bottom:none; }
.cc-toggle-info{ flex:1; }
.cc-toggle-label{ font-size:12px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.03em; }
.cc-toggle-desc{ font-size:11px; color:var(--grey); line-height:1.5; margin-top:3px; }

/* Accessible custom switch built on a real checkbox (not a div) so it is
   natively keyboard-operable and announced correctly by screen readers. */
.cc-switch{ position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.cc-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cc-switch .cc-track{
  position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .15s;
  pointer-events:none;
}
.cc-switch .cc-thumb{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:var(--grey-dim); transition:transform .15s,background .15s; pointer-events:none;
}
.cc-switch input:checked + .cc-track{ background:var(--blood-dark); }
.cc-switch input:checked + .cc-track + .cc-thumb{ transform:translateX(18px); background:var(--blood-bright); }
.cc-switch input:disabled + .cc-track{ background:var(--line); opacity:.6; }
.cc-switch input:disabled + .cc-track + .cc-thumb{ background:var(--grey); }
.cc-switch input:focus-visible + .cc-track{ outline:2px solid var(--blood-bright); outline-offset:2px; }

.cc-settings-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

@media (max-width:640px){
  .cc-row{ flex-direction:column; align-items:stretch; }
  .cc-actions{ width:100%; }
  .cc-btn{ flex:1; text-align:center; }
}