/*
 * Stile del banner dei cookie di biters.it (va con consenso-cookie.js).
 * Si carica come «File CSS di tutte le pagine»: il CMS lo collega dopo i fogli del tema.
 * Tutte le classi hanno il prefisso cc- per non toccare il tema. I colori vengono dalle variabili
 * del tema, con valori di riserva per le pagine custom che non caricano i fogli del tema.
 *
 * Contrasti (WCAG AA):
 * - testo #ffffff e #e8edf2 su #04182f: 17,8:1 e 15,2:1;
 * - link #d2b87a su #04182f: 9,2:1 (e sottolineato, non solo colorato);
 * - pulsanti, testo #04182f su #d2b87a: 9,2:1; al passaggio, su #efe2c0: 13,9:1;
 * - bordo della X rgba(255,255,255,.6) su #04182f: 7:1 (componente dell'interfaccia, basta 3:1);
 * - «Preferenze cookie» eredita il #7f91a3 del footer: 5,5:1.
 */

.cc-banner {
  --cc-fondo: var(--navy2, #04182f);
  --cc-oro: var(--gold2, #d2b87a);
  --cc-oro-chiaro: var(--gold3, #efe2c0);
  --cc-testo: #e8edf2;

  /* Livelli del tema: cursore 10000, skip-link 20000, transizione di pagina 30000.
     Il banner sta in mezzo, così lo skip-link «Vai al contenuto» resta sopra. */
  position: fixed;
  z-index: 15000;
  left: 50%;
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 960px;
  max-height: 34vh;
  max-height: 34dvh;
  display: flex;
  align-items: center;
  gap: 14px 24px;
  margin: 0;
  padding: 18px 64px 18px 24px;
  background: var(--cc-fondo);
  color: var(--cc-testo);
  /* Il bordo oro lo stacca dal footer, che ha lo stesso blu notte. */
  border: 1px solid rgba(210, 184, 122, 0.45);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(4, 24, 47, 0.35);
  /* Inter solo se installato (il tema non ha @font-face): si eredita il font della pagina. */
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* display:flex sopra batterebbe l'attributo hidden: va ribadito. */
.cc-banner[hidden],
.cc-banner [hidden] {
  display: none !important;
}

.cc-banner *,
.cc-banner *::before,
.cc-banner *::after {
  box-sizing: border-box;
}

/* Solo il testo scorre se non c'è spazio: i pulsanti restano sempre visibili. */
.cc-banner .cc-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
}

.cc-banner .cc-title {
  margin: 0 0 4px;
  padding: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 780;
  line-height: 1.35;
}

.cc-banner .cc-text,
.cc-banner .cc-state {
  margin: 0;
  padding: 0;
  color: var(--cc-testo);
  font-size: inherit;
  line-height: inherit;
}

.cc-banner .cc-state {
  margin-top: 6px;
  color: #fff;
  font-weight: 650;
}

/* Il tema toglie la sottolineatura a tutti i link: qui serve, per non affidarsi al solo colore. */
.cc-banner .cc-link {
  color: var(--cc-oro);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 650;
}
.cc-banner .cc-link:hover {
  color: var(--cc-oro-chiaro);
}

.cc-banner .cc-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
}

/* «Rifiuta» e «Accetta»: una sola regola, quindi stessa dimensione, enfasi e colore. */
.cc-banner .cc-btn {
  min-width: 112px;
  min-height: 44px;
  margin: 0;
  padding: 10px 22px;
  border: 1px solid var(--cc-oro);
  border-radius: 999px;
  background: var(--cc-oro);
  color: var(--cc-fondo);
  font: inherit;
  font-size: 14px;
  font-weight: 780;
  line-height: 1.2;
  cursor: pointer;
}
.cc-banner .cc-btn:hover {
  background: var(--cc-oro-chiaro);
  border-color: var(--cc-oro-chiaro);
}

/* «Personalizza»: stessa forma, ma bordata (meno evidenza di Rifiuta e Accetta, che restano uguali).
   Testo #d2b87a su #04182f: 9,2:1. */
.cc-banner .cc-btn-sec {
  background: transparent;
  color: var(--cc-oro);
}
.cc-banner .cc-btn-sec:hover {
  background: rgba(210, 184, 122, 0.14);
  color: var(--cc-oro-chiaro);
  border-color: var(--cc-oro-chiaro);
}

/* Con il pannello aperto il banner può crescere: l'ha chiesto l'utente. Scorre il solo testo. */
.cc-banner.cc-esteso {
  max-height: 80vh;
  max-height: 80dvh;
}

.cc-banner .cc-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(210, 184, 122, 0.35);
}

.cc-banner .cc-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Casella nativa, grande abbastanza da toccare, nel colore del tema. */
.cc-banner .cc-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--cc-oro);
  cursor: pointer;
}

.cc-banner .cc-option-name {
  display: block;
  margin: 0;
  color: #fff;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}

.cc-banner .cc-option-desc {
  margin: 2px 0 0;
  padding: 0;
  color: var(--cc-testo);
  font-size: inherit;
  line-height: inherit;
}

.cc-banner .cc-save {
  justify-self: start;
}

/* La X: ben visibile, 40 px di bersaglio, in alto a destra. */
.cc-banner .cc-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.cc-banner .cc-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Focus visibile anche nelle pagine senza il tema (il tema ha già un contorno oro di 3 px). */
.cc-banner :focus-visible,
.cc-banner:focus-visible {
  outline: 3px solid var(--cc-oro);
  outline-offset: 3px;
}
.cc-banner:focus {
  outline: 3px solid var(--cc-oro);
  outline-offset: 3px;
}
.cc-banner:focus:not(:focus-visible) {
  outline: none;
}

/* Comparsa morbida, solo per chi non ha chiesto di ridurre il movimento. */
@media (prefers-reduced-motion: no-preference) {
  .cc-banner:not([hidden]) {
    animation: cc-entra 0.28s ease-out both;
  }
  @keyframes cc-entra {
    from {
      opacity: 0;
      transform: translate(-50%, 16px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
}

/* Finché il banner è aperto si può scorrere fino in fondo sopra di lui, e il browser non lascia
   l'elemento focalizzato sotto il banner (WCAG 2.4.11). --cc-altezza la imposta lo script. */
html.cc-aperto {
  scroll-padding-bottom: var(--cc-altezza, 0px);
}
html.cc-aperto body {
  padding-bottom: var(--cc-altezza, 0px);
}

/* Tablet e telefoni: testo sopra, pulsanti sotto, affiancati e larghi uguali. */
@media (max-width: 760px) {
  .cc-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: calc(100% - 16px);
    bottom: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    padding: 14px 14px 14px 16px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.45;
  }
  /* Lo spazio per la X lo lascia il testo, non tutto il banner. */
  .cc-banner .cc-body {
    padding-right: 44px;
  }
  .cc-banner .cc-title {
    font-size: 14px;
  }
  .cc-banner .cc-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .cc-banner .cc-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
  }
  /* Rifiuta e Accetta affiancati e larghi uguali, Personalizza sotto per tutta la larghezza. */
  .cc-banner .cc-actions .cc-btn-sec {
    flex: 1 1 100%;
    min-height: 40px;
  }
  .cc-banner .cc-save {
    justify-self: stretch;
  }
  .cc-banner .cc-close {
    top: 8px;
    right: 8px;
  }
}

/* Schermi bassi (telefono in orizzontale, 320 px di larghezza): si toglie il titolo, che
   ripete l'etichetta della regione, per restare intorno a un terzo dello schermo. */
@media (max-width: 380px), (max-height: 480px) {
  .cc-banner .cc-title {
    display: none;
  }
  /* A 320x568, con statistiche e marketing, il testo intero occupa circa il 40% dello schermo:
     meglio qualcosa oltre il terzo che nascondere l'ultima riga (con il link all'informativa)
     dietro uno scorrimento. */
  .cc-banner {
    max-height: 44vh;
    max-height: 44dvh;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    font-size: 12.5px;
    line-height: 1.4;
  }
}
/* Schermi bassi e di media larghezza (telefono piccolo in orizzontale): i tre pulsanti su una riga
   sola, e un po' più di altezza, così il testo si legge senza scorrere dentro il banner. */
@media (max-height: 480px) and (min-width: 481px) and (max-width: 699px) {
  .cc-banner {
    max-height: 48vh;
    max-height: 48dvh;
  }
  .cc-banner .cc-actions {
    flex-wrap: nowrap;
  }
  .cc-banner .cc-actions .cc-btn-sec {
    flex: 1 1 0;
    min-height: 44px;
  }
}

/* Schermi bassi ma larghi (telefono in orizzontale): testo a sinistra, pulsanti a destra in colonna,
   così il testo ha tutta la larghezza che resta. Sotto i 700 px non ci sta: resta la colonna. */
@media (max-height: 480px) and (min-width: 700px) {
  .cc-banner {
    flex-direction: row;
    align-items: center;
    max-height: 45vh;
    max-height: 45dvh;
  }
  .cc-banner .cc-actions {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 150px;
  }
  .cc-banner .cc-btn,
  .cc-banner .cc-actions .cc-btn-sec {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
  }
}

/* Contrasto elevato di Windows: i bordi dei pulsanti restano visibili. */
@media (forced-colors: active) {
  .cc-banner,
  .cc-banner .cc-btn,
  .cc-banner .cc-close {
    border: 1px solid CanvasText;
  }
}

@media print {
  .cc-banner {
    display: none !important;
  }
}

/* «Preferenze cookie» nel footer: uguale ai link vicini («Privacy policy», «Cookie»). */
.cc-prefs {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cc-prefs:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-prefs:focus-visible {
  outline: 3px solid var(--gold2, #d2b87a);
  outline-offset: 3px;
}

/* Ripiego quando nel footer non c'è il link della privacy. */
.cc-prefs-wrap {
  margin: 16px 0 0;
  padding: 0;
  font-size: 12px;
}