/* Le guide (forum.sito.guide), rifatte il 24/10/2026: indice a gruppi con schede, pagina con
   indice laterale, riquadro con i dati del giorno, passi, domande frequenti, guide collegate.
   Colori e caratteri della home (home.css, tema chiaro unico); niente stili in linea (CSP). */
.guida {
  --g-ink: #111312; --g-ink-2: #4B5150; --g-ink-3: #7A807D; --g-line: #E6E7E3; --g-line-2: #D5D7D2;
  --g-surface: #F7F7F5; --g-teal: #005A4D; --g-teal-tinta: #E3EFEA; --g-ocra: #8A5D0B;
  --g-sans: "Geist", "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --g-mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-family: var(--g-sans); color: var(--g-ink);
}
body.caldo.pubblico main.largo > .guida { max-width: none; }
.guida h1, .guida h2 { text-wrap: balance; letter-spacing: -0.025em; color: var(--g-ink); }
.guida a { color: var(--g-teal); }
.gd-etichetta { font: 500 12px/1.4 var(--g-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g-ink-3); margin: 0 0 10px; }

/* testata */
.gd-testa { margin: 28px 0 40px; max-width: 860px; }
.gd-testa h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.06; font-weight: 600; margin: 8px 0 18px; }
.gd-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.gd-meta span { font: 12.5px var(--g-mono); color: var(--g-ink-2); background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 999px; padding: 4px 12px; }
.gd-testa-indice { margin-top: 56px; }
.gd-sotto { font-size: 1.15rem; line-height: 1.55; color: var(--g-ink-2); max-width: 64ch; margin: 0; }

/* numeri */
.gd-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.gd-numeri-testa { margin-top: 32px; }
.gd-num { background: var(--g-surface); border-radius: 14px; padding: 18px 20px; display: grid; gap: 4px; min-width: 0; }
.gd-num b { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--g-teal); }
.gd-num span { font-size: .9rem; line-height: 1.35; color: var(--g-ink-2); }

/* indice: gruppi e schede */
.gd-gruppo { margin: 56px 0 0; }
.gd-gruppo h2 { font-size: 1.6rem; font-weight: 600; margin: 0 0 4px; }
.gd-gruppo .sotto { margin: 0 0 20px; }
.gd-carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.gd-carta { display: grid; align-content: start; gap: 10px; padding: 22px; border-radius: 16px; background: var(--g-surface); border: 1px solid transparent; text-decoration: none; color: var(--g-ink); transition: border-color .15s, transform .15s, background .15s; min-width: 0; }
.guida a.gd-carta { color: var(--g-ink); text-decoration: none; }
.gd-carta:hover { border-color: var(--g-line-2); background: #fff; transform: translateY(-2px); }
.gd-carta b { font-size: 1.08rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.gd-carta span { font-size: .93rem; line-height: 1.5; color: var(--g-ink-2); }
.gd-carta small { font: 12px var(--g-mono); color: var(--g-ink-3); margin-top: 4px; }
.gd-n { font: 500 12px var(--g-mono); color: var(--g-teal); }
.gd-fondo { margin: 56px 0 0; max-width: 560px; }

/* pagina della guida */
.gd-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 56px; align-items: start; }
.gd-testo { min-width: 0; max-width: 720px; font-size: 1.04rem; line-height: 1.7; color: #262A29; }
.gd-testo section { margin: 44px 0 0; scroll-margin-top: 88px; }
.gd-testo h2 { font-size: 1.45rem; font-weight: 600; margin: 0 0 12px; }
.gd-testo p { margin: 0 0 14px; }
.gd-testo ul { margin: 0 0 14px; padding-left: 1.2em; display: grid; gap: 6px; }
.gd-breve { background: var(--g-teal-tinta); border-radius: 16px; padding: 22px 24px; }
.gd-breve p:last-child { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--g-ink); }

.gd-dati { border: 1px solid var(--g-line); border-radius: 18px; padding: 22px; }
.gd-esempi { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 0; }
.gd-esempi li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--g-line); }
.gd-tipo { font: 500 11.5px var(--g-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--g-teal); }
.gd-imp { font: 500 14px var(--g-mono); color: var(--g-ink); text-align: right; white-space: nowrap; }
.gd-esempi .gd-ogg { grid-column: 1 / -1; margin: 0; font-size: .98rem; line-height: 1.45; color: var(--g-ink); font-weight: 500; }
.gd-esempi .gd-ente { grid-column: 1 / -1; margin: 0; font-size: .86rem; color: var(--g-ink-3); }
.gd-nota { font-size: .84rem; color: var(--g-ink-3); margin: 12px 0 0 !important; }

.gd-passi { list-style: none; counter-reset: passo; padding: 0 !important; display: grid; gap: 12px !important; }
.gd-passi li { counter-increment: passo; position: relative; padding: 14px 16px 14px 56px; background: var(--g-surface); border-radius: 12px; line-height: 1.55; }
.gd-passi li::before { content: counter(passo); position: absolute; left: 16px; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: var(--g-teal); color: #fff; font: 600 13px/26px var(--g-sans); text-align: center; }

.gd-testo details { border-bottom: 1px solid var(--g-line); }
.gd-testo details:first-of-type { border-top: 1px solid var(--g-line); }
.gd-testo summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font-weight: 600; position: relative; line-height: 1.45; }
.gd-testo summary::-webkit-details-marker { display: none; }
.gd-testo summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 22px var(--g-sans); color: var(--g-ink-3); }
.gd-testo details[open] summary::after { content: "–"; }
.gd-testo details p { margin: 0 0 16px; color: var(--g-ink-2); }

.gd-mentio { background: var(--g-surface); border-radius: 16px; padding: 22px 24px; }
.gd-mentio p { margin: 0; }
.gd-fonti { margin-top: 28px !important; font-size: .86rem; color: var(--g-ink-3); }

/* colonna laterale */
.gd-lato { position: sticky; top: 88px; display: grid; gap: 16px; }
.gd-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--g-line); }
.gd-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--g-ink-2); text-decoration: none; font-size: .92rem; line-height: 1.35; }
.gd-toc a:hover { color: var(--g-ink); border-left-color: var(--g-teal); }
.gd-invito { background: #0E1614; color: #E7ECEA; border-radius: 16px; padding: 20px; }
.gd-invito .gd-etichetta { color: #8FA09A; }
.gd-invito p { margin: 0 0 14px; font-size: .95rem; line-height: 1.5; }
.gd-piva { display: flex; gap: 6px; background: #1B2422; border: 1px solid #2E3A37; border-radius: 10px; padding: 5px; }
.gd-piva input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: 15px var(--g-mono); padding: 0 10px; height: 38px; }
.gd-piva input::placeholder { color: #7D8C87; }
.gd-piva button { border: 0; border-radius: 7px; background: #5CC2AE; color: #0B1F1B; font: 600 14px var(--g-sans); padding: 0 14px; cursor: pointer; }
.gd-piva button:hover { background: #7DD3C2; }
.gd-altre { margin: 64px 0 0; }
.gd-altre h2 { font-size: 1.45rem; font-weight: 600; margin: 0 0 16px; }

@media (max-width: 900px) {
  .gd-griglia { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gd-lato { position: static; }
  .gd-toc { display: none; }
}
@media (max-width: 520px) {
  .gd-esempi li { grid-template-columns: minmax(0, 1fr); }
  .gd-imp { text-align: left; }
}