/*
 * Tema «Massimo Di Renzo» – regole che theme.json non sa esprimere.
 * Tutti i valori vengono dal Design System, tramite le variabili di WordPress
 * (--wp--preset--… e --wp--custom--…). Niente colori o misure scritti a mano,
 * salvo le misure della bozza indicate nei commenti.
 * Telefono prima: le regole per il computer stanno dentro @media (min-width: 782px),
 * la stessa soglia che WordPress usa per le colonne.
 */

/* ---------- Altezza delle righe per ogni dimensione di testo ---------- */
.has-apertura-computer-font-size { line-height: var(--wp--custom--interlinea--apertura-computer); }
.has-apertura-telefono-font-size { line-height: var(--wp--custom--interlinea--apertura-telefono); }
.has-titolo-sezione-font-size { line-height: var(--wp--custom--interlinea--titolo-sezione); }
.has-titolo-scheda-font-size { line-height: var(--wp--custom--interlinea--titolo-scheda); }
.has-articolo-font-size { line-height: var(--wp--custom--interlinea--articolo); }
.has-testo-font-size { line-height: var(--wp--custom--interlinea--testo); }
.has-piccolo-font-size { line-height: var(--wp--custom--interlinea--piccolo); }
.has-pulsante-font-size { line-height: var(--wp--custom--interlinea--pulsante); }
.has-nota-mono-font-size { line-height: var(--wp--custom--interlinea--nota-mono); }

/* ---------- Articolo: categoria, data e tempo di lettura ---------- */
/* Telefono: categoria su una riga, sotto «data · tempo di lettura». */
.dmr-meta { flex-direction: column; align-items: flex-start; gap: 0; }
.dmr-meta .dmr-sep-categoria { display: none; }
/* Computer: tutto su una riga. */
@media (min-width: 782px) {
	.dmr-meta { flex-direction: row; align-items: center; gap: var(--wp--preset--spacing--spazio-2); }
	.dmr-meta .dmr-sep-categoria { display: block; }
}

/* ---------- Menu ---------- */
/* La pagina in cui ti trovi: voce in petrolio, sottolineata. */
.dmr-menu .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--petrolio);
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Il nome «Massimo Di Renzo» dentro il menu si vede solo a menu aperto. */
.dmr-menu .dmr-nome-menu { display: none; }

/* Menu aperto sul telefono: nome in alto, voci a sinistra, a 19px, alte almeno 44px. */
.dmr-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: 0;
}
.dmr-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0;
	width: 100%;
}
.dmr-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--titolo-scheda);
	line-height: var(--wp--custom--interlinea--titolo-scheda);
	min-height: 44px;
	width: 100%;
	align-items: flex-start;
}
.dmr-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding-top: 9px; /* 9 + 26 + 9 = 44px */
	padding-bottom: 9px;
}
.dmr-menu .wp-block-navigation__responsive-container.is-menu-open .dmr-nome-menu {
	display: flex;
	margin-bottom: var(--wp--preset--spacing--spazio-6);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--pulsante);
	font-weight: 400;
	line-height: var(--wp--custom--interlinea--testo);
}
.dmr-menu .wp-block-navigation__responsive-container.is-menu-open .dmr-nome-menu a,
.dmr-menu .dmr-nome-menu.current-menu-item > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--inchiostro);
	text-decoration: none;
}

/* ---------- Piè di pagina sul telefono ---------- */
/* I link stanno su due colonne allineate, così nessuno resta da solo su una riga.
   Ogni link resta alto 44px (12px sopra e sotto, righe da 20px). */
@media (width < 782px) {
	.dmr-menu-piede { width: 100%; }
	.dmr-menu-piede .wp-block-navigation__container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--spazio-6);
		row-gap: 0;
		width: 100%;
	}
}

/* ---------- Due colonne: titolo a sinistra, testo a destra (da computer) ---------- */
.dmr-due-colonne > * { flex: 1 1 100%; min-width: 0; }
/* Sul telefono titolo e testo vanno uno sotto l'altro: tra i due basta spazio-4. */
.dmr-due-colonne.dmr-due-colonne { row-gap: var(--wp--preset--spacing--spazio-4); }
@media (min-width: 782px) {
	.dmr-due-colonne > :first-child { flex: 1 1 240px; }
	.dmr-due-colonne > :last-child { flex: 999 1 520px; max-width: var(--wp--style--global--content-size); }
}

/* ---------- Apertura con la foto (Home e Chi sono) ---------- */
/* Telefono: foto sopra il testo, quadrata. Computer: foto a destra, 4:5. */
.dmr-apertura { flex-direction: column; align-items: stretch; }
.dmr-apertura > .dmr-apertura-testo { order: 2; }
.dmr-apertura > .dmr-foto-apertura { order: 1; }
@media (min-width: 782px) {
	.dmr-apertura { flex-direction: row; align-items: center; }
	.dmr-apertura > .dmr-apertura-testo { order: 1; flex: 999 1 520px; min-width: 0; }
	.dmr-apertura > .dmr-foto-apertura { order: 2; flex: 1 1 320px; max-width: 420px; }
}

/* La cornice della foto: il blocco verde tenue sporge appena in basso a destra. */
.dmr-foto-apertura {
	position: relative;
	padding: 0 var(--wp--preset--spacing--spazio-4) var(--wp--preset--spacing--spazio-4) 0;
	box-sizing: border-box;
}
.dmr-foto-apertura::before {
	content: "";
	position: absolute;
	inset: 32px 0 0 32px; /* come nella bozza da telefono */
	background: var(--wp--preset--color--petrolio-tenue);
	border-radius: var(--wp--custom--raggio--grande);
}
.dmr-foto-apertura .wp-block-image { position: relative; margin: 0; }
.dmr-foto-apertura .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: var(--wp--custom--raggio--grande);
}
@media (min-width: 782px) {
	.dmr-foto-apertura { padding: 0 var(--wp--preset--spacing--spazio-6) var(--wp--preset--spacing--spazio-6) 0; }
	.dmr-foto-apertura::before { inset: 48px 0 0 48px; } /* come nella bozza da computer */
	.dmr-foto-apertura .wp-block-image img { aspect-ratio: 4 / 5; }
}

/* Apertura con foto larga (Chi sono): da computer la foto è orizzontale, 3:2,
   e prende più spazio; il testo resta su righe comode (al massimo 480px circa). */
.dmr-foto-apertura picture { display: block; }
@media (min-width: 782px) {
	.dmr-apertura.dmr-apertura-larga > .dmr-apertura-testo { flex: 1 1 380px; max-width: 480px; }
	.dmr-apertura.dmr-apertura-larga > .dmr-foto-apertura { flex: 1 1 560px; max-width: 640px; }
	.dmr-apertura-larga .dmr-foto-apertura .wp-block-image img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
}

/* L'etichetta con il nome che scavalca il bordo della foto. */
.dmr-foto-apertura .dmr-etichetta {
	position: absolute;
	left: 12px;
	bottom: 0;
	margin: 0;
	padding: 6px 12px;
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--filo);
	border-radius: var(--wp--custom--raggio--piccolo);
}
@media (min-width: 782px) {
	.dmr-foto-apertura .dmr-etichetta { left: -20px; bottom: 64px; padding: 8px 14px; }
}

/* ---------- Temi (Di cosa scrivo): filo petrolio sopra ogni tema ---------- */
.dmr-tema { border-top: 2px solid var(--wp--preset--color--petrolio); padding-top: var(--wp--preset--spacing--spazio-4); }

/* ---------- Il percorso (Chi sono) ---------- */
.dmr-tappa > .dmr-tappa-nome { margin: 0; }
@media (min-width: 782px) {
	.dmr-tappa { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: var(--wp--preset--spacing--spazio-6); }
	/* L'etichetta sta allineata alla prima riga del testo (righe da 30px, etichetta da 20px: 5px sopra). */
	.dmr-tappa > .dmr-tappa-nome { padding-top: 5px; }
}

/* ---------- Link con la freccia ---------- */
.dmr-link-freccia a { font-weight: 500; }

/* ---------- Chi sono ---------- */
/* Il filo comune: testo a 19px (titolo-scheda) con le righe ariose dell'articolo (30px). */
.dmr-filo-comune { line-height: var(--wp--custom--interlinea--articolo); }
/* La colonna vuota a sinistra della chiusura serve solo da computer. */
.dmr-colonna-vuota { display: none; }
@media (min-width: 782px) {
	.dmr-colonna-vuota { display: block; }
	.dmr-tappa > * { margin-block-start: 0; }
}

/* ---------- Pagine semplici (Libri, Corsi, Contatti, Kit per la stampa) ---------- */
/* Apertura senza foto: titolo e testo restano larghi al massimo larghezza-testo. */
.dmr-apertura-semplice > * { max-width: var(--wp--style--global--content-size); }

/* Copertine dei libri: sempre intere, mai ritagliate. */
.dmr-copertina { margin: 0; }
.dmr-copertina img {
	display: block;
	width: 200px;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--wp--preset--color--filo);
	border-radius: var(--wp--custom--raggio--piccolo);
}
@media (min-width: 782px) {
	.dmr-copertina img { width: 240px; }
}

/* Foto del Kit per la stampa: intere, con bordo filo. */
.dmr-foto-kit { margin: 0; }
.dmr-foto-kit img {
	display: block;
	width: 100%;
	max-width: 280px;
	height: auto;
	border: 1px solid var(--wp--preset--color--filo);
	border-radius: var(--wp--custom--raggio--grande);
}

/* Contatti: sul telefono il modulo viene prima delle note (Kit per la stampa, LinkedIn). */
.dmr-contatti > .dmr-modulo-contatti { order: 1; }
.dmr-contatti > aside { order: 2; }
@media (min-width: 782px) {
	.dmr-contatti > aside { order: 1; }
	.dmr-contatti > .dmr-modulo-contatti { order: 2; }
}

/* Segnaposto «Modulo in arrivo» (solo nella copia di prova, vedi functions.php).
   Bordo tratteggiato petrolio: deve saltare all'occhio e non sembrare definitivo. */
.dmr-segnaposto-modulo {
	border: 2px dashed var(--wp--preset--color--petrolio);
	border-radius: var(--wp--custom--raggio--grande);
	background: var(--wp--preset--color--superficie);
	padding: var(--wp--preset--spacing--spazio-6);
}

/* Articoli senza categoria visibile (Crescita personale): niente puntino prima della data. */
.dmr-meta:not(:has(.wp-block-post-terms)) .dmr-sep-categoria { display: none; }

/* ---------- Zone da toccare di almeno 44px (controllo di accessibilità del 10/11/2026) ---------- */
/* Lo spazio in più sopra e sotto è compensato da un margine negativo: l'area da toccare cresce,
   ma niente si sposta nella pagina. */
.dmr-nome a {
	display: inline-block;
	padding-block: 13px; /* 19 + 26 = 45px */
	margin-block: -13px;
}
.dmr-link-solo a {
	display: inline-block;
	padding-block: 11px; /* 22 + 22 = 44px */
	margin-block: -11px;
}
.wp-block-post-terms a {
	display: inline-block;
	padding-block: 14px; /* 17 + 28 = 45px */
	margin-block: -14px;
}
/* Pulsanti «Apri menu» e «Chiudi menu» del telefono: 44 × 44px invece di 24 × 24.
   SOLO sotto i 600px: da 600px in su WordPress nasconde il pulsante e mostra il menu
   completo. Scrivere «display: flex» per tutte le larghezze rimetteva il pulsante sul
   computer e mandava i link a capo (errore del 10/11/2026). Il passaggio dal menu del
   telefono a quello del computer avviene in un punto solo: 600px, la soglia di WordPress. */
@media (width < 600px) {
	.dmr-menu .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin-right: -10px; /* l'icona resta allineata al margine destro */
	}
}
.dmr-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* Numeri delle pagine del Blog e «Articoli precedenti / più recenti»: almeno 44px da toccare. */
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}
.wp-block-query-pagination .page-numbers { min-width: 44px; }

/* ---------- Anteprime degli articoli con immagine (Blog, Home, Leggi anche) ---------- */
/* Telefono: immagine piccola e quadrata (80px) a destra di data e titolo; il sommario va sotto, largo. */
.dmr-scheda:has(.dmr-anteprima) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 80px;
	column-gap: var(--wp--preset--spacing--spazio-4);
	row-gap: var(--wp--preset--spacing--spazio-2);
	align-content: start;
}
.dmr-scheda:has(.dmr-anteprima) > * { grid-column: 1; margin: 0; }
.dmr-scheda .dmr-anteprima {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 80px;
	margin: 0;
}
.dmr-scheda .dmr-anteprima img {
	display: block;
	width: 80px;
	height: 80px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--raggio--piccolo);
}
.dmr-scheda:has(.dmr-anteprima) > .wp-block-post-excerpt { grid-column: 1 / -1; }

/* Tablet in verticale (600–781px): le schede hanno ancora l'immagine piccola accanto al titolo
   (vista del telefono), ma WordPress le metterebbe in 3 colonne e i titoli si spezzerebbero a metà
   parola («Upskillin-g»). Qui una colonna sola; da 782px l'immagine passa in alto e tornano le 3 colonne. */
@media (width >= 600px) and (width < 782px) {
	.wp-block-post-template.is-layout-grid:has(.dmr-scheda) { grid-template-columns: minmax(0, 1fr); }
}

/* Computer: immagine in alto, larga quanto la scheda, 16:9, con gli angoli in alto come la scheda. */
@media (min-width: 782px) {
	.dmr-scheda:has(.dmr-anteprima) { display: block; }
	.dmr-scheda:has(.dmr-anteprima) > * + * { margin-top: var(--wp--preset--spacing--spazio-2); }
	.dmr-scheda .dmr-anteprima {
		width: auto;
		/* L'immagine arriva fino al bordo della scheda: annulla lo spazio interno (spazio-6). */
		margin: calc(-1 * var(--wp--preset--spacing--spazio-6)) calc(-1 * var(--wp--preset--spacing--spazio-6)) var(--wp--preset--spacing--spazio-6);
	}
	.dmr-scheda .dmr-anteprima img {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		/* Angoli in alto: raggio-grande meno il bordo di 1px, così combacia con il bordo della scheda. */
		border-radius: calc(var(--wp--custom--raggio--grande) - 1px) calc(var(--wp--custom--raggio--grande) - 1px) 0 0;
	}
}

/* =========================================================================
 * Effetti sobri (approvati il 10/11/2026)
 * Regole: durate 0,1–0,3 s, movimento morbido, niente rimbalzi, niente ombre.
 * Con «riduci movimento» attivo resta tutto fermo: gli effetti di movimento
 * esistono SOLO dentro (prefers-reduced-motion: no-preference).
 * Se il browser non li supporta, la pagina si vede normale: lo stato di
 * partenza di ogni elemento è quello finale (pieno, al suo posto); l'effetto
 * parte solo dove il browser lo sa fare (@supports).
 * ====================================================================== */

/* 1. Passaggio morbido tra le pagine del sito: dissolvenza breve del browser. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.2s;
		animation-timing-function: ease-out;
	}
}

/* 2. Sezioni e schede che compaiono scorrendo: salgono di 10px e diventano piene.
   Solo sezioni delle pagine (dalla seconda in poi: la prima è già sullo schermo) e schede.
   Mai il testo degli articoli (che sta in <article>, non in <section>).
   L'effetto è legato allo scorrimento: finisce quando l'elemento è entrato per un terzo. */
@keyframes dmr-compare {
	from { opacity: 0.4; translate: 0 10px; }
	to   { opacity: 1;   translate: 0 0; }
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		main section ~ section > :where(h2, h3, p, .wp-block-buttons, .dmr-due-colonne, .wp-block-group:not(:has(.dmr-scheda))),
		.dmr-scheda {
			animation: dmr-compare linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
	}
}

/* 3. Schede degli articoli: al passaggio del mouse (solo con mouse o trackpad) e quando
   un link della scheda è selezionato con la tastiera, bordo petrolio e immagine appena ingrandita. */
.dmr-scheda .dmr-anteprima { overflow: hidden; }
@media (min-width: 782px) {
	.dmr-scheda .dmr-anteprima {
		border-radius: calc(var(--wp--custom--raggio--grande) - 1px) calc(var(--wp--custom--raggio--grande) - 1px) 0 0;
	}
}
@media (hover: hover) and (pointer: fine) {
	.dmr-scheda { transition: border-color 0.2s ease-out; }
	/* !important: WordPress scrive il colore del bordo (filo) con !important nella classe has-filo-border-color. */
	.dmr-scheda:hover { border-color: var(--wp--preset--color--petrolio) !important; }
	@media (prefers-reduced-motion: no-preference) {
		.dmr-scheda .dmr-anteprima img { transition: scale 0.25s ease-out; }
		.dmr-scheda:hover .dmr-anteprima img { scale: 1.03; }
	}
}
/* Con la tastiera vale ovunque, anche senza mouse (stesso motivo per !important). */
.dmr-scheda:focus-within { border-color: var(--wp--preset--color--petrolio) !important; }
@media (prefers-reduced-motion: no-preference) {
	.dmr-scheda:focus-within .dmr-anteprima img { scale: 1.03; }
}

/* 4. Apertura della Home: il blocco verde tenue dietro la foto scivola in posizione
   con un piccolo ritardo, al caricamento della pagina. È solo decorazione: la foto
   e il testo non si muovono e sono subito visibili. */
@keyframes dmr-blocco-verde {
	from { opacity: 0; translate: -12px -12px; }
	to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
	.home .dmr-foto-apertura::before {
		animation: dmr-blocco-verde 0.3s ease-out 0.15s both;
	}
}

/* ---------- Foto del Kit per la stampa e copertine dei libri: cliccabili (10/11/2026) ---------- */
/* Kit: la foto scarica il file. Il link fa da cornice (bordo filo, angoli raggio-grande):
   l'immagine si ingrandisce appena dentro la cornice, il bordo resta fermo. */
.dmr-foto-kit a {
	display: block;
	max-width: 280px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--filo);
	border-radius: var(--wp--custom--raggio--grande);
	transition: border-color 0.2s ease-out;
}
.dmr-foto-kit a img {
	border: 0;
	border-radius: 0;
	max-width: 100%;
}
/* Copertine: link ad Amazon. Solo il bordo cambia colore: nessun ingrandimento,
   perché il Design System vuole le copertine sempre intere. */
.dmr-copertina a { display: inline-block; }
.dmr-copertina a img { transition: border-color 0.2s ease-out; }

@media (hover: hover) and (pointer: fine) {
	.dmr-foto-kit a:hover { border-color: var(--wp--preset--color--petrolio); }
	.dmr-copertina a:hover img { border-color: var(--wp--preset--color--petrolio); }
	@media (prefers-reduced-motion: no-preference) {
		.dmr-foto-kit a img { transition: scale 0.25s ease-out; }
		.dmr-foto-kit a:hover img { scale: 1.03; }
	}
}
/* Con la tastiera: stesso effetto quando il link è selezionato. */
.dmr-foto-kit a:focus-visible { border-color: var(--wp--preset--color--petrolio); }
.dmr-copertina a:focus-visible img { border-color: var(--wp--preset--color--petrolio); }
@media (prefers-reduced-motion: no-preference) {
	.dmr-foto-kit a:focus-visible img { scale: 1.03; }
}

/* ---------- Moduli (Fase 4): WPForms nella pagina Contatti ---------- */
/* In WPForms › Impostazioni › Generale gli stili suoi sono spenti («Nessuno stile»):
   l'aspetto viene tutto da qui, con i token del Design System. */
.dmr-modulo-contatti .wpforms-container { margin: 0; }
.dmr-modulo-contatti .wpforms-field-container {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--spazio-6);
}
.dmr-modulo-contatti .wpforms-field { margin: 0; padding: 0; position: relative; }

/* Etichette sempre visibili, sopra il campo (mai dentro). */
.dmr-modulo-contatti .wpforms-field-label {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--spazio-2);
	color: var(--wp--preset--color--inchiostro);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--testo);
	font-weight: 500;
	line-height: var(--wp--custom--interlinea--testo);
}
.dmr-modulo-contatti .wpforms-required-label { color: var(--wp--preset--color--inchiostro-tenue); font-weight: 400; }
.dmr-modulo-contatti .wpforms-field-description {
	margin: var(--wp--preset--spacing--spazio-2) 0 0;
	color: var(--wp--preset--color--inchiostro-tenue);
	font-size: var(--wp--preset--font-size--piccolo);
	line-height: var(--wp--custom--interlinea--piccolo);
}
/* L'etichetta del consenso è la frase accanto alla casella: il titolo «Privacy» si legge solo con gli screen reader. */
.dmr-modulo-contatti .wpforms-field-gdpr-checkbox > .wpforms-field-label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	margin: 0;
}

/* Campi: 44px di altezza, testo a 16px (sotto i 16px l'iPhone ingrandisce la pagina), bordo che si vede. */
.dmr-modulo-contatti :is(input[type="text"], input[type="email"], select, textarea) {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--bordo-campo);
	border-radius: var(--wp--custom--raggio--medio);
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--inchiostro);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--testo);
	line-height: var(--wp--custom--interlinea--testo);
}
.dmr-modulo-contatti textarea { min-height: 160px; resize: vertical; }
.dmr-modulo-contatti :is(input[type="text"], input[type="email"], select, textarea):focus {
	border-color: var(--wp--preset--color--petrolio);
	outline: 2px solid var(--wp--preset--color--petrolio);
	outline-offset: 2px;
}

/* Casella del consenso: 24px, e tutta la riga (casella + frase) è area da toccare di almeno 44px. */
.dmr-modulo-contatti .wpforms-field-gdpr-checkbox ul { list-style: none; margin: 0; padding: 0; }
.dmr-modulo-contatti .wpforms-field-gdpr-checkbox li { margin: 0; padding: 0; display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--spazio-2); }
.dmr-modulo-contatti input[type="checkbox"] {
	flex: none;
	width: 24px; height: 24px;
	margin: 10px 0 0;
	accent-color: var(--wp--preset--color--petrolio);
}
.dmr-modulo-contatti .wpforms-field-label-inline {
	display: block;
	min-height: 44px;
	box-sizing: border-box;
	padding-block: 9px;
	color: var(--wp--preset--color--inchiostro);
	font-size: var(--wp--preset--font-size--testo);
	font-weight: 400;
	line-height: var(--wp--custom--interlinea--testo);
}
.dmr-modulo-contatti .wpforms-field-label-inline a { display: inline-block; padding-block: 9px; margin-block: -9px; }

/* Errori: testo chiaro sotto il campo, in rosso del Design System, con bordo del campo più spesso
   (l'errore non si affida solo al colore: c'è il testo e il bordo cambia spessore). */
.dmr-modulo-contatti :is(label, em).wpforms-error,
.dmr-modulo-contatti .wpforms-error-container,
.dmr-modulo-contatti .wpforms-field-error-message {
	display: block;
	margin: var(--wp--preset--spacing--spazio-2) 0 0;
	color: var(--wp--preset--color--errore);
	font-size: var(--wp--preset--font-size--piccolo);
	font-style: normal;
	font-weight: 500;
	line-height: var(--wp--custom--interlinea--piccolo);
}
.dmr-modulo-contatti :is(input, select, textarea).wpforms-error {
	border: 2px solid var(--wp--preset--color--errore);
	padding: 9px 11px;
}
.dmr-modulo-contatti .wpforms-field-gdpr-checkbox :is(label, em).wpforms-error { padding-left: 32px; }
.dmr-modulo-contatti .wpforms-error-noscript { color: var(--wp--preset--color--errore); }

/* Pulsante «Invia»: stesso aspetto dei pulsanti del tema, alto almeno 44px. */
.dmr-modulo-contatti .wpforms-submit-container { margin: var(--wp--preset--spacing--spazio-6) 0 0; display: flex; align-items: center; gap: var(--wp--preset--spacing--spazio-4); }
.dmr-modulo-contatti .wpforms-submit {
	min-height: 44px;
	padding: 12px var(--wp--preset--spacing--spazio-4);
	border: 0;
	border-radius: var(--wp--custom--raggio--medio);
	background: var(--wp--preset--color--petrolio);
	color: var(--wp--preset--color--superficie);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--pulsante);
	font-weight: 500;
	line-height: var(--wp--custom--interlinea--pulsante);
	cursor: pointer;
}
.dmr-modulo-contatti .wpforms-submit:hover { background: var(--wp--preset--color--petrolio-scuro); }
.dmr-modulo-contatti .wpforms-submit:disabled { background: var(--wp--preset--color--petrolio-scuro); cursor: progress; }

/* Messaggio dopo l'invio. */
.dmr-modulo-contatti .wpforms-confirmation-container-full {
	padding: var(--wp--preset--spacing--spazio-6);
	border: 1px solid var(--wp--preset--color--petrolio);
	border-radius: var(--wp--custom--raggio--grande);
	background: var(--wp--preset--color--petrolio-tenue);
	color: var(--wp--preset--color--inchiostro);
}
.dmr-modulo-contatti .wpforms-confirmation-container-full p { margin: 0; font-size: var(--wp--preset--font-size--articolo); line-height: var(--wp--custom--interlinea--articolo); }

/* ---------- Moduli (Fase 4): «Avvisami» di Brevo nella pagina Corsi ---------- */
/* Stesse misure e stessi token del modulo Contatti. Il codice del modulo vive in Brevo
   (Brevo › Moduli › «Avvisami», «Usa lo stile del tema» attivo): l'aspetto sta tutto qui.
   La sezione ha lo sfondo petrolio-tenue: il bordo dei campi qui è «nota», più scuro di
   «bordo-campo», perché su quello sfondo «bordo-campo» non arriva al contrasto 3:1. */
.dmr-modulo-avvisami form.sib_signup_form { margin: 0; padding: 0; }
.dmr-modulo-avvisami .sib_signup_box_inside_2,
.dmr-modulo-avvisami form > div { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--spazio-6); }
.dmr-modulo-avvisami .sib_loader { display: none !important; } /* il pulsante già dice «in corso»: niente spinner di WordPress */
.dmr-modulo-avvisami p { margin: 0; }
.dmr-modulo-avvisami .dmr-campo { margin: 0; padding: 0; border: 0; min-width: 0; }

.dmr-modulo-avvisami label,
.dmr-modulo-avvisami legend {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--spazio-2);
	padding: 0;
	color: var(--wp--preset--color--inchiostro);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--testo);
	font-weight: 500;
	line-height: var(--wp--custom--interlinea--testo);
}
.dmr-modulo-avvisami .dmr-obbligatorio { color: var(--wp--preset--color--inchiostro-tenue); font-weight: 400; }
.dmr-modulo-avvisami .dmr-aiuto {
	margin: 0 0 var(--wp--preset--spacing--spazio-2);
	color: var(--wp--preset--color--inchiostro-tenue);
	font-size: var(--wp--preset--font-size--piccolo);
	line-height: var(--wp--custom--interlinea--piccolo);
}

.dmr-modulo-avvisami :is(input[type="text"], input[type="email"]) {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--nota);
	border-radius: var(--wp--custom--raggio--medio);
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--inchiostro);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--testo);
	line-height: var(--wp--custom--interlinea--testo);
}
.dmr-modulo-avvisami :is(input[type="text"], input[type="email"]):focus {
	border-color: var(--wp--preset--color--petrolio);
	outline: 2px solid var(--wp--preset--color--petrolio);
	outline-offset: 2px;
}

/* Caselle: 24px, e ogni riga (casella + testo) è un'area da toccare di almeno 44px. */
.dmr-modulo-avvisami :is(.dmr-scelta, .dmr-consenso) { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--spazio-2); flex-wrap: wrap; }
.dmr-modulo-avvisami .dmr-scelta { margin-bottom: 0; }
.dmr-modulo-avvisami input[type="checkbox"] {
	flex: none;
	width: 24px; height: 24px;
	margin: 10px 0 0;
	accent-color: var(--wp--preset--color--petrolio);
}
.dmr-modulo-avvisami :is(.dmr-scelta, .dmr-consenso) label {
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	box-sizing: border-box;
	margin: 0;
	padding-block: 9px;
	font-weight: 400;
}
.dmr-modulo-avvisami .dmr-consenso label a { display: inline-block; padding-block: 9px; margin-block: -9px; }

/* Errori sotto il campo (li scrive modulo-avvisami.js): rosso del Design System, testo chiaro,
   e il campo cambia anche spessore del bordo (non ci si affida solo al colore). */
.dmr-modulo-avvisami .dmr-errore {
	flex: 0 0 100%;
	margin: var(--wp--preset--spacing--spazio-2) 0 0;
	color: var(--wp--preset--color--errore);
	font-size: var(--wp--preset--font-size--piccolo);
	font-weight: 500;
	line-height: var(--wp--custom--interlinea--piccolo);
}
.dmr-modulo-avvisami .dmr-consenso .dmr-errore { padding-left: 32px; }
.dmr-modulo-avvisami input[aria-invalid="true"]:not([type="checkbox"]) {
	border: 2px solid var(--wp--preset--color--errore);
	padding: 9px 11px;
}
.dmr-modulo-avvisami input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--wp--preset--color--errore); outline-offset: 2px; }

/* Pulsante «Avvisami»: come i pulsanti del tema, alto almeno 44px. */
.dmr-modulo-avvisami .sib-default-btn {
	min-height: 44px;
	margin: 0;
	padding: 12px var(--wp--preset--spacing--spazio-4);
	border: 0;
	border-radius: var(--wp--custom--raggio--medio);
	background: var(--wp--preset--color--petrolio);
	color: var(--wp--preset--color--superficie);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--pulsante);
	font-weight: 500;
	line-height: var(--wp--custom--interlinea--pulsante);
	cursor: pointer;
}
.dmr-modulo-avvisami .sib-default-btn:hover { background: var(--wp--preset--color--petrolio-scuro); }
.dmr-modulo-avvisami .sib-default-btn:disabled { background: var(--wp--preset--color--petrolio-scuro); cursor: progress; }

/* Messaggi dopo l'invio (li scrive Brevo): sostituiscono i colori che l'estensione mette da sé.
   «!important» serve perché l'estensione li scrive in un <style> dentro la pagina. Il messaggio
   di successo resta visibile (lo script di Brevo lo nasconderebbe dopo 5 secondi). */
.dmr-modulo-avvisami .sib_msg_disp:empty { display: none; }
.dmr-modulo-avvisami p.sib-alert-message {
	margin: 0 !important;
	padding: var(--wp--preset--spacing--spazio-4) !important;
	border: 1px solid var(--wp--preset--color--petrolio) !important;
	border-radius: var(--wp--custom--raggio--grande) !important;
	background: var(--wp--preset--color--superficie) !important;
	color: var(--wp--preset--color--inchiostro) !important;
	font-size: var(--wp--preset--font-size--testo);
	line-height: var(--wp--custom--interlinea--testo);
}
.dmr-modulo-avvisami p.sib-alert-message-error,
.dmr-modulo-avvisami p.sib-alert-message-warning {
	border: 2px solid var(--wp--preset--color--errore) !important;
	color: var(--wp--preset--color--errore) !important;
	font-weight: 500;
}
.dmr-modulo-avvisami p.sib-alert-message-success { display: block !important; opacity: 1 !important; height: auto !important; }

.dmr-modulo-avvisami .dmr-senza-js { margin-top: var(--wp--preset--spacing--spazio-4); color: var(--wp--preset--color--inchiostro); font-size: var(--wp--preset--font-size--piccolo); line-height: var(--wp--custom--interlinea--piccolo); }
.dmr-conferma-iscrizione {
	margin-bottom: var(--wp--preset--spacing--spazio-12) !important;
	padding: var(--wp--preset--spacing--spazio-6);
	border: 1px solid var(--wp--preset--color--petrolio);
	border-radius: var(--wp--custom--raggio--grande);
	background: var(--wp--preset--color--petrolio-tenue);
}
.dmr-conferma-iscrizione > h2 { margin: 0; }
.dmr-conferma-iscrizione > p { margin: 0; }