/* ==========================================================================
   1. LA CARTA
   Il foglio del documento stampato del configuratore.

   Caricato con `media="print"` da `inc/configuratore.php`, e solo sulla
   pagina del configuratore: non tocca mai lo schermo, non entra nella cascata
   delle altre pagine, e il browser lo scarica senza bloccare la resa. Per
   questo sta fuori da `anfos_fogli()` (inc/stili-blocco.php), che accoda
   fogli da schermo su tutto il sito.

   ## Che cosa fa, in una riga

   **Non riduce la pagina web: la sostituisce.** Di tutto cio' che sta in
   pagina resta un solo elemento — `.stampa-c`, il documento che
   `anfos_configuratore_stampa()` ha composto apposta per la carta — e il
   resto sparisce: testata, piede, questionario, pannello del totale, elenco
   delle voci, modulo di contatto. Il committente l'ha chiesto con queste
   parole: «che salvi un file riepilogo ben formattato e non una fotografia
   della pagina web».

   La differenza fra le due strade si vede in tre punti che un `@media print`
   sul markup dello schermo non poteva dare:

   - il profilo dichiarato diventa un elenco di frasi leggibili invece di
     ventiquattro controlli di modulo, che su carta non si possono premere;
   - le ore e la norma escono dal `<details>` «Perché», che su carta non si
     apre — e il modo di aprirlo varia da motore a motore, quindi sarebbe
     stato anche una scommessa;
   - le voci diventano una tabella a cinque colonne che si legge in verticale
     come un preventivo, invece di schede impilate larghe una colonna.

   ## Le misure sono in punti e millimetri, e non e' una scappatoia

   La scala del tema (`theme.json`) e' fatta per lo schermo e parla in px e
   rem. Su carta quelle unita' non vogliono dire niente: 16 px non sono una
   misura finche' non si sa a quanti DPI si stampa, mentre 11 pt e 14 mm sono
   la stessa cosa su ogni stampante. Per la stessa ragione `griglia.py` qui
   non trova niente da dire, e ha ragione a non dirlo: non c'e' nessuna
   griglia dello schermo da rispettare.

   I colori invece restano quelli del tema: i token sono gia' in pagina, e un
   documento che si stampa a colori deve somigliare al sito da cui viene.
   ========================================================================== */

@page {
	size: A4;
	/* Margini da lettera commerciale: un filo piu' larghi in alto, perche' la
	   testata del documento e' la prima cosa che si vede e non deve stare
	   appiccicata al bordo del foglio. */
	margin: 18mm 14mm 16mm;
}

/* --- via tutto quello che non e' il documento ----------------------------- */

/* **Si spegne per discendenza diretta, non elencando i componenti.** Un elenco
   di classi da nascondere invecchia male in tutti e due i sensi: il giorno in
   cui la redazione aggiunge un blocco alla pagina quel blocco finisce sul
   foglio, e le cose che nessuno ha messo in pagina non ci sono affatto — il
   banner dei cookie di Iubenda non e' figlio di `.wp-site-blocks`, lo appende
   uno script al `body`, e nel primo PDF di prova occupava il fondo della
   prima pagina. Qui vale il contrario: si scende la catena un gradino alla
   volta e sul foglio ci va solo cio' che si e' dichiarato. */
/* **`!important` su questi due, e solo su questi due.** Il banner dei cookie
   arriva con `display` scritto nell'attributo `style`, e una dichiarazione in
   linea batte qualunque regola d'autore che non sia importante: senza, il
   primo PDF di prova aveva il banner stampato in fondo alla prima pagina. E'
   la stessa scelta che `componenti.css` fa gia' nel suo blocco di stampa. */
body > * { display: none !important; }
body > .wp-site-blocks { display: block !important; }

/* **Il banner dei cookie si spegne per identificativo, e non e' una
   preferenza.** E' un figlio del `body` come gli altri — il `joinchat` di
   WhatsApp, per dire, si spegne con la riga qui sopra — ma il suo foglio
   dichiara `#iubenda-cs-banner { display: … !important }`, e fra due
   dichiarazioni importanti decide prima la specificita' e poi l'ordine, e il
   suo foglio dice `#iubenda-cs-banner{…display:flex!important…}` — (1,0,0),
   che batte `body > *` (0,0,1). Nominarlo con lo stesso peso non basta: quel
   foglio lo inietta uno script **dopo** il nostro, e a pari specificita'
   vince chi arriva ultimo. Serve un gradino in piu', ed e' il `body >`.
   Misurato: nei primi quattro PDF di prova occupava il fondo della prima
   pagina, sopra la seconda voce del piano. */
body > #iubenda-cs-banner { display: none !important; }

.wp-site-blocks > * { display: none !important; }
.wp-site-blocks > .pagina-configuratore { display: block !important; }

.pagina-configuratore > * { display: none !important; }
.pagina-configuratore > .guscio { display: block !important; }

.guscio > * { display: none !important; }
.guscio > .configuratore { display: block !important; }

/* **`!important` anche qui, e la ragione e' misurata.** Senza, il
   questionario finiva sul foglio: `.configuratore > *` vale (0,1,0) e
   `.configuratore--a-passi .configuratore__domande { display: flow-root }`
   vale (0,2,0) — la classe che il JavaScript aggiunge quando accende la
   modalita' a passi vince, e le cinque schede delle domande si stampano
   sotto il documento. Visto nel PDF di prova, non nel foglio. */
.configuratore > * { display: none !important; }

/* **Il documento arriva `hidden` dal server, e qui si scopre.** Sullo schermo
   non serve nessuna regola per nasconderlo — `hidden` lo toglie dalla vista,
   dalla tabulazione e dall'albero di accessibilita' da solo — e cosi' lo
   spegnere e l'accendere non sono due dichiarazioni a pari specificita' in due
   fogli diversi, cioe' una gara vinta da chi si accoda per ultimo. */
.stampa-c[hidden] { display: block !important; }

/* Il guscio ha una larghezza massima e una gronda pensate per una finestra:
   sul foglio la larghezza la decide `@page`, e ogni millimetro tolto qui e'
   una riga in piu' che ci sta. */
.pagina-configuratore,
.pagina-configuratore .guscio {
	padding: 0;
	margin: 0;
	max-inline-size: none;
}

/* --- il foglio del sito vecchio, che qui fa danni -------------------------

   In pagina c'e' ancora il CSS del sito precedente, che dice
   `table td { border: solid 1px #fab; width: 100px }` e
   `table th { background-color: #186d2c }`. E' l'eredita' gia' documentata due
   volte in `componenti.css`, ed e' la ragione per cui la tabella delle voci
   usciva dalla stampante con l'intestazione verde pieno, i bordi rosa, le
   colonne larghe cento pixel e la pastiglia «formazione partecipata»
   illeggibile su fondo scuro. **Un foglio di stampa che non se ne occupa
   stampa quello**: e' la «tabella del piano coi bordi rosa» che questo
   progetto si e' gia' trovato in pagina una volta.

   La rimessa a zero vale solo dentro `.stampa-c`, e sta **prima** delle regole
   che disegnano: a pari specificita' vince chi viene dopo, e cio' che viene
   dopo qui e' il disegno. */
.stampa-c table,
.stampa-c caption,
.stampa-c thead,
.stampa-c tbody,
.stampa-c tr,
.stampa-c th,
.stampa-c td {
	background: none;
	border: 0;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	inline-size: auto;
}

/* --- il documento -------------------------------------------------------- */

.stampa-c {
	color: #000;
	background: none;
	font-size: 10pt;
	line-height: 1.45;
}

.stampa-c p { margin: 0 0 3mm; }

/* --- la testata: chi firma, che cosa e', di quando e' ---------------------- */

.stampa-c__testa {
	border-block-end: 1pt solid var(--wp--custom--colore--verde-600, #1f6f43);
	padding-block-end: 3mm;
	margin-block-end: 6mm;
}

.stampa-c__ente {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 8pt;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-800, #14532d);
}

.stampa-c__titolo {
	margin: 1mm 0 0;
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: 20pt;
	font-weight: 800;
	line-height: 1.1;
}

.stampa-c__data {
	margin: 1mm 0 0;
	font-size: 9pt;
	color: #444;
}

/* --- i titoli delle sezioni ---------------------------------------------- */

/* Anche la didascalia della tabella del conto porta questa classe: e' lo
   stesso ruolo — dire di che cosa parla il blocco che segue — e su carta un
   `caption` e un titoletto devono avere lo stesso peso, o la pagina sembra
   composta da due persone. */
.stampa-c__eti {
	margin: 6mm 0 2mm;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 9pt;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-800, #14532d);
	text-align: start;
	/* Un titoletto in fondo alla pagina, con il suo elenco sul foglio dopo, e'
	   il difetto tipografico piu' comune della stampa da browser. */
	break-after: avoid;
}

/* --- il profilo dichiarato ----------------------------------------------- */

/* Due colonne di coppie: su A4 le domande sono corte e le risposte pure, e in
   una colonna sola il profilo pieno si mangiava mezza prima pagina. */
.stampa-c__profilo {
	margin: 0;
	columns: 2;
	column-gap: 8mm;
}

.stampa-c__profilo > div {
	break-inside: avoid;
	margin-block-end: 1.5mm;
}

.stampa-c__profilo dt {
	font-size: 8pt;
	color: #444;
}

.stampa-c__profilo dd {
	margin: 0;
	font-weight: 700;
}

/* --- le voci: la tabella ------------------------------------------------- */

.stampa-c__voci,
.stampa-c__conto {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block-end: 4mm;
}

.stampa-c__voci th,
.stampa-c__voci td {
	text-align: start;
	vertical-align: top;
	padding: 2mm 3mm 2mm 0;
	border-block-end: 0.5pt solid #bbb;
}

.stampa-c__voci thead th {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 8pt;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-block-end: 1pt solid #333;
	color: #333;
}

/* L'intestazione si ripete in cima a ogni foglio: un piano lungo va a pagina
   due, e una tabella senza intestazione sul secondo foglio e' una tabella che
   va riletta all'indietro. */
.stampa-c__voci thead { display: table-header-group; }

/* Una voce non si spezza fra due fogli: titolo su una pagina e prezzo
   sull'altra e' il modo piu' rapido di far diffidare di un preventivo. */
.stampa-c__voci tbody tr { break-inside: avoid; }

/* Le colonne si dichiarano, non si lasciano decidere al contenuto: la
   colonna «Ore» e' fatta di numeri corti e senza una misura si stringeva
   fino a mandare a capo «16 ore», mentre i riferimenti di norma — che sono
   la colonna piu' lunga — si prendevano lo spazio della voce. */
.stampa-c__voci th:first-child { inline-size: 37%; }
.stampa-c__voci th:nth-child(2) { inline-size: 20%; }
.stampa-c__voci th:nth-child(3) { inline-size: 9%; }
.stampa-c__voci th:nth-child(4) { inline-size: 22%; }
.stampa-c__voci th:last-child { inline-size: 12%; }

.stampa-c__voci tbody th { font-weight: 400; }

.stampa-c__che {
	display: block;
	font-weight: 700;
}

/* Il canale e la forza sono etichette, non frasi: stessa riga, corpo piccolo,
   e nessun fondo colorato — su una stampante in bianco e nero una pastiglia
   grigia si legge peggio del testo che contiene. */
.stampa-c__canale,
.stampa-c__forza {
	display: inline-block;
	margin-block-start: 0.8mm;
	margin-inline-end: 3mm;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 7.5pt;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #444;
}

.stampa-c__nota {
	display: block;
	margin-block-start: 0.8mm;
	font-size: 8.5pt;
	color: #333;
}

.stampa-c__norma {
	font-size: 8.5pt;
	color: #444;
}

/* Le cifre a destra e in cifre tabellari: una colonna di prezzi che non si
   incolonna e' una colonna che non si somma con l'occhio. */
.stampa-c__cifra {
	text-align: end;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* --- il conto ------------------------------------------------------------ */

/* Stretto e a destra: e' il blocco che si guarda per ultimo e da solo, e a
   tutta larghezza avrebbe il numero a un palmo dalla sua etichetta. */
.stampa-c__conto {
	inline-size: 70mm;
	margin-inline-start: auto;
	break-inside: avoid;
}

.stampa-c__conto th,
.stampa-c__conto td {
	text-align: start;
	padding: 1.5mm 0;
	border-block-end: 0.5pt solid #ccc;
	font-weight: 400;
}

.stampa-c__conto caption { margin-block-start: 0; }

.stampa-c__totale th,
.stampa-c__totale td {
	border-block-end: 0;
	border-block-start: 1pt solid #333;
	padding-block-start: 2mm;
	font-weight: 800;
	font-size: 12pt;
}

/* --- le precisazioni e i due elenchi ------------------------------------- */

.stampa-c__dice {
	font-size: 8.5pt;
	color: #333;
	max-inline-size: 150mm;
}

.stampa-c__elenco {
	margin: 0 0 4mm;
	padding-inline-start: 5mm;
}

.stampa-c__elenco li {
	margin-block-end: 1.5mm;
	break-inside: avoid;
}

.stampa-c__perche {
	display: block;
	font-size: 8.5pt;
	color: #333;
}

/* --- la firma ------------------------------------------------------------ */

/* **Qui si dice chi vende e chi valida, e non e' una formalita'.** ANFOS
   SERVIZI SRL e A.N.Fo.S. Associazione sono due soggetti distinti, e questo
   foglio e' esattamente il posto in cui la distinzione si perde: un
   documento stampato gira, viene mostrato a un consulente o a un ispettore, e
   sopravvive alla pagina web che lo spiegava. Resta attaccato a quello che
   sta sopra — `break-inside: avoid` — perche' una firma su un foglio da sola
   non firma niente. */
.stampa-c__firma {
	margin-block-start: 8mm;
	padding-block-start: 3mm;
	border-block-start: 0.5pt solid #999;
	break-inside: avoid;
}

.stampa-c__stima,
.stampa-c__soggetti {
	font-size: 8pt;
	line-height: 1.4;
	color: #333;
}

.stampa-c__recapiti {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 8.5pt;
	font-weight: 700;
	color: #000;
}