/* ============================================================================
   consenso.css — il banner nella palette del sito.
   ----------------------------------------------------------------------------
   Va caricato DOPO cookieconsent.css: sovrascrive solo le variabili, non le
   regole. Se un giorno si aggiorna la libreria, questo file continua a valere.

   ⚠️ Il fondo del bottone primario è --viola-testo (#6B5C99), non --viola
   (#7B6CAE). Non è un errore: tokens.css misura --viola su bianco a 4,57:1,
   che passa AA per un decimale e cade appena il testo si alleggerisce. I
   bottoni del banner sono in grassetto ma piccoli, e un consenso che non si
   legge è un problema prima estetico e poi legale. --viola-testo dà 5,81:1.

   ⚠️ Con `equalWeightButtons: true` la libreria dà ad Accetta e Rifiuta la
   stessa classe: escono identici, viola pieno, stessa dimensione. È voluto e
   obbligatorio. Se rifiutare costa più che accettare il consenso non è libero,
   e quindi non è valido. L'outline resta a «Scegli tu», che è l'unica voce
   davvero secondaria. Non dare a Rifiuta uno stile più debole.
   ========================================================================= */

#cc-main {
  --cc-font-family: var(--font);
  --cc-modal-border-radius: var(--raggio);
  --cc-btn-border-radius: var(--raggio-pill);
  --cc-modal-transition-duration: 220ms;

  --cc-bg: var(--bianco);
  --cc-primary-color: var(--testo);
  --cc-secondary-color: var(--testo-tenue);
  --cc-link-color: var(--viola-testo);
  --cc-separator-border-color: #E8E6EF;

  /* Accetta: viola pieno */
  --cc-btn-primary-bg: var(--viola-testo);
  --cc-btn-primary-color: var(--bianco);
  --cc-btn-primary-border-color: var(--viola-testo);
  --cc-btn-primary-hover-bg: #5A4D82;
  --cc-btn-primary-hover-color: var(--bianco);
  --cc-btn-primary-hover-border-color: #5A4D82;

  /* Rifiuta: stesso corpo, bordo viola. Pari dignità, forma diversa. */
  --cc-btn-secondary-bg: var(--bianco);
  --cc-btn-secondary-color: var(--viola-testo);
  --cc-btn-secondary-border-color: var(--viola-testo);
  --cc-btn-secondary-hover-bg: #F2F0F7;
  --cc-btn-secondary-hover-color: var(--viola-testo);
  --cc-btn-secondary-hover-border-color: var(--viola-testo);

  /* L'interruttore acceso è verde marchio. Su --nero il verde arriva a 7,42:1,
     quindi l'icona di spunta dentro il pomello va scura, non bianca. */
  --cc-toggle-on-bg: var(--verde);
  --cc-toggle-on-knob-bg: var(--bianco);
  --cc-toggle-enabled-icon-color: var(--nero);
  --cc-toggle-off-bg: #C9C6D4;
  --cc-toggle-off-knob-bg: var(--bianco);
  --cc-toggle-disabled-icon-color: var(--testo-tenue);
  --cc-toggle-readonly-bg: #E4E2EA;
  --cc-toggle-readonly-knob-bg: var(--bianco);
  --cc-toggle-readonly-knob-icon-color: var(--testo-tenue);

  --cc-cookie-category-block-bg: var(--bianco-sporco);
  --cc-cookie-category-block-border: #E8E6EF;
  --cc-cookie-category-block-hover-bg: #F2F0F7;
  --cc-cookie-category-block-hover-border: #DAD6E6;
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: #EFEDF4;
  --cc-section-category-border: #E8E6EF;

  --cc-footer-bg: var(--bianco-sporco);
  --cc-footer-color: var(--testo-tenue);
  --cc-footer-border-color: #E8E6EF;

  --cc-overlay-bg: rgba(51, 51, 51, 0.65);
  --cc-webkit-scrollbar-bg: #D8D5E2;
  --cc-webkit-scrollbar-hover-bg: var(--viola-testo);
}

/* Il titolo del banner segue la tipografia del sito, che è leggera e stretta:
   il default della libreria è più tondo e stona accanto all'hero. */
#cc-main .cm__title,
#cc-main .pm__title {
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
}

#cc-main .cm__desc,
#cc-main .pm__body {
  line-height: var(--lh-larga);
}

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-weight: var(--w-bold);
  letter-spacing: 0.01em;
}

/* ⚠️ BUG TROVATO IL 2026-08-24, non toccare senza rileggere questo.
   `--cc-btn-border-radius` NON governa solo i bottoni: la libreria lo riusa per
   i blocchi delle categorie nel pannello. Impostandolo a --raggio-pill (100px)
   per avere i bottoni a pillola, ogni blocco categoria si prendeva 100px di
   raggio pur essendo alto una cinquantina: la curva entrava nel testo e
   mangiava la prima lettera delle righe. Si vedeva solo espandendo una
   categoria, che e' il motivo per cui era passato.
   I bottoni restano a pillola; i blocchi tornano al raggio normale del sito. */
#cc-main .pm__section,
#cc-main .pm__section-title,
#cc-main .pm__section-desc-wrapper {
  border-radius: var(--raggio);
}
#cc-main .pm__section--expandable .pm__section-title {
  border-radius: var(--raggio) var(--raggio) 0 0;
}
#cc-main .pm__section--expandable .pm__section-desc-wrapper {
  border-radius: 0 0 var(--raggio) var(--raggio);
}

/* «sempre attivi» accanto ai Necessari: verde marchio su nero, l'unica
   combinazione in cui il verde regge come fondo di un testo (7,42:1). */
#cc-main .pm__badge {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.15em 0.6em;
  border-radius: var(--raggio-pill);
  background: var(--verde);
  color: var(--nero);
  font-size: 0.75em;
  font-weight: var(--w-normal);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  vertical-align: middle;
}