/* ============================================================
   CertoFlow — pagine pubbliche (landing, testate, piè di pagina)
   Impaginazione editoriale: molta aria, una colonna di lettura stretta,
   filetti al posto delle ombre.
   ============================================================ */

/* ---------- Testata ---------- */
.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* ⚠️ `flex-wrap` non è un dettaglio: da quando in testata c'è anche
   «Segnala», su uno schermo stretto gli elementi sono quattro più il
   marchio. Senza il ritorno a capo l'ultimo finirebbe fuori dallo
   schermo — e l'ultimo, sul telefono, è il pulsante per uscire. */
.site-head-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  min-height: 72px;
  padding-block: 8px;
}

.site-nav {
  display: flex;
  gap: 24px;
  margin-inline-start: 12px;
}

.site-nav a {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
}
.site-nav a:hover { color: var(--accent); text-decoration: none; }

.site-head-end {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Lo spazio elastico sta QUI, sul primo dei due gruppi di destra: così
   lingua e pulsanti restano attaccati fra loro e insieme vanno a destra,
   esattamente come quando la lingua stava dentro il gruppo. */
.lang { display: flex; gap: 2px; margin-inline-start: auto; }

.lang-link {
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.lang-link:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.lang-link[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); }

.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 14px; }

/* Uscire è un'azione, non un link: serve una POST, quindi un modulo.
   Che però nell'intestazione deve stare in riga come tutto il resto. */
.esci-testata { margin: 0; display: inline-flex; }

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 76px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.hero-occhiello { margin-bottom: 20px; color: var(--accent); }

.hero h1 {
  font-size: clamp(38px, 6vw, 62px);
  max-width: 17ch;
  margin-bottom: 22px;
}

.hero-testo {
  font-size: 19px;
  line-height: 1.6;
  max-width: 60ch;
  margin-bottom: 34px;
}

.hero-azioni { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }

/* ---------- Sezioni ---------- */
.sez { padding: 76px 0; }
.sez-alt { background: var(--bg-2); border-block: 1px solid var(--line); }

.sez .eyebrow { color: var(--ink-3); }
.sez-titolo { font-size: clamp(28px, 4vw, 38px); max-width: 22ch; margin-top: 6px; }
.sez-testo { font-size: 18px; line-height: 1.65; max-width: 66ch; margin-bottom: 30px; }

.griglia-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}

.scheda, .pilastro {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.sez-alt .scheda { background: var(--panel); }

.scheda h3, .pilastro h3 { font-size: 20px; margin: 14px 0 8px; }
.scheda p, .pilastro p { font-size: 15px; margin: 0; color: var(--ink-2); }

.scheda-icona svg, .pilastro-icona svg {
  width: 30px;
  height: 30px;
  display: block;
  color: var(--accent);
}

.scheda-conta {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-size: 13px !important;
  color: var(--ink-3) !important;
}
.scheda-conta strong { color: var(--ink); font-size: 17px; }

/* ---------- Sezione dimostrativa ---------- */
.sez-prova { background: var(--panel); border-block: 1px solid var(--line); }

.prova {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 48px;
  align-items: center;
}

.prova h2 { font-size: clamp(26px, 3.4vw, 34px); margin-top: 6px; }
.prova p { font-size: 17px; max-width: 54ch; }

.prova-codice { margin: 26px 0 22px; }
.prova-codice .eyebrow { color: var(--ink-3); }
.prova-codice .code { font-size: 22px; }

.prova-qr {
  margin: 0;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.prova-qr img { display: block; width: 200px; height: 200px; }
.prova-qr figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: #4a5a53;
}

/* ---------- Near miss ---------- */
.sez-nearmiss { background: var(--bg-2); border-top: 1px solid var(--line); }

/* ---------- Piè di pagina ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 44px 0 56px;
}

.foot-avvertenza {
  font-size: 14px;
  color: var(--ink-3);
  max-width: 70ch;
  margin-bottom: 10px;
}
.foot-riga { font-size: 14px; color: var(--ink-3); margin: 0; }

/* ---------- Adattamento ai piccoli schermi ---------- */
@media (max-width: 860px) {
  .site-nav { display: none; }
  /* Sul telefono lo spazio è quello che è: si stringono le distanze
     invece di rimpicciolire i caratteri, e la fila dei pulsanti può
     andare a capo restando allineata a destra.

     ⚠️ `min-height: auto` è la riga che conta. La testata è appiccicata
     in alto (sticky): con cinque elementi che vanno a capo e l'altezza
     minima da schermo grande occupava 154px su 812, cioe' il 19% dello
     schermo, per tutto il tempo che si scorre. Tolta quella, le righe
     sono alte quanto il loro contenuto e si scende sotto il 15%. */
  .site-head-in { gap: 10px; min-height: auto; padding-block: 10px; }
  .site-head-end { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .site-head-end .btn-sm { padding-inline: 12px; }
  .prova { grid-template-columns: 1fr; gap: 32px; }
  .prova-qr { justify-self: start; }
  .hero { padding: 56px 0 48px; }
  .sez { padding: 52px 0; }
}

/* ---------- I casi lavorati dentro i corsi ----------
   Un esempio concreto va letto come una cosa a parte dal testo, non come
   un paragrafo più lungo: riquadro, non colore d'allarme. Chi legge deve
   capire a colpo d'occhio che qui si sta guardando una scena, non una
   regola. */
.caso {
  margin: 28px 0;
  padding: 22px 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
}
.caso-titolo {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.caso p { margin: 0 0 12px; }
.caso p:last-child { margin-bottom: 0; }
.caso ol, .caso ul { margin: 12px 0; padding-left: 22px; display: grid; gap: 8px; }

/* ---------- La nota sulla privacy sotto i moduli ----------
   Compare in cinque punti (segnalazione, elenchi configurabili, firma dei
   documenti) e dice sempre la stessa cosa: che cosa facciamo del dato che
   stai per scrivere. Non è un paragrafo del testo — è la condizione sotto
   cui si compila il modulo, e deve leggersi come tale.
   ⚠️ Anche questa era usata e mai definita: usciva come testo nudo, subito
   sotto un pulsante, dove nessuno la leggeva. */
.nota-privacy {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 68ch;
}

/* ---------- La frase da cui dipende il resto ----------
   Un corso ha, ogni tanto, un paragrafo che vale più degli altri: quello
   che se uno legge solo lui ha già capito la cosa importante. Si segna
   così — non con l'arancione dell'allarme, perché non è un pericolo: è
   il punto. Il font resta quello del testo, cambia il peso della riga
   accanto. */
.rilievo {
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  line-height: 1.6;
}

/* La tabella dentro un caso: si legge, e scorre sul telefono invece di
   sfondare la pagina. */
.tabella-caso {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  display: block;
  overflow-x: auto;
}
.tabella-caso th,
.tabella-caso td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
  vertical-align: top;
}
.tabella-caso th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
}

/* Piede: i due link di legge, sempre raggiungibili da ogni pagina. */
.foot-legale {
  font-size: 14px;
  margin: 6px 0 0;
  display: flex;
  gap: 10px;
  align-items: center;
}
.foot-legale span { color: var(--ink-4); }

/* Il pulsante verso l'attestato dimostrativo, sulla pagina di verifica.
   ⚠️ `no-print`: chi stampa la pagina di verifica sta archiviando un
   esito, e un pulsante stampato è inchiostro che non porta da nessuna
   parte. */
.documento-azione { margin: 22px 0 0; }

/* ============================================================
   Il testo dei casi vuoti — «non c'è ancora niente qui»
   ------------------------------------------------------------
   ⚠️ SPOSTATA QUI IL 09/08/2026 DA `verifica.css`. La classe la usano
   dieci viste — gestione, assegnazione, richieste, aula, frequenza — ma
   stava nel foglio di UNA pagina sola, che le altre non caricano. Il
   risultato: il testo del caso vuoto usciva senza stile quasi ovunque,
   cioè grande e nero come un paragrafo normale, esattamente dove il tono
   dovrebbe essere sommesso.

   `pagine.css` lo carica ogni pagina del prodotto: una classe usata da
   tutti sta nel foglio di tutti.
   ============================================================ */
.vuoto { color: var(--ink-3); font-size: 15px; }

/* ============================================================
   Utilità che non appartengono a nessuna pagina
   ------------------------------------------------------------
   ⚠️ SPOSTATE QUI IL 09/08/2026 DA `gestione.css`. Le usano pagine che
   quel foglio non lo caricano — `/privacy`, `/verifica`, il modulo di
   segnalazione — e quindi non facevano niente: `no-print` non nascondeva
   in stampa, `blocco-spiega` usciva come un paragrafo qualunque, il
   modulo stretto era largo quanto la pagina.

   Il criterio: una classe che descrive un RUOLO (spiegazione di sezione,
   «non stampare», modulo stretto) sta nel foglio comune; una che
   descrive un PEZZO di una pagina sta nel foglio di quella pagina.
   ============================================================ */
.modulo-stretto { max-width: 520px; }
.blocco-spiega { font-size: 15px; color: var(--ink-2); margin: -6px 0 16px; }

/* ⚠️ `.no-print` sta QUI dal 09/08/2026, e non solo dentro `esame.css` e
   `gestione.css`. È l'utilità più universale che ci sia — «questo pezzo
   non finisce sulla carta» — e viveva in due fogli di pagina: su
   `/verifica`, che non carica nessuno dei due, il pulsante di ritorno
   finiva stampato in fondo a un attestato verificato. Una regola di
   stampa che vale solo su alcune pagine non è una regola di stampa. */
@media print {
  .no-print { display: none; }
}


/* ============================================================
   LA BANDA DELLA SCADENZA — 11/08/2026
   ------------------------------------------------------------
   Sta fra la testata e il contenuto, a tutta larghezza: è l'unica cosa
   che deve interrompere la lettura, e per farlo deve stare nel percorso
   dell'occhio, non in un angolo.
   ⚠️ Nessun `position: fixed`: una banda che segue lo scorrimento su un
   telefono si mangia una riga di contenuto per sempre, e chi non può
   rinnovare in quel momento non ha modo di toglierla.
   ============================================================ */
.banda-scadenza {
  margin: 0;
  padding: 12px 20px;
  text-align: center;
  background: var(--warn-soft);
  color: var(--warn-ink);
}
.banda-scadenza a {
  margin-left: 8px;
  font-weight: 600;
  color: inherit;
}
.banda-scadenza-ferma {
  background: var(--bad-soft);
  color: var(--bad-ink);
}