/* =============================================================================
   businessplan-facile.it — sito.css
   Guscio del sito e pagine editoriali (home, prezzi, /modelli/, /settori/,
   /strumenti/, legali). Presuppone base.css già caricato.

   Queste pagine si leggono, si consultano e si stampano. Sono lunghe: la
   tipografia deve reggere 2.500 parole senza affaticare, e le tabelle — la
   parte che l'utente torna a guardare — devono poter uscire dalla colonna di
   testo invece di essere spremute dentro.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. SKIP LINK
   Primo elemento raggiungibile con il tabulatore. Invisibile finché non serve,
   mai display:none (sparirebbe anche per la tastiera).
   -------------------------------------------------------------------------- */

.salta {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: var(--z-avviso-fisso);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--brand-600);
  border-radius: var(--r-2);
  font-size: var(--fs-2);
  font-weight: var(--fw-forte);
  text-decoration: none;
  transition: top var(--t-veloce) var(--e-standard);
}
.salta:focus { top: var(--sp-4); }

/* -----------------------------------------------------------------------------
   2. INTESTAZIONE
   Il menu passa da due a cinque voci a seconda di quante sezioni sono
   pubblicate. Per questo la navigazione NON è centrata e NON è spinta a destra:
   sta subito accanto al logo, allineata a sinistra. Con due voci il gruppo
   resta compatto e leggibile; con cinque si allunga senza cambiare impianto.
   Una nav centrata o distribuita, con due voci, farebbe sembrare vuoto il sito.
   La CTA è l'unico elemento ancorato a destra: è sempre presente, quindi il
   bordo destro non resta mai spoglio.
   -------------------------------------------------------------------------- */

/* Colonna condivisa dal guscio: intestazione, contenuto e piè partono dalla
   stessa x a qualsiasi larghezza. L'imbottitura laterale cresce da sé quando la
   finestra supera la colonna, così non serve un contenitore interno. */
:root { --largh-guscio: 1080px; }

.intestazione {
  position: sticky;
  top: 0;
  z-index: var(--z-intestazione);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-3) max(var(--sp-6), (100% - var(--largh-guscio)) / 2);
  background: var(--surface);
  border-bottom: var(--bd);
}

.intestazione__logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-titolo);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  text-decoration: none;
  white-space: nowrap;
}
.intestazione__logo:hover { color: var(--brand-600); }
/* Il punto di riferimento del marchio quando il logo è solo testo: un bollo,
   non un'illustrazione. Se il logo porta già il wordmark in SVG (parentesi +
   nome), il bollo sparisce — due marchi affiancati non stanno. */
.intestazione__logo::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: var(--r-2);
  background: var(--brand-600);
}
.intestazione__logo:has(svg)::before, .intestazione__logo:has(img)::before { content: none; }

.intestazione__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  margin-right: auto;   /* spinge la CTA a destra, non le voci di menu */
}
.intestazione__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--altezza-tocco);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  font-size: var(--fs-2);
  font-weight: var(--fw-medio);
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
}
.intestazione__nav a:hover { background: var(--ink-050); color: var(--ink-900); }
/* Pagina corrente: sottolineatura spessa in brand, non un fondo pieno. */
.intestazione__nav a[aria-current="page"] {
  color: var(--ink-900);
  font-weight: var(--fw-forte);
  box-shadow: inset 0 -3px 0 var(--brand-600);
  border-radius: var(--r-2) var(--r-2) 0 0;
}

.intestazione__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-5);
  background: var(--brand-600);
  border: 1px solid var(--brand-600);
  border-radius: var(--r-2);
  color: #fff;
  font-size: var(--fs-2);
  font-weight: var(--fw-forte);
  text-decoration: none;
  white-space: nowrap;
}
.intestazione__cta:hover { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.intestazione__cta:active { background: var(--brand-800); border-color: var(--brand-800); }

/* -----------------------------------------------------------------------------
   3. IMPIANTO DELLA PAGINA
   Griglia a tre tracce: margine — colonna di testo — margine. Tutto il
   contenuto cade nella colonna centrale (66ch ≈ 66-72 caratteri per riga, la
   misura in cui l'occhio ritrova la riga successiva senza perdersi); ciò che
   porta la classe --largo scavalca i margini e si prende tutta la larghezza.
   -------------------------------------------------------------------------- */

.pagina {
  /* 32em al corpo da 17px ≈ 544px ≈ 70 caratteri per riga. Non si usa `ch`:
     misura l'avanzamento dello zero, molto più largo del carattere medio, e
     produrrebbe righe da oltre 90 caratteri. */
  --pagina-misura: 32em;
  --pagina-largo: 1080px;
  display: grid;
  grid-template-columns:
    [pieno-inizio] minmax(var(--sp-5), 1fr)
    [testo-inizio] min(var(--pagina-misura), 100% - var(--sp-10))
    [testo-fine] minmax(var(--sp-5), 1fr) [pieno-fine];
  row-gap: var(--sp-6);
  padding-block: var(--sp-12) var(--sp-20);
}
.pagina > * { grid-column: testo-inizio / testo-fine; min-width: 0; }

/* Elementi che possono uscire dalla misura di lettura. */
.pagina > .largo,
.pagina > .tabella-involucro,
.pagina > figure,
.pagina > .elenco-settori,
.pagina > .cta {
  grid-column: pieno-inizio / pieno-fine;
  width: min(var(--pagina-largo), 100% - var(--sp-10));
  justify-self: center;
}

.pagina > h2 { margin-top: var(--sp-8); }
.pagina > h3 { margin-top: var(--sp-4); }
.pagina > p, .pagina > ul, .pagina > ol { max-width: none; }
.pagina > ul, .pagina > ol { padding-left: var(--sp-6); }

/* --- Testata ---------------------------------------------------------------- */
.pagina__testata { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.pagina__testata h1 { font-size: var(--fs-6); }
/* Filo di briciole / categoria sopra il titolo. */
.pagina__testata > .t-etichetta { color: var(--brand-700); }
.pagina__testata time, .pagina__testata .pagina__meta {
  font-size: var(--fs-1);
  color: var(--ink-500);
}

/* --- 3. Sommario -------------------------------------------------------------
   Il paragrafo d'apertura. Un gradino sopra il corpo e un filo più chiaro di
   inchiostro: si distingue per dimensione, non per fondo colorato — un riquadro
   colorato in cima a un articolo lo fa sembrare un avviso. */
.pagina > .pagina__sommario {
  font-size: var(--fs-4);
  font-weight: var(--fw-normale);
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 28em;
  margin-bottom: var(--sp-4);
  text-wrap: pretty;
}

/* --- Corpo -------------------------------------------------------------------
   Interlinea 1.6 e paragrafi distanziati: in 2.500 parole il ritmo conta più
   della densità. */
.pagina p { font-size: var(--fs-3); line-height: var(--lh-corpo); }
.pagina li { line-height: var(--lh-corpo); }
.pagina h2 { font-size: var(--fs-5); }
.pagina h3 { font-size: var(--fs-4); }
.pagina h4 { font-size: var(--fs-3); }

/* Coda: nota dell'autore, aggiornamento, riferimenti normativi. */
.pagina__coda {
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: var(--bd);
  font-size: var(--fs-2);
  line-height: var(--lh-corpo);
  color: var(--ink-500);
}
.pagina__coda p { font-size: var(--fs-2); }

/* -----------------------------------------------------------------------------
   4. TABELLE EDITORIALI
   La parte più consultata di queste pagine: aliquote, soglie, importi minimi.
   Possono essere più larghe della colonna di testo (vedi .tabella-involucro
   sopra). Intestazioni di riga a sinistra, numeri a destra e tabulari.
   Nessuna zebratura: con righe corte disturba e in stampa diventa una gabbia
   grigia. Al suo posto un filo sottile fra le righe, che regge anche su carta.
   -------------------------------------------------------------------------- */

.pagina .tabella-involucro {
  overflow-x: auto;
  border: var(--bd);
  border-radius: var(--r-3);
  background: var(--surface);
}
.pagina table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.pagina caption {
  text-align: left;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  font-size: var(--fs-1);
  color: var(--ink-500);
}
.pagina th, .pagina td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
  text-align: left;
}
.pagina thead th {
  background: var(--ink-050);
  border-bottom: 1px solid var(--ink-300);
  font-size: var(--fs-1);
  font-weight: var(--fw-forte);
  text-transform: uppercase;
  letter-spacing: var(--ls-maiuscoletto);
  color: var(--ink-700);
  white-space: nowrap;
}
/* Intestazioni di riga: a sinistra, in tondo, non in grassetto pesante. */
.pagina tbody th { font-weight: var(--fw-medio); color: var(--ink-900); }
.pagina tbody tr:last-child > * { border-bottom: 0; }

/* Numeri: a destra, cifre a larghezza fissa, incolonnabili. */
.pagina td.num, .pagina th.num,
.pagina table [data-tipo="numero"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pagina tfoot td, .pagina tfoot th {
  background: var(--ink-050);
  border-top: 2px solid var(--ink-300);
  font-weight: var(--fw-titolo);
}
/* Zebratura disponibile ma opzionale: solo su tabelle davvero lunghe. */
.pagina table.righe-alterne tbody tr:nth-child(even) > * { background: var(--ink-050); }

/* -----------------------------------------------------------------------------
   5. FORMULE — <pre><code>
   Non è codice sorgente: è una formula scritta a mano su una lavagna. Quindi
   nessun fondo scuro, nessun colore di sintassi, nessun monospazio da
   terminale — testo grande e arioso, centrato fra due fili, con le lettere un
   po' distanziate come su una lavagna.
   -------------------------------------------------------------------------- */

.pagina pre {
  margin: var(--sp-6) 0;
  padding: var(--sp-6) var(--sp-5);
  background: transparent;
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
  overflow-x: auto;
}
.pagina pre code {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-4);
  font-weight: var(--fw-normale);
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Didascalia della formula: cosa significa, in parole. */
.pagina pre + .formula-nota {
  margin-top: calc(var(--sp-6) * -1 + var(--sp-3));
  font-size: var(--fs-1);
  color: var(--ink-500);
  text-align: center;
}
/* Termine tecnico dentro il testo corrente: leggero, non da terminale. */
.pagina p code, .pagina li code, .pagina td code {
  font-family: var(--font-sans);
  font-size: 0.95em;
  padding: 1px 5px;
  background: var(--ink-050);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-1);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   6. ELENCO SETTORI
   Indice delle pagine /settori/ e /modelli/. Righe, non piastrelle: sono voci
   di un indice e possono diventare quaranta.
   -------------------------------------------------------------------------- */

.elenco-settori {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  padding: 0;
  max-width: none;
}
.elenco-settori li { margin: 0; }
.elenco-settori a {
  display: grid;
  gap: var(--sp-1);
  height: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: var(--bd);
  border-radius: var(--r-3);
  font-size: var(--fs-3);
  font-weight: var(--fw-forte);
  color: var(--ink-900);
  text-decoration: none;
}
.elenco-settori a:hover { border-color: var(--brand-600); background: var(--brand-100); color: var(--brand-800); }
.elenco-settori a span, .elenco-settori a small {
  font-size: var(--fs-1);
  font-weight: var(--fw-normale);
  color: var(--ink-500);
}
.elenco-settori a:hover span, .elenco-settori a:hover small { color: var(--brand-700); }

/* -----------------------------------------------------------------------------
   7. CTA DI CHIUSURA
   Stessa forma su tutte le pagine, sempre in fondo: l'utente impara dove si
   trova. Bordo brand su fondo chiaro, niente fondo scuro a piena larghezza che
   spezzi la lettura. Non compare mai a metà articolo.
   -------------------------------------------------------------------------- */

.cta {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--brand-300);
  border-left: 6px solid var(--brand-600);
  border-radius: var(--r-3);
}
.cta h2, .cta h3 { font-size: var(--fs-4); margin: 0; max-width: 30ch; }
.cta p { font-size: var(--fs-3); color: var(--ink-700); margin: 0; max-width: 56ch; }
.cta a[href], .cta button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  background: var(--brand-600);
  border: 1px solid var(--brand-600);
  border-radius: var(--r-2);
  color: #fff;
  font-size: var(--fs-3);
  font-weight: var(--fw-forte);
  text-decoration: none;
  cursor: pointer;
}
.cta a[href]:hover, .cta button:hover { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.cta a[href]:active, .cta button:active { background: var(--brand-800); border-color: var(--brand-800); }
.cta small { font-size: var(--fs-1); color: var(--ink-500); }

/* -----------------------------------------------------------------------------
   8. PIÈ DI PAGINA
   Sobrio: link di servizio, nota legale, copyright. Nessuna newsletter, nessun
   muro di colonne.
   -------------------------------------------------------------------------- */

.pie {
  margin-top: var(--sp-16);
  /* Se il blocco precedente \u00e8 gi\u00e0 su superficie bianca (chiusura della home),
     lo stacco lo fa il filo: la fascia vuota sopra il pi\u00e8 diventa inutile. */
  padding: var(--sp-10) max(var(--sp-6), (100% - var(--largh-guscio)) / 2) var(--sp-8);
  background: var(--surface);
  border-top: var(--bd);
}
.pie > * { max-width: none; margin-inline: 0; }
.pie nav, .pie ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  padding: 0;
  margin: 0 0 var(--sp-6);
  max-width: none;
}
.pie li { margin: 0; }
.pie a { font-size: var(--fs-2); color: var(--ink-700); text-decoration: none; }
.pie a:hover { color: var(--brand-600); text-decoration: underline; }

/* Nota: chi siamo, limiti del servizio, avvertenza che il documento non
   sostituisce un commercialista. È importante che si legga.
   La misura si stringe con l'imbottitura destra, non con un max-width che
   competerebbe con la colonna condivisa del piè e disallineerebbe il bordo. */
.pie__nota {
  font-size: var(--fs-1);
  line-height: var(--lh-corpo);
  color: var(--ink-500);
  padding-top: var(--sp-5);
  padding-right: max(0px, 100% - 46em);
  border-top: var(--bd);
}
.pie__copy {
  margin-top: var(--sp-4);
  font-size: var(--fs-1);
  color: var(--ink-500);
}

/* -----------------------------------------------------------------------------
   9. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  /* L'intestazione va a due righe: marchio e CTA sopra, menu scorrevole sotto.
     Con due voci resta comunque una riga corta e ordinata, non una barra vuota. */
  .intestazione {
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding-inline: var(--sp-4);
  }
  .intestazione__logo { margin-right: auto; }
  .intestazione__cta { order: 2; }
  .intestazione__nav {
    order: 3;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: var(--bd);
    padding-top: var(--sp-1);
  }
  .intestazione__nav::-webkit-scrollbar { display: none; }

  .pagina { padding-block: var(--sp-8) var(--sp-12); row-gap: var(--sp-5); }
  .pagina__testata h1 { font-size: var(--fs-5); }
  .pagina > .pagina__sommario { font-size: var(--fs-3); }
  .pagina pre { padding: var(--sp-5) var(--sp-4); }
  .pagina pre code { font-size: var(--fs-3); text-align: left; }
  .cta { padding: var(--sp-5); }
  .cta a[href], .cta button { justify-self: stretch; justify-content: center; }
  .pie { padding-inline: var(--sp-4); }
}

/* -----------------------------------------------------------------------------
   10. STAMPA
   Queste pagine finiscono stampate e portate in banca. Resta il contenuto:
   testo, tabelle, formule. Sparisce tutto ciò che serve solo a navigare o a
   vendere. Gli indirizzi dei link compaiono per esteso: su carta un link
   sottolineato senza URL è inutile.
   -------------------------------------------------------------------------- */

@media print {
  .intestazione, .pie nav, .pie ul, .cta, .salta, .intestazione__cta { display: none; }

  .pagina {
    display: block;
    padding: 0;
    max-width: none;
    font-size: 11pt;
  }
  .pagina__sommario { font-size: 12pt; color: #000; }
  .pagina p, .pagina li { font-size: 11pt; }
  .pagina h1 { font-size: 20pt; }
  .pagina h2 { font-size: 15pt; break-after: avoid; }
  .pagina h3 { font-size: 12.5pt; break-after: avoid; }

  .pagina .tabella-involucro { overflow: visible; border-color: #999; break-inside: avoid; }
  .pagina table { font-size: 10pt; }
  .pagina thead th { background: #fff; border-bottom: 1pt solid #000; }
  .pagina thead { display: table-header-group; }   /* l'intestazione si ripete a ogni pagina */
  .pagina tr { break-inside: avoid; }
  .pagina table.righe-alterne tbody tr:nth-child(even) > * { background: #fff; }

  .pagina pre { break-inside: avoid; border-color: #999; }
  .pagina pre code { font-size: 12pt; }

  .pie { margin: 0; padding: 12pt 0 0; border-top: 1pt solid #999; }
  .pie__nota, .pie__copy { font-size: 8.5pt; color: #000; }

  .pagina a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #444;
    word-break: break-all;
  }
}