/*
 * Il banner del consenso: come si vede.
 *
 * Viaggia col plugin e non col tema, altrimenti su un altro sito il banner
 * arriverebbe senza vestito. Usa le variabili di colore di WordPress dove
 * ci sono, e ricade su valori propri dove non ci sono: cosi' sta bene su un
 * tema qualunque senza fare finta di esserne parte.
 */


/* --- Consenso ai cookie ---
   In basso, fisso, sopra tutto - compresa la canvas davanti, che ha z-index
   30. Non copre la pagina con un velo: chi sta leggendo puo' continuare a
   leggere, e chi vuole rispondere risponde. Un banner che blocca il sito
   finche' non si accetta e' il modo in cui si ottengono consensi che non
   valgono niente. */
.l3-consenso{
  position:fixed; inset:auto 0 0 0; z-index:60;
  background:rgba(16,17,19,.97);
  border-top:1px solid var(--wp--preset--color--border);
  backdrop-filter:blur(6px);
}
.l3-consenso[hidden]{ display:none; }
.l3-consenso__in{
  max-width:var(--l3-wrap); margin-inline:auto;
  padding:20px var(--l3-gutter);
  display:flex; align-items:center; gap:var(--wp--preset--spacing--40);
  flex-wrap:wrap;
}
.l3-consenso__testo{ flex:1 1 30ch; }
.l3-consenso__testo h2{ font-size:17px; font-weight:500; margin:0 0 6px; letter-spacing:-.01em; }
.l3-consenso__testo p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--wp--preset--color--muted); }
.l3-consenso__testo a{ color:var(--wp--preset--color--accent); }
.l3-consenso__scelte{ display:flex; gap:12px; flex:none; }
/* I due pulsanti sono identici per dimensione e peso. Rifiutare deve costare
   quanto accettare: e' la ragione per cui questi banner vengono contestati,
   e comunque non e' il modo in cui si tratta chi legge. */
.l3-consenso__scelte button{
  min-width:11ch; height:46px; padding:0 20px;
  border-radius:2px; font-family:inherit; font-size:15px; font-weight:500;
  cursor:pointer; border:1px solid var(--wp--preset--color--border);
}
.l3-consenso__no{ background:transparent; color:var(--wp--preset--color--contrast); }
.l3-consenso__no:hover{ border-color:var(--wp--preset--color--muted); }
.l3-consenso__si{ background:var(--wp--preset--color--button); color:var(--wp--preset--color--base); border-color:transparent; }
.l3-consenso__si:hover{ background:var(--wp--preset--color--accent); }
@media (max-width:640px){
  .l3-consenso__scelte{ width:100%; }
  .l3-consenso__scelte button{ flex:1; }
}

/* Il ripensamento: piccolo, in fondo, sempre raggiungibile. Un consenso che
   non si puo' ritirare non e' un consenso. */
.l3-consenso__ripensa{ max-width:var(--l3-wrap); margin:0 auto; padding:0 var(--l3-gutter) 24px; }
.l3-consenso__ripensa[hidden]{ display:none; }
.l3-consenso__ripensa button{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--wp--preset--font-family--mono);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--dim-2); text-decoration:underline; text-underline-offset:3px;
}
.l3-consenso__ripensa button:hover{ color:var(--wp--preset--color--accent); }

/* Lo spazio che lascia il banner del consenso: l'altezza vera la misura il
   JavaScript e la scrive qui, perche' dipende da quante righe va a capo il
   testo - due su un monitor, quattro su un telefono. Senza, il banner copre
   quello che c'e' in fondo alla pagina: sulla pagina dello stato copriva il
   modulo per iscriversi agli avvisi. */
.l3-consenso-aperto .wp-site-blocks{ padding-bottom:var(--l3-consenso-h, 0px); }
/* Sul telefono il banner del consenso dev'essere corto: misurato, era alto
   262px su 844 di schermo. Via la frase meno necessaria, testo piu' fitto e
   pulsanti in riga invece che uno sopra l'altro. Le due frasi che restano
   dicono chi vede la visita e che rifiutare non rompe niente: e' quello che
   serve per decidere. */
@media (max-width:640px){
  .l3-consenso__extra{ display:none; }
  .l3-consenso__in{ padding:14px var(--l3-gutter); gap:12px; }
  .l3-consenso__testo h2{ font-size:16px; margin-bottom:4px; }
  .l3-consenso__testo p{ font-size:13.5px; line-height:1.45; }
  .l3-consenso__scelte{ width:100%; gap:10px; }
  .l3-consenso__scelte button{ flex:1; height:42px; min-width:0; font-size:14.5px; }
}