/*
Theme Name: Vermeer Child
Theme URI: https://www.dmrarchitettura.it
Description: Tema figlio di Vermeer per DIMORArchitettura. Contiene solo le personalizzazioni dello studio: ogni modifica sta qui, così gli aggiornamenti del tema padre non cancellano nulla.
Author: DIMORArchitettura
Template: vermeer
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Text Domain: vermeer-child
*/

/* Le personalizzazioni vengono aggiunte qui sotto, una sezione per intervento. */

/* ═══════════════════════════════════════════════════════════════
   INDICE PROGETTI — disposizione A "riga bassa"
   Immagine al 34% con taglio 3:2, dati e descrizione al 66%.
   Sostituisce il 66/33 precedente, che rendeva 0,8 progetti per schermata.
   ═══════════════════════════════════════════════════════════════ */
.dmr-project-row {
	border-bottom: 1px solid var(--wp--preset--color--contrast-3);
}
.dmr-projects .wp-block-post-template > li:last-child .dmr-project-row {
	border-bottom: 0;
}
.dmr-project-excerpt {
	color: var(--wp--preset--color--contrast-2);
	max-width: 52ch;
}

/* ═══════════════════════════════════════════════════════════════
   INDICE ARTICOLI — disposizione B "due colonne"
   Data e categoria in colonna fissa a sinistra, titolo a destra.
   Solo i titoli, come prima: cambia la scala e la disposizione.
   ═══════════════════════════════════════════════════════════════ */
.dmr-article-row {
	border-bottom: 1px solid var(--wp--preset--color--contrast-3);
}
.dmr-articles .wp-block-post-template > li:last-child .dmr-article-row {
	border-bottom: 0;
}
.dmr-article-meta {
	flex-grow: 0;
}
.dmr-article-meta .wp-block-post-date,
.dmr-article-meta .wp-block-post-terms {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.dmr-article-meta .wp-block-post-date {
	font-variant-numeric: tabular-nums;
}
.dmr-article-title .wp-block-post-title {
	max-width: 26ch;
}

/* ═══════════════════════════════════════════════════════════════
   SOTTOLINEATURA AL PASSAGGIO DEL MOUSE
   Vermeer dichiara solo `text-decoration: underline`, senza spessore:
   il browser lo calcola in proporzione al corpo del testo. A 83px la
   riga risultava spessa ~6px; riducendo il titolo a 32px sarebbe scesa
   a ~2px e l'effetto sarebbe sparito da solo. Lo spessore va quindi
   dichiarato, in em per restare proporzionato anche su mobile.
   ═══════════════════════════════════════════════════════════════ */
.wp-block-post-title a:hover {
	text-decoration-thickness: 0.13em;
	text-underline-offset: 0.12em;
}
.dmr-project-row .wp-block-post-title a:hover {
	text-decoration-thickness: 0.11em;
	text-underline-offset: 0.14em;
}

/* ── Schermi stretti ─────────────────────────────────────────── */
@media (max-width: 781px) {
	.dmr-article-meta {
		flex-basis: 100% !important;
		display: flex;
		gap: 1.5em;
	}
	.dmr-article-title .wp-block-post-title {
		max-width: none;
	}
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER FISSO A FONDO FINESTRA (tutte le pagine tranne la home)
   Sulla home il footer non e' a fondo pagina: sta dentro la colonna
   destra del layout a due colonne, quindi resta dov'e'.

   Stessa logica del titolo che scorre: Vermeer mette
   `mix-blend-mode: exclusion` sul CONTENITORE (.header-sticky), non sul
   testo, e colora il contenuto di bianco. L'esclusione inverte cosi' solo
   cio' che passa sotto. La fusione va messa sul footer intero: applicarla
   ai figli non funziona, perche' un elemento `fixed` crea uno stacking
   context proprio e i figli si fondono con lui, non con la pagina.
   Per la stessa ragione le icone non possono avere fondo opaco: sotto
   esclusione un fondo nero diventa bianco su pagina chiara.
   ═══════════════════════════════════════════════════════════════ */
body:not(.home) footer.wp-block-template-part {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	mix-blend-mode: exclusion;
}
body:not(.home) footer.wp-block-template-part p,
body:not(.home) footer.wp-block-template-part a {
	color: #ffffff !important;
}
/* Icone: tratto bianco, nessun fondo. Si invertono col resto. */
body:not(.home) footer.wp-block-template-part .wp-social-link {
	background-color: transparent !important;
}
body:not(.home) footer.wp-block-template-part .wp-social-link a,
body:not(.home) footer.wp-block-template-part .wp-social-link svg {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* Spazio in coda al contenuto: senza, l'ultima riga finisce sotto il footer. */
body:not(.home) .wp-site-blocks {
	padding-bottom: 104px;
}

/* Sotto i 720px il footer torna a fine pagina: su schermo stretto
   104px fissi sono troppi. */
@media (max-width: 720px) {
	body:not(.home) footer.wp-block-template-part {
		position: static;
		mix-blend-mode: normal;
	}
	body:not(.home) footer.wp-block-template-part p,
	body:not(.home) footer.wp-block-template-part a {
		color: var(--wp--preset--color--contrast-2) !important;
	}
	body:not(.home) footer.wp-block-template-part .wp-social-link {
		background-color: var(--wp--preset--color--contrast) !important;
	}
	body:not(.home) footer.wp-block-template-part .wp-social-link a,
	body:not(.home) footer.wp-block-template-part .wp-social-link svg {
		color: var(--wp--preset--color--base) !important;
		fill: var(--wp--preset--color--base) !important;
	}
	body:not(.home) .wp-site-blocks {
		padding-bottom: 0;
	}
}

/* ═══════════════════════════════════════════════════════════════
   SITE TITLE: peso ripristinato
   Il blocco era <h1> e prendeva fontWeight 700 da styles.elements.heading
   di theme.json. Portato a <p> per la gerarchia H1, eredita ora il peso
   globale 300. Il peso va quindi dichiarato: 700, identico a prima.
   ═══════════════════════════════════════════════════════════════ */
.wp-block-site-title {
	font-weight: 700;
	letter-spacing: -0.05em;
}

/* ═══════════════════════════════════════════════════════════════
   ALTEZZA DEL TITOLO CHE SCORRE
   Stesso clamp del titolo del sito (huge-title, interlinea 1,05) piu' i
   suoi 16px di padding. A 1440px vale 218px, che e' esattamente l'altezza
   misurata nel browser. Serve in due punti lontani fra loro — la colonna
   destra della home e l'aggancio della scheda progetto — quindi sta sul
   body invece di essere ricalcolata a mano ogni volta.
   ═══════════════════════════════════════════════════════════════ */
body {
	--dmr-header: calc(clamp(96px, 13.333vw, 256px) * 1.05 + 16px);
}

/* ═══════════════════════════════════════════════════════════════
   HOME A TUTTA ALTEZZA (disposizione B)
   Restano le due colonne. La colonna sinistra, con lo slider, arriva
   in fondo alla finestra. La pagina non scorre in verticale.

   Percorso reale: .wp-site-blocks > .entry-content > .wp-block-columns
   ═══════════════════════════════════════════════════════════════ */
body.home .wp-site-blocks {
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
/* La catena passa per il <main> aggiunto al template della home: serviva
   perche' la pagina non aveva nessun elemento principale dichiarato - lo
   forniva uno snippet che pero' avvolgeva anche header e footer, il che e'
   semanticamente sbagliato. Entrambi devono lasciar passare l'altezza. */
body.home .wp-site-blocks > .dmr-main,
body.home .wp-site-blocks > .dmr-main > .entry-content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
body.home .wp-block-columns.alignfull {
	flex: 1 1 auto;
	min-height: 0;
	align-items: stretch;
}

/* Colonna sinistra: catena fino allo slider, tutta altezza.
   Il gruppo e' `is-position-sticky`: con lo stiramento non serve piu'. */
body.home .wp-block-columns.alignfull > .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
body.home .wp-block-column:first-child > .wp-block-group.is-position-sticky {
	position: static;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
/* La catena era lunga cinque anelli perche' MetaSlider ne annidava
   altrettanti: contenitore, contenitore del contenitore, flexslider,
   viewport, elenco. Il blocco nostro ne ha due. */
body.home .wp-block-column:first-child .dmr-slider {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: auto !important;
}
body.home .wp-block-column:first-child ul.dmr-slides {
	flex: 1 1 auto;
	min-height: 0;
	height: 100% !important;
}

/* Colonna destra: resta centrata, non si allunga oltre la finestra. */
body.home .wp-block-columns.alignfull > .wp-block-column:last-child {
	min-height: 0;
	overflow-y: auto;
}

/* La colonna dello slider ha `is-vertically-aligned-top`, che impone
   align-self: flex-start e impedisce lo stiramento. Va sovrascritto. */
body.home .wp-block-columns.alignfull > .wp-block-column:first-child.is-vertically-aligned-top {
	align-self: stretch;
}
body.home .wp-block-columns.alignfull > .wp-block-column:last-child {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════════
   HOME: corpo staccato dal titolo e centrato, footer in fondo

   Il titolo che scorre non occupa spazio nel flusso: la colonna destra
   parte da 0 e gli finiva sotto. Misurato a 1440x900: il titolo arriva a
   218px, il corpo cominciava a 210 — otto pixel di sovrapposizione.

   Lo scarto in cima e' --dmr-header, cioe' la stessa formula che genera
   l'altezza del titolo: cosi' i due restano agganciati a qualsiasi
   larghezza, invece di dipendere da un numero fisso giusto per un solo
   schermo.

   La centratura non si puo' ottenere con `justify-content: center` sulla
   colonna: con il footer in fondo i due si contendono lo spazio libero e
   il corpo torna in alto (era gia' successo, vedi §4.19). Si da' invece
   al gruppo del corpo tutto lo spazio che avanza, e il gruppo centra il
   proprio contenuto: il footer resta dov'e'.
   ═══════════════════════════════════════════════════════════════ */
body.home .wp-block-columns.alignfull > .wp-block-column:last-child {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	justify-content: flex-start;
}

/* Lo scarto sta sul gruppo del corpo, non sulla colonna: la colonna porta
   `padding-top: 0` scritto in linea nel contenuto della pagina, quindi
   qualunque padding dichiarato qui sopra e' sempre stato inefficace —
   anche prima di questa modifica. Sul gruppo invece in linea ci sono solo
   i margini laterali, e la dichiarazione passa senza `!important`.

   Il gruppo prende lo spazio che avanza e centra dentro di se': lo scarto
   in cima toglie l'altezza del titolo, il resto si divide da solo sopra e
   sotto il testo. `:not(.hide-when-colums-are-stacked)` esclude il titolo
   doppio che Vermeer tiene solo per le colonne impilate. */
body.home .wp-block-columns.alignfull > .wp-block-column:last-child
	> .wp-block-group:not(.hide-when-colums-are-stacked) {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: calc(var(--dmr-header) + var(--wp--preset--spacing--40));
	/* Il gruppo porta `is-content-justification-left`, che in colonna flex
	   vale `align-items: flex-start`: i figli si stringono al contenuto e
	   il menu scendeva da 380px a 175px, piu' stretto del testo sopra.
	   Da blocco erano larghi quanto la colonna: `stretch` lo ripristina. */
	align-items: stretch;
}

/* Le voci del menu larghe quanto il testo che sta sopra.
   Il gruppo che contiene la navigazione si dimensionava sul contenuto —
   175px contro i 380px del paragrafo — e i filetti fra una voce e l'altra
   risultavano corti. `width: 100%` lo porta alla larghezza disponibile; il
   limite di 500px resta quello del testo, cosi' i due si fermano insieme.
   Il `max-width: none` serve solo alla navigazione, che ne porta uno
   proprio di 395px piu' stretto di quello del testo. */
body.home .wp-block-columns.alignfull > .wp-block-column:last-child
	.wp-block-group:has(> .wp-block-navigation) {
	width: 100%;
}
body.home .wp-block-columns.alignfull > .wp-block-column:last-child .wp-block-navigation,
body.home .wp-block-columns.alignfull > .wp-block-column:last-child .wp-block-navigation__container {
	width: 100%;
	max-width: none;
}

/* ═══════════════════════════════════════════════════════════════
   HOME SU MOBILE: torna a scorrimento normale

   Con `height: 100dvh` piu' `overflow: hidden` e le colonne impilate il
   footer veniva tagliato via. Il blocco a tutta altezza vale da desktop.

   La soglia e' 781.98px, non 720: WordPress impila le colonne sotto i
   782px, e fra 721 e 781 le regole da desktop restavano attive su un
   impianto gia' impilato. Stesso difetto trovato sulla pagina progetto
   (D29): la soglia del tema deve seguire quella di WordPress, non un
   numero scelto a parte.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 781.98px) {
	body.home .wp-site-blocks {
		height: auto !important;
		min-height: 0 !important;
		display: block !important;
		overflow: visible !important;
	}
	body.home .wp-site-blocks > .dmr-main,
	body.home .wp-site-blocks > .dmr-main > .entry-content,
	body.home .wp-block-columns.alignfull,
	body.home .wp-block-columns.alignfull > .wp-block-column:first-child,
	body.home .wp-block-columns.alignfull > .wp-block-column:last-child {
		display: block;
		height: auto;
		min-height: 0;
	}
	/* Lasciata libera l'altezza, la decide il rapporto del riquadro
	   (`aspect-ratio` sul blocco): 1400x1600, cioe' la stessa altezza che
	   dava il ritaglio di MetaSlider. */
	body.home .wp-block-column:first-child .dmr-slider,
	body.home .wp-block-column:first-child ul.dmr-slides {
		display: block;
		height: auto !important;
	}
	body.home .wp-block-columns.alignfull > .wp-block-column:last-child > footer {
		margin-top: 0;
	}

	/* Il vuoto fra slider e corpo: il gruppo dello slider porta
	   `min-height: 100vh` scritto nel contenuto della pagina. Da desktop
	   riempie la colonna; a colonne impilate obbligava la colonna sinistra
	   a tutta la finestra mentre lo slider ne occupava meno della meta'.
	   Misurato a 390x844: colonna 844px, slider 450px, 394px di vuoto.
	   Serve `!important` perche' la dichiarazione da battere e' in linea. */
	body.home .wp-block-column:first-child > .wp-block-group.is-position-sticky {
		min-height: 0 !important;
		display: block;
		flex: 0 1 auto;
	}

	/* A colonne impilate il titolo sta sopra lo slider, non sopra il corpo:
	   lo scarto in cima non serve piu' e la centratura nemmeno. */
	body.home .wp-block-columns.alignfull > .wp-block-column:last-child
		> .wp-block-group:not(.hide-when-colums-are-stacked) {
		display: block;
		flex: 0 1 auto;
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* ═══════════════════════════════════════════════════════════════
   HEADER: stesso comportamento su tutte le pagine
   Il template `page` usa className "site-header", che nel tema padre non
   ha ne' fusione ne' sticky: il titolo, bianco, restava bianco su bianco.
   .header-sticky e .vermeer-is-fixed-title-header le hanno; si allinea.
   ═══════════════════════════════════════════════════════════════ */
body:not(.editor-styles-wrapper) header.site-header {
	mix-blend-mode: exclusion;
	position: sticky;
	top: 0;
	z-index: 11;
}

/* ═══════════════════════════════════════════════════════════════
   RIGHE INDICE — stesso linguaggio dell'indice articoli
   Etichetta maiuscola a sinistra in colonna fissa, titolo grande a
   destra, filetto sottile. Usata nelle pagine Servizi e Download.
   ═══════════════════════════════════════════════════════════════ */
.dmr-row {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: var(--wp--preset--spacing--60);
	align-items: baseline;
	padding: var(--wp--preset--spacing--50) 0;
	border-bottom: 1px solid var(--wp--preset--color--contrast-3);
}
.dmr-row:last-of-type {
	border-bottom: 0;
}
.dmr-row .dmr-label {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}
.dmr-row .dmr-title {
	font-size: 32px;
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0 0 0.35em;
}
.dmr-row .dmr-title a {
	color: inherit;
	text-decoration: none;
}
.dmr-row:hover .dmr-title a {
	text-decoration: underline;
	text-decoration-thickness: 0.13em;
	text-underline-offset: 0.12em;
}
.dmr-row .dmr-desc {
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
	max-width: 52ch;
}

@media (max-width: 781px) {
	.dmr-row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--20);
	}
	.dmr-row .dmr-title {
		font-size: 26px;
	}
}

/* Righe file: variante compatta di .dmr-row per gli elenchi di download. */
.dmr-row.is-file {
	grid-template-columns: 150px 1fr;
	padding: var(--wp--preset--spacing--30) 0;
}
.dmr-row.is-file .dmr-title {
	font-size: 21px;
	text-transform: none;
	letter-spacing: -0.01em;
	margin-bottom: 0;
}
@media (max-width: 781px) {
	.dmr-row.is-file {
		grid-template-columns: 1fr;
	}
	.dmr-row.is-file .dmr-title {
		font-size: 19px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   PAGINE SERVIZI E DOWNLOAD: tutto allineato alla stessa colonna
   Il titolo e i blocchi a larghezza contenuto stavano a 500px mentre le
   righe sono a 1248: due margini sinistri diversi nella stessa pagina.
   Invece di sovrascrivere blocco per blocco, su queste pagine la
   larghezza contenuto coincide con quella ampia. Un solo valore.

   Gli ID sono espliciti di proposito: 388 hub download, 392 modulistica,
   410 DWG, 1306 modelli 3D, 7 servizi. Non tocca le altre pagine.
   ═══════════════════════════════════════════════════════════════ */
body.page-id-388,
body.page-id-392,
body.page-id-410,
body.page-id-1306,
body.page-id-7 {
	--wp--style--global--content-size: var(--wp--style--global--wide-size);
}

/* Il testo corrente resta su misura di lettura, allineato a sinistra
   con il resto: una riga larga 1248px non si legge. */
body.page-id-388 .entry-content p:not(.dmr-label),
body.page-id-392 .entry-content p:not(.dmr-label),
body.page-id-410 .entry-content p:not(.dmr-label),
body.page-id-1306 .entry-content p:not(.dmr-label),
body.page-id-7 .entry-content p:not(.dmr-label) {
	max-width: 62ch;
	margin-left: 0 !important;
	margin-right: auto !important;
}
body.page-id-388 .entry-content li,
body.page-id-7 .entry-content li {
	max-width: 62ch;
}
/* Il layout constrained centra i figli con `margin: auto`. Quelle regole
   arrivano inline nel <head>, dopo il foglio del tema figlio, quindi qui
   serve !important: e' il caso in cui e' la soluzione giusta, non una
   scorciatoia. Senza, il testo resta centrato invece che allineato a
   sinistra con il titolo e le righe. */
body.page-id-388 .entry-content > .wp-block-group > p,
body.page-id-392 .entry-content > .wp-block-group > p,
body.page-id-410 .entry-content > .wp-block-group > p,
body.page-id-1306 .entry-content > .wp-block-group > p,
body.page-id-7 .entry-content > .wp-block-group > p,
body.page-id-388 .entry-content .wp-block-group p,
body.page-id-392 .entry-content .wp-block-group p,
body.page-id-410 .entry-content .wp-block-group p,
body.page-id-1306 .entry-content .wp-block-group p,
body.page-id-7 .entry-content .wp-block-group p {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   TITOLO DELLE PAGINE: Geist Mono, come le voci di navigazione
   Il titolo prendeva la famiglia globale (Geist) e il peso 700 di
   styles.elements.heading. Passa al mono della navigazione, piu' grande
   e con peso 600: stessa voce del menu, alzata di scala.
   ═══════════════════════════════════════════════════════════════ */
body.page-id-388 .wp-block-post-title,
body.page-id-392 .wp-block-post-title,
body.page-id-410 .wp-block-post-title,
body.page-id-1306 .wp-block-post-title,
body.page-id-7 .wp-block-post-title {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-weight: 600;
	font-size: clamp(38px, 5.2vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.035em;
}

/* ═══════════════════════════════════════════════════════════════
   PAGINA DOWNLOAD: striscia dell'immagine in evidenza
   La disposizione sta in templates/page-download.html, non qui: forzare
   un blocco fuori dai margini con calc(50% - 50vw) su un template
   condiviso produceva scorrimento orizzontale e allineamenti sbagliati.
   Qui resta solo l'altezza della striscia.
   ═══════════════════════════════════════════════════════════════ */
.dmr-hero img {
	width: 100%;
	height: clamp(200px, 30vh, 340px);
	object-fit: cover;
	display: block;
}
.dmr-hero {
	margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MODULO CONTATTI
   Stessa palette e stesso carattere del sito: filetto come unico
   bordo, etichette maiuscole spaziate, invio come parola sottolineata.
   Nessun riquadro, nessun angolo arrotondato.

   Due disposizioni dalla stessa marcatura:
   - .dmr-form-b   due colonne, colonna da 190px come gli indici
                   (pagine Servizi e Download)
   - .dmr-form-c   in colonna dentro <details>, chiuso occupa una riga
                   (sotto ogni progetto)
   ═══════════════════════════════════════════════════════════════ */
.dmr-form-title {
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 26px;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 6px;
}
.dmr-form-sub {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 28px;
	max-width: 52ch;
}
.dmr-lab {
	display: block;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 7px;
}
.wpcf7 .dmr-in,
.wpcf7 .dmr-ta {
	width: 100%;
	font-family: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	padding: 7px 0 9px;
}
.wpcf7 .dmr-ta {
	resize: vertical;
	min-height: 88px;
	line-height: 1.5;
}
.wpcf7 .dmr-in:focus,
.wpcf7 .dmr-ta:focus {
	outline: 0;
	border-bottom-width: 2px;
	padding-bottom: 8px;
}
.wpcf7 .dmr-in::placeholder,
.wpcf7 .dmr-ta::placeholder {
	color: var(--wp--preset--color--contrast-3);
}
.wpcf7 .dmr-send {
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	padding: 6px 2px;
	cursor: pointer;
}
.wpcf7 .dmr-send:hover {
	border-bottom-width: 4px;
}
.dmr-form-note {
	font-size: 11.5px;
	color: var(--wp--preset--color--contrast-2);
	margin: 18px 0 0;
}
.wpcf7 .dmr-form-grid p {
	margin: 0;
}

/* Campo trappola: fuori dallo schermo e fuori dal percorso di lettura. */
.dmr-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* — B: due colonne — */
.dmr-form-b .dmr-form-grid {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 24px 44px;
	align-items: start;
}
.dmr-form-b .dmr-form-head {
	grid-column: 1 / -1;
	margin-bottom: 4px;
}
.dmr-form-b .dmr-form-side {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.dmr-form-b .dmr-form-foot {
	grid-column: 2;
	margin-top: 6px;
}

/* — C: in colonna, dentro <details> — */
.dmr-form-c .dmr-form-grid {
	display: flex;
	flex-direction: column;
	gap: 26px;
	max-width: 560px;
}
.dmr-form-c .dmr-form-foot {
	margin-top: 30px;
}
.dmr-fold {
	border-top: 1px solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--contrast);
}
.dmr-fold > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
}
.dmr-fold > summary::-webkit-details-marker {
	display: none;
}
.dmr-fold > summary .t {
	font-weight: 500;
	font-size: 24px;
	letter-spacing: -0.02em;
}
.dmr-fold > summary .m {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--contrast-2);
}
.dmr-fold[open] > summary .m::after {
	content: " ✴︎";
}
.dmr-fold > summary .m::after {
	content: " ✴︎";
}
.dmr-fold .dmr-fold-body {
	padding: 34px 0 40px;
}
.dmr-fold[open] > summary .t {
	opacity: 0.55;
}

@media (max-width: 781px) {
	.dmr-form-b .dmr-form-grid {
		grid-template-columns: 1fr;
	}
	.dmr-form-b .dmr-form-foot {
		grid-column: 1;
	}
	.dmr-fold > summary .t {
		font-size: 20px;
	}
}

/* Il modulo sotto i progetti prende i margini standard del sito.
   Le pagine progetto sono costruite a mano e hanno margini incoerenti fra
   loro (titolo a 10px dal bordo, menu centrato a 500px): non esiste un
   allineamento a cui conformarsi. Il plugin dei progetti lo risolvera'
   alla radice; intanto il modulo non tocca i bordi. */
.dmr-form-c {
	padding-left: var(--wp--preset--spacing--body-margin);
	padding-right: var(--wp--preset--spacing--body-margin);
}

/* ── Allineamento del modulo ──────────────────────────────────
   Contact Form 7 mette un <br> dopo ogni etichetta: sommato al
   margine dell'etichetta produceva un vuoto di circa 80px fra
   etichetta e campo. Via il <br>, e i margini li governa la griglia.
   ───────────────────────────────────────────────────────────── */
.wpcf7 .dmr-form-grid br {
	display: none;
}
.wpcf7 .dmr-form-grid p,
.wpcf7 .dmr-form-grid .wpcf7-form-control-wrap {
	margin: 0;
	display: block;
}

/* La colonna del messaggio pareggia in altezza con i due campi a
   sinistra: i bordi inferiori si allineano invece di sfalsarsi. */
.dmr-form-b .dmr-form-grid {
	align-items: stretch;
}
.dmr-form-b .dmr-form-msg,
.dmr-form-b .dmr-form-msg > p,
.dmr-form-b .dmr-form-msg .wpcf7-form-control-wrap {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.dmr-form-b .dmr-form-msg > p,
.dmr-form-b .dmr-form-msg .wpcf7-form-control-wrap {
	flex: 1 1 auto;
}
.dmr-form-b .dmr-ta {
	flex: 1 1 auto;
	min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PAGINA PROGETTO — tre colonne
   Copertina piena, poi scheda a sinistra che si aggancia al bordo
   superiore, corpo al centro, colonna destra libera fino al widget dei
   due progetti successivi.

   Attenzione: `overflow: hidden` su un qualsiasi contenitore genitore
   annulla position:sticky senza errori ne' avvisi. Se un giorno la
   scheda smette di agganciarsi, e' quasi certamente quella la causa.
   ═══════════════════════════════════════════════════════════════ */
/* Punto di ritaglio comune a tutte le foto tagliate: basso centrale.
   In architettura l'edificio sta nella meta' bassa dello scatto e il
   cielo occupa quella alta, quindi tagliando dall'alto si perde meno.
   Vale per la copertina, per le miniature della galleria, per l'indice
   e per i progetti consigliati: cambiando questa riga cambiano tutti. */
:root {
	--dmr-ritaglio: center bottom;
}
.dmr-cover img {
	width: 100%;
	height: clamp(280px, 52vh, 620px);
	object-fit: cover;
	object-position: var(--dmr-ritaglio);
	display: block;
}
.dmr-project-row .wp-block-post-featured-image img {
	object-position: var(--dmr-ritaglio);
}

/* — griglia della galleria, in cima al corpo —
   E' la porta della lightbox: riquadri quadrati e piccoli, incolonnati
   con il testo. Le stesse foto ricompaiono piu' grandi dentro l'articolo,
   ed e' voluto: qui si legge l'insieme, li' si guarda la singola. */
.dmr-galleria {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 4px;
	margin-bottom: var(--wp--preset--spacing--50);
}
.dmr-mini {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	cursor: zoom-in;
}
/* La regola e' piu' specifica del necessario di proposito: la galleria
   sta dentro .dmr-col-corpo, che azzera l'altezza delle immagini del
   testo. Senza questo peso in piu' le foto orizzontali restavano alte
   quanto il loro rapporto e lasciavano il riquadro mezzo vuoto. */
.dmr-galleria .dmr-mini img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--dmr-ritaglio);
	transition: opacity 0.2s ease;
}
.dmr-mini:hover img,
.dmr-mini:focus-visible img {
	opacity: 0.78;
}
.dmr-mini:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: -2px;
}
/* L'ultimo riquadro porta il conteggio delle foto che non entrano nelle
   due righe: si scurisce perche' il numero deve restare leggibile su
   qualunque fotografia.

   I riquadri per riga cambiano con la larghezza, quindi cambia anche il
   conteggio. Il PHP stampa tutti e due i numeri e qui si mostra quello
   che serve: nessuna misura letta da JavaScript, nessuno scatto al
   ridimensionamento. */
.dmr-mini.is-piu-d img {
	filter: brightness(0.5);
}
.dmr-piu {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.dmr-piu-m {
	display: none;
}

.dmr-progetto {
	padding-left: var(--wp--preset--spacing--body-margin);
	padding-right: var(--wp--preset--spacing--body-margin);
}
.dmr-titolo {
	font-size: clamp(32px, 4.6vw, 60px);
	font-weight: 500;
	line-height: 1.03;
	letter-spacing: -0.03em;
	margin: 0 0 var(--wp--preset--spacing--50);
}
/* Altezza dell'header che scorre: segue lo stesso clamp del titolo del
   sito (huge-title, interlinea 1.05) piu' il suo padding superiore. Serve
   perche' la scheda si fermi SOTTO il titolo invece di passarci dietro. */
.dmr-progetto {
	--dmr-header: calc(clamp(96px, 13.333vw, 256px) * 1.05 + 16px);
}
.dmr-tri {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 380px;
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

/* — colonna sinistra: la scheda —
   Si aggancia sotto il titolo che scorre, non dietro.

   L'aggancio sta sulla scheda, non sulla colonna che la contiene: cosi'
   il limite della corsa e' il fondo della colonna, che si ferma sopra i
   progetti consigliati. Con l'aggancio sulla colonna stessa la scheda
   proseguiva oltre e finiva sopra i suggeriti sugli schermi stretti. */
.dmr-col-scheda {
	align-self: stretch;
}
.dmr-col-scheda .dmr-scheda {
	position: sticky;
	top: calc(var(--dmr-header) + var(--wp--preset--spacing--30));
}
.dmr-scheda {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.dmr-scheda > div {
	border-bottom: 1px solid var(--wp--preset--color--contrast-3);
	padding-bottom: var(--wp--preset--spacing--20);
}
.dmr-scheda > div:last-child {
	border-bottom: 0;
}
.dmr-scheda .k {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 3px;
}
.dmr-scheda .v {
	display: block;
	font-size: 15px;
	line-height: 1.35;
}

/* — colonna centrale: il corpo — */
.dmr-col-corpo > .entry-content > * {
	max-width: none;
}
.dmr-col-corpo img {
	height: auto;
}

/* — disegni tecnici: la sezione esiste solo se ci sono tavole — */
.dmr-tavole {
	border-top: 1px solid var(--wp--preset--color--contrast);
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
}
.dmr-tavole-t {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 var(--wp--preset--spacing--40);
}
.dmr-tavole-g {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}
.dmr-tavola {
	margin: 0;
}
.dmr-tavola img {
	width: 100%;
	height: auto;
	display: block;
}
.dmr-tavola figcaption {
	font-size: 13px;
	color: var(--wp--preset--color--contrast-2);
	margin-top: 8px;
}
.dmr-pdf {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

/* — colonna destra: vuota, widget in fondo — */
.dmr-col-lato {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	justify-content: flex-end;
}
.dmr-suggeriti {
	border-top: 1px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--30);
}
.dmr-suggeriti-l {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: var(--wp--preset--spacing--30);
}
.dmr-suggeriti a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.dmr-suggeriti a + a {
	margin-top: var(--wp--preset--spacing--40);
}
.dmr-suggeriti img {
	width: 100%;
	/* WordPress stampa height="432" sul tag: senza height:auto quel valore
	   vince sul rapporto e il ritaglio quadrato non avviene. */
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: var(--dmr-ritaglio);
	display: block;
	margin-bottom: 8px;
}
.dmr-suggeriti .t {
	display: block;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.dmr-suggeriti .m {
	display: block;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast-2);
	margin-top: 4px;
}
.dmr-suggeriti a:hover .t {
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.14em;
}

/* ── Tablet e schermi stretti ─────────────────────────────────
   Le tre colonne stanno solo da 1200 px in su. Sotto, i 200 px della
   scheda piu' i 380 px dei suggeriti lasciavano alla colonna centrale
   poco piu' di 200 px: si passa a due colonne e i suggeriti scendono
   sotto il corpo.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
	.dmr-tri {
		grid-template-columns: 200px minmax(0, 1fr);
	}
	.dmr-col-lato {
		grid-column: 1 / -1;
		justify-content: flex-start;
		margin-top: var(--wp--preset--spacing--60);
	}
	.dmr-suggeriti {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--40);
	}
	.dmr-suggeriti-l {
		grid-column: 1 / -1;
		margin-bottom: 0;
	}
	.dmr-suggeriti a + a {
		margin-top: 0;
	}
}

/* ── Telefono ─────────────────────────────────────────────────
   La scheda si rimpicciolisce ma continua ad agganciarsi come su
   desktop. La galleria passa a tre colonne per due righe: i riquadri
   restano leggibili e il conteggio si sposta sul sesto.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 781px) {
	.dmr-tri {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
	.dmr-scheda .k {
		font-size: 9.5px;
		letter-spacing: 0.1em;
	}
	.dmr-scheda .v {
		font-size: 12.5px;
	}
	.dmr-galleria {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* Settimo e ottavo riquadro: farebbero una terza riga spaiata. */
	.dmr-mini:nth-child(n + 7) {
		display: none;
	}
	.dmr-mini.is-piu-d img {
		filter: none;
	}
	.dmr-mini.is-piu-m img {
		filter: brightness(0.5);
	}
	.dmr-piu-d {
		display: none;
	}
	.dmr-piu-m {
		display: grid;
	}
	.dmr-tavole-g {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════════
   SELETTORE DI LINGUA (IT · EN)

   Sta in alto a destra, sopra il titolo che scorre, e NON entra nel
   flusso: `position: absolute` dentro .header-sticky, che essendo
   `sticky` fa da riferimento.

   Fuori dal flusso per due ragioni precise, non per gusto:
   1. la home e' alta esattamente 100dvh con overflow nascosto; una riga
      in piu' in testa toglierebbe spazio allo slider;
   2. --dmr-header (riga 806) calcola l'altezza dell'intestazione dal
      clamp del titolo piu' i suoi 16px di padding, e la scheda del
      progetto ci si aggancia. Un elemento in flusso falserebbe il conto
      e la scheda si fermerebbe nel punto sbagliato.

   Si infila quindi nella fascia dei 16px di padding che sta gia' sopra
   il titolo: il titolo non si sposta di un pixel.

   Niente mix-blend-mode qui: lo eredita da .header-sticky, come il
   titolo. Per questo il colore e' bianco — sotto esclusione si inverte
   da solo su qualsiasi fondo.
   ═══════════════════════════════════════════════════════════════ */
.dmr-lingue {
	position: absolute;
	top: 0;
	right: var(--wp--preset--spacing--body-margin);
	z-index: 2;
	display: flex;
	gap: 5px;
	align-items: center;
	height: 16px;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	color: #ffffff;
}
.dmr-lingua {
	color: #ffffff;
	text-decoration: none;
}
/* La lingua corrente e' marcata; l'altra e' un po' in ombra finche' non
   la si punta. Serve a far capire quale delle due si sta leggendo. */
.dmr-lingue .is-attiva {
	font-weight: 700;
}
/* Sotto esclusione l'opacita' abbassa anche il contrasto: 0,75 e' il
   minimo che resta leggibile sopra le foto di copertina. */
.dmr-lingue a.dmr-lingua {
	opacity: 0.75;
}
.dmr-lingue a.dmr-lingua:hover,
.dmr-lingue a.dmr-lingua:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}
.dmr-lingue-sep {
	opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════
   PAGINA PROGETTO: i sottotitoli passano da H5 a H2

   Erano H5: dopo l'H1 del titolo saltavano quattro livelli, che per un
   motore di ricerca e' una struttura debole. Portati a H2, la gerarchia
   diventa H1 titolo -> H2 sezioni.

   L'aspetto non deve cambiare (§3), e un H2 del tema misura 37,5px contro
   i 18px degli H5: qui riprende le misure che avevano prima. Peso e
   margini erano gia' identici, quindi non si ripetono.
   ═══════════════════════════════════════════════════════════════ */
.dmr-col-corpo h2 {
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   CREDITI DEL PROGETTO

   In fondo alla colonna centrale, sotto i disegni tecnici. Committente,
   impresa e fotografo stavano nella scheda laterale: sono stati spostati
   qui perche' la scheda e' agganciata e deve restare corta, mentre i
   crediti si leggono alla fine, come su ArchDaily.

   Il blocco non stampa nulla se non c'e' almeno una voce compilata:
   nessun titolo che galleggia su una sezione vuota.

   Stesso disegno della scheda - etichetta piccola in maiuscoletto sopra,
   valore sotto - ma su due colonne, perche' qui lo spazio c'e'.
   ═══════════════════════════════════════════════════════════════ */
.dmr-crediti {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.dmr-crediti-t {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast-2);
}
.dmr-crediti-g {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}
.dmr-crediti-g .k {
	display: block;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 2px;
}
.dmr-crediti-g .v {
	display: block;
	line-height: 1.4;
}

@media (max-width: 781.98px) {
	.dmr-crediti-g {
		grid-template-columns: 1fr;
	}
}