/* Note legali, banner del consenso e popup: impianto del sito GoatStudio (css/goat.css) sui token di Emanuele.
   Lo usano index.html, grazie.html e le tre pagine legali. Colori solo da Inchiostro, Carta, Ottone, Nebbia. */

/* Pagine legali aperte da sole: i token che altrimenti arrivano dall'<style> della landing.
   shortcut: font di sistema (Georgia, Arial) perché Cormorant e Manrope sono incorporati solo nella landing; se le pagine dirette contano, incorporarli anche qui. */
.pagina-legale{
  --inchiostro:#0E1A22;--carta:#E9DFC9;--ottone:#D9A441;--nebbia:#A8CFC9;
  --bg:var(--inchiostro);--fg:var(--carta);--fg-muto:rgba(233,223,201,.66);--linea:rgba(233,223,201,.14);
  --font-display:'Cormorant Garamond',Georgia,serif;--font-body:'Manrope','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--raggio:10px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;
  margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.65 var(--font-body);
}
.pagina-legale *,.pagina-legale *::before,.pagina-legale *::after{box-sizing:border-box}
.pagina-legale a{color:var(--nebbia)}
.pagina-legale :focus-visible{outline:2px solid var(--ottone);outline-offset:3px}
.salta{position:absolute;left:var(--s2);top:-100px;z-index:60;padding:var(--s1) var(--s2);background:var(--carta);color:var(--inchiostro)}
.salta:focus{top:var(--s2)}
.testata-legale{max-width:960px;margin:0 auto;padding:var(--s3)}
.testata-legale a{font:500 22px/1.2 var(--font-display);color:var(--carta);text-decoration:none}

/* Bottoni del banner: stessa classe per Accetta e Rifiuta, nessuna spinta grafica verso una delle due */
.consenso .btn{min-height:44px;padding:10px 18px;border:1px solid var(--ottone);border-radius:var(--raggio);background:transparent;
  color:var(--carta);font:600 14px/1.2 var(--font-body);letter-spacing:.02em;cursor:pointer}
@media (hover:hover) and (pointer:fine){.consenso .btn:hover{background:rgba(217,164,65,.14)}}
.consenso .btn:focus-visible,.consenso a:focus-visible,.consenso input:focus-visible{outline:2px solid var(--ottone);outline-offset:3px}

/* Piede (come GoatStudio): due colonne affiancate a ogni larghezza, una riga per voce. A sinistra i dati, a destra le note legali
   (il bottone Preferenze resta nascosto finché non c'è un servizio da scegliere). La colonna dei link prende solo la sua larghezza. */
.piede{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:start}
.piede-info p{margin:0;line-height:1.7;color:rgba(233,223,201,.66)}
.piede-info .piede-marchio{margin-bottom:var(--s1);font:500 20px/1.2 var(--font-display);color:var(--carta)}
.piede-info .piede-mail{overflow-wrap:anywhere}
.piede-info .piede-mail a{display:inline-flex;align-items:center;min-height:44px;color:var(--carta);text-underline-offset:4px}
.piede-info .piede-firma{margin-top:var(--s2)}
.piede-link{display:grid;justify-items:start}
.piede-link :is(a,.link-btn){display:inline-flex;align-items:center;min-height:44px;color:rgba(233,223,201,.66);text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){.piede-link :is(a,.link-btn):hover,.piede-mail a:hover{color:var(--ottone)}}
.piede-link [hidden]{display:none}
.link-btn{background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer}
.piede-link :focus-visible{outline:2px solid var(--ottone);outline-offset:3px}

/* Riga di informativa sotto la CTA del modulo */
.nota-privacy{margin-top:var(--s2);font-size:13px;line-height:1.6;color:var(--fg-muto)}
.nota-privacy a{color:var(--fg)}

/* Banner del consenso (js/consenso.js): non modale, fisso in basso, Inchiostro pieno */
.consenso{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  max-height:60svh;overflow-y:auto;
  padding:var(--s3);padding-bottom:max(var(--s3),env(safe-area-inset-bottom));
  background:var(--inchiostro);color:var(--carta);border-top:1px solid rgba(233,223,201,.28);
  font:400 14px/1.6 var(--font-body);
}
.consenso:focus{outline:none}
.consenso p{margin:0 0 var(--s1);max-width:72ch}
.consenso a{color:var(--nebbia)}
.consenso-titolo{font:500 22px/1.2 var(--font-display)}
.consenso-scelte{display:grid;gap:var(--s1);margin:var(--s2) 0}
.consenso-scelte label{display:flex;gap:var(--s1);align-items:flex-start;font:400 14px/1.6 var(--font-body);letter-spacing:normal;text-transform:none;color:var(--carta)} /* azzera lo stile delle etichette del modulo */
.consenso-scelte input{flex:none;width:var(--s2);height:var(--s2);margin:4px 0 0;accent-color:var(--ottone)}
.consenso-azioni{display:flex;flex-wrap:wrap;gap:var(--s1)}

/* Testi legali: colonna leggibile, tabella dei cookie */
.legale{max-width:960px;margin:0 auto;padding:var(--s6) var(--s3) var(--s8)}
.legale :is(p,ul){max-width:68ch}
.legale h1{font:500 clamp(40px,6vw,64px)/1.05 var(--font-display);margin:0 0 var(--s3)}
.legale h2{font:500 clamp(24px,2.6vw,32px)/1.15 var(--font-display);margin:var(--s6) 0 var(--s2)}
.legale li{margin-bottom:var(--s1)}
.legale a{color:var(--nebbia)}
.legale h1:focus{outline:none}
.legale .dato{font-family:var(--font-body);font-weight:600;letter-spacing:.06em;font-size:11px;text-transform:uppercase;border:1px dashed var(--nebbia);padding:2px 8px;border-radius:var(--raggio);display:inline-block}
.tabella-cookie{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:14px}
.tabella-cookie th,.tabella-cookie td{text-align:left;vertical-align:top;padding:var(--s1) var(--s2);border-bottom:1px solid rgba(233,223,201,.14);overflow-wrap:anywhere}
.tabella-cookie th{font-weight:600}
.tabella-cookie td::before{color:rgba(233,223,201,.66)}
@media (max-width:899px){
  .tabella-cookie thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabella-cookie tr,.tabella-cookie td{display:block}
  .tabella-cookie tr{padding:var(--s2) 0;border-bottom:1px solid rgba(233,223,201,.14)}
  .tabella-cookie td{padding:0;border:0}
  .tabella-cookie td::before{content:attr(data-label) ": "}
}
.pagina-legale .piede{max-width:960px;margin:0 auto;padding:var(--s4) var(--s3) var(--s8);border-top:1px solid rgba(233,223,201,.14);font-size:13px;color:rgba(233,223,201,.66)}

/* Popup legale (js/legale.js): <dialog> modale. Dal basso su mobile, centrato da 900px. Solo transform e opacity. */
.legale-aperto{overflow:hidden}
.dialogo-legale{
  position:fixed;inset:auto 0 0 0;margin:0;padding:0;border:0;
  width:100%;max-width:none;height:92svh;max-height:none;
  background:var(--inchiostro);color:var(--carta);border-top:1px solid rgba(233,223,201,.28);border-radius:16px 16px 0 0;
  font:400 16px/1.65 var(--font-body);
  overflow:hidden;overscroll-behavior:contain;
  opacity:0;transform:translateY(24px);
  transition:opacity .16s ease,transform .16s var(--ease),overlay .16s allow-discrete,display .16s allow-discrete;
}
.dialogo-legale[open]{opacity:1;transform:none;transition-duration:.26s}
@starting-style{.dialogo-legale[open]{opacity:0;transform:translateY(24px)}}
.dialogo-legale::backdrop{background:rgba(14,26,34,.7);opacity:0;transition:opacity .16s ease,overlay .16s allow-discrete,display .16s allow-discrete}
.dialogo-legale[open]::backdrop{opacity:1;transition-duration:.26s}
@starting-style{.dialogo-legale[open]::backdrop{opacity:0}}
.dialogo-corpo{height:100%;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
.dialogo-corpo .legale{padding:var(--s8) var(--s3) var(--s6)}
.dialogo-chiudi{
  position:absolute;top:var(--s1);right:var(--s1);z-index:2;width:48px;height:48px;
  display:grid;place-items:center;border:1px solid rgba(233,223,201,.28);border-radius:50%;
  background:var(--inchiostro);color:var(--carta);font:400 28px/1 var(--font-body);cursor:pointer;
}
.dialogo-chiudi:focus-visible{outline:2px solid var(--ottone);outline-offset:2px}
@media (min-width:900px){
  .dialogo-legale{inset:0;margin:auto;width:min(960px,calc(100vw - var(--s8)));height:min(86svh,880px);border:1px solid rgba(233,223,201,.28);border-radius:16px;transform:translateY(12px) scale(.98)}
  @starting-style{.dialogo-legale[open]{transform:translateY(12px) scale(.98)}}
  .dialogo-corpo .legale{padding:var(--s8) var(--s8) var(--s6)}
}
@media (prefers-reduced-motion:reduce){
  .dialogo-legale,.dialogo-legale[open]{transform:none;transition:opacity .01s,overlay .01s allow-discrete,display .01s allow-discrete}
  @starting-style{.dialogo-legale[open]{transform:none}}
}
/* Nel popup la tabella dei cookie resta a schede anche su desktop: sette colonne in 880 px spezzano le parole */
.dialogo-corpo .tabella-cookie thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dialogo-corpo .tabella-cookie :is(tr,td){display:block}
.dialogo-corpo .tabella-cookie tr{padding:var(--s2) 0;border-bottom:1px solid rgba(233,223,201,.14)}
.dialogo-corpo .tabella-cookie td{padding:0;border:0}
.dialogo-corpo .tabella-cookie td::before{content:attr(data-label) ": "}