/**
 * Corpo dell'articolo — la colonna di lettura.
 *
 * La usa anche il modello «Pagina di testo», che è la stessa cosa senza la
 * firma e le etichette: vedi il modificatore `.post-body--pagina` in fondo.
 *
 * Il testo qui non lo scrive il tema: è `core/post-content`, cioè i blocchi che
 * chi scrive mette nell'editor. Questo foglio non compone niente, veste: dà a
 * paragrafi, titoli, elenchi, citazioni e immagini la misura e il ritmo del
 * riferimento, qualunque cosa contenga l'articolo.
 *
 * Per questo i selettori partono da `.post-body` e scendono sui figli diretti
 * del contenuto: sono i blocchi di primo livello dell'articolo, gli unici che
 * hanno un ritmo verticale da rispettare. Quel che sta annidato dentro a un
 * blocco se lo governa il blocco.
 *
 * La colonna è più stretta della cornice del sito — 900px contro 1280 — perché
 * è testo lungo da leggere e non un impaginato: il token sta in theme.json come
 * `layout.reading`.
 */

.post-body {
	padding-block: clamp( 48px, 7vw, 96px ) clamp( 64px, 9vw, 120px );
}

.post-body__inner {
	max-width: var(--wp--custom--layout--reading);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

.wp-block-group.post-body__inner > * {
	margin-block-start: 0;
}

/* --- Prosa --------------------------------------------------------------- */

.post-body .wp-block-post-content {
	color: var(--wp--preset--color--ink-soft);
}

.post-body .wp-block-post-content > p {
	margin-block: 0 24px;
	font-size: clamp( 16px, 1.15vw, 18px );
	line-height: 1.75;
}

/* L'attacco dell'articolo è più grande e più scuro del resto: fa da occhiello
   senza essere un blocco a parte, quindi chi scrive non deve ricordarsene. */
.post-body .wp-block-post-content > p:first-of-type {
	font-size: clamp( 18px, 1.4vw, 22px );
	font-weight: 500;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

.post-body .wp-block-post-content > h2 {
	margin-block: clamp( 36px, 4vw, 56px ) 16px;
	font-size: clamp( 22px, 2.2vw, 30px );
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--petrol);
}

/* 0,98 è l'interlinea che il riferimento dà a tutti i titoli: meno alta del
   corpo del testo, perché una riga di titolo non ha bisogno di respiro fra le
   righe quanto un paragrafo. */
.post-body .wp-block-post-content > h3 {
	margin-block: 32px 12px;
	font-size: 22px;
	font-weight: 600;
	line-height: 0.98;
	color: var(--wp--preset--color--ink);
}

.post-body .wp-block-post-content > ul,
.post-body .wp-block-post-content > ol {
	margin-block: 0 24px;
	padding-left: 1.4em;
	font-size: clamp( 16px, 1.15vw, 18px );
	line-height: 1.7;
}

.post-body .wp-block-post-content li {
	margin-block-end: 8px;
}

.post-body .wp-block-post-content strong {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* Nel corpo di un articolo un link va riconosciuto mentre si legge, non solo
   passandoci sopra: resta sottolineato, staccato di due pixel dal testo.

   L'ancora del bottone di core è esclusa, e non per pulizia: `core/button` è
   un'ancora anche lui, e questa regola pesa due classi più un elemento mentre
   la tinta del bottone arriva da `elements.button` di theme.json, che core
   stampa su una classe sola. Senza l'esclusione il testo del bottone diventa
   rosso sul fondo rosso — invisibile — e prende pure la sottolineatura. */
.post-body .wp-block-post-content a:not( .wp-block-button__link ) {
	color: var(--wp--preset--color--rosso);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.post-body .wp-block-post-content a:not( .wp-block-button__link ):hover,
.post-body .wp-block-post-content a:not( .wp-block-button__link ):focus-visible {
	color: var(--wp--preset--color--rosso-dark);
}

/* La citazione non ha virgolette disegnate: la stanghetta rossa a sinistra e il
   corsivo bastano a staccarla, e il colore la lega ai titoli. */
.post-body .wp-block-post-content blockquote {
	margin-block: clamp( 28px, 4vw, 44px );
	padding: 8px 0 8px 24px;
	border-left: 3px solid var(--wp--preset--color--rosso);
	font-style: italic;
	font-size: clamp( 19px, 1.6vw, 24px );
	line-height: 1.5;
	color: var(--wp--preset--color--petrol);
}

.post-body .wp-block-post-content blockquote p {
	margin-block: 0;
}

/* --- Immagini nel testo -------------------------------------------------- */

.post-body .wp-block-post-content > figure {
	margin-block: clamp( 28px, 4vw, 48px );
}

.post-body .wp-block-post-content > figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--card);
}

.post-body .wp-block-post-content figcaption {
	margin-block-start: 12px;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* --- Chiusura: etichette e ritorno --------------------------------------- */

.post-body__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block-start: clamp( 24px, 3vw, 36px );
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-block-group.post-body__inner > .post-body__foot {
	margin-block-start: clamp( 40px, 5vw, 64px );
}

.wp-block-group.post-body__foot > * {
	margin-block-start: 0;
}

.post-body__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wp-block-group.post-body__tags > * {
	margin-block-start: 0;
}

/* `core/post-terms` mette i termini uno dopo l'altro con un separatore in
   mezzo. Qui ogni termine è una pastiglia, quindi il separatore sparisce e la
   spaziatura la dà il `gap`. */
.post-body__tags .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.post-body__tags .wp-block-post-terms__separator {
	display: none;
}

.post-body__tags .wp-block-post-terms a {
	display: inline-block;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--rosso);
	background-color: var(--wp--preset--color--paper-dark);
	border-radius: var(--wp--custom--radius--pill);
	transition: background-color 0.2s ease;
}

.post-body__tags .wp-block-post-terms a:hover,
.post-body__tags .wp-block-post-terms a:focus-visible {
	background-color: var(--wp--preset--color--cream-dark);
}

/* Il ritorno al blog è in contorno e non pieno: chiude la lettura, non invita
   a fare qualcosa.

   Il rosso è quello che si vede nel riferimento, dove però non è dichiarato:
   lì il bottone sta dentro `.post-article` e lo colora la regola dei link
   nella prosa, che pesa più di `.btn-outline` — quest'ultima direbbe
   inchiostro. Qui il bottone è fuori dal contenuto, quindi il colore va detto,
   e si dice quello reso. */
.post-body__back .wp-block-button__link {
	padding: 14px 28px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rosso);
	background-color: transparent;
	border: 1px solid currentColor;
	/* Sottolineata come nel riferimento. Anche questa viene da lì per la stessa
	   fuga di cascata del colore — `.post-article a` sottolinea i link della
	   prosa e prende anche il bottone — ma è ciò che si vede, quindi si tiene. */
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Al passaggio si riempie del proprio colore, come le altre pastiglie in
   contorno del sito. Nel riferimento il rosso resta sul testo e lo sfondo
   diventa inchiostro: rosso scuro su inchiostro è illeggibile, ed è la stessa
   svista della cascata qui sopra. */
.post-body__back .wp-block-button__link:hover,
.post-body__back .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--floral);
	background-color: var(--wp--preset--color--rosso);
}

/* --- La variante delle pagine di testo ----------------------------------
   Il modello «Pagina di testo» (`templates/page-testo.html`) è il corpo
   dell'articolo senza l'articolo: stessa colonna, stesso ritmo, stessa prosa.
   Riusa quindi `.post-body` invece di rifarne una copia, e questo modificatore
   dice soltanto in cosa una pagina differisce da un pezzo firmato.

   La chiusura — etichette e ritorno al Blog — non serve nemmeno spegnerla: sta
   nel modello di `single`, e in `page-testo` non c'è. */

/* Un articolo apre con un attacco più grande, e chi scrive non deve
   ricordarsene. Una pagina di testo no: il primo paragrafo può essere una riga
   di servizio — «Aggiornato al…», «In vigore dal…» — e ingrandirla le darebbe
   un peso che non ha. Qui la prosa parte uniforme, e chi vuole un attacco lo
   dichiara dall'editor. */
.post-body--pagina .wp-block-post-content > p:first-of-type {
	font-size: clamp( 16px, 1.15vw, 18px );
	font-weight: 400;
	line-height: 1.75;
	color: inherit;
}

/* L'interlinea di serie dei titoli del tema è 0,98: è tarata su titoli che
   stanno in una riga, o che vanno a capo dove decide chi scrive. In una pagina
   di testo i titoli sono frasi intere, vanno a capo da soli e a quel passo le
   due righe si toccano. Qui si allargano — e solo qui: negli articoli il ritmo
   resta quello del riferimento. */
.post-body--pagina .wp-block-post-content > :is( h2, h3, h4, h5, h6 ) {
	line-height: 1.3;
}

/* --- Sotto i 900px ------------------------------------------------------ */

@media ( max-width: 900px ) {
	/* Come tutte le pastiglie del sito sotto questa soglia: l'interlinea
	   ereditata sbilancia le lettere dentro al padding e alza il bottone. */
	.post-body__back .wp-block-button__link {
		line-height: 1;
	}
}