/* Le guide: quello che è SOLO delle guide. Colori, caratteri, intestazione e piede stanno
   in `sito.css`, che va caricato prima di questo (l'ordine conta: `.gd-cappello` sovrascrive
   `.lp-cappello`). */

/* Le guide sono testo lungo: corpo più grande e interlinea più larga del resto del
   sito (che sta a 16px/1.5 in `sito.css`). Erano lì, ma valgono solo qui. */
body { font-size: 17px; line-height: 1.65; }
@media (max-width: 700px) { body { font-size: 16px; } }

/* ⚠️ Nell'indice delle guide il cappello NON è quello centrato della home: si allinea a
   sinistra come il testo che lo segue, e le due misure si invertono — «Guide» conta più
   della frase che lo spiega, quindi cresce lui e cala il sottotitolo.
   Le regole di base (`.lp-cappello`, `.lp-occhiello`, `.lp-h2`) stanno in `sito.css`. */
.gd-cappello { text-align: left; }
.gd-cappello .lp-occhiello { font-size: 20px; }
.gd-cappello .lp-h2 { font-size: 28px; margin: 0; max-width: 640px; }
@media (max-width: 700px) {
  .gd-cappello .lp-occhiello { font-size: 17px; }
  .gd-cappello .lp-h2 { font-size: 23px; }
}

/* ── Il testo ──────────────────────────────────────────────────────────────────── */
.gd-main { max-width: 740px; margin: 0 auto; padding: 40px 24px 70px; }
/* ⭐ L'INDICE è più largo delle guide (14/09/2026): lì non si legge un testo lungo, si
   scorre un elenco di schede, e con l'icona a sinistra la riga ha bisogno di più respiro.
   Le singole guide restano a 740px, che è la misura giusta per leggere. */
.gd-main.gd-indice { max-width: 880px; }
.gd-main h1 { font-family: var(--serif); font-weight: 500; font-size: 42px; line-height: 1.12;
  letter-spacing: -.02em; margin: 0 0 22px; }
.gd-main h2 { font-family: var(--serif); font-weight: 500; font-size: 27px; letter-spacing: -.015em;
  margin: 40px 0 12px; }
.gd-main p { margin: 0 0 16px; }
/* La risposta in apertura: chi cerca vuole sapere subito se è nel posto giusto. */
.gd-risposta { font-size: 19px; color: var(--brand-ink); border-left: 3px solid var(--brand);
  padding-left: 16px; }
.gd-punti, .gd-passi { margin: 0 0 16px; padding-left: 22px; }
.gd-punti li, .gd-passi li { margin-bottom: 10px; }
.gd-nota { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--faint);
  border-radius: 0 10px 10px 0; padding: 14px 18px; color: var(--muted); font-size: 16px; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }

/* Le tabelle scorrono da sole: la pagina non deve mai scorrere in orizzontale. */
.gd-tab { overflow-x: auto; margin: 0 0 18px; }
.gd-tab table { width: 100%; border-collapse: collapse; background: #fff; font-size: 16px; }
.gd-tab th, .gd-tab td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.gd-tab th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ── L'invito, in fondo ────────────────────────────────────────────────────────── */
.gd-cta { background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 26px; margin-top: 44px; }
.gd-cta-tit { font-family: var(--serif); font-size: 24px; margin: 0 0 10px; }
.gd-cta-bottoni { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.gd-btn { display: inline-block; background: var(--brand); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 12px; }
.gd-btn:hover { background: var(--brand-ink); }
.gd-btn.sec { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.gd-btn.sec:hover { background: var(--brand-soft); }

/* ── «Leggi anche»: le guide vicine, in fondo a ciascuna ────────────────────
   Riusa le schede dell'indice (`.gd-elenco`): sono la stessa cosa — un elenco di guide —
   e inventare un secondo stile le farebbe sembrare un'altra cosa.
   ⚠️ Il titolo è più piccolo dei titoli del testo: è un'appendice, non un capitolo. */
.gd-vicine { margin-top: 44px; }
.gd-vicine h2 { font-family: var(--serif); font-weight: 500; font-size: 22px;
  letter-spacing: -.01em; margin: 0; }
.gd-vicine .gd-elenco { margin-top: 16px; }
/* ⚠️ `margin-bottom: 0`: qui sotto il titolo non c'è più la descrizione (tolta il
   14/09/2026), e i 4px che la staccavano lascerebbero il testo scentrato nella scheda. */
.gd-vicine .gd-elenco b { font-size: 18px; margin-bottom: 0; }

/* ── L'indice ──────────────────────────────────────────────────────────────────── */
.gd-elenco { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
/* ⭐ Le schede sono CLICCABILI, e si vede: bordo blu come i tasti del sito, e al passaggio
   del mouse la stessa risposta del tasto chiaro (`.btn-azione.chiaro` in `componenti.css`)
   — fondo azzurro tenue, bordo e testo più scuri. Prima il bordo era grigio come quello di
   un riquadro qualsiasi e solo il passaggio del mouse rivelava che erano link.
   ⚠️ Se cambia l'effetto dei tasti chiari, va cambiato anche qui: sono due regole in due
   file diversi che devono restare d'accordo. */
.gd-elenco a { display: block; background: #fff; border: 1.5px solid var(--brand);
  border-radius: 14px; padding: 18px 20px; text-decoration: none; color: var(--ink);
  transition: background .15s, border-color .15s, color .15s; }
.gd-elenco a:hover { background: var(--brand-soft); border-color: var(--brand-ink);
  color: var(--brand-ink); }
.gd-elenco b { display: block; font-family: var(--serif); font-weight: 500; font-size: 21px;
  margin-bottom: 4px; }
.gd-elenco span { color: var(--muted); font-size: 15.5px; }

/* ── L'indice con le icone ─────────────────────────────────────────────────────────
   ⭐ L'icona è la stessa della scheda dell'indicatore nella home, misure comprese
   (42px, angoli 11px, glifo 22px, fondo `--brand-soft`): è quella somiglianza a far
   riconoscere la guida senza doverne leggere il titolo.
   ⚠️ Vale solo per `.gd-elenco-ico`, cioè l'indice. Le "guide vicine" in fondo a ogni
   guida riusano `.gd-elenco` SENZA icona: se il flex si applicasse anche a loro, titolo
   e descrizione finirebbero affiancati invece che uno sotto l'altro. */
.gd-elenco-ico a { display: flex; align-items: flex-start; gap: 16px; }
.gd-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
  background: var(--brand-soft); color: var(--brand); font-size: 22px;
  display: flex; align-items: center; justify-content: center; }
/* `min-width: 0` serve dentro un flex: senza, un titolo lungo non va a capo e allarga la
   scheda oltre il suo contenitore. */
.gd-voce { min-width: 0; }

@media (max-width: 700px) {
  .gd-main { padding: 28px 18px 50px; }
  .gd-main h1 { font-size: 31px; }
  .gd-main h2 { font-size: 23px; }
}