/* ═══════════════════════════════════════════════════════════
   LAIO — consenso cookie

   Prende i colori e i caratteri dal tema: dove il tema definisce
   un token lo usa, dove non c'è cade sul valore di riserva. Così
   segue anche il tema chiaro/scuro senza regole sue.

   Le manopole stanno tutte qui sotto.
   ═══════════════════════════════════════════════════════════ */
:root{
  --cons-larga:34rem;          /* larghezza massima della scheda */
  --cons-raggio:var(--radius,28px);
  --cons-pad:clamp(1.15rem,3.5vw,1.6rem);
  --cons-durata:.5s;
  --cons-curva:var(--nav-curva,cubic-bezier(.22,1,.3,1));
  --cons-sfalso:44ms;

  /* Quanto sta alzato da terra. Di base si mette sopra la pillola del
     menù: margine del menù + altezza della barra + un po' d'aria. */
  --cons-basso:calc(var(--nav-basso,1.25rem) + var(--nav-barra,3.5rem) + .75rem);
}

.laio-cons{
  position:fixed;z-index:120;
  left:50%;bottom:calc(var(--cons-basso) + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(1.5rem);

  width:min(var(--cons-larga),calc(100vw - 2.5rem));
  height:var(--cons-barra-h,auto);
  border-radius:var(--cons-raggio);

  /* La barra sta nel flusso e il pannello le sta sopra in assoluto: da chiusa
     l'altezza della scheda è quella della barra, senza bisogno di misure.
     Prima erano assolute tutte e due, quindi senza JavaScript la scheda non
     aveva contenuto in flusso e si schiacciava a una riga di 2 pixel. */
  display:flex;flex-direction:column;justify-content:flex-end;

  background:color-mix(in srgb,var(--paper,#FDFDFC) 92%,transparent);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line,rgba(14,14,14,.12));
  box-shadow:0 1.25rem 3rem rgba(0,0,0,.26);
  color:var(--ink,#0E0E0E);
  overflow:hidden;

  opacity:0;pointer-events:none;
  transition:
    height var(--cons-durata) var(--cons-curva),
    opacity .45s ease,
    transform .55s var(--cons-curva);
}
.laio-cons[data-visibile="true"]{opacity:1;transform:translateX(-50%);pointer-events:auto}

/* Finché il JavaScript non ha misurato niente si muove: eviti lo scatto
   dall'altezza di ripiego a quella vera al primo caricamento. */
.laio-cons:not(.pronto),.laio-cons:not(.pronto) *{transition:none!important}

/* ─── Barra sempre visibile, in fondo alla scheda ───────────── */
.laio-cons__barra{
  position:relative;flex:none;
  padding:var(--cons-pad);
}

.laio-cons__titolo{
  font-family:var(--display,system-ui),sans-serif;font-weight:800;
  font-size:1.12rem;letter-spacing:-.02em;line-height:1.2;margin:0 0 .45rem;
}
.laio-cons__testo{
  font-family:var(--body,system-ui),sans-serif;
  font-size:.92rem;line-height:1.5;margin:0;
  color:color-mix(in srgb,var(--ink,#0E0E0E) 78%,transparent);
  max-width:52ch;
}
.laio-cons__testo a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid var(--signal,#FF3B1F);
  white-space:nowrap;
}
.laio-cons__testo a:hover{color:var(--signal,#FF3B1F)}

.laio-cons__titolo,.laio-cons__testo{
  transition:opacity .25s ease,max-height .4s var(--cons-curva),margin .4s var(--cons-curva);
  overflow:hidden;max-height:12rem;
}
.laio-cons[data-aperto="true"] .laio-cons__titolo,
.laio-cons[data-aperto="true"] .laio-cons__testo{
  opacity:0;max-height:0;margin-bottom:0;pointer-events:none;
}

.laio-cons__azioni{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;
  margin-top:1rem;
  transition:margin-top .4s var(--cons-curva);
}
.laio-cons[data-aperto="true"] .laio-cons__azioni{margin-top:0}

/* ─── Pulsanti ─────────────────────────────────────────────── */
/* "Accetta" e "Solo i necessari" hanno lo stesso peso visivo: stessa
   altezza, stesso corpo, stessa area cliccabile. Rendere il rifiuto
   più difficile del consenso è la cosa che fa cadere un banner. */
.laio-cons__btn{
  font-family:var(--util,ui-monospace),monospace;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  height:2.6rem;padding-inline:1.15rem;
  border-radius:999px;cursor:pointer;
  border:1px solid var(--line,rgba(14,14,14,.12));
  background:transparent;color:inherit;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.laio-cons__btn:hover{border-color:currentColor}
.laio-cons__btn--pieno{
  background:var(--ink,#0E0E0E);color:var(--paper,#FDFDFC);
  border-color:var(--ink,#0E0E0E);
}
.laio-cons__btn--pieno:hover{
  background:var(--signal,#FF3B1F);border-color:var(--signal,#FF3B1F);color:#fff;
}

.laio-cons__link,
.laio-cons-riapri{
  position:relative;
  font-family:var(--util,ui-monospace),monospace;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  border:0;background:transparent;cursor:pointer;padding:.4rem 0;
  /* Non il grigio dei testi secondari: è un pulsante, e a quel contrasto
     sembrerebbe spento. */
  color:color-mix(in srgb,var(--ink,#0E0E0E) 62%,transparent);
  transition:color .25s ease;
}
.laio-cons__link:hover,
.laio-cons-riapri:hover{color:var(--ink,#0E0E0E)}

.laio-cons__link{display:grid;place-items:center start}
.laio-cons__link span{grid-area:1/1;transition:opacity .25s ease,transform .3s var(--cons-curva)}
.laio-cons__link-salva{opacity:0;transform:translateY(.45rem)}
.laio-cons[data-aperto="true"] .laio-cons__link-apri{opacity:0;transform:translateY(-.45rem)}
.laio-cons[data-aperto="true"] .laio-cons__link-salva{opacity:1;transform:none}
.laio-cons[data-aperto="true"] .laio-cons__link{
  color:var(--ink,#0E0E0E);font-weight:700;
}

/* Lo stesso trattino che entra da sinistra sulle voci del menù */
.laio-cons__link::before,
.laio-cons-riapri::before{
  content:'–';position:absolute;left:-.85rem;
  color:var(--signal,#FF3B1F);
  opacity:0;transform:translateX(-.3rem);
  transition:opacity .25s ease,transform .25s var(--cons-curva);
}
.laio-cons__link:hover::before,
.laio-cons__link:focus-visible::before,
.laio-cons-riapri:hover::before,
.laio-cons-riapri:focus-visible::before{opacity:1;transform:none}

/* Nel footer sta in fila con gli altri link legali */
.laio-cons-riapri{margin-left:.9rem;font-size:.7rem}

/* ─── Pannello delle preferenze ────────────────────────────── */
.laio-cons__pannello{
  position:absolute;left:0;right:0;top:0;
  padding:var(--cons-pad) var(--cons-pad) .5rem;
  /* Da chiuso sparisce del tutto: la scheda è translucida, e senza questo
     il testo delle preferenze si vedrebbe dietro al titolo. */
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.laio-cons[data-aperto="true"] .laio-cons__pannello{
  opacity:1;visibility:visible;
  transition:opacity .35s ease .1s,visibility 0s;
}
/* Pannello più alto della finestra: scorre dentro invece di uscire dallo schermo. */
.laio-cons.scorre .laio-cons__pannello{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  height:var(--cons-pannello-h,auto);
}

.laio-cons__occhiello{
  font-family:var(--util,ui-monospace),monospace;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute,#8C8C86);margin:0 0 .9rem;
}

.laio-cons__voci{list-style:none;margin:0;padding:0}
.laio-cons__voce{
  padding-block:.85rem;
  border-top:1px solid var(--line,rgba(14,14,14,.12));
  opacity:0;transform:translateY(.7rem);
  transition:
    opacity .4s var(--cons-curva) var(--cons-ritardo,0ms),
    transform .4s var(--cons-curva) var(--cons-ritardo,0ms);
}
.laio-cons__voce:first-child{border-top:0;padding-top:0}
.laio-cons[data-aperto="true"] .laio-cons__voce{
  --cons-ritardo:calc(var(--i,0) * var(--cons-sfalso));
  opacity:1;transform:none;
}
.laio-cons__voce:nth-child(1){--i:0}
.laio-cons__voce:nth-child(2){--i:1}
.laio-cons__voce:nth-child(3){--i:2}
.laio-cons__voce:nth-child(4){--i:3}

.laio-cons__testa{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.laio-cons__nome{
  font-family:var(--display,system-ui),sans-serif;font-weight:700;
  font-size:1rem;letter-spacing:-.01em;
}
.laio-cons__sempre{
  font-family:var(--util,ui-monospace),monospace;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute,#8C8C86);flex:none;
}
.laio-cons__desc{
  font-family:var(--body,system-ui),sans-serif;
  font-size:.86rem;line-height:1.5;margin:.35rem 0 0;
  color:color-mix(in srgb,var(--ink,#0E0E0E) 68%,transparent);
  max-width:56ch;
}


/* La levetta */
.laio-cons__leva{
  position:relative;display:inline-flex;align-items:center;
  flex:none;cursor:pointer;
}
.laio-cons__leva input{
  position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;
}
.laio-cons__pista{
  display:block;width:2.7rem;height:1.55rem;border-radius:999px;
  background:color-mix(in srgb,var(--ink,#0E0E0E) 16%,transparent);
  transition:background .3s ease;
}
.laio-cons__pista::after{
  content:'';position:absolute;top:.22rem;left:.22rem;
  width:1.1rem;height:1.1rem;border-radius:999px;
  background:var(--paper,#FDFDFC);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .3s var(--cons-curva);
}
.laio-cons__leva input:checked ~ .laio-cons__pista{background:var(--signal,#FF3B1F)}
.laio-cons__leva input:checked ~ .laio-cons__pista::after{transform:translateX(1.15rem)}
.laio-cons__leva input:focus-visible ~ .laio-cons__pista{
  outline:2px solid var(--signal,#FF3B1F);outline-offset:3px}

/* ─── Striscia legale in fondo alla pagina ─────────────────── */
/* Il footer del tema tiene 6rem di aria sotto per non finire dietro alla
   pillola del menù. La striscia si mette lì dentro, così le due cose si
   leggono come un footer solo invece che come due blocchi staccati. */
body:has(.laio-cons-legale) .site-footer{padding-bottom:1.25rem}

.laio-cons-legale{
  background:var(--paper,#FDFDFC);
  padding:0 var(--pad,clamp(1.25rem,4vw,4rem)) calc(6rem + env(safe-area-inset-bottom,0px));
}
.laio-cons-legale__riga{
  max-width:var(--wrap,1240px);margin-inline:auto;
  display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:.5rem 1.75rem;
  padding-top:.9rem;
  border-top:1px solid var(--line,rgba(14,14,14,.12));
}
.laio-cons-legale a{
  font-family:var(--util,ui-monospace),monospace;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--mute,#8C8C86);
  transition:color .25s ease;
}
.laio-cons-legale a:hover{color:var(--ink,#0E0E0E)}
/* Nella striscia il pulsante deve somigliare a un link, non a un pulsante:
   stessa riga di base, stesso corpo, nessuna spaziatura sua. */
.laio-cons-legale .laio-cons-riapri{
  margin-left:0;padding:0;font-size:.7rem;line-height:inherit;
  /* Stesso grigio dei link accanto: nella striscia sono un gruppo solo. */
  color:var(--mute,#8C8C86);
}
.laio-cons-legale .laio-cons-riapri:hover{color:var(--ink,#0E0E0E)}

/* ─── Segnaposto di un contenuto esterno bloccato ──────────── */
.laio-cons-blocco{
  display:grid;place-items:center;gap:.75rem;
  padding:clamp(1.5rem,5vw,3rem);text-align:center;
  border:1px dashed var(--line,rgba(14,14,14,.12));
  border-radius:var(--cons-raggio);
  background:var(--paper-2,#F1F0EC);
}
.laio-cons-blocco__testo{
  font-family:var(--body,system-ui),sans-serif;margin:0;max-width:44ch;
}
.laio-cons-blocco__btn{
  font-family:var(--util,ui-monospace),monospace;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  height:2.6rem;padding-inline:1.35rem;border-radius:999px;cursor:pointer;
  border:0;background:var(--ink,#0E0E0E);color:var(--paper,#FDFDFC);
  transition:background .25s ease;
}
.laio-cons-blocco__btn:hover{background:var(--signal,#FF3B1F)}
.laio-cons-blocco__nota{
  font-family:var(--body,system-ui),sans-serif;
  font-size:.82rem;margin:0;max-width:48ch;
  color:var(--mute,#8C8C86);
}

/* ─── Durante la misura: aperto, invisibile, fermo ─────────── */
.laio-cons.misura,.laio-cons.misura *{transition:none!important}
.laio-cons.misura{height:auto;visibility:hidden}
.laio-cons.misura .laio-cons__voce{opacity:1;transform:none}

@media(max-width:560px){
  .laio-cons__azioni{gap:.5rem}
  .laio-cons__btn{flex:1 1 auto;min-width:9rem}
  .laio-cons__link{flex:1 0 100%;text-align:left;padding-left:.9rem}
}

@media (prefers-reduced-motion:reduce){
  .laio-cons,.laio-cons *{transition-duration:.01ms!important;transition-delay:0ms!important}
}