/* ═══════════════════════════════════════════════════════════════
 *  consent.css — cookie consent banner (Google Consent Mode v2)
 *  Shared by the home page and the /blog section. Uses tokens.css.
 * ═══════════════════════════════════════════════════════════════ */

.cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; justify-content: center; padding: clamp(12px, 3vw, 24px);
  pointer-events: none;
}
.cc[hidden] { display: none; }
.cc__panel {
  position: relative;
  pointer-events: auto; width: min(560px, 100%);
  background: var(--color-surface-white); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); padding: 20px 22px;
  font-family: var(--font-primary); animation: cc-in .35s var(--ease-out) both;
}
/* The panel takes focus when the banner opens (tabindex="-1"); no focus ring on it,
   the dialog is announced instead. Every real control keeps its own ring below. */
.cc__panel:focus { outline: none; }

/* Close (X) — the Garante's guidelines name it explicitly: it must be possible to
   dismiss the banner and keep the default settings. It grants nothing. */
.cc__close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; line-height: 1; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0; border-radius: 50%;
  background: transparent; color: var(--color-text-subtle);
  transition: color .2s ease, background .2s ease;
}
.cc__close:hover { color: var(--color-text); background: var(--color-surface); }
@keyframes cc-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.cc__title { margin: 0 0 6px; font-weight: 700; font-size: var(--text-5xl); }
.cc__text { margin: 0; color: var(--color-text-subtle); font-size: var(--text-xl); line-height: var(--leading-normal); }
.cc__text a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
/* brighter teal in dark mode so the link clears WCAG AA on the dark panel (light mode keeps the brand teal) */
[data-theme="dark"] .cc__text a { color: #00a8a8; }

.cc__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* flex-basis 0 (not auto) so Accept and Reject come out the SAME width instead of
   being sized by their labels — "Accetta tutto" is simply a longer word than
   "Rifiuta", and letting that decide the geometry re-introduces the imbalance the
   colours were just removed for. */
.cc__btn {
  flex: 1 1 0; min-width: 120px; cursor: pointer; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 11px 18px; font-family: var(--font-primary);
  font-weight: 600; font-size: var(--text-xl); background: var(--color-surface); color: var(--color-text);
  transition: transform .15s var(--ease-spring), box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.cc__btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
/* Accept and Reject are deliberately IDENTICAL — same size, same weight, same colour,
   one click each. The brand gradient used to sit on Accept only; equal wording with
   unequal emphasis is the nudge the EDPB deceptive-design guidelines single out, and
   the colour bought nothing. Do not re-style one of them without the other. */
.cc__btn--prefs { flex: 0 1 auto; background: transparent; color: var(--color-text-subtle); }
.cc__btn:focus-visible, .cc__close:focus-visible, .cc__switch input:focus-visible + .cc__track {
  outline: 2px solid var(--color-primary); outline-offset: 2px;
}

/* preferences panel */
.cc__prefs { margin-top: 14px; border-top: 1px solid var(--color-border-strong); padding-top: 14px; }
.cc__prefs[hidden] { display: none; }
.cc__row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.cc__row + .cc__row { border-top: 1px solid var(--color-border); }
.cc__rowtext { flex: 1; }
.cc__rowtext b { display: block; font-size: var(--text-xl); }
.cc__rowtext span { color: var(--color-text-subtle); font-size: var(--text-base); }
.cc__switch { position: relative; flex-shrink: 0; width: 44px; height: 26px; }
.cc__switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc__track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--c-neutral-200); transition: background .2s ease; }
.cc__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-rest); transition: transform .2s var(--ease-spring); }
.cc__switch input:checked + .cc__track { background: var(--color-primary); }
.cc__switch input:checked + .cc__track::after { transform: translateX(18px); }
.cc__switch input:disabled + .cc__track { opacity: .55; }
.cc__save { margin-top: 14px; width: 100%; }

@media (max-width: 480px) { .cc__btn { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .cc__panel { animation: none; }
  .cc__btn, .cc__track::after { transition: none; }
}