/* ============================================================
   csml.css — token e regole di base del sistema visivo CSML
   Fonte: CSML BRAIN/DESIGN.md (22/09/2026). Un file, due consumatori:
   il sito (Astro) e le pagine della Sede (HTML da n8n).
   Nessun build: si include con <link rel="stylesheet">.
   ============================================================ */

/* ---------- 0. Caratteri ---------- */
/* Ospitati qui, non su Google: un giro in meno sulla catena, nessuna terza parte che
   vede chi legge, e la Sede li prende dallo stesso posto. Gli URL sono relativi a
   questo foglio, quindi valgono ovunque csml.css sia servito. Sottoinsieme latino. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-var.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-600.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-500i.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plex-mono-400.woff2") format("woff2");
}

/* ---------- 1. Colore ---------- */
:root {
  /* palette canonica (hex di BRAND_VISUALE_OPERATIVO, OKLCH calcolato) */
  --navy:       #2C3E50;
  --gold:       #FFD700;
  --cyan:       #00B4D8;
  --gray:       #EEF0F2;
  --anthracite: #3C3C4C;

  /* neutri derivati, tinti verso il navy */
  --ink:        oklch(0.22 0.02 249);
  --ink-muted:  oklch(0.48 0.02 249);
  --paper:      oklch(0.985 0.004 248);
  --paper-2:    var(--gray);
  --line:       oklch(0.88 0.008 249);
  --on-navy:    oklch(0.96 0.006 248);
  --on-navy-2:  oklch(0.80 0.02 240);
  --line-navy:  oklch(0.44 0.03 249);
  --navy-2:     oklch(0.39 0.04 249);     /* superficie sollevata su navy */
  --gold-ink:   oklch(0.62 0.13 90);
  --cyan-ink:   oklch(0.52 0.11 222);
  /* il cyan di marca su navy sta a 4,46:1 e non passa AA per 0,04: su fondo scuro
     si usa questa variante, 5,06:1, indistinguibile a occhio */
  --cyan-navy:  #1EC0E0;
  --gold-hover: oklch(0.84 0.17 92);
  --error:      oklch(0.55 0.16 25);
  --select:     oklch(0.94 0.02 219);

  /* ---------- 2. Tipografia ---------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --step--1: 0.8rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.563rem;
  --step-3:  1.953rem;
  --step-4:  2.441rem;
  --step-5:  clamp(2.8rem, 6vw, 4.2rem);

  --leading-body: 1.55;
  --leading-display: 1.08;
  --tracking-label: 0.12em;
  --measure: 68ch;

  /* ---------- 3. Spazio e layout ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6.5rem;
  --space-8: 10rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 72rem;
  --radius: 4px;

  /* ---------- 4. Movimento ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
  --dur-4: 700ms;

  /* ---------- 5. Elevazione ---------- */
  --shadow-1: 0 1px 2px oklch(0.2 0.02 249 / 0.06);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 6. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-display);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
p { margin: 0 0 var(--space-3); max-width: var(--measure); }
/* «Tondo afferma, italico qualifica»: nel corpo il corsivo serve ai titoli delle opere,
   e prende il carattere del display. Cosi' e' un corsivo vero e non una finta inclinazione
   dell'Inter, di cui non ospitiamo il file italico. */
em, i { font-style: italic; }
p em, p i, li em, li i, dd em, dd i {
  font-family: var(--font-display);
  font-size: 1.22em;  /* il Cormorant ha occhio piu piccolo dell Inter: va riportato in scala */
  line-height: 1;
}
strong, b { font-weight: 600; }
a {
  color: var(--cyan-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-1) var(--ease-out);
}
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
img, svg, video { max-width: 100%; height: auto; display: block; }
code, kbd, samp, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* superfici scure: tutto quello che sta dentro eredita i colori giusti */
.surface-navy {
  background: var(--navy);
  color: var(--on-navy);
}
.surface-navy a { color: var(--cyan-navy); }
.surface-navy a:hover { color: var(--on-navy); }
.surface-navy .muted { color: var(--on-navy-2); }
.surface-navy .kicker { color: var(--cyan-navy); }
.surface-navy .rule { border-color: var(--line-navy); }
.surface-gray { background: var(--paper-2); }

/* salto al contenuto: prima fermata del Tab, visibile solo quando ha il fuoco */
.salta {
  position: absolute; left: var(--gutter); top: 0;
  transform: translateY(-120%);
  background: var(--paper); color: var(--ink);
  padding: 0.7em 1.1em; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; font-weight: 600; z-index: 100;
  transition: transform var(--dur-1) var(--ease-out);
}
.salta:focus-visible { transform: translateY(var(--space-2)); }

/* Testo per i soli lettori di schermo.
   ⚠️ Richiede un antenato posizionato: dentro un contenitore che scorre, senza
   `position: relative` sul genitore, esce dal documento e allarga la pagina.
   Per dare un nome a un link, `aria-label` e' piu' sicuro e non aggiunge nodi. */
.solo-voce {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 7. Componenti ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* kicker: la firma visiva del brand (Inter 600 MAIUSCOLO tracked, cyan) */
.kicker {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--cyan-ink);
  margin: 0 0 var(--space-3);
}
.kicker .num { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; margin-right: var(--space-2); }

.muted { color: var(--ink-muted); }
.lede { font-size: var(--step-1); }

/* bottone primario: la porta. Uno per schermata. */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  padding: 0.9em 1.6em;
  border-radius: var(--radius);
  /* un'etichetta lunga (un indirizzo, una frase) deve poter andare a capo:
     con il testo ingrandito un bottone rigido allarga la pagina */
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
/* la specificita' conta: `.surface-navy a` (0,1,1) batterebbe `.btn-primary` (0,1,0)
   e la porta finirebbe con testo cyan su oro, illeggibile. Si qualifica. */
.btn-primary, .surface-navy .btn-primary, .surface-gray .btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover, .surface-navy .btn-primary:hover { background: var(--gold-hover); color: var(--navy); }
.btn-secondary { background: transparent; color: var(--cyan-ink); border-color: var(--cyan-ink); }
.btn-secondary:hover { color: var(--ink); border-color: var(--ink); }
.surface-navy .btn-secondary { color: var(--cyan-navy); border-color: var(--cyan-navy); }
.surface-navy .btn-secondary:hover { color: var(--on-navy); border-color: var(--on-navy); }

/* la porta di fine capitolo: un link, non un bottone */
.porta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  color: var(--cyan-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.35em;
  margin-top: var(--space-4);
  min-height: 32px;
}
.porta::after { content: " \2192"; }
.porta:hover { color: var(--ink); }
.surface-navy .porta { color: var(--cyan-navy); }
.surface-navy .porta:hover { color: var(--on-navy); }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* form */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-weight: 500; }
.field input, .field textarea, .field select {
  font: inherit;
  padding: 0.7em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-out);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border: 2px solid var(--cyan); padding: calc(0.7em - 1px) calc(0.9em - 1px); }
.field .error { color: var(--error); font-size: var(--step--1); }

/* stati (Sede): pallino + testo */
.stato { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); }
.stato::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stato-corso { color: var(--cyan-ink); }
.stato-fatto { color: var(--navy); }
.stato-fermo { color: var(--ink-muted); }
.stato-errore { color: var(--error); }

/* «sto pensando»: un cerchio che respira, non uno spinner */
.pensa { width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); animation: pensa 1.6s var(--ease-in-out) infinite; }
@keyframes pensa { 0%, 100% { transform: scale(0.7); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } }

/* tabelle dati (Sede) */
.tabella { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.tabella th, .tabella td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.tabella td.num, .tabella th.num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.tabella tbody tr:nth-child(even) { background: color-mix(in oklch, var(--gray) 50%, transparent); }
.tabella tr.sel { background: var(--select); }

/* toast */
.toast { position: fixed; top: var(--space-4); left: 50%; transform: translateX(-50%); background: var(--navy); color: var(--on-navy); padding: var(--space-3) var(--space-4); border-radius: var(--radius); box-shadow: var(--shadow-1); animation: toast-in var(--dur-2) var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* rivelazione al primo scroll (sito): breve, poi fermo */
/* Rivelazione all'ingresso, senza JavaScript.
   Dove il browser non conosce animation-timeline, il testo e' semplicemente visibile:
   il contenuto non dipende mai da uno script per esistere. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes reveal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Sede: un gesto per pagina */
.sede { min-height: 100dvh; background: var(--paper-2); }
.sede-barra { background: var(--navy); color: var(--on-navy); padding: var(--space-3) var(--gutter); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: var(--step--1); }
.sede-corpo { padding: var(--space-4) var(--gutter); }
.sede-scheda { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); }
.sede .btn { min-height: 44px; }

/* ============================================================
   8. Il banner del consenso (Iubenda), vestito CSML
   ------------------------------------------------------------
   Il piano Free blocca i colori nel cruscotto e le chiavi passate a `csConfiguration`
   sono ignorate. Il banner pero' vive nel DOM della pagina, non in un iframe.
   Per vestirlo servono DUE cose, e nessuna delle due basta da sola:

   1. Iubenda scrive `background-color/color/font-size` come stili INLINE con !important,
      e l'inline importante batte qualunque foglio: quelle tre proprieta' le toglie
      la richiamata `onBannerShown` in Consenso.astro.
   2. Sotto restano le loro regole di foglio, anch'esse !important e caricate DOPO la
      nostra: a parita' di specificita' vincono loro. Qui i selettori hanno percio'
      specificita' piu' alta della loro (verificata leggendo le regole che si applicano
      davvero, il 22/09/2026).

   ⚠️ Sono classi di terze parti. Se Iubenda le rinomina, questo blocco smette di
   applicarsi e il banner torna nero con i bottoni azzurri: degrada, non si rompe,
   e il consenso continua a funzionare. Il marchio «Created with iubenda» resta:
   toglierlo e' una funzione del piano a pagamento, e non si tocca.
   ============================================================ */
html #iubenda-cs-banner .iubenda-cs-container,
html #iubenda-cs-banner .iubenda-cs-container .iubenda-cs-content {
  font-family: var(--font-body) !important;
}
html #iubenda-cs-banner .iubenda-cs-container .iubenda-cs-content {
  background-color: var(--navy) !important;
  color: var(--on-navy) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 24px oklch(0.15 0.02 249 / 0.45) !important;
}
html #iubenda-cs-banner .iubenda-cs-container .iubenda-cs-rationale,
html #iubenda-cs-banner .iubenda-cs-container .iubenda-banner-content,
html #iubenda-cs-banner .iubenda-cs-container #iubenda-cs-paragraph,
html #iubenda-cs-banner .iubenda-cs-container .iub-p {
  color: var(--on-navy) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
html #iubenda-cs-banner .iubenda-cs-container a.iubenda-privacy-policy-link,
html #iubenda-cs-banner .iubenda-cs-container a.iubenda-cs-cookie-policy-lnk,
html #iubenda-cs-banner .iubenda-cs-container .iubenda-banner-content a {
  color: var(--cyan-navy) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.18em !important;
}

/* i tre bottoni: stessa forma e stessa misura. Rifiutare non deve costare piu' che accettare */
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn,
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn,
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: var(--radius) !important;
  padding: 0.75em 1.5em !important;
  border: 1px solid transparent !important;
}
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn {
  background-color: var(--gold) !important;
  color: var(--navy) !important;
}
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn:hover {
  background-color: var(--gold-hover) !important;
}
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn {
  background-color: transparent !important;
  color: var(--on-navy) !important;
  border-color: var(--on-navy-2) !important;
}
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn:hover {
  border-color: var(--on-navy) !important;
}
html #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn {
  background-color: transparent !important;
  color: var(--cyan-navy) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.18em !important;
}
html #iubenda-cs-banner .iubenda-cs-container button.iubenda-cs-close-btn {
  background-color: transparent !important;
  color: var(--on-navy-2) !important;
}