/*
Theme Name: Kvbo
Theme URI: https://kvbo.ai
Author: Kvbo S.r.l.
Author URI: https://kvbo.ai
Description: Tema a blocchi del sito istituzionale di Kvbo S.r.l. Palette blu di Prussia e superfamiglia IBM Plex ospitata localmente: nessuna richiesta verso domini terzi in esecuzione.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kvbo
Tags: full-site-editing, block-patterns, translation-ready, accessibility-ready
*/

/*
 * Qui sta soltanto ciò che theme.json non sa esprimere.
 * Colori, dimensioni, spaziature e famiglie tipografiche stanno in theme.json:
 * nessun valore esadecimale va scritto in questo file.
 */

/* --- Proprietà personalizzate --------------------------------------------- */

/*
 * Altezza dell'header fisso, misurata: 87,61px a 390, 768 e 1920px, cioè la
 * stessa a ogni larghezza. Non è sempre stato così — finché il marchio aveva
 * una misura ridotta sotto i 600px l'header ne aveva due, 79 e 82px, e questo
 * valore era il maggiore delle due preso con margine. Da quando quella
 * riduzione non c'è più (vedi il commento del marchio più sotto) l'altezza è
 * una sola e questo valore è esatto, non prudenziale. Non esiste un modo puramente
 * CSS di leggere l'altezza resa di un elemento e riusarla altrove nel foglio
 * di stile — richiederebbe JavaScript, che qui non vogliamo — quindi è un
 * valore dichiarato una volta, non calcolato.
 *
 * Se l'header cambia altezza — un'altra voce di menu, un logo diverso, un
 * cambio di corpo del testo — va rimisurato e aggiornato solo qui: da questo
 * valore dipendono lo scroll-margin-top dei documenti citati nella prova e
 * delle ancore di /prodotti/, così i bersagli non finiscono di nuovo sotto
 * la barra senza che nessuno se ne accorga.
 */
:root {
	--kvbo-header-height: 88px;
}

/* --- Reset: box-sizing ---------------------------------------------------- */

/*
 * Senza questa regola, ogni elemento con `width: 100%` più padding o bordo
 * (la textarea di Contatti, per dirne uno) sfora il contenitore invece di
 * riempirlo: padding e bordo si sommano fuori dal 100% invece di starci
 * dentro. `.kvbo-product` aveva la propria regola locale prima di questa —
 * ora è qui, per tutto il tema, non per ogni singolo caso che ci inciampa.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* --- Layout: contenimento dei margini ------------------------------------ */

/*
 * La distanza fra l'ultimo contenuto e il piè di pagina è un padding di
 * <main>, non il risultato di come ciascuna pagina finisce — vedi «Chiusura
 * della pagina» più sotto, dove vive la misura vera. Questa regola qui è un
 * secondo livello di protezione, non il meccanismo: se in futuro un margine
 * di un discendente di <main> dovesse attraversarlo per collasso invece di
 * restare spazio reale, flow-root lo contiene. Non cambia nient'altro del
 * layout: <main> continua a centrare e misurare i contenuti esattamente come
 * prima.
 */
main {
	display: flow-root;
}

/* --- Tipografia: correzioni che i token non coprono --------------------- */

/*
 * Carichiamo IBM Plex Sans nei pesi 400 e 600. Senza questa regola il browser
 * riceve la richiesta di un 700 inesistente e ne sintetizza uno finto,
 * ingrassando i tratti e sporcando le aste.
 */
b,
strong {
	font-weight: 600;
}

/*
 * Un titolo cliccabile resta un titolo. theme.json colora tutti gli <a> in
 * teal-600, ed è giusto per i link, ma il colore vince anche sull'<a> che sta
 * dentro un <h2>: il teal è accento su elementi puntuali, mai colore di
 * titoli. Con `inherit` il titolo-link segue il colore del titolo qualunque
 * esso sia, navy-900 sul fondo chiaro e navy-50 su quello navy, senza doverlo
 * aggiornare in due posti.
 *
 * La sottolineatura torna solo in hover: a queste dimensioni pesa, e il link
 * è il titolo intero, quindi non c'è ambiguità su dove porti.
 */
:where(h1, h2, h3, h4, h5, h6) a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration: none;
}

:where(h1, h2, h3, h4, h5, h6) a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.12em;
}

/* I dettagli tecnici in Mono non devono risultare più grandi del testo accanto. */
code,
kbd,
samp,
pre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375em;
}

/* --- Focus ------------------------------------------------------------- */

/*
 * Il focus è visibile e non si rimuove mai. Usa teal-600 su fondi chiari,
 * con uno scarto che lo stacca dal bordo dell'elemento.
 */
:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--teal-600);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Sul fondo navy il teal-600 non stacca abbastanza: si passa al teal-300. */
.has-navy-900-background-color :focus-visible {
	outline-color: var(--wp--preset--color--teal-300);
}

/* --- Collegamenti di testo ------------------------------------------------ */

/*
 * Il teal ha due tinte per lo stesso ruolo — non capriccio, contrasto: teal-800
 * sul chiaro e teal-300 sul navy sono le uniche due che reggono 4,5:1 sul testo
 * nei rispettivi fondi. Il teal-600 di theme.json sul chiaro sta a 4,66:1,
 * sopra la soglia per un margine di 0,16 — e sotto simulazione di protanopia
 * scende a 4,26:1, sotto soglia (misurato con tools/contrast.js teal-600
 * navy-50). Resta il colore giusto per gli usi non testuali — pulsanti,
 * bordi, il velo dei passaggi marcati — mai per un link di testo.
 *
 * theme.json genera la regola di base con :where(), che ha specificità zero:
 * un selettore normale la vince senza bisogno di !important, in qualunque
 * ordine i due fogli si carichino.
 */
a:not(.wp-element-button) {
	color: var(--wp--preset--color--teal-800);
}

a:not(.wp-element-button):hover,
a:not(.wp-element-button):focus {
	color: var(--wp--preset--color--navy-900);
}

/*
 * Sul fondo navy il teal-800 di base sparirebbe quasi del tutto: qui la
 * coppia si inverte, teal-300 di base e teal-50 al passaggio del mouse.
 * `.has-navy-900-background-color` ha specificità di classe e vince comunque
 * sulla regola sopra, che è più larga ma meno specifica.
 */
.has-navy-900-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--teal-300);
}

.has-navy-900-background-color a:where(:not(.wp-element-button)):hover,
.has-navy-900-background-color a:where(:not(.wp-element-button)):focus {
	color: var(--wp--preset--color--teal-50);
}

/*
 * `elements.heading` in theme.json dichiara `color: navy-900` con selettore
 * diretto su h1-h6 (non :where, verificato nel CSS servito) — batte
 * l'ereditarietà del navy-50 impostato sul gruppo, indipendentemente da
 * quanto sia dentro una superficie navy. Stesso buco già chiuso sopra per
 * link e pulsanti, stessa soluzione: la superficie che ospita il titolo
 * decide il colore, non un'eccezione scritta per singola fascia o
 * singolo blocco.
 */
.has-navy-900-background-color h1,
.has-navy-900-background-color h2,
.has-navy-900-background-color h3,
.has-navy-900-background-color h4,
.has-navy-900-background-color h5,
.has-navy-900-background-color h6 {
	color: var(--wp--preset--color--navy-50);
}

/* --- Navigazione ----------------------------------------------------------- */

/*
 * Fisso su ogni larghezza, non solo da desktop: con l'header sceso a 79-82px
 * (§ apertura del menu su telefono) ha senso ovunque. sticky, non fixed:
 * resta nel flusso finché non tocca il bordo superiore, quindi non serve
 * riservargli lo spazio altrove come farebbe fixed. z-index sopra il
 * contenuto normale della pagina (che non dichiara mai il proprio) e sotto
 * lo stack del pannello del menu su telefono (99-101): quando il pannello si
 * apre resta sopra l'header, non sotto.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 10;
}

/*
 * Bersagli raggiunti per ancora o per scorrimento programmato, con l'header
 * fisso sopra: senza questo, il bordo superiore finisce sotto la barra
 * invece che sotto di essa. Tre famiglie — i documenti citati nella prova di
 * Home (proof.js salta al <mark> dentro, se c'è, altrimenti al documento
 * stesso: serve su entrambi, scroll-margin si applica all'elemento
 * effettivamente passato a scrollIntoView, non ai suoi antenati), le sei
 * intestazioni di prodotto e le tre sezioni di ciclo su /prodotti/. Il
 * margine oltre l'header è un token di spaziatura normale, non una seconda
 * cifra scritta a mano: solo --kvbo-header-height va aggiornato se l'header
 * cambia altezza.
 */
.kvbo-document,
.kvbo-document mark,
.kvbo-product__name,
.kvbo-cycle__phase {
	scroll-margin-top: calc(var(--kvbo-header-height) + var(--wp--preset--spacing--50));
}

/*
 * Il blocco core/navigation non eredita il colore dei link di testo — i suoi
 * elementi hanno una classe propria, non un <a> nudo che la regola sopra
 * possa intercettare — quindi la stessa coppia va scritta di nuovo qui,
 * scoped a .kvbo-nav invece che ripetuta a mano nell'header e nel piè di
 * pagina. Stesso motivo per cui il colore dei link è già una regola sola
 * per tutto il sito: due file che devono ripetere la stessa scelta sono due
 * verità destinate a divergere.
 *
 * Sottolineatura solo al passaggio del mouse o a fuoco: a riposo il peso e
 * la posizione bastano a leggerli come navigazione, non come prosa.
 *
 * 1rem e non un token: fra «sm» (0,9375rem) e «md» (1,125rem) non ce n'è uno
 * da 1rem, e aggiungerlo a theme.json metterebbe nella tendina dei corpi
 * dell'editor una misura che userebbe solo la navigazione. La stessa riga vale
 * per l'header e per il piè di pagina, che condividono .kvbo-nav: l'aumento
 * resta coordinato per costruzione, non per due modifiche parallele da tenere
 * allineate.
 */
.kvbo-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--teal-800);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.kvbo-nav .wp-block-navigation-item__content:hover,
.kvbo-nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--navy-900);
	text-decoration: underline;
}

.has-navy-900-background-color .kvbo-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--teal-300);
}

.has-navy-900-background-color .kvbo-nav .wp-block-navigation-item__content:hover,
.has-navy-900-background-color .kvbo-nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--teal-50);
}

/*
 * La pagina in cui ci si trova non si segnala solo con un colore diverso:
 * la sottolineatura permanente è lo stesso segno non cromatico usato per il
 * link della biforcazione in home, letto qui come «sei già qui» invece che
 * come invito a cliccare.
 */
.kvbo-nav .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.2em;
}

/*
 * Lo stesso segno per i due link legali del piè di pagina, che non sono voci
 * del blocco di navigazione: sono un core/paragraph scritto in
 * parts/footer.html, e l'aria-current glielo aggiunge un filtro render_block
 * in inc/navigation.php, dove sta anche il perché non siano nel menu e il
 * perché sia un filtro invece del blocco dinamico che è stato per un giorno.
 * Il gancio è la classe kvbo-legal__links sul paragrafo.
 *
 * Il segno però si rovescia, e non è una variazione libera: la regola qui
 * sopra funziona perché a riposo le voci del menu NON sono sottolineate,
 * mentre questi due lo sono già — theme.json sottolinea ogni link di testo, e
 * una sottolineatura in più su una sottolineatura non si vede. Quindi la
 * pagina in cui ci si trova perde la sottolineatura invece di prenderla, e
 * passa al colore del testo che le sta intorno: smette di somigliare a un
 * invito, che è esattamente ciò che «sei già qui» deve dire. Il peso a 600
 * tiene il segno leggibile anche senza colore, come chiede il §10 — navy-50 su
 * navy-900 sta a 15:1.
 */
.kvbo-legal a[aria-current="page"] {
	color: var(--wp--preset--color--navy-50);
	font-weight: 600;
	text-decoration: none;
}

/*
 * Sotto i 900px — la stessa soglia già in uso per .kvbo-proof__panes e
 * .kvbo-range__grid, e il punto in cui l'header stesso passa da riga singola
 * a logo con voci accanto — il menu dell'header parte chiuso in un <details>
 * nativo. Nessuno script: l'overlay che il blocco core/navigation offre di
 * suo (overlayMenu diverso da "never") dipende dall'Interactivity API di
 * WordPress per aggiungere .is-menu-open, e senza JavaScript il pulsante
 * "Apri menu" non fa nulla — le voci restano display:none per sempre sotto
 * la sua soglia di 600px (wp-includes/blocks/navigation/style.css). Il
 * blocco di navigazione qui dentro resta overlayMenu:"never", quello di
 * sempre: solo avvolto, i suoi attributi non cambiano.
 *
 * Riguarda solo l'header: il piè di pagina usa la stessa classe .kvbo-nav ma
 * non è avvolto in .kvbo-nav-disclosure, quindi il suo wrap resta quello di
 * prima.
 */
.kvbo-nav-disclosure {
	margin: 0;
}

.kvbo-nav-disclosure__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--teal-800);
	/* Stesso corpo delle voci che apre: 1rem, per la ragione scritta più sopra. */
	font-size: 1rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.kvbo-nav-disclosure__toggle::-webkit-details-marker,
.kvbo-nav-disclosure__toggle::marker {
	display: none;
}

.kvbo-nav-disclosure__label-open {
	display: none;
}

.kvbo-nav-disclosure[open] .kvbo-nav-disclosure__label-closed {
	display: none;
}

.kvbo-nav-disclosure[open] .kvbo-nav-disclosure__label-open {
	display: inline;
}

@media (max-width: 899.98px) {
	.kvbo-nav-disclosure {
		flex: 0 1 auto;
	}

	/*
	 * Pannello, non più spinta del contenuto: a 390px lo spostamento in basso
	 * arrivava a 427px di altezza header su un viewport di 844 — metà
	 * schermo di lista al posto della pagina. Il pannello è sempre
	 * position:fixed, chiuso o aperto: così esce dal flusso dell'header (che
	 * torna a misurare solo logo + pulsante) e scavalca da solo il ritaglio
	 * interno di <details> di cui sopra — non serve la stessa correzione su
	 * ::details-content già vista per i 900px, perché un discendente fixed
	 * non è mai contenuto dal box dell'antenato che lo ritaglierebbe.
	 * Visibilità e apertura sono governate qui, non dal collasso nativo:
	 * visibility, non display, così la transizione anima davvero invece di
	 * scattare da 0 a intero.
	 */
	.kvbo-nav-disclosure__panel {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 75%;
		z-index: 100;
		padding: calc(var(--wp--preset--spacing--30) + 44px + var(--wp--preset--spacing--30)) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
		background-color: var(--wp--preset--color--navy-50);
		overflow-y: auto;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.25s ease-out, visibility 0s linear 0.25s;
	}

	.kvbo-nav-disclosure[open] .kvbo-nav-disclosure__panel {
		visibility: visible;
		transform: translateX(0);
		transition: transform 0.25s ease-out, visibility 0s linear 0s;
	}

	/*
	 * Il velo copre l'intero viewport, non solo il 75% del pannello: la
	 * striscia di pagina che resta visibile a sinistra deve comunque
	 * intercettare il tocco. Era uno pseudo-elemento sul pannello: misurato
	 * con document.elementsFromPoint(), non compariva affatto nello stack a
	 * quel punto — su questo motore uno ::before con z-index negativo dentro
	 * un contenitore flex non riceve hit-test, la pagina sotto restava
	 * raggiungibile. Un elemento vero lo riceve.
	 */
	.kvbo-nav-disclosure__backdrop {
		position: fixed;
		inset: 0;
		z-index: 99;
		touch-action: none;
		background-color: var(--wp--preset--color--navy-900);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
	}

	.kvbo-nav-disclosure[open] .kvbo-nav-disclosure__backdrop {
		opacity: 0.35;
		visibility: visible;
		transition: opacity 0.25s ease-out, visibility 0s linear 0s;
	}

	/*
	 * Il summary si ricolloca in alto a destra dentro il pannello: è l'unico
	 * elemento che <details> ammette, quindi resta lo stesso nodo, non una
	 * seconda X. z-index sopra il pannello (100): deve restare sopra il
	 * proprio contenuto, non sotto.
	 */
	.kvbo-nav-disclosure[open] > .kvbo-nav-disclosure__toggle {
		position: fixed;
		top: var(--wp--preset--spacing--30);
		right: var(--wp--preset--spacing--40);
		z-index: 101;
	}

	.kvbo-nav-disclosure .kvbo-nav {
		margin-top: var(--wp--preset--spacing--40);
	}

	/*
	 * Da wrap orizzontale a righe intere: ogni voce supera i 44px di area
	 * toccabile, separate da un filo navy-200 invece del gap da 32px di
	 * oggi, che allungherebbe troppo l'elenco aperto.
	 */
	.kvbo-nav-disclosure .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.kvbo-nav-disclosure .wp-block-navigation-item {
		border-top: 1px solid var(--wp--preset--color--navy-200);
	}

	.kvbo-nav-disclosure .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 44px;
		padding: var(--wp--preset--spacing--30) 0;
	}

	/*
	 * «Parliamone» in fondo al pannello: margin-top:auto lo spinge in fondo
	 * alla colonna flex quando l'elenco è corto, senza un valore fisso che
	 * smetterebbe di funzionare se le voci cambiano numero.
	 */
	.kvbo-nav-disclosure__cta {
		margin-top: auto;
		padding-top: var(--wp--preset--spacing--60);
	}
}

@media (min-width: 900px) {
	.kvbo-nav-disclosure__toggle {
		display: none;
	}

	.kvbo-nav-disclosure .kvbo-nav {
		display: flex !important;
	}

	/*
	 * «Parliamone» sta dentro il pannello che si apre su richiesta, non
	 * accanto alla riga di navigazione da desktop — altrimenti diventa il
	 * sesto pulsante sparso che il resto del sito evita apposta.
	 */
	.kvbo-nav-disclosure__cta {
		display: none;
	}

	.kvbo-nav-disclosure__backdrop {
		display: none;
	}

	/*
	 * Non basta lo stile sul <nav>: senza l'attributo open, un motore recente
	 * (verificato su Edge/Chromium) non nasconde i figli di <details> con
	 * display:none — li avvolge in ::details-content con altezza zero e
	 * overflow:hidden, e nessuna regola sul figlio scavalca un contenitore
	 * che lo ritaglia dall'esterno. Va riaperto qui, sullo pseudo-elemento
	 * stesso: senza, a 900px il menu spariva del tutto, pulsante compreso,
	 * ancora prima che l'utente lo apra una volta.
	 */
	.kvbo-nav-disclosure::details-content {
		height: auto !important;
		overflow: visible !important;
		content-visibility: visible !important;
	}
}

/*
 * Stesso difetto dell'header prima della correzione — wrap su due righe,
 * voci a 25px — ma qui non serve un pannello: il piè di pagina è già in
 * fondo alla pagina, non ruba la prima schermata. Righe intere con lo
 * stesso padding verticale usato nel pannello, sopra i 44px. Scoped a
 * `footer .kvbo-nav`: l'header usa la stessa classe .kvbo-nav ma dentro
 * .kvbo-nav-disclosure, quindi questa regola non lo tocca.
 */
@media (max-width: 899.98px) {
	footer .kvbo-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	footer .kvbo-nav .wp-block-navigation-item {
		border-top: 1px solid var(--wp--preset--color--navy-500);
	}

	footer .kvbo-nav .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 44px;
		padding: var(--wp--preset--spacing--30) 0;
	}
}

/* --- Pulsanti ------------------------------------------------------------ */

/*
 * theme.json dichiara già lo stesso navy-900 per il pulsante
 * (styles.elements.button): questa regola non corregge un default diverso,
 * blocca lo stesso colore su un selettore di classe vera così che resti
 * navy-900 anche se un domani cambia l'output o l'ordine di caricamento dei
 * fogli. Vale per tutti i pulsanti del sito, non solo per quello di chiusura
 * da cui è nata questa regola.
 *
 * Un contorno era il primo tentativo, ma su una pagina lunga pesa come un
 * link secondario: l'unica azione che il sito chiede in tutta la pagina ha
 * bisogno di più peso, non di meno. Il divieto delle linee guida riguarda il
 * teal pieno — accento, non superficie — non il navy: navy-900 è il colore
 * strutturale del sito, riempirne un pulsante non lo trasforma in una
 * campitura estranea. Testo navy-50 su navy-900 sta a 15:1 (misurato con
 * tools/contrast.js navy-50 navy-900), ben oltre i minimi in ogni
 * simulazione di daltonismo.
 *
 * Il passaggio del mouse schiarisce verso navy-700 (11,05:1) invece di
 * scurire ulteriormente: navy-900 è già l'inchiostro più scuro della
 * palette, non c'è margine per andare oltre restando dentro la famiglia.
 *
 * `:where()` di theme.json ha specificità zero: un selettore di classe
 * normale la vince senza !important, in qualunque ordine i fogli si carichino.
 */
.wp-element-button,
.wp-block-button__link {
	background-color: var(--wp--preset--color--navy-900);
	border: 1px solid var(--wp--preset--color--navy-900);
	color: var(--wp--preset--color--navy-50);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-element-button:focus,
.wp-block-button__link:focus {
	background-color: var(--wp--preset--color--navy-700);
	border-color: var(--wp--preset--color--navy-700);
	color: var(--wp--preset--color--navy-50);
}

/*
 * Sul fondo navy si inverte: fondo e bordo navy-50, testo navy-900 — lo
 * stesso pulsante letto al contrario, non un secondo linguaggio. Il
 * passaggio del mouse scurisce verso navy-200 (12,45:1) invece di
 * schiarire, per lo stesso motivo opposto: navy-50 è già il più chiaro.
 */
.has-navy-900-background-color .wp-element-button,
.has-navy-900-background-color .wp-block-button__link {
	background-color: var(--wp--preset--color--navy-50);
	border-color: var(--wp--preset--color--navy-50);
	color: var(--wp--preset--color--navy-900);
}

.has-navy-900-background-color .wp-element-button:hover,
.has-navy-900-background-color .wp-block-button__link:hover,
.has-navy-900-background-color .wp-element-button:focus,
.has-navy-900-background-color .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--navy-200);
	border-color: var(--wp--preset--color--navy-200);
	color: var(--wp--preset--color--navy-900);
}

/* --- Marchio ----------------------------------------------------------- */

/*
 * L'area di rispetto è già disegnata dentro l'SVG: il cubo dista dal bordo del
 * riquadro più della metà della propria larghezza. Aggiungere padding qui la
 * raddoppierebbe. Gli attributi width/height sull'immagine riservano lo spazio
 * ed evitano lo scatto di layout al caricamento.
 *
 * Le larghezze sono scelte a partire dal cubo, non dal riquadro: nell'SVG il
 * cubo occupa 70 unità delle 153 di altezza, quindi a 10,5rem di larghezza è
 * alto 29,12px. Sotto i 24px servirebbe la variante ridotta del simbolo: è il
 * limite oltre il quale non si scende.
 *
 * Il vincolo che decide non è il cubo, è la riga dell'header a 900px — la
 * soglia in cui il menu passa da pannello a voci in linea, e l'unica larghezza
 * in cui marchio e navigazione se la giocano davvero. Lì restano 37,25px di
 * margine: misurato, non dedotto. Chi volesse ingrandire ancora deve rimisurare
 * a 900px prima, non a 1920: a 17px di voci e 10,75rem di marchio l'header va a
 * capo e passa da 89 a 141px di altezza.
 */
.kvbo-brand {
	display: inline-block;
	line-height: 0;
}

.kvbo-brand img {
	display: block;
	width: 10.5rem;
	height: auto;
}

/*
 * Il marchio del footer è l'8% più piccolo di quello dell'intestazione, e la
 * differenza è voluta: una forma chiara su fondo scuro si legge più grande
 * della stessa forma scura su fondo chiaro, e senza compensazione il footer
 * sembra dominare la testata. Al 5% la compensazione era ancora insufficiente.
 * Sotto 8,66rem il cubo scenderebbe sotto i 24px e servirebbe la variante
 * ridotta del simbolo: a 9,625rem il cubo sta a 26,69px, con margine.
 *
 * Non c'è più una misura ridotta sotto i 600px. Ce n'era una, e riguardava il
 * solo marchio dell'header: il piè di pagina ha specificità maggiore e non la
 * riceveva, quindi sui telefoni la compensazione voluta dell'8% diventava del
 * 2,8% — il contrario di quello che questo commento dichiara. Toglierla la fa
 * valere a ogni larghezza, e come effetto secondario rende l'header alto uguale
 * ovunque, così --kvbo-header-height è un valore esatto invece del maggiore fra
 * due. Costo misurato: a 390px l'header passa da 78,53 a 87,61px.
 */
.kvbo-footer .kvbo-brand img {
	width: 9.625rem;
}

/* --- Apertura ----------------------------------------------------------- */

/*
 * Misure diverse per elementi diversi. Il contenitore da 42rem di theme.json è
 * la misura di lettura del testo corrente: a un titolo da 52px lascia venti
 * caratteri per riga, e venti caratteri per riga fanno cinque righe di titolo
 * e un manifesto al posto di un'apertura.
 *
 * Il titolo era a 72rem: a questa scala tiene le righe troppo lunghe per una
 * lettura comoda, segnalato in revisione. 50rem è la larghezza corretta; la
 * scala è scesa di un gradino (4xl → 3xl) per lo stesso motivo, con
 * l'occhiello sopra a portare parte del peso che prima portava l'H1 da solo.
 * Il sottotitolo torna alla misura di lettura, perché quello si legge
 * davvero. Tutto allineato a sinistra: nessun elemento si centra da solo.
 */
.kvbo-opening > * {
	margin-left: 0;
	margin-right: 0;
}

.kvbo-opening h1 {
	max-width: 50rem;
	/*
	 * Il blockGap del core genera `:where(.is-layout-flow) > * {
	 * margin-block-start: spacing-50}` — specificità zero, ma proprietà
	 * logica. Sovrascriverla con `margin-top` (fisica) non vince per
	 * specificità come farebbe con un'altra regola sullo stesso `margin-top`:
	 * fisica e logica sullo stesso lato non si confrontano per specificità
	 * di selettore, si risolvono a parte — la stessa famiglia di trappola
	 * del colore dei titoli. margin-block-start qui, non margin-top, per
	 * togliere l'ambiguità invece di sperare di vincerla.
	 */
	margin-block-start: var(--wp--preset--spacing--20);
}

.kvbo-opening__lead {
	max-width: 46rem;
}

/*
 * L'occhiello dice la categoria prima che il titolo dica la promessa: chi
 * arriva capisce cosa vendiamo — knowledge management, non consulenza né
 * software generico — senza dover scorrere fino alla prova. Sans, non Serif:
 * è un'etichetta di categoria, non un titolo. Maiuscolo e spaziato per lo
 * stesso motivo delle etichette di documento altrove in pagina — «Per chi»,
 * il titolo di fase nel ciclo — un registro già stabilito, non uno nuovo.
 * Lo spazio verso il titolo lo stringe .kvbo-opening h1, non questa regola:
 * vedi il commento lì.
 */
.kvbo-opening__eyebrow {
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --- La prova ----------------------------------------------------------- */

/*
 * Il blocco che mostra Flow al lavoro. Regge il primo schermo, quindi porta
 * l'ambizione della pagina: due riquadri affiancati, la risposta a sinistra e
 * i documenti che la sostengono a destra.
 *
 * Nessuna ombra e nessun riempimento: i riquadri si staccano dal fondo con un
 * filo solo. È la stessa economia di mezzi di un documento tecnico stampato,
 * ed evita di dare al blocco l'aria di una schermata di prodotto in vetrina.
 */
.kvbo-proof {
	margin: 0;
}

.kvbo-proof__caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--navy-200);
	color: var(--wp--preset--color--navy-500);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
}

.kvbo-proof__origin {
	font-weight: 600;
	color: var(--wp--preset--color--navy-700);
}

/*
 * La dichiarazione che protegge e qualifica l'esempio non resta al corpo più
 * debole della didascalia: stesso navy-700 dell'origine a fianco, corpo
 * invariato — non deve diventare protagonista, solo leggersi.
 */
.kvbo-proof__disclosure {
	color: var(--wp--preset--color--navy-700);
}

/*
 * Sette parti alla risposta e cinque ai documenti: la risposta si legge, i
 * documenti si riconoscono a colpo d'occhio.
 */
.kvbo-proof__panes {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
}

/*
 * Le due colonne hanno altezze proprie e non si pareggiano. Pareggiate, la
 * più corta si allunga fino alla più lunga e resta un'area vuota dentro un
 * riquadro bordato, che si legge come contenuto mancante invece che come
 * risposta finita: succede a destra quando la risposta è lunga e a sinistra
 * quando è un rifiuto, cioè breve per costruzione.
 */
@media (min-width: 900px) {
	.kvbo-proof__panes {
		grid-template-columns: 7fr 5fr;
		gap: var(--wp--preset--spacing--60);
		align-items: start;
	}
}

.kvbo-proof__answer {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--navy-200);
	border-radius: var(--wp--custom--radius);
}

.kvbo-proof__question {
	margin: 0;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--navy-200);
	color: var(--wp--preset--color--navy-700);
}

.kvbo-proof__reply > *:first-child {
	margin-top: var(--wp--preset--spacing--50);
}

/*
 * La risposta è la cosa più leggibile del blocco, non la più piccola: sale a
 * L, un gradino sotto il titolo (XL) e sopra le etichette dei documenti a
 * fianco (S/XS). Interlinea più stretta di quella di pagina perché a questo
 * corpo, dentro una colonna stretta, 1,65 aprirebbe troppo le righe.
 */
.kvbo-proof__reply p,
.kvbo-proof__list {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.55;
}

.kvbo-proof__title {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xl);
}

/*
 * Più spazio sopra un'intestazione che sotto: il titolo appartiene a ciò che
 * introduce, non a ciò che lo precede.
 */
.kvbo-proof__subtitle {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wp--preset--color--navy-500);
}

.kvbo-proof__list {
	margin: 0;
	padding-left: 1.25em;
}

.kvbo-proof__list li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.kvbo-proof__sources {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kvbo-proof__sources li + li {
	margin-top: var(--wp--preset--spacing--20);
}

/*
 * Il riferimento alla fonte è un comando, non un collegamento: non porta
 * altrove, marca il documento nel riquadro accanto. Perciò è un <button>.
 * Il Mono è ammesso qui perché il testo è un riferimento che viene davvero
 * dal documento.
 */
.kvbo-source {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	text-align: left;
	color: var(--wp--preset--color--teal-800);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.kvbo-source:hover {
	color: var(--wp--preset--color--navy-900);
}

.kvbo-proof__documents-label {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--navy-500);
}

.kvbo-document {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--navy-200);
	border-radius: var(--wp--custom--radius);
}

.kvbo-document + .kvbo-document {
	margin-top: var(--wp--preset--spacing--40);
}

.kvbo-document__header {
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--navy-200);
}

/*
 * Il codice e la revisione sono un riferimento che viene dal documento, non
 * un'etichetta nostra: il Mono qui è al suo posto.
 */
.kvbo-document__code {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--navy-500);
}

.kvbo-document__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
}

/*
 * Prima erano due intestazioni vuote, quella prima e quella dopo la sezione
 * citata: dicevano «c'è dell'altro qui intorno» occupando due righe senza
 * corpo. Una riga sola fa lo stesso lavoro — «Estratto» dice che è un pezzo,
 * il riferimento dice quale — senza il rumore delle sezioni vuote che
 * esistevano solo per riempire un riquadro che scorreva. Mono perché è un
 * riferimento al documento, come il codice e come i «§» nelle fonti a fianco.
 */
.kvbo-document__extract {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--navy-500);
}

/*
 * Stesso registro di codice ed «Estratto» qui sopra: il pannello documenti è
 * secondario rispetto alla risposta, e il corpo dell'estratto — la parte più
 * lunga — è quello che doveva scendere per dirlo davvero.
 */
.kvbo-document__body {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
}

.kvbo-document__body:last-of-type {
	margin-bottom: 0;
}

/*
 * Il passaggio citato. Il testo resta navy-900 e sta a 14,3:1 sul suo fondo,
 * ma il solo velo teal-50 stacca dal fondo pagina di 1,05:1: non si vede, e
 * un velo che non si vede fa sembrare il testo lavato invece che marcato.
 *
 * Il segnale lo dà il filo teal-600 sotto il passaggio. Il velo da solo era
 * troppo poco; il teal-300 sarebbe troppo, perché qui i passaggi marcati sono
 * tre frasi su quattro e diventerebbe una campitura di teal.
 */
.kvbo-document mark {
	padding: 0.08em 0.15em;
	background-color: var(--wp--preset--color--teal-50);
	color: var(--wp--preset--color--navy-900);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--teal-600);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/*
 * Lo stato di documento selezionato non è affidato al solo colore: compare
 * anche l'etichetta, perché il teal dell'accento e il verde di conferma sono
 * confondibili in deuteranopia e un bordo che cambia tinta non è un messaggio.
 */
.kvbo-document__state {
	display: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--teal-800);
}

.kvbo-document[aria-current="true"] {
	border-color: var(--wp--preset--color--teal-600);
}

.kvbo-document[aria-current="true"] .kvbo-document__extract {
	background-color: var(--wp--preset--color--teal-50);
	color: var(--wp--preset--color--teal-800);
}

.kvbo-document[aria-current="true"] .kvbo-document__state {
	display: block;
}

/*
 * Seconda istanza del blocco: il rifiuto. Stesso componente, stessa griglia,
 * nessuna variante cromatica — mostra un comportamento diverso, non un altro
 * oggetto, e cambiargli aspetto suggerirebbe che il rifiuto sia uno stato di
 * errore invece del funzionamento normale.
 */

/*
 * Il rifiuto apre la risposta e occupa il posto che nella prima prova tiene il
 * titolo — non un'intestazione, è una frase, e farne una aggiungerebbe un
 * livello alla gerarchia senza contenuto sotto. Corpo e interlinea sono già
 * quelli di ".kvbo-proof__reply p" qui sopra: il rifiuto legge allo stesso
 * peso del resto della risposta, non un gradino sopra.
 */
.kvbo-proof__verdict {
	margin-bottom: var(--wp--preset--spacing--40);
}

/*
 * L'assenza di evidenziazione non si vede: non si può guardare qualcosa che
 * non c'è. Nella prima prova la riga che spiega le marcature serve ai soli
 * lettori di schermo, perché lì il segno è visibile per tutti gli altri; qui
 * vale il contrario, e la riga è visibile.
 *
 * Sta sopra il documento e non dentro, perché riguarda il documento intero e
 * non la sezione sotto cui si trovava: si legge prima di cominciare a leggere
 * il testo, ed è così che dice ciò che deve dire — questo documento è stato
 * guardato e non è servito. Il navy-700 e non il navy-500 delle didascalie:
 * è la frase che rende leggibile il rifiuto, non una nota a margine.
 *
 * È la riga più forte del sito — dichiara il limite invece di aggirarlo —
 * quindi legge come una dichiarazione: stesso corpo e peso della risposta a
 * fianco, non la nota tecnica minuta che era prima.
 */
.kvbo-proof__documents-label:has(+ .kvbo-proof__documents-note) {
	margin-bottom: var(--wp--preset--spacing--20);
}

.kvbo-proof__documents-note {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--navy-700);
}

/*
 * L'eccezione di movimento (CLAUDE.md §8): la risposta si scrive, poi la
 * fonte si evidenzia, una sola volta al caricamento. Solo l'istanza della
 * prova nell'apertura la porta — .kvbo-proof--opening, un nome di ruolo e
 * posizione, non di colore: la prova qui sta sul chiaro come ovunque
 * altrove sul sito, il componente è quello unico, .kvbo-proof puro.
 *
 * Il testo è già nel markup a dimensione finale — clip-path scopre un box
 * che occupa da subito lo spazio che occuperà a fine animazione, non lo fa
 * crescere: niente sotto si sposta. `both` tiene lo stato iniziale prima
 * del ritardo e quello finale dopo la fine, così l'evidenziazione della
 * fonte parte solo a scrittura conclusa e resta piena una volta arrivata.
 */
.kvbo-proof--opening .kvbo-proof__reply {
	animation: kvbo-proof-write 1.2s ease-out both;
}

.kvbo-proof--opening .kvbo-document mark {
	animation: kvbo-proof-mark 0.8s ease-out 1.2s both;
}

@keyframes kvbo-proof-write {
	from {
		clip-path: inset(0 0 100% 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes kvbo-proof-mark {
	from {
		background-color: transparent;
		box-shadow: inset 0 -2px 0 transparent;
	}
	to {
		background-color: var(--wp--preset--color--teal-50);
		box-shadow: inset 0 -2px 0 var(--wp--preset--color--teal-600);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kvbo-proof--opening .kvbo-proof__reply,
	.kvbo-proof--opening .kvbo-document mark {
		animation: none;
	}
}

/* --- Chiusura della pagina ---------------------------------------------- */

/*
 * Lo spazio in fondo alla pagina appartiene al contenitore, tranne quando
 * l'ultima sezione è una fascia a piena larghezza: quella arriva da sola fino
 * al piè di pagina, e un centinaio di pixel di fondo chiaro fra due campiture
 * navy si legge come un errore di composizione, non come respiro.
 *
 * Due fonti di spazio, non una: il padding-bottom di <main> qui sotto, e il
 * margin-block-start che il core di WordPress mette fra i figli diretti di
 * .wp-site-blocks — footer compreso, perché non è il primo figlio. Azzerare
 * solo il primo lascia comunque scoperta una striscia di fondo chiaro fra
 * <main> e <footer>: la condizione va valutata su .wp-site-blocks per poter
 * agire su entrambi i figli.
 *
 * La regola sta qui e non nel template perché così vale da sola in entrambe le
 * direzioni: se domani l'ultima sezione torna a essere su fondo chiaro, lo
 * spazio si ripresenta senza che nessuno debba ricordarsene.
 *
 * Due forme dello stesso controllo, non una: front-page.html non ha un livello
 * post-content, le fasce sono figlie dirette di <main>, e lì la prima forma è
 * quella giusta. page.html invece avvolge sempre il contenuto in
 * .entry-content — che è "align":"full" per costruzione (vedi il commento in
 * cima al template) ed è sempre l'unico figlio di <main> — quindi
 * "main > .alignfull:last-child" combacia SEMPRE su quelle cinque pagine,
 * indipendentemente da cosa hanno scritto per ultimo: vede .entry-content
 * stesso, non il blocco vero dentro di lui.
 *
 * Misurato via CDP (getBoundingClientRect, non il foglio di stile) prima di
 * scrivere questa correzione: su Contatti il padding-bottom di <main> risultava
 * 0px e il divario fino al piè di pagina 0px — non 48, non i ~20 osservati a
 * schermo. La prima riga qui sotto vinceva sempre, perché ":has()" con più
 * alternative separate da virgola basta che una sola combaci: avere aggiunto
 * la riga corretta (quella che guarda dentro .entry-content) senza escludere
 * quella sbagliata non serviva a niente, restava comunque vera anche lei.
 * ":not(.entry-content)" la esclude esplicitamente: da lì in poi la prima
 * forma vale solo per front-page.html, la seconda solo per page.html, mai
 * entrambe vere sulla stessa pagina.
 */
.wp-site-blocks > main {
	padding-bottom: var(--wp--preset--spacing--70);
}

.wp-site-blocks:has(> main > .alignfull:not(.entry-content):last-child) > main,
.wp-site-blocks:has(> main > .entry-content > .alignfull:last-child) > main {
	padding-bottom: 0;
}

/*
 * Il margin-block-start del core fra <main> e <footer> (spacing-50, 24px) non
 * è mai la misura giusta qui, e non solo quando <main> ha già azzerato il
 * proprio padding: anche quando <main> porta i suoi 48px veri, quel margine
 * si sommava — misurato, 72px invece di 48 — perché era una seconda fonte di
 * spazio indipendente dalla prima, non un'alternativa a essa. La distanza
 * giusta la decide solo il padding-bottom di <main> qui sopra: sempre zero.
 */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/*
 * Stesso problema, all'apertura: quando la prima sezione è una fascia a
 * piena larghezza, il margin-block-start che il core mette fra <header> e
 * <main> lascerebbe una striscia di fondo chiaro sopra la campitura navy.
 * <main> qui non ha un padding-top proprio da azzerare — lo porta la
 * fascia stessa, come ogni altra banda navy — quindi basta il margine.
 */
.wp-site-blocks:has(> main > .alignfull:first-child) > main {
	margin-block-start: 0;
}

/* --- Misura di lettura ---------------------------------------------------- */

/*
 * Titolo e testo di ogni fascia partono dal bordo sinistro della colonna larga,
 * come il titolo della pagina, e si fermano alla misura di lettura. Nessun
 * elemento si centra da solo: la stessa verticale ripetuta a ogni sezione è
 * ciò che dà alla pagina la colonna del documento invece dell'impaginato a
 * blocchi centrati.
 *
 * Prima era un elenco di selettori da estendere a mano per ogni fascia nuova
 * — quando la home era l'unica pagina costruita e le altre cinque erano
 * ancora da fare, esattamente il tipo di lista che qualcuno dimentica di
 * aggiornare, e il risultato è un bug invisibile: una fascia che non allinea
 * perché nessuno l'ha aggiunta all'elenco. Ora è una
 * classe di utilità: si applica al blocco che deve avere la misura, visibile
 * nel campo «classe CSS aggiuntiva» dell'editor invece che in una lista in
 * questo file che nessuno controlla di aver aggiornato.
 *
 * .kvbo-problem__turn (sezione «Il problema», più sotto) vince su questa con
 * lo stesso ordine di specificità di prima: viene dopo nel file, e a parità
 * di specificità decide l'ordine. Chi restringe ulteriormente la misura di
 * un elemento aggiunge la propria classe dopo questa sezione, non prima.
 */
.kvbo-measure {
	max-width: 42rem;
	margin-left: 0;
	margin-right: 0;
}

/* --- Righe a due colonne (componente riutilizzabile) --------------------- */

/*
 * Un elenco di definizioni a due colonne: chiave stretta a sinistra, valore
 * a destra, righe separate da un filo. Nasce per la fascia «Dove stanno i
 * dati» della home, dove i quattro valori sono formule approvate copiate
 * alla lettera — un blocco di specifiche, senza una riga scritta da noi — e
 * si generalizza qui perché la stessa struttura serve anche a «Le quattro
 * garanzie» e alla checklist di Sicurezza e compliance.
 *
 * Il colore del filo non è fissato qui: varia fra fondo chiaro e fondo
 * navy, ed è l'unica differenza reale fra i due contesti — vedi la variante
 * .kvbo-rows--navy più sotto. Tutto il resto, struttura compresa il punto
 * di rottura a 900px, è un solo posto: due varianti che divergessero anche
 * di un pixel sul punto di rottura sarebbero il bug che questo accorpamento
 * esiste per impedire.
 */
/*
 * --kvbo-rows-key è la larghezza della colonna chiave, dichiarata una sola
 * volta qui e riusata sia dal grid-template-columns sia dal calcolo della
 * larghezza del container qui sotto: se domani cambia, cambia in un solo
 * punto e le due misure non possono divergere senza che si veda.
 *
 * Il container si chiude esattamente dove finisce il testo del valore —
 * colonna chiave, il filo del gap, la misura di lettura — così i fili
 * orizzontali non continuano oltre l'ultima parola. --wp--style--global--
 * content-size è lo stesso 42rem di .kvbo-measure: non è un numero nuovo,
 * è il token di theme.json che già definisce la misura di lettura ovunque
 * sul sito.
 */
.kvbo-rows {
	--kvbo-rows-key: 16rem;
	max-width: calc(var(--kvbo-rows-key) + var(--wp--preset--spacing--60) + var(--wp--style--global--content-size));
	margin: var(--wp--preset--spacing--60) 0 0;
}

/*
 * Solo border-top, mai border-bottom sulla riga in sé: se ogni riga chiudesse
 * anche se stessa, ogni confine fra due .kvbo-rows — sezioni diverse, pagine
 * diverse, non importa — produrrebbe due fili con un vuoto in mezzo, perché
 * il filo di apertura della lista successiva si somma al filo di chiusura di
 * quella precedente. Con solo border-top la separazione fra due righe è
 * sempre un filo solo, per costruzione, a ogni confine presente e futuro.
 * Il filo di chiusura in fondo a una lista — quando serve, non sempre — è
 * un'aggiunta esplicita: vedi .kvbo-rows--closed più sotto.
 */
.kvbo-rows__row {
	padding: var(--wp--preset--spacing--50) 0;
	border-top: 1px solid var(--wp--preset--color--navy-200);
}

.kvbo-rows__key {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.4;
}

.kvbo-rows__value {
	max-width: 42rem;
	margin: var(--wp--preset--spacing--20) 0 0;
}

@media (min-width: 900px) {
	.kvbo-rows__row {
		display: grid;
		grid-template-columns: var(--kvbo-rows-key, 16rem) 1fr;
		gap: var(--wp--preset--spacing--60);
		align-items: start;
	}

	.kvbo-rows__value {
		margin-top: 0;
	}

	/*
	 * Riga senza valore: la chiave occupa l'intera riga invece di una
	 * colonna che lascerebbe l'altra metà vuota — un titolo di sezione
	 * senza prosa propria, non «le garanzie». Vive qui e non fuori dalla
	 * media query perché sotto i 900px .kvbo-rows__row non è display:grid,
	 * e un grid-column dichiarato fuori da questo blocco non avrebbe
	 * nessun grid a cui applicarsi — una regola sospesa nel vuoto, non un
	 * bug oggi ma il tipo di disallineamento che si scopre fra sei mesi.
	 * .kvbo-rows__key non porta una misura di lettura propria (nessun
	 * max-width, nessuna sillabazione dichiarata da nessuna parte nel
	 * foglio di stile): a piena riga si allarga e basta, non trascina
	 * dietro impostazioni tarate sulla colonna stretta.
	 */
	.kvbo-rows__row--key-only .kvbo-rows__key {
		grid-column: 1 / -1;
	}

	/*
	 * La dimensione dei titoli in colonna stretta è un vincolo del
	 * componente, non della scala tipografica del sito: vive qui, non in
	 * theme.json, e solo sopra i 900px, perché sotto la colonna sparisce e
	 * il vincolo con lei. Il gradino di dimensione fra H2 e H3 è minimo per
	 * costruzione — 256px non lascia spazio per di più senza superare le
	 * tre righe sul testo più lungo — e a schermo non bastava a distinguere
	 * titolo di sezione e sotto-voce quando stanno nella stessa colonna:
	 * fuori dalla griglia la posizione da sola bastava, dentro no.
	 *
	 * Il secondo segnale è il colore, non un nuovo peso o il Mono: H2 in
	 * navy-900 (il colore di testo primario, lo stesso di ogni titolo),
	 * H3 in navy-700 (testo secondario) — lo stesso rapporto che il sito
	 * usa già ovunque fra testo primario e secondario, non una coppia
	 * inventata per questo componente. navy-700 su navy-50 sta a 11:1
	 * (node tools/contrast.js navy-700 navy-50), ben oltre soglia.
	 */
	.kvbo-rows__key h2 {
		font-size: var(--wp--preset--font-size--lg);
		color: var(--wp--preset--color--navy-900);
	}

	.kvbo-rows__key h3 {
		font-size: var(--wp--preset--font-size--md);
		color: var(--wp--preset--color--navy-700);
	}
}

/*
 * Filo di chiusura esplicito, dove serve — oggi in fondo alla checklist di
 * Sicurezza e compliance. Non è il comportamento predefinito delle righe
 * (quello resta solo border-top, vedi sopra): è un'aggiunta mirata su
 * un'unica lista, applicata una sola volta nel markup di quella lista, non
 * un'eccezione nascosta dentro il selettore condiviso da tutte le righe.
 *
 * Si compone con .kvbo-rows__row--key-only senza conflitti: quel
 * modificatore tocca solo il grid-column della cella chiave, questo tocca
 * solo il bordo della riga — proprietà diverse dello stesso elemento, non
 * si scavalcano. Se l'ultima riga di una lista chiusa fosse anche una riga
 * senza valore, avrebbe comunque il proprio border-bottom e la chiave
 * occuperebbe comunque l'intera larghezza: nessuna sorpresa, non capita
 * oggi ma reggerebbe se capitasse.
 */
.kvbo-rows--closed .kvbo-rows__row:last-child {
	border-bottom: 1px solid var(--wp--preset--color--navy-200);
}

/*
 * La variante navy: sul navy-900 il filo navy-200 sparirebbe (contrasto
 * troppo basso), serve navy-500, che sta a 3,1:1 — si vede come riga e non
 * compete con il testo. Nessun'altra differenza strutturale: punto di
 * rottura e comportamento restano quelli di .kvbo-rows, stessa larghezza
 * massima compresa.
 */
.kvbo-rows--navy .kvbo-rows__row {
	border-top-color: var(--wp--preset--color--navy-500);
}

/* Non in uso oggi — nessuna lista in home è .kvbo-rows--closed — ma composta qui per lo stesso motivo di .kvbo-rows--closed sopra: un domani in cui serve non deve richiedere di scoprirlo a tentativi. */
.kvbo-rows--navy.kvbo-rows--closed .kvbo-rows__row:last-child {
	border-bottom-color: var(--wp--preset--color--navy-500);
}

/* --- Il problema -------------------------------------------------------- */

/*
 * La fascia è corta e quieta: una campitura navy piena che divide, senza
 * riquadri, senza icone e senza pulsanti. Tutto il testo è navy-50 sul navy-900
 * e sta a 14,3:1; la gerarchia la fa la dimensione, non il colore, perché
 * navy-400 e navy-500 su questo fondo sarebbero testo attenuato illeggibile e
 * navy-400 non è comunque colore di testo.
 */
.kvbo-problem {
	position: relative;
	overflow: hidden;
}

.kvbo-problem__turn {
	max-width: 34rem;
}

/*
 * Il cubo in filigrana. È un elemento decorativo di superficie, non
 * un'apposizione del marchio: sta al 6% su fondo navy, con la stessa opacità
 * sulle tre facce, e viene tagliato dal bordo della fascia. Nessuna rotazione,
 * nessuna deformazione, nessuna ricolorazione — l'eccezione e i suoi limiti
 * sono registrati nella sezione Marchio di CLAUDE.md.
 *
 * Il bordo sinistro sta a 46rem finché la finestra è stretta e si sposta a
 * 22rem dal bordo destro quando si allarga: il primo valore lo tiene fuori
 * dalla colonna di testo, il secondo garantisce che sporga sempre oltre il
 * bordo, cioè che resti tagliato anche su schermi larghi. Sotto i 900px non
 * c'è larghezza per entrambi e il cubo esce di scena.
 */
@media (min-width: 900px) {
	.kvbo-problem::after {
		content: "";
		position: absolute;
		top: 50%;
		left: max(46rem, 100% - 22rem);
		width: 30rem;
		aspect-ratio: 1;
		translate: 0 -50%;
		background: url("assets/brand/simbolo-negativo.svg") no-repeat left center / contain;
		opacity: 0.06;
		pointer-events: none;
	}
}

/* --- La biforcazione ---------------------------------------------------- */

/*
 * Le due strade hanno pari peso: stessa scala tipografica, stesso ordine degli
 * elementi, stesso colore, colonne di uguale larghezza. Nessun riquadro e
 * nessuna card — a dividerle basta un filo, e il filo sta a metà dello spazio
 * fra le due colonne invece che sul bordo di una delle due, perché appartiene
 * a entrambe allo stesso modo. Sotto i 900px le colonne si impilano, la
 * sinistra sopra, e il filo lascia il posto allo spazio.
 */
.kvbo-fork__paths {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--60);
}

/* Lo spazio fra le strade lo dà la griglia, non il blockGap dei blocchi. */
.kvbo-fork__paths > * {
	margin-block-start: 0;
}

@media (min-width: 900px) {
	.kvbo-fork__paths {
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}

	.kvbo-fork__path:first-child {
		padding-right: var(--wp--preset--spacing--70);
	}

	.kvbo-fork__path + .kvbo-fork__path {
		padding-left: var(--wp--preset--spacing--70);
		border-left: 1px solid var(--wp--preset--color--navy-400);
	}
}

/*
 * L'etichetta è un'intestazione di rango tre: dà ai due percorsi un posto
 * nella struttura del documento, così chi naviga per titoli trova la
 * biforcazione. In Sans e non in Mono, perché è nostra e non viene da un
 * documento; più piccola della riga che introduce, perché la qualifica.
 */
.kvbo-fork__label {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

.kvbo-fork__line {
	margin: 0 0 var(--wp--preset--spacing--40);
	max-width: 26rem;
}

.kvbo-fork__cta {
	margin: 0;
}

/*
 * La sottolineatura sta sul testo e non sull'intero collegamento, altrimenti
 * correrebbe anche sotto la freccia e sotto lo spazio che la precede. Resta
 * il segno non cromatico che distingue il link dal testo attorno.
 */
.kvbo-fork__cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	text-decoration: none;
}

.kvbo-fork__cta a > span {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.2em;
}

/*
 * La freccia è disegnata, non scritta. Il carattere → (U+2192) non è nei
 * sottoinsiemi Latin-1 dei quattro file di IBM Plex che il tema carica:
 * scritto come testo lo disegnerebbe un font di sistema, diverso su ogni
 * piattaforma, che è esattamente ciò che ospitare i caratteri localmente
 * serve a evitare.
 *
 * È una maschera e non un'immagine: la forma viene dal file, il colore da
 * currentColor, quindi la freccia segue il link nel passaggio del mouse
 * senza che il colore vada scritto due volte. Fuori dal @supports non
 * compare nulla, invece di un quadrato pieno.
 */
@supports (mask-image: url("assets/icons/arrow-right.svg")) or (-webkit-mask-image: url("assets/icons/arrow-right.svg")) {
	.kvbo-fork__cta a::after {
		content: "";
		flex: none;
		width: 0.8em;
		height: 0.8em;
		background-color: currentColor;
		-webkit-mask: url("assets/icons/arrow-right.svg") no-repeat center / contain;
		mask: url("assets/icons/arrow-right.svg") no-repeat center / contain;
	}
}

/* --- Il ciclo e la gamma ------------------------------------------------ */

.kvbo-cycle {
	margin-top: var(--wp--preset--spacing--60);
}

/*
 * La riga di stato: dice una volta sola, per tutta la pagina, chi è già
 * reale e cosa sono gli altri — composta sui campi dei prodotti da
 * kvbo_render_range_status_line(). Da qui in giù bastano i badge: la nota
 * per scheda e la chiusura della fascia non la ripetono.
 */
.kvbo-cycle__status-line {
	max-width: 42rem;
	margin: 0 0 var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--navy-700);
	font-size: var(--wp--preset--font-size--lg);
}

/*
 * Il diagramma: i nomi delle tre fasi uniti dalle frecce, ciascuno collegato
 * al proprio registro. Le frecce sono elementi a sé e non pseudo-elementi dei
 * collegamenti, così restano fuori dall'area cliccabile e dal testo che un
 * lettore di schermo annuncia.
 */
.kvbo-cycle__map {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--sm);
}

@supports (mask-image: url("assets/icons/arrow-right.svg")) or (-webkit-mask-image: url("assets/icons/arrow-right.svg")) {
	.kvbo-cycle__arrow {
		width: 1.1em;
		height: 1.1em;
		background-color: var(--wp--preset--color--navy-400);
		-webkit-mask: url("assets/icons/arrow-right.svg") no-repeat center / contain;
		mask: url("assets/icons/arrow-right.svg") no-repeat center / contain;
	}
}

/*
 * Ogni fase è un registro aperto da un filo: è il filo, e non un riquadro, a
 * dire dove comincia. Il nome della fase resta una targhetta quieta, perché
 * dentro il registro il primo piano appartiene ai nomi dei prodotti.
 */
.kvbo-cycle__phase {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--navy-200);
}

.kvbo-cycle__phase + .kvbo-cycle__phase {
	margin-top: var(--wp--preset--spacing--80);
}

.kvbo-cycle__phase-title {
	margin: 0 0 var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--wp--preset--color--navy-500);
}

/*
 * Le schede brevi stanno in colonne di uguale larghezza e non hanno mai
 * accanto una scheda lunga: quella apre il registro sopra di loro. Le colonne
 * si contano da sole in base allo spazio, quindi una fase con due prodotti e
 * una con tre non hanno bisogno di regole diverse.
 *
 * Il minimo di colonna è 17rem, non un valore comodo: è il pavimento del
 * criterio WCAG 1.4.10 (reflow, 320px di viewport) meno il padding
 * orizzontale che il tema riserva ai margini della pagina — 320px − 2 × 24px
 * = 272px = 17rem. Con 20rem la griglia sforava già a 360px, la larghezza più
 * comune degli Android di fascia media, non un caso raro da tollerare.
 *
 * Il gap era spacing-70/60 quando le schede non avevano un contorno proprio:
 * doveva fare da solo tutto il lavoro di separazione. Con il contorno
 * (.kvbo-product, sotto) il confine lo disegna il filo, non più lo spazio —
 * ridotto a spacing-50/40, ancora ben visibile ma non più doppiato sul
 * padding interno della scheda.
 */
.kvbo-cycle__others {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.kvbo-product--lead + .kvbo-cycle__others {
	margin-top: var(--wp--preset--spacing--80);
}

/*
 * Eccezione motivata alla regola del filo sottile — vedi CLAUDE.md §8. Con
 * quattro schede brevi affiancate a due a due, ciascuna con descrizione e
 * «Per chi», il solo spazio non bastava a dire dove finiva una scheda e
 * cominciava l'altra. Il contorno qui non è decorazione, è il confine di
 * un'area di contenuto — la stessa eccezione, e lo stesso criterio di
 * colore, della textarea di Contatti.
 *
 * La scheda portava anche una nota per riga di stato (kvbo_get_prototype_
 * notice()), tolta perché la stessa frase ripetuta su quattro schede
 * affiancate leggeva come un ritornello. Tolta la nota, il contorno resta:
 * senza di lui, quattro schede brevi con solo tre righe di testo ciascuna si
 * confonderebbero comunque nella griglia a due colonne.
 *
 * Stesso colore lì: navy-500, 4,68:1 su navy-50 (tools/contrast.js navy-500
 * navy-50). Non navy-200 — il filo dei divisori altrove nella pagina — che a
 * 1,21:1 sarebbe quasi invisibile, l'opposto di un confine che deve leggersi;
 * non navy-400, sotto la soglia 3:1 per un componente UI a 2,44:1.
 *
 * max-width qui e non solo sui figli: senza, la scheda lead (Flow, Capture)
 * — sola nella sua fascia, non dentro la griglia — erediterebbe la larghezza
 * piena della colonna e il contorno racchiuderebbe un vuoto a destra del
 * testo, che resta comunque fermo a 42rem. Le schede brevi non se ne
 * accorgono: la colonna della griglia è già più stretta di 42rem.
 */
.kvbo-product {
	max-width: 42rem;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--navy-500);
	border-radius: var(--wp--custom--radius);
}

.kvbo-product__name {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.kvbo-product__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--40);
}

/*
 * Stato e canale sono due generi di fatto diversi, e si distinguono per
 * trattamento — pieno e contornato — non per tinta: fra due stati la veste è
 * identica e cambia solo la parola. Il bordo trasparente sul badge pieno serve
 * a tenere le due forme della stessa altezza.
 */
.kvbo-badge {
	display: inline-block;
	padding: 0.15em 0.55em;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--teal-50);
	color: var(--wp--preset--color--teal-800);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.5;
}

/*
 * Il bordo è l'unico segnale — non cromatico, per scelta — che marca questo
 * badge come «contornato» invece che «pieno». navy-400 sta a 2,44:1 su
 * navy-50, sotto il minimo 3:1 per un componente UI (tools/contrast.js
 * navy-400 navy-50): un bordo che si vede a malapena indebolisce proprio il
 * meccanismo che dovrebbe sostituire il colore. navy-500 sta a 4,68:1, ed è
 * già il filo scelto altrove per «visibile ma non in competizione col testo».
 */
.kvbo-badge--channel {
	border-color: var(--wp--preset--color--navy-500);
	background-color: transparent;
	color: var(--wp--preset--color--navy-700);
}

.kvbo-product__summary {
	max-width: 42rem;
	margin: 0 0 var(--wp--preset--spacing--40);
}

/*
 * «Per chi» sta sopra e non in linea: è la stessa grammatica del riferimento
 * di documento del primo schermo, etichetta sopra e valore sotto, e evita il
 * due punti davanti a una frase che comincia per maiuscola.
 */
.kvbo-product__audience {
	max-width: 42rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--navy-700);
}

.kvbo-product__audience-label {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--navy-500);
}

.kvbo-product__detail {
	max-width: 42rem;
	margin-top: var(--wp--preset--spacing--50);
}

.kvbo-product__detail p {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.kvbo-product__detail p:last-child {
	margin-bottom: 0;
}

/*
 * Solo invito, mai stato: quello lo dice già .kvbo-cycle__status-line in
 * cima alla fascia. La chiamata all'azione che segue sta su una riga propria
 * e staccata: è l'unica della sezione, e in coda alla frase sembrerebbe
 * appesa all'ultimo periodo invece di chiudere tutto ciò che sta sopra.
 */
.kvbo-cycle__closing {
	max-width: 46rem;
	margin: var(--wp--preset--spacing--80) 0 0;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--navy-200);
	font-size: var(--wp--preset--font-size--lg);
}

/*
 * Pulsante pieno, non link sottolineato: era l'unico «Parliamone» del sito
 * reso come link — una sola etichetta per l'azione principale vuole anche
 * una sola forma. Nessun margine sotto: lo spazio prima del piè di pagina è
 * il padding-bottom di <main> (più sotto, «Chiusura della pagina»), uguale su
 * ogni pagina che chiude su contenuto chiaro — non una misura scelta qui.
 */
.kvbo-cycle__call {
	margin: var(--wp--preset--spacing--50) 0 0;
}

/* --- La gamma in sintesi (home) ------------------------------------------ */

/*
 * Un filo sopra, non un contorno: lo stesso principio di .kvbo-cycle__phase,
 * qui scheda per scheda invece che fase per fase. Sei fili sopra sei schede
 * si leggono come un registro, non come sei riquadri — il contorno chiuso
 * che le linee guida vietano non serve a farle leggere come unità distinte.
 */
.kvbo-range__card {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--navy-200);
}

.kvbo-range__card--lead {
	padding-top: var(--wp--preset--spacing--50);
}

.kvbo-range__name {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.kvbo-range__card--lead .kvbo-range__name {
	font-size: var(--wp--preset--font-size--xl);
}

.kvbo-range__badges {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.kvbo-range__line {
	max-width: 42rem;
	margin: 0;
	color: var(--wp--preset--color--navy-700);
}

.kvbo-range__card--lead .kvbo-range__line {
	font-size: var(--wp--preset--font-size--md);
}

/*
 * Due colonne fisse, non auto-fit: su un contenitore largo auto-fit con un
 * minimo di 17rem ne apre quattro, e cinque schede in quattro colonne fanno
 * 4+1 — l'ultima resta sola fuori griglia e si legge come un errore
 * d'impaginazione. Il numero di colonne è una decisione, non una
 * conseguenza della larghezza del contenitore: qui non serve il minimo di
 * reflow di .kvbo-cycle__others, perché la colonna non scende mai sotto la
 * metà di una fascia già dentro i margini del tema.
 *
 * align-items: start perché le schede non si stirano a pareggiare l'altezza
 * della più lunga — restano allineate in alto, ognuna con la propria altezza,
 * come le due colonne della prova.
 *
 * Punto di rottura a 900px: lo stesso già scelto per .kvbo-proof__panes, non
 * un secondo valore per la stessa decisione.
 */
.kvbo-range__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

@media (min-width: 900px) {
	.kvbo-range__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.kvbo-range__card--lead + .kvbo-range__grid {
	margin-top: var(--wp--preset--spacing--70);
}

.kvbo-range__more {
	margin: var(--wp--preset--spacing--60) 0 0;
}

/*
 * Un solo stato al passaggio del mouse, come chiede la direzione visiva: il
 * filo passa a teal-800. Nessun movimento, nessuna ombra, nessun cambio di
 * fondo. :has() individua la scheda che contiene il link a fuoco o sotto il
 * cursore — già in uso altrove nel tema — invece di dividere lo stato fra
 * scheda e link.
 */
.kvbo-range__card:has(a:hover),
.kvbo-range__card:has(a:focus-visible) {
	border-top-color: var(--wp--preset--color--teal-800);
}

/* --- Prodotti per pubblico (pagine di canale) ---------------------------- */

/*
 * L'elenco minimo delle pagine di canale: nome e stato, niente descrizione.
 * Un filo sopra ogni riga, stesso principio di .kvbo-range__card — un
 * registro, non un mucchio di riquadri — ma senza le colonne: qui sono al
 * più tre righe, non sei.
 *
 * La riga di sintesi sta sopra l'elenco, non sotto: dice quali nomi esistono
 * già prima che chi legge arrivi ai nomi, non dopo — vedi
 * kvbo_get_audience_range_summary() in content-rules.php. Per questo il
 * margine maggiore è sulla riga (distanza dal titolo di sezione) e quello
 * minore sull'elenco (distanza dalla riga che lo introduce).
 */
.kvbo-audience-products__list {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	max-width: 42rem;
}

.kvbo-audience-products__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--wp--preset--color--navy-200);
	font-size: var(--wp--preset--font-size--lg);
}

.kvbo-audience-products__item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--navy-200);
}

.kvbo-audience-products__summary {
	max-width: 42rem;
	margin: var(--wp--preset--spacing--50) 0 0;
	color: var(--wp--preset--color--navy-700);
}

/* --- Dove stanno i dati -------------------------------------------------- */

/*
 * La struttura a due colonne è .kvbo-rows (sopra); qui resta solo ciò che è
 * specifico di questa fascia e non della struttura in sé.
 *
 * «art. 28» è un riferimento normativo, cioè la stessa cosa che nel primo
 * schermo sono i «§» dentro i documenti: il Mono lo marca come riferimento
 * senza cambiare una lettera della formula che lo contiene. Non è specifico
 * di questa fascia — lo stesso span serve anche dentro il blocco dinamico
 * della formula DPA in Sicurezza e compliance — per questo il nome non porta
 * più «specs».
 *
 * Il Mono marca solo «art»: il punto, lo spazio e «28» restano nel carattere
 * del testo corrente. Non è un taglio della formula — il riferimento si legge
 * comunque intero — è l'unico modo di tenere lo spazio fuori dal Mono per
 * costruzione. Un tentativo precedente compensava lo spazio con un
 * word-spacing negativo tarato sulle metriche dei due font: riduceva lo
 * stacco ma non lo chiudeva, perché il numero da compensare era calcolato,
 * non verificato a schermo.
 */
.kvbo-ref {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375em;
}

.kvbo-residency__more {
	margin: var(--wp--preset--spacing--60) 0 0;
}

/* --- Sicurezza e compliance ---------------------------------------------- */

/*
 * La formula, dentro il blocco dinamico che non si può riscrivere. Il bordo a
 * sinistra in teal-600 la separa dal paragrafo di contesto che la precede o
 * la segue senza trasformarla in un riquadro: è un'evidenza, non una card.
 * Su navy-50 il bordo sta a 4,26:1 anche sotto simulazione di protanopia
 * (node tools/contrast.js teal-600 navy-50), sopra la soglia 3:1 per un
 * componente non testuale.
 */
.kvbo-formula {
	max-width: 42rem;
	margin: var(--wp--preset--spacing--40) 0;
	padding-left: var(--wp--preset--spacing--40);
	border-left: 2px solid var(--wp--preset--color--teal-600);
	font-weight: 600;
}

/* --- Utilità di accessibilità ------------------------------------------ */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Il link di salto contenuto diventa visibile quando riceve il focus. */
.screen-reader-text:focus {
	z-index: 100000;
	top: var(--wp--preset--spacing--40);
	left: var(--wp--preset--spacing--40);
	width: auto;
	height: auto;
	clip-path: none;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--navy-900);
	color: var(--wp--preset--color--navy-50);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

/* --- Modulo di contatto (pagina Contatti) -------------------------------- */

/*
 * accent-color prende un solo valore e il browser deriva da lì sia il segno
 * di selezione sia il tono del contorno — non sono due colori indipendenti
 * da impostare. teal-800 qui è lo stesso token già verificato a 8,35:1 su
 * navy-50 per il testo dei link: sopra soglia con ampio margine, quindi
 * sopra soglia anche nella lettura più severa che un componente UI richiede
 * (3:1). Il contorno a riposo resta quello nativo del browser: nessun
 * appearance:none, nessun componente ricostruito.
 */
.kvbo-contact__group {
	width: 100%;
	max-width: 42rem;
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
	border: 0;
}

.kvbo-contact__legend {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	font-weight: 600;
}

.kvbo-contact__option {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.kvbo-contact__option input {
	accent-color: var(--wp--preset--color--teal-800);
	/* Allinea il quadratino/pallino alla prima riga del testo, non al centro di un'etichetta che va a capo. */
	margin-top: 0.35em;
}

.kvbo-contact__hint {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--navy-700);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * Il solo filo sotto non reggeva su un'area alta più righe: fra il
 * suggerimento e la riga restava un vuoto che si leggeva come spazio bianco,
 * non come un campo. Torna il contorno sui quattro lati — qui non è
 * decorazione ma il confine di un'area di input, la stessa eccezione per cui
 * i pulsanti hanno un fondo pieno invece del solo teal di accento.
 *
 * Non navy-200 (il filo delle righe altrove): a 1,21:1 su navy-50 è quasi
 * invisibile, l'opposto di quello che questo contorno deve fare. Resta
 * navy-500 — 4,68:1, verificato — già scelto altrove come «visibile ma non
 * in competizione col testo»; navy-400 sta a 2,44:1, sotto soglia 3:1 per un
 * componente UI, e non è mai la scelta giusta per un bordo che deve vedersi.
 */
.kvbo-contact textarea {
	display: block;
	width: 100%;
	max-width: 42rem;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--navy-500);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--navy-50);
	color: inherit;
	font-family: inherit;
	font-size: 1em;
	resize: vertical;
}

.kvbo-contact__cta {
	margin-top: var(--wp--preset--spacing--60);
}

/*
 * L'indirizzo in chiaro è la rete di sicurezza per chi non ha un client di
 * posta configurato: deve leggersi come una vera alternativa, non come una
 * nota a piè di pagina. Corpo normale, non "sm" — a corpo ridotto passava
 * inosservato — ma senza competere con il pulsante: resta sotto, non
 * accanto. spacing-60 restava comunque vicino; spacing-70, lo scalino sopra,
 * è lo stesso usato per separare un titolo di sezione dal blocco successivo.
 * navy-700 su navy-50 è la coppia già in uso in ogni riga guida del sito:
 * 11,05:1, verificato, ben oltre soglia anche a corpo normale.
 */
.kvbo-contact__address {
	margin: var(--wp--preset--spacing--70) 0 0;
	color: var(--wp--preset--color--navy-700);
}

/* --- Movimento --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}