/* 60-cc-backgrounds.css — consent UI (register, gate, banner).
   The WP-era per-instance .stk-<id> band images were DELETED 2026-08-12 with the
   typed cutover: section backgrounds are CMS-driven now (section.meta.background
   in core → _worker.js sectionBg() → .cc-section--bg), so the four bands that
   lived here become meta.background on their sections instead. Never re-harvest
   a per-instance selector into this file. */

/* ═══════════════════════════════════════════════════════════════════════════
   CONSENT — added 2026-08-12.

   Two things live here: the privacy REGISTER (how a data_processor block
   renders on the cookie policy) and the consent GATE (banner, panel, and the
   placeholder that stands in for a withheld third party).

   It sits in this file rather than 50-cc-site.css purely for ownership: that
   sheet belongs to the renderer work and has been rewritten under other edits
   more than once. This file is already linked, loads last, and nothing else
   touches it. Tokens are the site's own — no new palette.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the register ───────────────────────────────────────────────────────── */

.cc-dp {
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-card);
  padding: var(--cc-card-pad);
  margin-block: 1rem;
  background: var(--cc-color-surface);
}
/* The only visual distinction that carries meaning: what you can refuse.
   `necessary` gets no accent — an accent on everything says nothing. */
.cc-dp--external-media { border-left: 3px solid var(--cc-color-accent); }

.cc-dp-name { font-size: var(--cc-fs-500); margin: 0 0 0.35rem; }
.cc-dp-storage { color: var(--cc-color-muted); }

/* Label/value pairs. Grid so the values align down the column; on a phone the
   label sits above its value instead of squeezing both into 40% each. */
.cc-dp-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 1rem;
  margin: 0.75rem 0 0;
  font-size: var(--cc-fs-300);
}
.cc-dp-facts dt { color: var(--cc-color-muted); }
.cc-dp-facts dd { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
@media (min-width: 34rem) {
  .cc-dp-facts { grid-template-columns: max-content 1fr; }
  .cc-dp-facts dt { grid-column: 1; }
  .cc-dp-facts dd { grid-column: 2; margin-bottom: 0; }
}

/* ── withheld third party ───────────────────────────────────────────────── */
/* Stands where the map or the feed would be. It must not collapse to nothing:
   a zero-height placeholder reads as a broken page, and the visitor never
   learns there is something they could choose to load. */
.cc-consent-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 12rem;
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--cc-color-border);
  border-radius: var(--cc-radius-card);
  background: var(--cc-color-surface-alt);
  color: var(--cc-color-muted);
  font-size: var(--cc-fs-300);
}
.cc-consent-ph p { margin: 0; max-width: 34ch; }

/* ── banner ─────────────────────────────────────────────────────────────── */
/* Fixed, and OUTSIDE <main> in the markup — LANG_SWAP replaces <main> on a
   language switch, which would otherwise tear the banner out mid-choice. */
.cc-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  background: var(--cc-color-surface);
  border-top: 1px solid var(--cc-color-border);
  box-shadow: 0 -6px 24px rgb(0 0 0 / 0.10);
}
.cc-consent[hidden] { display: none; }
.cc-consent-inner {
  max-width: var(--cc-content-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.cc-consent-text { flex: 1 1 20rem; margin: 0; font-size: var(--cc-fs-300); }
.cc-consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Accept and Reject are the SAME control with different labels. Refusing has to
   be as easy as accepting, so they share every dimension — only the fill
   differs, and the reject button keeps a full-strength border so it never reads
   as the disabled option. Do not make either one a bare text link. */
.cc-consent-btn {
  font: inherit;
  font-weight: 600;
  min-height: 2.75rem;          /* tap target */
  padding: 0.6rem 1.25rem;
  border-radius: var(--cc-radius-button);
  border: 1px solid var(--cc-color-primary);
  background: transparent;
  color: var(--cc-color-primary);
  cursor: pointer;
}
.cc-consent-btn--primary {
  background: var(--cc-color-primary);
  color: var(--cc-color-primary-inv);
}
.cc-consent-btn:focus-visible { outline: 2px solid var(--cc-color-accent); outline-offset: 2px; }

/* ── panel ──────────────────────────────────────────────────────────────── */
.cc-consent-panel { flex: 1 1 100%; margin-top: 0.5rem; }
.cc-consent-cat {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--cc-color-border);
  font-size: var(--cc-fs-300);
}
.cc-consent-cat h3 { font-size: var(--cc-fs-400); margin: 0 0 0.2rem; }
.cc-consent-cat p { margin: 0; color: var(--cc-color-muted); }
/* A locked category still shows its switch, checked and disabled — hiding it
   would leave the visitor guessing whether it is on. */
.cc-consent-cat input[disabled] { cursor: not-allowed; }

@media (prefers-reduced-motion: no-preference) {
  .cc-consent { animation: cc-consent-in 180ms ease-out; }
  @keyframes cc-consent-in { from { transform: translateY(100%); } to { transform: none; } }
}