/* ---------------------------------------------------------
   ACCESSO — le regolazioni di lettura

   Non e' un widget di terze parti. Quelli mandano i dati di chi
   naviga a un server esterno (e renderebbero falsa la nostra
   informativa), e le associazioni di persone cieche li criticano da
   anni perche' promettono di "sistemare" un sito dall'esterno invece
   di sistemarlo davvero. Qui ci sono cinque regolazioni vere, che
   agiscono sul nostro CSS.

   Quello che serve a tutti resta fuori di qui: contrasto verificato,
   titoli in ordine, campi con etichetta, fuoco visibile. Questo
   pannello e' in piu', non al posto di.
   --------------------------------------------------------- */

/* ---- 1. il bottone ---- */
.accesso__apri{
  position:fixed; left:18px; bottom:18px; z-index:96;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface, #16131C); color:var(--ink);
  border:1px solid var(--line-strong, rgb(255 255 255 /.3));
  box-shadow:0 10px 30px rgb(0 0 0 /.45);
  cursor:pointer; transition:transform .25s var(--ease-pop), border-color .25s;
}
.accesso__apri:hover, .accesso__apri:focus-visible{
  transform:scale(1.08); border-color:var(--juice);
}
.accesso__apri svg{ width:26px; height:26px; display:block; }

/* la barra di contatto occupa il fondo del telefono: il bottone le sta sopra */
@media (max-width:920px){
  .accesso__apri{ bottom:86px; left:14px; width:44px; height:44px; }
  .accesso__apri svg{ width:24px; height:24px; }
}

/* ---- 2. il pannello ---- */
.accesso__pannello{
  position:fixed; left:18px; bottom:76px; z-index:97;
  width:min(300px, calc(100vw - 36px));
  padding:18px; border-radius:var(--r-lg, 18px);
  background:var(--bg); border:1px solid var(--line-strong, rgb(255 255 255 /.3));
  box-shadow:0 24px 70px rgb(0 0 0 /.6);
  display:grid; gap:14px;
}
.accesso__pannello[hidden]{ display:none; }
@media (max-width:920px){ .accesso__pannello{ bottom:140px; left:14px; } }

.accesso__titolo{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-dim); margin:0;
}
.accesso__gruppo{ display:grid; gap:8px; }
.accesso__etichetta{ font-size:.86rem; color:var(--ink-dim); }

.accesso__misure{ display:flex; gap:6px; }
.accesso__misura{
  flex:1; padding:9px 0; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--ink); border:1px solid var(--line);
  font-family:var(--ff-mono); letter-spacing:.06em;
  transition:border-color .2s, background .2s;
}
.accesso__misura:hover{ border-color:var(--juice); }
.accesso__misura[aria-pressed="true"]{
  border-color:var(--juice); background:rgb(var(--juice-glow, 255 107 26) /.16);
}
.accesso__misura--m{ font-size:.78rem; }
.accesso__misura--g{ font-size:.95rem; }
.accesso__misura--xg{ font-size:1.15rem; }

/* gli interruttori */
.accesso__voce{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-top:1px solid var(--line);
  font-size:.9rem; color:var(--ink); cursor:pointer;
}
.accesso__voce input{
  appearance:none; -webkit-appearance:none; flex:none;
  width:42px; height:24px; border-radius:999px; cursor:pointer;
  background:rgb(var(--panna-rgb, 247 242 234) /.14);
  border:1px solid var(--line); position:relative;
  transition:background .25s, border-color .25s;
}
.accesso__voce input::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:var(--ink);
  transition:transform .25s var(--ease-pop, cubic-bezier(.2,.9,.3,1.3));
}
.accesso__voce input:checked{ background:var(--juice); border-color:var(--juice); }
.accesso__voce input:checked::after{ transform:translateX(18px); background:var(--ink-on-juice, #16130E); }

.accesso__azzera{
  background:none; border:0; padding:0; cursor:pointer; justify-self:start;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim); text-decoration:underline;
  text-underline-offset:3px;
}
.accesso__azzera:hover{ color:var(--juice); }

/* ---------------------------------------------------------
   Gli effetti veri e propri
   --------------------------------------------------------- */

/* ---- testo piu' grande ----
   Agisce sulla radice: 66 misure su 80 nel foglio sono in rem e seguono.
   Le restanti sono titoloni gia' enormi, che non e' li' il problema. */
html[data-testo="grande"]{ font-size:115%; }
html[data-testo="enorme"]{ font-size:132%; }

/* ---- contrasto alto ----
   Il testo secondario smette di essere secondario, le righe si vedono,
   e sparisce tutto cio' che sta dietro e disturba la lettura. */
html.a11y-contrasto{
  --ink-dim:var(--ink);
  --line:rgb(var(--panna-rgb, 247 242 234) /.45);
  --line-strong:var(--ink);
}
html.a11y-contrasto .bg-pulp,
html.a11y-contrasto .bg-bubbles,
html.a11y-contrasto .bg-glass,
html.a11y-contrasto .grain,
html.a11y-contrasto .hero__halo{ display:none !important; }
html.a11y-contrasto body{ background:var(--nero, #0B0A10); }
html.a11y-contrasto .on-paper{ --ink-dim:var(--paper-ink); }

/* ---- niente movimento ----
   Il sito rispetta gia' prefers-reduced-motion, ma chi non l'ha impostato
   nel sistema deve poterlo chiedere qui. Oltre alle animazioni si fermano
   le tele animate dello sfondo, che sono la parte che si muove di piu'. */
html.a11y-fermo *,
html.a11y-fermo *::before,
html.a11y-fermo *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}
html.a11y-fermo .bg-pulp,
html.a11y-fermo .bg-bubbles,
html.a11y-fermo .grain{ display:none !important; }

/* ---- collegamenti sottolineati ----
   Il colore da solo non basta a chi non distingue i colori. */
html.a11y-link a:not(.btn):not(.nav__brand):not(.footer__brand){
  text-decoration:underline !important;
  text-underline-offset:3px;
}

/* ---- cursore di sistema ----
   Il cursore disegnato nasconde quello vero (cursor:none). Per chi fatica
   a seguirlo con lo sguardo o usa un ingranditore e' un ostacolo serio. */
html.a11y-cursore .cursor,
html.a11y-cursore .ripple{ display:none !important; }
html.a11y-cursore body.has-cursor,
html.a11y-cursore body.has-cursor a,
html.a11y-cursore body.has-cursor button,
html.a11y-cursore body.has-cursor label{ cursor:auto !important; }
html.a11y-cursore body.has-cursor a,
html.a11y-cursore body.has-cursor button{ cursor:pointer !important; }

/* chi stampa non ha bisogno del pannello */
@media print{ .accesso__apri, .accesso__pannello{ display:none !important; } }

/* ---------------------------------------------------------
   IL CONSENSO — la striscia dei cookie

   Esiste solo da quando c'è Analytics. Prima il sito non ne aveva
   bisogno, e dirlo era un vanto: adesso i cookie ci sono e vanno
   chiesti. "Rifiuta" ha lo stesso peso visivo di "Accetta", perché
   un no reso più difficile di un sì non è un consenso libero.
   --------------------------------------------------------- */
.consenso{
  position:fixed; left:0; right:0; bottom:0; z-index:9500;
  padding:16px var(--pad, 20px) calc(16px + env(safe-area-inset-bottom));
  background:rgb(var(--nero-rgb, 11 10 16) /.96);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px, 2vw, 28px); flex-wrap:wrap;
  transform:translateY(110%); transition:transform .5s var(--ease-juice);
}
.consenso.is-on{ transform:translateY(0); }
.consenso[hidden]{ display:none; }

.consenso__testo{
  margin:0; max-width:62ch; color:var(--ink-dim);
  font-size:.92rem; line-height:1.5;
}
.consenso__testo a{ color:var(--juice); text-underline-offset:3px; }

.consenso__scelte{ display:flex; gap:10px; flex:none; }
.consenso__btn{
  padding:.7em 1.5em; border-radius:var(--r-pill, 999px);
  font-family:inherit; font-weight:700; font-size:.88rem; cursor:pointer;
  border:2px solid var(--line-strong, var(--ink));
  background:transparent; color:var(--ink);
  transition:border-color .25s, background .25s, color .25s;
}
.consenso__btn:hover, .consenso__btn:focus-visible{ border-color:var(--juice); }
.consenso__btn--si{ border-color:var(--juice); background:var(--juice); color:var(--ink-on-juice); }
.consenso__btn--si:hover{ filter:brightness(1.08); }

@media (max-width:920px){
  .consenso{ flex-direction:column; align-items:stretch; text-align:left; gap:14px;
             padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .consenso__scelte{ display:grid; grid-template-columns:1fr 1fr; }
  .consenso__btn{ min-height:48px; }
  /* La barra dei contatti e il bottone di lettura salgono sopra la
     striscia. L'altezza la misura il JS e la scrive in --consenso-h:
     un numero fisso qui sarebbe sbagliato appena il testo va a capo
     una volta in piu', per esempio col testo ingrandito. */
  body:has(.consenso.is-on) .barra{
    bottom:calc(var(--consenso-h, 205px) + 10px);
  }
  body:has(.consenso.is-on) .accesso__apri{
    bottom:calc(var(--consenso-h, 205px) + 10px + 71px + 10px);
  }
}
@media print{ .consenso{ display:none !important; } }