/*
Theme Name: Dimora Lo Scalzo
Theme URI: https://dimoraloscalzo.it
Description: Tema figlio di Twenty Twenty-Five per Dimora Lo Scalzo, Accettura (MT). Progetto PNRR Bando Borghi — Imprese, Prot. BRG002830.
Author: Raffaele Vitulano
Template: twentytwentyfive
Version: 2.1.0
Requires at least: 6.7
Tested up to: 7.0
License: GPL-2.0-or-later
Text Domain: dimoraloscalzo

I font in assets/fonts/ NON sono GPL: Jost (c) 2020 The Jost Project Authors e Manrope (c) 2018 The Manrope Project Authors, entrambi SIL Open Font License 1.1.
Il testo integrale delle due licenze sta accanto ai woff2, in assets/fonts/OFL-jost.txt e assets/fonts/OFL-manrope.txt: la OFL obbliga a distribuirlo insieme ai file.
I due woff2 sono sottoinsiemi `latin` delle varianti VARIABILI ufficiali, con l'asse dei pesi ristretto a quelli usati (Jost 300-500, Manrope 400-700). Nessuna richiesta a Google Fonts: vedi docs/direzione-visiva.md.
*/

/* ====================================================================
   DIREZIONE VISIVA APPROVATA — palette «ottone», tipografia «Jost».
   docs/direzione-visiva.md e' la fonte di verita': qui sotto non ci
   sono colori scritti a mano, solo alias dei token di theme.json.
   Cambiare palette = cambiare i valori in theme.json, non questo file
   e tantomeno il markup.
   ==================================================================== */
:root {
	/* colore */
	--bg:          var(--wp--preset--color--bg);
	--surface:     var(--wp--preset--color--surface);
	--field:       var(--wp--custom--field);
	--fg:          var(--wp--preset--color--fg);
	--fg-2:        var(--wp--custom--fg-soft);
	--fg-3:        var(--wp--custom--fg-muted);
	--hair:        var(--wp--custom--hair);
	--hair-2:      var(--wp--custom--hair-strong);
	--accent:      var(--wp--preset--color--accent);
	--accent-h:    var(--wp--custom--accent-hover);
	--on-accent:   var(--wp--custom--on-accent);
	/* L'ottone vive in due valori, e non e' un vezzo: --gold e' la
	   SUPERFICIE (fondo del pulsante, display sopra lo scrim scuro),
	   --gold-ink e' l'INCHIOSTRO sui fondi chiari. Su calce l'ottone
	   della demo da' 2,95 e su superficie 2,68: sotto anche la soglia
	   dei 3,0 per il testo grande. Misure in docs/direzione-visiva.md. */
	--gold:        var(--wp--custom--gold);
	--gold-ink:    var(--wp--custom--gold-ink);
	--on-gold:     var(--wp--custom--on-gold);
	--band-bg:     var(--wp--custom--band-bg);
	--band-fg:     var(--wp--custom--band-fg);
	--band-fg-2:   var(--wp--custom--band-fg-soft);
	/* Tre veli, e ognuno fa un mestiere.
	   --hero-scrim e --band-scrim sono VERTICALI e danno il tono: quello
	   dell'hero e' esattamente la demo approvata; quello della fascia e'
	   piu' uniforme perche' li' il testo sta in mezzo e non in fondo.
	   --text-veil e' ORIZZONTALE e sta solo sotto la colonna di testo:
	   e' cio' che rende il contrasto dimostrabile senza spegnere la
	   fotografia. Le sue tappe sono in pixel e non in percentuale: cosi'
	   su uno schermo stretto, dove il testo occupa tutta la larghezza, il
	   velo la copre tutta da solo. Misure in docs/direzione-visiva.md. */
	--hero-scrim:  var(--wp--custom--hero-scrim);
	--band-scrim:  var(--wp--custom--band-scrim);
	--text-veil:   var(--wp--custom--text-veil);
	--top-bg:      var(--wp--custom--top-bg);
	--plate:       var(--wp--custom--plate);

	/* tipografia */
	--display: var(--wp--preset--font-family--display);
	--body:    var(--wp--preset--font-family--body);
	--dw:      var(--wp--custom--display-weight);
	--dls:     var(--wp--custom--display-tracking);

	/* geometria */
	--gut: clamp(20px, 5vw, 72px);
	--sec: clamp(72px, 10.5vh, 146px);
	--h2:  clamp(1.9rem, 4.1vw, 3.5rem);
	--r:   2px;
	--top-h: 51px;
}

/* --------------------------------------------------------------------
   Base. Il `body` del core arriva a specificita' 0-0-1 con font-weight
   300 e letter-spacing -0.1px ereditati dal tema padre: si riscrivono
   qui, dove il foglio del figlio vince per ordine (functions.php,
   priorita' 20).
   -------------------------------------------------------------------- */
body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--body);
	font-weight: 400;
	font-size: clamp(15.5px, 1vw, 17px);
	letter-spacing: normal;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* La testata e' fissa: senza questo l'ancora #form finisce sotto la
   barra invece che sotto il suo titolo. */
html { scroll-padding-top: calc(var(--top-h) + 12px); }

h1, h2, h3 {
	margin: 0;
	line-height: 1.06;
	text-wrap: balance;
	font-family: var(--display);
	font-weight: var(--dw);
	letter-spacing: var(--dls);
}

/* I gruppi del tema fanno layout da soli (grid o flex): il margine di
   flusso che il core mette su ogni figlio si sommerebbe ai `gap`.
   Al primo livello (.wp-site-blocks) quel margine lascia due strisce di
   fondo chiaro alte 1,2rem: una sotto la testata fissa, che non si vede, e
   una SOPRA IL PIEDE BIANCO, che si vede benissimo. */
body .wp-site-blocks > * { margin-block: 0; }
/* Stessa storia dentro il contenuto della pagina: fra una sezione e
   l'altra il core infila 1,2rem di fondo chiaro, e fra la sezione chiara
   e quella su superficie si vede lo scalino. Le sezioni portano gia' il
   loro respiro in --sec. */
body .dls-sezione, body .dls-hero, body .dls-fascia { margin-block: 0; }
.dls-wrap > *,
.dls-testa > *,
.dls-affiancato > *,
.dls-affiancato-testo > *,
.dls-coppia > *,
.dls-fascia-in > *,
.dls-hero-in > *,
.dls-form-grid > *,
.dls-piede-grid > * { margin-block: 0; }

.dls-wrap {
	max-width: 1340px;
	margin-inline: auto;
	padding-inline: var(--gut);
}

.dls-sezione { padding-block: var(--sec); }
.dls-sezione-stretta { padding-block: calc(var(--sec) * .6); }
.dls-sezione-superficie { background: var(--surface); }

.dls-testa {
	display: grid;
	gap: 14px;
	max-width: 62ch;
	margin-bottom: clamp(28px, 4.4vh, 56px);
}
.dls-testa-attaccata { margin-bottom: 0; }

/* Dentro .dls-form-grid questa colonna e' un elemento di griglia e viene
   stirata all'altezza del modulo, che e' piu' alto. Le sue righe si
   spartivano lo spazio in eccesso, quindi il titolo occupava 308px invece dei
   suoi ~120 e il testo finiva a meta' pagina, staccato. Con align-content:start
   il contenuto si impacchetta in alto e il testo torna sotto al titolo. */
.dls-form-grid > .dls-testa { align-content: start; }
.dls-testa h2 { font-size: var(--h2); }

/* Occhiello: l'ottone da testo, quindi --gold-ink. 4,97 su calce e
   4,52 su superficie, misurati con docs/contrasto.js. */
.dls-occhiello {
	font-family: var(--body);
	font-size: .68rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--gold-ink);
	font-weight: 600;
}
.dls-lede { color: var(--fg-2); max-width: 56ch; font-size: 1.05em; }
.dls-micro { color: var(--fg-3); font-size: .85rem; max-width: 46ch; }

/* Segnaposto con la scritta. Non e' piu' in uso in pagina dal 24 agosto
   2026 — vedi .dls-vuoto qui sotto — ma la regola resta, perche' resta il
   meccanismo: il segnale NON e' il colore, e' la parola TODO_ scritta a
   schermo e la sottolineatura tratteggiata (WCAG 1.4.1). */
.dls-todo {
	color: var(--gold-ink);
	border-bottom: 1px dashed currentColor;
	font-size: .94em;
}

/* Slot vuoto: il posto di un dato che non c'e' ancora.
   Il committente ha chiesto di togliere la SCRITTA del segnaposto, non
   l'elemento: l'etichetta resta («Telefono / WhatsApp:», «CIN»), il valore
   no; qui c'e' quello che si vede al posto del valore.
   E' una FORMA e non un testo — un tratto tratteggiato largo quanto basta
   a leggersi come uno spazio da riempire — quindi non c'e' nessuna parola
   da leggere e nessun dato inventato. Il colore non e' l'unico segnale
   (WCAG 1.4.1): il tratteggio si vede anche in scala di grigi.
   La larghezza e' in ch e non in px: segue il corpo del testo che la
   circonda, quindi resta proporzionata sia nel piede piccolo sia nei
   recapiti, che sono in clamp(). */
.dls-vuoto {
	display: inline-block;
	min-width: 6ch;
	border-bottom: 1px dashed currentColor;
	color: var(--gold-ink);
	/* Il tratto sta sulla linea di base del testo accanto invece che sotto
	   il fondo della riga: senza questo, un elemento inline-block vuoto si
	   allinea con il proprio margine inferiore e il tratteggio scende. */
	vertical-align: baseline;
}
/* Lo slot di un capoverso intero, non di un valore in linea: la pagina
   «Progetto finanziato» inglese aspetta un testo, non una sigla. */
.dls-vuoto-blocco { display: block; width: 100%; min-width: 0; }

/* --------------------------------------------------------------------
   Testata fissa
   -------------------------------------------------------------------- */
.dls-top {
	position: fixed;
	inset: 0 0 auto;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 15px var(--gut);
	background: var(--top-bg);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--hair);
}
.dls-top .wp-block-site-title {
	margin: 0;
	font-family: var(--display);
	font-size: .96rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.2;
}
.dls-top .wp-block-site-title a { color: var(--fg); text-decoration: none; }

/* Selettore di lingua di Polylang: nomi, non bandiere. */
.dls-top nav { margin: 0; }
.dls-top .wp-block-polylang-language-switcher ul,
.dls-top ul.wp-block-polylang-language-switcher {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 14px;
}
.dls-top .lang-item { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
/* --fg-2 e non --fg-3: la barra e' velata all'88% sopra la fotografia,
   quindi il suo fondo non e' --bg ma un po' piu' scuro. Misurato in
   pagina, --fg-3 li' sopra da' 4,34 e --fg-2 da' 6,3. */
.dls-top .lang-item a { color: var(--fg-2); text-decoration: none; }
.dls-top .lang-item a:hover { text-decoration: underline; }
/* La lingua corrente non si distingue per il solo colore (WCAG 1.4.1):
   porta anche il filetto sotto, oltre all'aria-current di Polylang. */
.dls-top .current-lang a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
/* Sotto i 560px il wordmark andrebbe a capo e la barra diventerebbe alta
   68px invece di 51: e --top-h, da cui dipendono lo scroll-padding delle
   ancore e lo stacco in cima all'hero, non sarebbe piu' vero. */
@media (max-width: 560px) {
	.dls-top { gap: 10px; }
	.dls-top .wp-block-site-title { font-size: .8rem; letter-spacing: .1em; }
	.dls-top .lang-item { font-size: .64rem; letter-spacing: .1em; }
	.dls-top .wp-block-polylang-language-switcher ul,
	.dls-top ul.wp-block-polylang-language-switcher { gap: 10px; }
}

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */
.dls-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: end;
	overflow: hidden;
}
.dls-hero > figure {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
.dls-hero > figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dls-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hero-scrim);
	z-index: 1;
}
/* Solo l'hero. La fascia ha gia' il suo velo in ::after, e i due erano
   entrambi a z-index 1 sopra la fotografia: sommati la lasciavano visibile
   all'1,2%, cioe' la fascia sembrava un rettangolo pieno e la foto del
   tronco non si vedeva affatto. */
.dls-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--text-veil);
	z-index: 1;
}
/* Sotto i 900px il testo occupa tutta la larghezza, quindi un velo ORIZZONTALE
   non ha piu' una colonna da coprire: copriva la fotografia intera e l'hero
   sembrava un rettangolo scuro. Le sue fermate erano per giunta in pixel
   assoluti (620/880/1140), tutte fuori da uno schermo da 390px, quindi tutta
   la larghezza cadeva nella prima, all'88%. Ora sono in percentuale, e qui il
   velo si toglie: la leggibilita' la garantisce il velo verticale. */
@media (max-width: 899px) {
	.dls-hero::before, .dls-fascia::before { display: none; }
	/* Tolto il velo orizzontale, il verticale deve reggere da solo. Su schermo
	   stretto il testo sale piu' in alto nell'inquadratura, dove la fotografia
	   e' chiara (le case del borgo), quindi qui e' piu' scuro e piu' esteso di
	   quello desktop: senza, l'occhiello e l'oro del titolo cadono sotto
	   soglia. Misurato sul punto peggiore, non sulla media. */
	.dls-hero::after, .dls-fascia::after {
		background: linear-gradient(to top,
			rgba(10,22,26,.95) 0%,
			rgba(10,22,26,.90) 42%,
			rgba(10,22,26,.72) 68%,
			rgba(10,22,26,.42) 88%,
			rgba(10,22,26,.34) 100%);
	}
}
/* width:100% obbligatorio: dentro un grid, `margin-inline:auto` di
   .dls-wrap restringerebbe l'elemento al contenuto e lo centrerebbe,
   invece di allinearlo a sinistra. */
.dls-hero-in {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-bottom: clamp(48px, 9vh, 110px);
	padding-top: calc(var(--top-h) + 24px);
	display: grid;
	/* Al massimo 18px, dove prima ce n'erano 22 fissi: dalla nuova proposta
	   di copy (23 ago 2026) il testo introduttivo del §4.1 e' di DUE
	   capoversi, e la colonna dell'hero ha un elemento in piu' da far stare
	   sopra la piega. Su finestra bassa scende a 14. */
	gap: clamp(14px, 2.2vh, 18px);
	justify-items: start;
}
/* Misura in rem e non in ch: `ch` si calcola sul corpo DELL'ELEMENTO, e
   su un titolo da 56px 56ch sono milleduecento pixel. Nella demo la misura
   stava sul contenitore, a corpo di testo; qui i figli sono diretti, e
   l'unica unita' che non dipende da chi la porta e' il rem. */
.dls-hero-in > * { max-width: 32rem; color: var(--band-fg); }
.dls-hero h1 {
	font-size: clamp(2.7rem, 6.6vw, 5.9rem);
	color: var(--band-fg);
	max-width: none;
	text-wrap: nowrap;
}
/* Payoff §4.1: la demo non lo aveva, il copy approvato si'. Corpo
   intermedio fra il titolo e il sottotitolo, stesso carattere del
   titolo. */
.dls-payoff {
	font-family: var(--display);
	font-size: clamp(1.15rem, 1.9vw, 1.7rem);
	font-weight: 300;
	letter-spacing: 0;
	color: var(--band-fg);
	line-height: 1.25;
}
/* «Lo Scalzo» in ottone sopra lo scrim: 5,77 su fondo scuro e 5,11 nel
   caso peggiore (foto bianca sotto uno scrim al 95%). Qui l'ottone puo'
   restare quello pieno, ed e' l'unico testo che lo fa. */
.dls-hero h1 em { font-style: normal; display: block; color: var(--gold); }
.dls-hero .dls-occhiello { color: var(--band-fg); opacity: .82; max-width: none; }
/* Corpo un filo piu' piccolo di prima, per la stessa ragione del gap: i
   capoversi sono due. Resta ben sopra i 16px del corpo di lettura. */
.dls-hero .dls-sub { font-size: clamp(.99rem, 1.32vw, 1.2rem); max-width: 44ch; color: var(--band-fg-2); }
.dls-hero .dls-micro { color: var(--band-fg-2); opacity: .8; max-width: 46ch; }
.dls-hero .dls-todo { color: var(--band-fg); }

.dls-cta-riga { display: flex; flex-wrap: wrap; gap: 13px 18px; align-items: center; max-width: none; }

/* CTA primaria: l'ottone e' FONDO, non testo. Inchiostro --on-gold su
   --gold = 5,51. */
.dls-cta {
	display: inline-block;
	background: var(--gold);
	color: var(--on-gold);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: .75rem;
	padding: 16px 30px;
	border-radius: var(--r);
	font-family: var(--body);
}
.dls-cta:hover { background: var(--gold-ink); color: var(--band-fg); }

/* CTA secondaria. Finche' il numero non c'e' l'elemento e' uno <span>
   inerte: ha l'aspetto del pulsante e non e' cliccabile, perche' un
   wa.me senza numero sarebbe un link rotto travestito da pulsante. Il
   giorno che il numero arriva, dls_cta_whatsapp_html() stampa lo stesso
   markup dentro un <a>: la regola vale per tutti e due e per questo
   toglie la sottolineatura e fissa il colore, che altrimenti il tema
   darebbe al link i suoi (accento + underline) e il pulsante cambierebbe
   aspetto da solo il giorno del passaggio. */
.dls-cta-2 {
	display: inline-block;
	border: 1px solid rgba(255,255,255,.36);
	padding: 15px 26px;
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: var(--r);
	font-weight: 600;
	color: var(--band-fg);
	text-decoration: none;
}
/* Solo la variante cliccabile reagisce al puntatore: un feedback di hover
   su un elemento inerte prometterebbe un clic che non succede. */
a.dls-cta-2:hover, a.dls-cta-2:focus-visible { border-color: var(--band-fg); }
.dls-cta-2-inerte { cursor: default; }

/* --------------------------------------------------------------------
   Sezione affiancata: testo + fotografia
   -------------------------------------------------------------------- */
.dls-affiancato { display: grid; gap: clamp(26px, 3.6vw, 58px); align-items: start; }
@media (min-width: 900px) { .dls-affiancato { grid-template-columns: 1.06fr .94fr; } }
.dls-affiancato-testo { display: grid; gap: 1.15rem; align-content: start; }

/* Niente border-radius sulle fotografie: qualunque selettore che
   contenga `img` o `figure` con border-radius/filter/opacity fa
   scattare tests/test_footer_ue.php, che sorveglia l'emblema UE. Due
   pixel di raggio non valgono un allarme sull'emblema. */
.dls-foto { margin: 0; }
.dls-foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.dls-foto-larga img { aspect-ratio: 3/2; }

/* Le tre schede §4.2: titoli veri (h3), non un elenco di definizioni,
   cosi' la struttura della pagina resta navigabile da tastiera e da
   lettore di schermo. */
.dls-schede { margin: clamp(6px, 1.2vh, 16px) 0 0; display: grid; }
.dls-schede > div { padding: 19px 0; border-top: 1px solid var(--hair); display: grid; gap: 5px; }
.dls-schede > div:last-child { border-bottom: 1px solid var(--hair); }
.dls-schede h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 500; letter-spacing: 0; }
.dls-schede p { margin: 0; color: var(--fg-2); font-size: .93rem; }

/* --------------------------------------------------------------------
   Barra dei numeri
   -------------------------------------------------------------------- */
.dls-statbar {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--hair);
	margin-top: clamp(28px, 4vh, 52px);
}
@media (min-width: 840px) { .dls-statbar { grid-template-columns: repeat(4, 1fr); } }
.dls-stat { padding: clamp(20px, 2.3vw, 32px) 0; border-bottom: 1px solid var(--hair); margin: 0; }
.dls-stat + .dls-stat { margin-block: 0; }
@media (min-width: 840px) {
	.dls-stat + .dls-stat { border-left: 1px solid var(--hair); padding-left: 26px; }
}
.dls-stat-n {
	display: block;
	font-family: var(--display);
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	font-weight: var(--dw);
	color: var(--gold-ink);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: var(--dls);
}
/* «km» resta testo piccolo: a 1440px sono 20,8px, sotto i 24px che la
   WCAG chiama testo grande. Per questo anche i numeri usano
   --gold-ink e non l'ottone pieno. */
.dls-stat-n i { font-style: normal; font-size: .42em; }
.dls-stat-e {
	margin: 8px 0 0;
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fg-3);
	display: block;
	font-weight: 600;
}
/* Micro-riga di chiusura del §4.3, subito sotto la barra: «Accettura non e'
   soltanto il punto in cui dormire». .dls-wrap > * azzera i margini di
   flusso, quindi lo stacco va dichiarato qui. */
.dls-statbar + .dls-micro { margin-top: clamp(20px, 2.6vh, 30px); }

/* --------------------------------------------------------------------
   Fascia con fotografia a tutta larghezza
   -------------------------------------------------------------------- */
.dls-fascia {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 80svh;
	overflow: hidden;
	background: var(--band-bg);
}
.dls-fascia > figure { position: absolute; inset: 0; margin: 0; z-index: 0; }
.dls-fascia > figure img { width: 100%; height: 100%; object-fit: cover; }
/* Stesso trattamento dell'hero, su richiesta: velo verticale per il tono e
   velo orizzontale sotto la colonna di testo, cosi' la fotografia resta
   visibile sulla destra invece di essere spenta in modo uniforme. */
.dls-fascia::after { content: ""; position: absolute; inset: 0; background: var(--hero-scrim); z-index: 1; }
.dls-fascia::before { content: ""; position: absolute; inset: 0; background: var(--text-veil); z-index: 1; }
.dls-fascia-in {
	position: relative;
	z-index: 2;
	width: 100%;
	display: grid;
	gap: 17px;
	padding-block: clamp(56px, 8vh, 96px);
}
.dls-fascia-in > * { max-width: 31rem; color: var(--band-fg); }
.dls-fascia-in h2 { font-size: var(--h2); }
.dls-fascia-in p { color: var(--band-fg-2); }
.dls-fascia-in .dls-occhiello { color: var(--band-fg); opacity: .82; }
.dls-fascia-in .dls-micro { color: var(--band-fg-2); }

/* CTA di sezione (§4.4 / §5.4, nuova proposta di copy del 23 ago 2026).
   Un filetto in cima e non un riquadro: dentro la fascia un box pieno
   coprirebbe la fotografia una seconda volta, dopo lo scrim. */
.dls-cta-sezione {
	margin-top: clamp(14px, 2.4vh, 26px);
	padding-top: clamp(18px, 2.6vh, 28px);
	border-top: 1px solid rgba(255,255,255,.24);
	display: grid;
	gap: 12px;
	justify-items: start;
}
/* Sul fondo peggiore possibile della fascia (#162225) il titolo da' 14,44 e
   il testo 10,29: le stesse misure del resto della fascia. */
.dls-cta-sezione h3 { font-size: clamp(1.2rem, 2.1vw, 1.62rem); font-weight: 400; color: var(--band-fg); }
.dls-cta-sezione p { margin: 0; }

/* --------------------------------------------------------------------
   Elenco numerato con fotografia che accompagna lo scorrimento
   -------------------------------------------------------------------- */
.dls-coppia { display: grid; gap: clamp(26px, 3.6vw, 58px); align-items: start; }
@media (min-width: 900px) { .dls-coppia { grid-template-columns: .8fr 1.2fr; } }
.dls-foto-fissa { margin: 0; }
@media (min-width: 900px) { .dls-foto-fissa { position: sticky; top: calc(var(--top-h) + 25px); } }
.dls-foto-fissa img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

.dls-elenco { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.dls-elenco li {
	counter-increment: t;
	padding: 24px 0;
	border-top: 1px solid var(--hair);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 22px;
	align-items: baseline;
}
.dls-elenco li:last-child { border-bottom: 1px solid var(--hair); }
.dls-elenco li::before {
	content: counter(t, decimal-leading-zero);
	font-family: var(--body);
	font-size: .7rem;
	letter-spacing: .12em;
	color: var(--gold-ink);
	font-weight: 700;
	grid-row: span 2;
}
.dls-elenco h3 { font-size: 1.26rem; font-weight: 500; letter-spacing: 0; }
.dls-elenco p { color: var(--fg-2); font-size: .94rem; grid-column: 2; margin: 0; }

/* --------------------------------------------------------------------
   Form. Il markup e' quello di dls-core/form.php (Task 7) e NON si
   tocca: qui c'e' solo la resa. Le coppie di campi si scelgono per
   posizione perche' i <p> del form non hanno una classe propria;
   l'ordine e' quello di dls_form_render(), e se cambiasse i campi
   tornerebbero semplicemente a piena larghezza.
   -------------------------------------------------------------------- */
.dls-form-grid { display: grid; gap: clamp(28px, 4vw, 66px); }
@media (min-width: 960px) { .dls-form-grid { grid-template-columns: .88fr 1.12fr; } }

.dls-form-col { display: grid; align-content: start; }
.dls-form { display: grid; gap: 14px; }
@media (min-width: 620px) {
	.dls-form { grid-template-columns: 1fr 1fr; }
	.dls-form > p { grid-column: 1 / -1; }
	/* I campi corti stanno in mezza colonna. La scelta e' per CLASSE e non
	   piu' per posizione: `:nth-of-type(2)…(6)` valeva finche' i campi erano
	   sei, e quando la nuova proposta di copy ne ha portati sette avrebbe
	   lasciato il messaggio in mezza colonna senza dirlo a nessuno. La
	   classe la scrive dls_form_render(), che e' anche chi decide l'ordine. */
	.dls-form > .dls-campo-breve { grid-column: span 1; }
}
.dls-form > p { margin: 0; }
.dls-form label {
	display: block;
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fg-3);
	margin-bottom: 7px;
	font-weight: 600;
}
.dls-form input[type="text"],
.dls-form input[type="email"],
.dls-form input[type="tel"],
.dls-form input[type="number"],
.dls-form input[type="date"],
.dls-form textarea {
	box-sizing: border-box;
	width: 100%;
	background: var(--field);
	border: 1px solid var(--hair-2);
	color: var(--fg);
	font: inherit;
	font-size: .94rem;
	padding: 13px 15px;
	border-radius: var(--r);
}
.dls-form input:focus, .dls-form textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
/* Il testo del consenso contiene un <a>: con display:grid il link diventerebbe
   un elemento di griglia a se' stante e finirebbe in prima colonna, sotto la
   casella, spezzando la frase a meta'. dls_form_render() non avvolge il testo
   in uno <span>, quindi qui serve un rientro sospeso, che regge qualunque
   markup inline senza dipendere dalla struttura del mu-plugin. */
.dls-form .dls-consenso label {
	display: block;
	position: relative;
	padding-left: 29px;
	font-size: .86rem;
	color: var(--fg-2);
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}
.dls-form .dls-consenso input { position: absolute; left: 0; top: .28em; width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.dls-form .dls-consenso a { color: var(--gold-ink); }
.dls-form button[type="submit"] {
	justify-self: start;
	background: var(--accent);
	color: var(--on-accent);
	border: 0;
	font: inherit;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: .75rem;
	padding: 16px 34px;
	cursor: pointer;
	border-radius: var(--r);
	font-family: var(--body);
}
.dls-form button[type="submit"]:hover { background: var(--accent-h); }

/* Il segnaposto del textarea (§4.6 / §5.6) e' un suggerimento, non
   un'etichetta: l'etichetta c'e' e resta visibile sopra il campo.
   `opacity: 1` non e' pleonastico: il valore predefinito dei browser
   sbiadisce il segnaposto e manderebbe il contrasto sotto soglia.
   --fg-3 su --field bianco da' 5,49 (docs/contrasto.js). */
.dls-form ::placeholder { color: var(--fg-3); opacity: 1; }

/* Micro-riga sotto il pulsante, §4.6 e §5.6. Sta dentro la sezione su
   --surface, dove --fg-3 da' 4,61: sopra il 4,5 richiesto. */
.dls-form-micro { color: var(--fg-3); font-size: .82rem; max-width: 46ch; }

/* Honeypot: fuori schermo e non display:none, che alcuni bot
   riconoscono come trappola. */
.dls-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Esito dell'invio (Task 8). Il filetto colorato non e' l'unico
   segnale: conferma ed errore sono testi diversi, e il contenitore
   d'errore porta role="alert". */
.dls-esito {
	border-left: 4px solid var(--accent);
	background: var(--field);
	padding: .75rem 1rem;
	margin-bottom: 1.5rem;
	grid-column: 1 / -1;
}
.dls-esito-errore { border-left-color: var(--gold-ink); }
.dls-esito ul { margin: 0; padding-left: 1.25rem; }
.dls-esito p { margin: 0; }

/* --------------------------------------------------------------------
   Contatti
   -------------------------------------------------------------------- */
/* Il capoverso del §4.7 fra il titolo e i recapiti: .dls-wrap > * azzera i
   margini di flusso, quindi lo stacco va dichiarato. */
.dls-contatti .dls-lede { margin-top: clamp(20px, 2.8vh, 32px); }
.dls-contatti address {
	font-style: normal;
	font-size: clamp(1.02rem, 1.6vw, 1.34rem);
	line-height: 1.95;
	margin-top: 24px;
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: 0;
}

/* --------------------------------------------------------------------
   Pie' di pagina — BIANCO.
   Il bianco non e' solo una richiesta dell'agenzia: e' anche il fondo
   che le regole d'uso dell'emblema UE chiedono. La piastra bianca
   resta comunque nel markup, come garanzia se un domani il fondo del
   piede cambiasse ancora.
   -------------------------------------------------------------------- */
.dls-piede {
	background: var(--plate);
	color: var(--fg);
	padding-block: clamp(44px, 6.2vh, 78px);
	border-top: 1px solid var(--hair);
}
.dls-piede-grid { display: grid; gap: 28px; margin-top: 24px; }
@media (min-width: 900px) { .dls-piede-grid { grid-template-columns: 1.2fr .8fr; } }
.dls-piede p { color: var(--fg-2); max-width: 66ch; margin: 0 0 11px; }
.dls-piede strong { color: var(--fg); }
.dls-piede a { color: var(--accent); }
.dls-piede .dls-todo { color: var(--gold-ink); }
.dls-piede-nota { margin-top: 30px; padding-top: 19px; border-top: 1px solid var(--hair); font-size: .76rem; color: var(--fg-3); }

/* Piastra bianca dell'emblema UE (parts/footer.html e footer-en.html).
   Fondo bianco e padding stanno nel markup, perche' sono un obbligo
   d'uso dell'emblema e vanno letti in view-source; qui c'e' solo la
   larghezza, per farla stringere attorno alla figura invece di
   diventare una fascia da bordo a bordo. box-sizing esplicito: in
   pagina non c'e' un reset globale, e con content-box il padding si
   sommerebbe al max-width.
   Niente filter, opacity, border-radius o mix-blend-mode qui dentro:
   li vieta tests/test_footer_ue.php, che questo foglio lo legge
   davvero. */
.dls-piastra-emblema {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin-bottom: 24px;
}


/* La striscia dei loghi: emblema UE per primo, MiC dopo.
   Le due immagini sono gia' dimensionate per rendere alla STESSA altezza
   (71,9 px): il pari risalto e' scritto nei numeri, non affidato al CSS, cosi'
   un domani nessun ritocco di stile puo' rimpicciolire l'emblema rispetto
   all'altro logo. Qui si governa solo la disposizione. */
.dls-loghi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 34px;
}
.dls-loghi figure { margin: 0; }
/* L'altezza e' la grandezza che la regola d'uso misura: «risalto non inferiore
   a nessun altro logo». Governandola qui, e non con una larghezza inline, il
   pari risalto regge anche quando i due emblemi hanno proporzioni diverse —
   come ora, che il monocromatico italiano e' 846x192 e l'inglese 801x192. */
.dls-loghi img { display: block; height: 72px; width: auto; }

/* Su schermo stretto i due loghi NON devono impilarsi: la striscia UE + MiC si
   legge come una firma sola, e spezzarla la snatura. Affiancati devono starci
   per forza, quindi l'altezza scende con la larghezza invece di restare fissa.
   Il fattore viene dai rapporti reali dei due file: emblema 4,406 + MiC 3,089
   = 7,495 volte l'altezza, piu' il distacco, dentro (larghezza - 72px) di
   margini. La clamp tiene 28px come minimo leggibile e 72px come massimo. */
@media (max-width: 700px) {
	.dls-loghi { flex-wrap: nowrap; gap: 10px; }
	.dls-loghi img { height: clamp(28px, calc(12vw - 11px), 72px); }
}

/* Pagine senza hero: le pagine di contenuto di templates/page.html, cioe'
   le due informative e le due «Progetto finanziato». La testata e' fissa,
   quindi il titolo va spinto sotto la barra e su una pagina corta il piede
   non deve risalire a meta' finestra.
   La front page inglese di ripiego, che portava anche lei queste due
   classi, non c'e' piu': dal Task 16 /en/ ha la sua landing e usa lo stesso
   templates/front-page.html dell'italiana. */
.dls-sotto-testata { padding-top: calc(var(--top-h) + var(--sec)); }
.dls-pagina-nuda { min-height: 62svh; }
/* Il titolo della pagina sta dentro .dls-testa come gli H2 delle sezioni, e
   prende la stessa misura: una regola sola per tutti i modelli che lo
   stampano, invece di una per modello. */
.dls-testa .wp-block-post-title { font-size: var(--h2); margin: 0; }

/* --------------------------------------------------------------------
   Testo lungo: le due pagine legali (§11 e §12 del copy).
   Nessuna fotografia, nessuna sezione, nessun affiancamento: quel che
   serve e' una misura leggibile e un ritmo verticale che distingua i
   titoli dai capoversi.
   La misura non e' scritta qui: e' il `contentSize` di theme.json, che il
   core emette come variabile. Cosi' resta un valore solo, in un posto solo.
   -------------------------------------------------------------------- */
.dls-testo {
	max-width: var(--wp--style--global--content-size);
	display: grid;
	gap: 1.05em;
}
/* Il core mette un margine di flusso su ogni figlio del gruppo: sommato al
   `gap` della griglia darebbe due spaziature dove ne serve una. */
.dls-testo > * { margin-block: 0; }
.dls-testo > h2 {
	margin-top: clamp(22px, 3.4vh, 40px);
	font-size: clamp(1.32rem, 2.5vw, 1.85rem);
}
.dls-testo ul { margin: 0; padding-left: 1.25rem; }
.dls-testo li + li { margin-top: .6em; }

/* La tabella del §12. Sta in un contenitore che scorre da solo: su schermo
   stretto quattro colonne non entrano e a scorrere deve essere lei, non la
   pagina intera. */
.dls-tabella-cont { overflow-x: auto; }
.dls-tabella { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dls-tabella th,
.dls-tabella td {
	text-align: left;
	vertical-align: top;
	padding: 11px 18px 11px 0;
	border-bottom: 1px solid var(--hair);
}
.dls-tabella thead th { font-weight: 600; border-bottom-color: var(--hair-2); }
.dls-tabella tbody th { font-weight: 400; white-space: nowrap; }
.dls-tabella td { color: var(--fg-2); }

/* --------------------------------------------------------------------
   Accessibilita' trasversale
   -------------------------------------------------------------------- */
/* 2px con scostamento di 3px, come la demo approvata. `accent` su
   `bg` da' 12,60 e su `surface` 11,44: ben oltre il 3,0 richiesto
   dalla WCAG per gli elementi d'interfaccia. */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dls-hero *:focus-visible, .dls-fascia *:focus-visible { outline-color: var(--band-fg); }

/* `animation-iteration-count` non e' ridondante con la durata: senza,
   un'animazione `infinite` continua a ripetersi, solo a .01ms per giro. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}