/**
 * Identità del sito, pezzi e sezioni che tornano su più pagine.
 *
 * Il lockup identità è lo stesso in header e footer: finché il cliente non
 * carica un logo si vede il nome del sito nel font display, appena lo carica
 * il nome sparisce da solo (ADR 003 — niente nome o logo scritti nel tema).
 *
 * Dopo l'identità stanno le foto, il filo e l'etichetta di sezione, le sezioni
 * che tornano su più pagine (hero, statement, manifesto, link con la freccia)
 * e le CTA: tutto quello che, se restasse nel foglio di una pagina, obbligherebbe
 * le altre a dipenderne.
 */

.dnpa-brand .wp-block-site-logo img {
	max-height: 48px;
	width: auto;
}

.dnpa-brand .wp-block-site-title {
	margin: 0;
}

.dnpa-brand .wp-block-site-title a {
	color: var( --wp--preset--color--bianco );
	font-family: var( --wp--preset--font-family--otomanopee-one );
	font-size: var( --wp--preset--font-size--huge );
	line-height: 1.1;
	text-decoration: none;
}

.dnpa-brand:has( .wp-block-site-logo img ) .wp-block-site-title {
	display: none;
}

/**
 * Foto del design. Ogni copertina che nel design mostra una foto ha due
 * classi: `dnpa-foto` (angoli e altezza, uguali ovunque) e una `dnpa-foto--*`
 * che la aggancia al suo segnaposto nel CSS della pagina.
 */

/* Le copertine di WordPress partono da 430px di altezza: nelle foto del design
   l'altezza la decide la proporzione, quindi il minimo va tolto di mezzo. */
.dnpa-foto {
	min-height: 0;
	border-radius: var( --wp--custom--foto-radius );
}

/* Solo nell'editor: dentro una copertina vuota WordPress mette sempre un
   paragrafo con l'invito "Scrivi il titolo…". Sulle caselle che nel design
   sono solo foto l'invito sparisce, così il cliente non ci scrive sopra per
   sbaglio (il paragrafo resta, se un titolo lo vuole davvero). */
.dnpa-foto [ data-rich-text-placeholder ]::after {
	display: none;
}

/* I segnaposto stanno nel CSS perché nei file HTML dei template non si può
   scrivere `get_theme_file_uri()` e un indirizzo assoluto si romperebbe in
   un'installazione in sottocartella. Qui l'inquadratura comune; la foto di
   ogni fessura la sceglie il foglio della sua pagina, e la regola si spegne da
   sola appena il cliente carica la sua foto dal blocco copertina. */
[ class*="dnpa-foto--" ]:not( :has( .wp-block-cover__image-background ) ) {
	background-position: center;
	background-size: cover;
}

/**
 * Filo sopra le sezioni con etichetta (Home, About, e le pagine che verranno).
 * Nel mock la riga è #8C8A85: il grigio della palette è il più vicino.
 */
.dnpa-filo {
	border-top: 1px solid var( --wp--preset--color--grigio );
	padding-top: 16px;
}

/**
 * Etichetta di sezione: pallino terracotta + testo spaziato maiuscolo.
 * È lo stile di blocco "Etichetta sezione", e torna in quasi tutte le sezioni
 * del design.
 *
 * Vale su un paragrafo e su un titolo, che nel design si vedono identici: dove
 * l'etichetta è l'unico nome della sezione è un titolo (vedi `functions.php`),
 * e allora deve restare della sua misura invece di prendere quella dei titoli
 * del tema — per questo il selettore del titolo pesa più di quello di
 * `theme.json`.
 */
p.is-style-dnpa-eyebrow,
.wp-block-heading.is-style-dnpa-eyebrow {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--20 );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.25;
	text-transform: uppercase;
}

p.is-style-dnpa-eyebrow::before,
.wp-block-heading.is-style-dnpa-eyebrow::before {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--terracotta );
}

/**
 * Colonne che si impilano prima della soglia di WordPress.
 *
 * WordPress impila le colonne a 782px, ma in tre punti del design (le tre foto
 * dell'introduzione in Home, la scheda del modulo nella fascia Contattaci, le
 * due colonne della pagina Contatti) la colonna stretta diventa illeggibile
 * molto prima: sotto i 1024 vanno una sotto l'altra. È la stessa regola per
 * tutte e tre, quindi sta qui e si chiama dalla classe.
 *
 * I due `!important` ricalcano quelli con cui WordPress tiene le colonne in
 * riga sopra i 782px e scrive la larghezza in linea.
 */
@media ( max-width: 1023px ) {
	.dnpa-impila-1024.wp-block-columns:not( .is-not-stacked-on-mobile ) {
		flex-wrap: wrap !important;
	}

	.dnpa-impila-1024.wp-block-columns:not( .is-not-stacked-on-mobile ) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/**
 * Pagine semplici (`templates/page.html`): titolo e testo scritti dall'editor,
 * senza sezioni disegnate. Le usano le due policy e qualunque pagina il cliente
 * aggiunga da solo.
 *
 * Con poco testo — le policy nascono vuote, in attesa del legale — il footer
 * finirebbe a mezza altezza con sotto una striscia di fondo crema: qui il
 * corpo della pagina si allunga fino a riempire lo schermo. La regola vale
 * solo per queste pagine: le altre hanno sezioni loro che arrivano in fondo.
 */
body:has( main.dnpa-pagina ) .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

body:has( main.dnpa-pagina ) .wp-site-blocks > footer {
	margin-block-start: auto;
}

/**
 * Sezioni che tornano su più pagine.
 *
 * L'hero apre la Home e tutte le pagine interne; il manifesto (griglia a due
 * colonne di voci solo testo) è "quello che facciamo" di About e l'elenco dei
 * servizi di Servizi; lo statement centrato chiude About e Aziende. Le misure
 * sono quelle del design a canvas 1920.
 */

/* --- Hero --- */

/* Nel design gli hero sono alti 1025px su uno schermo da 1080: a tutti gli
   effetti una schermata piena, ma senza superarla sui monitor alti. Quello
   della Home ha il testo al centro, quelli delle pagine interne a sinistra. */
.wp-block-cover.dnpa-hero,
.wp-block-cover.dnpa-hero-interno {
	min-height: min( 100svh, 1025px );
}

/* Il testo delle pagine interne sta a sinistra della wide, non al centro: il
   gruppo è largo come la wide (`alignwide`, che WordPress centra da sé) e sono
   le sue righe a essere corte. Dove va a capo il titolo lo decide la pagina
   (`--dnpa-hero-testo`), perché dipende da quanto è lungo; il paragrafo sta sui
   743px del mock in tutte e due. */
.dnpa-hero-interno__testo h1 {
	max-width: var( --dnpa-hero-testo, 743px );
}

.dnpa-hero-interno__testo p {
	max-width: 743px;
}

/* Dietro al testo degli hero c'era un alone scuro per il contrasto con le
   foto chiare (qa-checklist): il cliente lo vedeva come una striscia e ha
   chiesto di toglierlo su tutte le pagine (2026-08-28). Il contrasto dei
   titoli bianchi ora poggia solo sui veli del mock: regge finché le foto
   degli hero restano scure. */

/* --- Statement centrato --- */

/* Anche qui la larghezza del titolo dipende dal testo della pagina: senza la
   misura riempie la colonna. */
.dnpa-statement__titolo {
	max-width: var( --dnpa-statement-titolo, none );
	margin-inline: auto;
}

/* --- Manifesto: voci solo testo su due colonne --- */

/* Le due colonne sono larghe 573px con 322px di distanza: la distanza è in
   `vw` sulla misura del design (322/1920), così le colonne restano larghe
   uguali mentre la pagina si stringe. */
.wp-block-group.dnpa-manifesto {
	max-width: 1468px;
	gap: 80px clamp( var( --wp--preset--spacing--40 ), 16.77vw, 322px );
}

.dnpa-manifesto__titolo {
	line-height: 1.39;
}

/* Alla soglia con cui WordPress impila le colonne il manifesto diventa una
   colonna sola. */
@media ( max-width: 781px ) {
	.wp-block-group.dnpa-manifesto {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--60 );
	}
}

/**
 * Le CTA del design sono lo stesso bottone alto 44px, con gli angoli da 16px
 * del mock e il testo 14/600 maiuscolo: cambiano solo i colori. "Contorno
 * chiaro" è quella dell'header, sopra le foto scure; "CTA terracotta" quella
 * piena delle sezioni (hero, teaser About). Il filo trasparente della piena
 * tiene le due alla stessa altezza.
 */
.wp-block-button.is-style-dnpa-ghost > .wp-block-button__link,
.wp-block-button.is-style-dnpa-cta > .wp-block-button__link {
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: var( --wp--custom--bottone-radius );
	max-width: 100%;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-transform: uppercase;

	/* Le etichette del design stanno tutte su una riga e ci restano da sole.
	   Tenercele per forza (`white-space: nowrap`) però vuol dire che la prima
	   CTA più lunga scritta dal cliente allarga la pagina sul telefono invece
	   di andare a capo: succedeva con "Richiedi una consulenza" allungata.
	   `max-width` da sola non basta: limita il riquadro, non il testo, e una
	   parola sola più larga dello schermo uscirebbe lo stesso. */
	overflow-wrap: anywhere;
	text-wrap: balance;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.wp-block-button.is-style-dnpa-ghost > .wp-block-button__link {
	border-color: var( --wp--custom--surface--hairline );
	background-color: var( --wp--custom--surface--soft );
	color: var( --wp--preset--color--bianco );
}

/* Riempimento pieno al passaggio: il bianco su bruno è il salto più netto che
   la palette permette, e la CTA a contorno chiaro sta sopra le foto, dove un
   fondo semitrasparente non garantisce niente. */
.wp-block-button.is-style-dnpa-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-dnpa-ghost > .wp-block-button__link:focus {
	border-color: var( --wp--preset--color--bianco );
	background-color: var( --wp--preset--color--bianco );
	color: var( --wp--preset--color--bruno );
}

.wp-block-button.is-style-dnpa-cta > .wp-block-button__link {
	background-color: var( --wp--preset--color--terracotta );
	color: var( --wp--preset--color--crema );
}

/* Al passaggio il fondo diventa bruno invece di schiarire: il crema su
   terracotta sta a 4,54:1, appena sopra la soglia AA per un testo da 14px, e
   qualunque schiarita lo porterebbe sotto. */
.wp-block-button.is-style-dnpa-cta > .wp-block-button__link:hover,
.wp-block-button.is-style-dnpa-cta > .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--bruno );
	color: var( --wp--preset--color--crema );
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-button.is-style-dnpa-ghost > .wp-block-button__link,
	.wp-block-button.is-style-dnpa-cta > .wp-block-button__link {
		transition: none;
	}
}

/**
 * Fuoco da tastiera: sempre visibile, su qualunque fondo del sito.
 *
 * Sono due anelli, non uno. Il terracotta da solo si stacca dal crema (4,5:1)
 * e dal bruno (3,2:1), ma il fuoco passa anche sopra le foto — le voci di menu
 * e la CTA della barra stanno sopra l'hero — e sopra una foto di mezza
 * tonalità sparirebbe. L'alone crema subito fuori si vede dove il terracotta
 * non si vede, e viceversa: sopra una foto qualunque uno dei due anelli sta
 * sopra 3:1.
 *
 * L'alone è un'ombra e non un secondo contorno perché di contorno ce n'è uno
 * solo; l'ombra si disegna sotto, quindi il terracotta resta l'anello interno.
 * Essendo un'ombra, chi ne ha già una sua se la tiene: i campi del modulo
 * (`dnpa-core`), che segnano il fuoco ingrossando il filo sotto, restano col
 * solo anello terracotta — stanno sempre su crema o su bruno, mai sopra una
 * foto, e lì il terracotta basta da solo.
 */
:focus-visible {
	outline: 2px solid var( --wp--preset--color--terracotta );
	outline-offset: 3px;
	box-shadow: 0 0 0 7px var( --wp--preset--color--crema );
}