/* ============================================================
   COOKIE — banner, preferenze e segnaposto dei video esterni.
   Figma: pagina "cookie tool" (2801:8203), componenti
   cookie-banner, cookie-preferences, cookie-button, toggle,
   video-consent.

   Misure ad hoc in px, uguali su desktop e mobile: è un'interfaccia
   piccola e poco invasiva, volutamente fuori dalla scala del sito.
   Andranno portate in variabili; colori e font invece sono già
   quelli del sito.

   Lo carica ogni pagina che usa js/consent.js, blog compreso: per
   questo i token hanno un valore di riserva nel var().
   ============================================================ */

/* ---- posizione ----
   Desktop: in basso, allineati al margine di pagina (il banner a
   sinistra, le preferenze a destra), anche oltre i 1920.
   Sotto i 1024 il menu è una barra in fondo allo schermo: banner e
   preferenze stanno 12px SOPRA la barra, per non coprirla. */
:root{
  --cookie-edge:max(var(--space-page-margin, 24px), calc((100vw - var(--size-page-max, 1920px)) / 2 + var(--space-page-margin, 24px)));
  --cookie-bottom:32px;
}
@media (max-width: 1023px){
  :root{
    --cookie-edge:12px;
    --cookie-bottom:calc(var(--menu-bar-h, 56px) + var(--menu-bar-pad, 24px) + 12px);
  }
}

/* ---- pulsante ---- */
.cookie-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 20px;
  border:0;
  border-radius:20px;
  background:var(--color-black, #111);
  color:var(--color-white, #fff);
  font-family:var(--font-base, sans-serif);
  font-weight:600;
  font-size:12px;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .3s ease, box-shadow .3s ease;
}
/* hover come i pulsanti del sito: il pieno passa al primary,
   il bordato prende il bordo primary */
.cookie-button:hover{ background:var(--color-primary, #009193); }
.cookie-button--secondary{
  background:transparent;
  color:var(--color-black, #111);
  box-shadow:inset 0 0 0 1.5px var(--color-black, #111);
}
.cookie-button--secondary:hover{
  background:transparent;
  box-shadow:inset 0 0 0 2px var(--color-primary, #009193);
}

.cookie-link{
  align-self:flex-start;
  padding:0;
  border:0;
  background:none;
  font-family:var(--font-sans, sans-serif);
  font-size:13px;
  line-height:2;
  color:var(--color-black, #111);
  text-decoration:underline;
  cursor:pointer;
}

/* ---- banner ---- */
cookie-banner{
  position:fixed;
  /* sotto all'header (1000): aprendo il menu mobile, il pannello
     passa sopra al banner */
  z-index:999;
  left:var(--cookie-edge);
  bottom:var(--cookie-bottom);
  width:min(413px, calc(100vw - 24px));
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:20px;
  box-sizing:border-box;
  background:var(--color-white, #fff);
  border-radius:16px;
  box-shadow:var(--shadow-banner, 0 8px 32px rgb(0 0 0 / .12));
}
cookie-banner[hidden]{ display:none; }
.cookie-banner-copy{ display:flex; flex-direction:column; gap:6px; }
.cookie-banner-title{
  font-family:var(--font-base, sans-serif);
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  color:var(--color-black, #111);
}
.cookie-banner-text{
  font-family:var(--font-sans, sans-serif);
  font-size:13px;
  line-height:1.5;
  color:var(--color-gray-80, #414b52);
}
.cookie-banner-text a{ color:var(--color-black, #111); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:8px; }
.cookie-banner-actions .cookie-button{ flex:1 1 0; min-width:0; }

/* ---- preferenze ----
   <dialog> aperto con showModal(): il resto della pagina diventa
   inerte, il focus resta dentro, Esc chiude. */
.cookie-preferences{
  position:fixed;
  inset:auto var(--cookie-edge) var(--cookie-bottom) auto;
  margin:0;
  width:min(460px, calc(100vw - 24px));
  max-height:calc(100dvh - var(--cookie-bottom) - 12px);
  overflow:auto;
  padding:24px;
  box-sizing:border-box;
  border:0;
  border-radius:16px;
  background:var(--color-white, #fff);
  box-shadow:var(--shadow-dialog, 0 16px 48px rgb(0 0 0 / .16));
}
.cookie-preferences[open]{ display:flex; flex-direction:column; gap:20px; }
.cookie-preferences::backdrop{ background:rgb(17 17 17 / .3); }
@media (max-width: 1023px){
  .cookie-preferences{ inset:auto var(--cookie-edge) var(--cookie-bottom) var(--cookie-edge); width:auto; }
}

.cookie-preferences-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cookie-preferences-title{
  font-family:var(--font-base, sans-serif);
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  color:var(--color-black, #111);
}
.cookie-close{
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  box-shadow:inset 0 0 0 1.5px var(--color-gray-20, #c9ced1);
  cursor:pointer;
}
.cookie-close svg{ width:10px; height:10px; fill:none; stroke:var(--color-black, #111); stroke-width:1.5; stroke-linecap:round; }
.cookie-preferences-intro{
  font-family:var(--font-sans, sans-serif);
  font-size:13px;
  line-height:1.5;
  color:var(--color-gray-80, #414b52);
}

.cookie-categories{ display:flex; flex-direction:column; gap:8px; }
cookie-category{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
  border-radius:12px;
  background:var(--color-gray-15, #f0f3f5);
}
.cookie-category-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cookie-category-name{
  font-family:var(--font-base, sans-serif);
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  color:var(--color-black, #111);
}
.cookie-category-always,
.cookie-category-text{
  font-family:var(--font-sans, sans-serif);
  font-size:11px;
  line-height:1.5;
}
.cookie-category-always{ color:var(--color-gray-60, #67737a); }
.cookie-category-text{ color:var(--color-gray-80, #414b52); }
.cookie-category-services{ color:var(--color-gray-60, #67737a); }

/* interruttore: un <button role="switch">, lo stato è aria-checked */
.cookie-toggle{
  position:relative;
  display:flex;
  flex-shrink:0;
  width:36px;
  height:20px;
  padding:2px;
  border:0;
  border-radius:10px;
  background:var(--color-gray-60, #67737a);
  cursor:pointer;
  transition:background-color .2s ease;
}
.cookie-toggle::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--color-white, #fff);
  transition:transform .2s ease, background-color .2s ease;
}
/* area di tocco più grande del disegno, invisibile: 20px di altezza
   sono pochi per un dito */
.cookie-toggle::after{ content:""; position:absolute; inset:-12px -6px; }
.cookie-toggle[aria-checked="true"]{ background:var(--color-primary-40, #00c7ca); }
.cookie-toggle[aria-checked="true"]::before{ transform:translateX(16px); background:var(--color-black, #111); }

.cookie-preferences-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cookie-preferences-actions .cookie-button--secondary{ grid-column:1 / -1; }

/* ---- video esterni prima del consenso ----
   video-embed ha già misura e raggio dal foglio della pagina; qui
   solo anteprima, velo e messaggio. Sotto i 500px di larghezza del
   video il testo lungo non ci sta: si passa alla versione breve. */
video-embed{ position:relative; container-type:inline-size; }
.video-embed-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-consent{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:32px;
  background:rgb(17 17 17 / .75);
  color:var(--color-white, #fff);
  text-align:center;
}
.video-consent-text{
  max-width:480px;
  font-family:var(--font-sans, sans-serif);
  font-size:var(--font-size-paragraph-xs, 16px);
  line-height:1.5;
}
.video-consent-text a{ color:inherit; text-decoration:underline; }
.video-consent-short{ display:none; }
.video-consent-always{
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font-family:var(--font-sans, sans-serif);
  font-size:var(--font-size-paragraph-xs, 16px);
  line-height:1.5;
  text-decoration:underline;
  cursor:pointer;
}
@container (max-width: 500px){
  .video-consent{ gap:12px; padding:16px; }
  .video-consent-long{ display:none; }
  .video-consent-short{ display:inline; }
}

/* ---- link alle preferenze nel footer ----
   È un <button> (apre una finestra, non porta a una pagina) vestito
   come i link legali accanto. */
.footer-cookie-settings{
  padding:0;
  border:0;
  background:none;
  font-family:var(--font-sans, sans-serif);
  font-size:var(--font-size-paragraph-xs, 16px);
  line-height:1.5;
  color:var(--color-gray-40, #969ea3);
  white-space:nowrap;
  cursor:pointer;
  transition:color .25s ease;
}
.footer-cookie-settings:hover{ color:var(--color-white, #fff); }

/* Contrasto elevato: il bordo del pulsante e della X è un'ombra, che
   in questa modalità sparisce; l'interruttore era fatto solo di
   colori di sfondo. Vedi il blocco forced-colors in main.css. */
@media (forced-colors: active){
  .cookie-button, .cookie-close{ outline:2px solid ButtonText; outline-offset:-2px; }
  .cookie-toggle{ outline:2px solid ButtonText; outline-offset:-2px; }
  .cookie-toggle::before{ forced-color-adjust:none; background:ButtonText; }
  .cookie-toggle[aria-checked="true"]{ background:Highlight; forced-color-adjust:none; }
}