/* ==========================================================================
   TaxZer — Foglio di stile per articoli long-form
   --------------------------------------------------------------------------
   Progettato per HTML generato da Markdown: agisce su tag semantici nudi
   dentro il contenitore .tz-article, senza richiedere classi nel contenuto.

   Uso nell'editor a blocchi: si racchiude l'articolo in un blocco Gruppo e
   gli si assegna la classe CSS aggiuntiva  tz-article  dal pannello
   Avanzate della barra laterale.

   Alternativa senza blocco Gruppo: si sostituisce ogni occorrenza di
   .tz-article con il contenitore del tema, di norma .entry-content .

   Classi opzionali (da applicare a mano dove serve):
     .lede        → riga di sottotitolo sotto il titolo H1
     .totale      → riga di tabella da trattare come totale contabile
     .disclaimer  → blocco finale di note legali
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKEN — unico punto di configurazione
   -------------------------------------------------------------------------- */

.tz-article {
  /* Colore ------------------------------------------------------------ */
  --tz-navy:      #08406F;  /* brand primario: titoli, marcatori, enfasi   */
  --tz-ink:       #16324A;  /* corpo testo: navy desaturato, non nero      */
  --tz-ink-soft:  #5A6E7F;  /* didascalie, note, metadati                  */
  --tz-green:     #8CC63E;  /* brand accento: usato in DUE punti soltanto  */
  --tz-cream:     #F4F1EA;  /* avorio di marca: riservato alle superfici
                               dati. NON usato come fondo pagina: su un
                               long-form pesa senza aggiungere informazione */
  --tz-paper:     #F4F1EA;  /* superficie tabelle = avorio                 */
  --tz-rule:      #DCD6C8;  /* filetti: cream scurito, mai grigio neutro   */
  --tz-rule-firm: #B9B1A0;  /* filetti portanti (intestazioni tabella)     */

  /* Tipografia -------------------------------------------------------- */
  --tz-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --tz-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* Scala fluida. Il minimo vale a 360px, il massimo a 1200px.          */
  --tz-t-h1:    clamp(2.05rem, 1.35rem + 3.1vw, 3.5rem);
  --tz-t-lede:  clamp(1.1rem,  0.98rem + 0.5vw, 1.35rem);
  --tz-t-h2:    clamp(1.42rem, 1.2rem + 0.95vw, 1.95rem);
  --tz-t-h3:    clamp(1.1rem,  1.02rem + 0.35vw, 1.28rem);
  --tz-t-body:  clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  --tz-t-small:  0.83rem;
  --tz-t-micro:  0.72rem;

  --tz-lh-tight: 1.14;
  --tz-lh-body:  1.68;

  /* Misura e gutter --------------------------------------------------- */
  --tz-measure: 66ch;   /* lunghezza riga di lettura                      */
  --tz-gutter:  7.5rem; /* margine sinistro per i marcatori d'ordine      */

  /* Ritmo verticale --------------------------------------------------- */
  --tz-space:    1.6rem;
  --tz-space-lg: 3.4rem;
  --tz-space-xl: 5rem;
}


/* --------------------------------------------------------------------------
   2. FONT
   --------------------------------------------------------------------------
   In questo tema child i font NON si caricano da qui. Li accoda il
   functions.php, che e' il punto corretto: consente il controllo della
   versione, della cache e della sorgente.

   Per passare dai font remoti a quelli autoospitati si porta a true la
   costante TZ_FONT_LOCALI in cima al functions.php e si depositano i file
   woff2 nella cartella assets/fonts. Vedere assets/fonts.css.

   Per la generazione dei PDF con WeasyPrint non si usa la variabile di
   Fraunces: gli assi personalizzati SOFT e WONK non vengono risolti in modo
   affidabile. Si dichiarano i tagli statici e si tolgono le righe
   font-variation-settings.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */

.tz-article *,
.tz-article *::before,
.tz-article *::after { box-sizing: border-box; }

.tz-article {
  /* Nessun fondo: la pagina resta quella del tema. L'avorio e' riservato
     alle tabelle, dove porta informazione invece che sola identita'. */
  background: transparent;
  color: var(--tz-ink);
  font-family: var(--tz-body);
  font-size: var(--tz-t-body);
  font-weight: 400;
  line-height: var(--tz-lh-body);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  /* Il gutter sinistro ospita i marcatori d'ordine: il testo resta a
     bandiera sinistra, la pagina non è centrata. Documento di lavoro,
     non post di blog. */
  max-width: calc(var(--tz-measure) + var(--tz-gutter) + 4rem);
  margin-inline: auto;
  padding: var(--tz-space-xl) 2rem var(--tz-space-xl) calc(var(--tz-gutter) + 2rem);
  counter-reset: tz-sezione;
}

.tz-article > * { max-width: var(--tz-measure); }


/* --------------------------------------------------------------------------
   4. TESTATA
   -------------------------------------------------------------------------- */

.tz-article h1 {
  font-family: var(--tz-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: var(--tz-t-h1);
  font-weight: 400;              /* un serif ampio in peso leggero legge
                                    istituzionale; il grassetto legge editoriale */
  line-height: var(--tz-lh-tight);
  letter-spacing: -0.021em;
  color: var(--tz-navy);
  text-wrap: balance;
  margin: 0 0 1.2rem;
  max-width: 34ch;               /* misura più corta del corpo: il titolo
                                    deve andare a capo dove decidiamo noi */
}

/* Sottotitolo. Unico primo uso del verde: il filetto di chiusura. */
.tz-article .lede,
.tz-article h1 + p strong {
  font-weight: 500;
}

.tz-article .lede {
  font-size: var(--tz-t-lede);
  line-height: 1.45;
  color: var(--tz-navy);
  margin: 0 0 var(--tz-space-lg);
  padding-bottom: var(--tz-space);
  border-bottom: 2px solid var(--tz-green);
  max-width: 48ch;
}


/* --------------------------------------------------------------------------
   5. GERARCHIA DI SEZIONE
   --------------------------------------------------------------------------
   Il contenuto è un'enumerazione di voci di costo: il marcatore d'ordine
   non è decorativo, replica il riferimento di riga di una scrittura
   contabile. Sta nel gutter, allineato a destra contro il testo.
   -------------------------------------------------------------------------- */

.tz-article h2 {
  font-family: var(--tz-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: var(--tz-t-h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--tz-navy);
  text-wrap: balance;
  margin: var(--tz-space-xl) 0 var(--tz-space);
  max-width: 40ch;
  position: relative;
  counter-increment: tz-sezione;
}

.tz-article h2::before {
  content: counter(tz-sezione, decimal-leading-zero);
  position: absolute;
  left: calc(var(--tz-gutter) * -1);
  top: 0.42em;
  width: calc(var(--tz-gutter) - 1.6rem);
  text-align: right;
  font-family: var(--tz-body);
  font-size: var(--tz-t-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.09em;
  color: var(--tz-ink-soft);
}

.tz-article h3 {
  font-family: var(--tz-body);
  font-size: var(--tz-t-h3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--tz-navy);
  margin: var(--tz-space-lg) 0 0.7rem;
}


/* --------------------------------------------------------------------------
   6. CORPO
   -------------------------------------------------------------------------- */

.tz-article p { margin: 0 0 var(--tz-space); }

.tz-article strong {
  font-weight: 700;
  color: var(--tz-navy);
}

.tz-article em { font-style: italic; }

.tz-article a {
  color: var(--tz-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--tz-green);
  padding-bottom: 0.05em;
  transition: background-color 120ms ease;
}

.tz-article a:hover { background: rgba(140, 198, 62, 0.18); }

.tz-article a:focus-visible {
  outline: 2px solid var(--tz-navy);
  outline-offset: 3px;
  border-radius: 1px;
}

.tz-article ul,
.tz-article ol {
  margin: 0 0 var(--tz-space);
  padding-left: 1.35rem;
}

.tz-article li { margin-bottom: 0.5rem; }
.tz-article li::marker { color: var(--tz-ink-soft); }

/* Separatore di sezione: filetto corto a sinistra, non riga piena.
   Una riga piena spezza la pagina; un filetto corto la articola. */
.tz-article hr {
  border: 0;
  height: 1px;
  width: 4.5rem;
  background: var(--tz-rule-firm);
  margin: var(--tz-space-xl) 0;
}


/* --------------------------------------------------------------------------
   7. TABELLE — trattamento a partita contabile
   --------------------------------------------------------------------------
   Elemento distintivo del pezzo. I dati escono dalla misura di lettura,
   siedono su carta più chiara, cifre in numerali tabulari, e il totale è
   chiuso dalla doppia riga della prassi di bilancio. La seconda e ultima
   comparsa del verde è qui.
   -------------------------------------------------------------------------- */

.tz-article table {
  width: 100%;
  max-width: calc(var(--tz-measure) + 5rem);
  border-collapse: collapse;
  background: var(--tz-paper);
  font-size: var(--tz-t-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums;
  margin: var(--tz-space-lg) 0;
  border-top: 1px solid var(--tz-rule-firm);
  border-bottom: 1px solid var(--tz-rule-firm);
}

.tz-article thead th {
  font-family: var(--tz-body);
  font-size: var(--tz-t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--tz-ink-soft);
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--tz-rule-firm);
  white-space: nowrap;
}

.tz-article tbody td {
  padding: 0.78rem 1.1rem;
  border-bottom: 1px solid var(--tz-rule);
  vertical-align: baseline;
}

/* Colonna dei valori: sempre l'ultima, sempre allineata a destra. */
.tz-article thead th:last-child,
.tz-article tbody td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 500;
}

/* Voce descrittiva: leggermente più larga della colonna valori. */
.tz-article tbody td:first-child { width: 62%; }

/* Riga di totale. Automatica sull'ultima riga; forzabile con .totale
   quando la riga da chiudere non è l'ultima (es. un subtotale). */
.tz-article tbody tr:last-child td,
.tz-article tbody tr.totale td {
  border-bottom: none;
  border-top: 2px solid var(--tz-navy);
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
  color: var(--tz-navy);
  font-weight: 700;
  background: rgba(140, 198, 62, 0.22);
  box-shadow: inset 0 -3px 0 -1px var(--tz-green);  /* doppia riga di chiusura */
}

.tz-article tbody tr.totale + tr td { border-top: none; }


/* --------------------------------------------------------------------------
   8. CITAZIONI E CHIUSURA
   -------------------------------------------------------------------------- */

.tz-article blockquote {
  margin: var(--tz-space-lg) 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--tz-green);
  font-family: var(--tz-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: var(--tz-t-lede);
  font-weight: 400;
  line-height: 1.42;
  color: var(--tz-navy);
  max-width: 46ch;
}

.tz-article blockquote p:last-child { margin-bottom: 0; }

/* Firma di studio e note legali. Nessun nome individuale. */
.tz-article .disclaimer,
.tz-article > hr:last-of-type ~ p em {
  font-size: var(--tz-t-small);
  line-height: 1.6;
  color: var(--tz-ink-soft);
  font-style: normal;
}

.tz-article .disclaimer {
  margin-top: var(--tz-space-lg);
  padding-top: var(--tz-space);
  border-top: 1px solid var(--tz-rule);
  max-width: 58ch;
}

.tz-article .disclaimer p { margin-bottom: 0.8rem; }
.tz-article .disclaimer p:first-child {
  font-weight: 700;
  color: var(--tz-navy);
  letter-spacing: 0.02em;
}


/* --------------------------------------------------------------------------
   9. RESPONSIVE — il gutter collassa, i marcatori rientrano nel flusso
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .tz-article {
    --tz-gutter: 0rem;
    --tz-space-xl: 3.2rem;
    --tz-space-lg: 2.4rem;
    padding: 2.5rem 1.4rem 3.5rem;
  }

  .tz-article h2 { padding-top: 1.9rem; }

  .tz-article h2::before {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    text-align: left;
  }

  /* Tabelle: scorrimento orizzontale invece di compressione delle cifre. */
  .tz-article table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .tz-article tbody td:first-child { width: auto; white-space: normal; }
  .tz-article thead th,
  .tz-article tbody td { padding-inline: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-article a { transition: none; }
}


/* --------------------------------------------------------------------------
   10. STAMPA / WEASYPRINT
   --------------------------------------------------------------------------
   Blocco separato: clamp(), vw e le variation-settings non sono affidabili
   in WeasyPrint. Qui tutto è fissato in punti.
   -------------------------------------------------------------------------- */

@page {
  size: A4;
  margin: 22mm 20mm 20mm 20mm;

  @bottom-center {
    content: counter(page);
    font-family: "Manrope", sans-serif;
    font-size: 8pt;
    color: #5A6E7F;
  }

  @bottom-right {
    content: "TaxZer";
    font-family: "Manrope", sans-serif;
    font-size: 7pt;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #B9B1A0;
  }
}

@media print {
  .tz-article {
    --tz-t-h1:   26pt;
    --tz-t-lede: 12pt;
    --tz-t-h2:   15pt;
    --tz-t-h3:   11pt;
    --tz-t-body: 10pt;
    --tz-t-small: 8.5pt;
    --tz-t-micro: 7pt;
    --tz-gutter: 0;
    --tz-space:    0.85em;
    --tz-space-lg: 1.6em;
    --tz-space-xl: 2.1em;

    max-width: none;
    margin: 0;
    padding: 0;
    background: #FFF;          /* fondo cream solo a schermo: in stampa
                                  divora inchiostro e vira in fotocopia */
    font-size: 10pt;
    line-height: 1.5;
  }

  .tz-article > * { max-width: none; }
  .tz-article h1,
  .tz-article h2,
  .tz-article h3,
  .tz-article .lede,
  .tz-article blockquote { max-width: none; }

  /* Marcatori d'ordine in linea: non c'è gutter in stampa. */
  .tz-article h2 { padding-top: 0; }
  .tz-article h2::before {
    position: static;
    display: inline;
    width: auto;
    margin-right: 0.6em;
    font-size: 9pt;
  }

  /* Tenuta di pagina */
  .tz-article h1,
  .tz-article h2,
  .tz-article h3      { break-after: avoid; page-break-after: avoid; }
  .tz-article table,
  .tz-article blockquote,
  .tz-article .disclaimer { break-inside: avoid; page-break-inside: avoid; }
  .tz-article p       { orphans: 3; widows: 3; }
  .tz-article thead   { display: table-header-group; }

  .tz-article table   { background: #FFF; font-size: 8.5pt; }
  .tz-article tbody tr:last-child td,
  .tz-article tbody tr.totale td { background: #F2F7E7; }

  /* Gli URL non cliccabili vanno esplicitati. */
  .tz-article a { border-bottom: none; color: #08406F; }
  .tz-article a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 7.5pt;
    color: #5A6E7F;
  }
}