/**
 * Sezione "Contattaci" (parts/contattaci.html) e pagina Contatti
 * (templates/page-contatti.html): la fascia che sta su tutte le pagine e la
 * pagina che è fatta solo di modulo.
 *
 * Misure prese dal frame Home_Web a canvas 1920: fascia alta 832px con foto
 * e velo scuro, contenuto sulla wide 1760 (margini 80px), titolo a sinistra
 * largo 750px, scheda del modulo 867x768 con padding 88/32.
 */

.dnpa-contatti {
	--dnpa-contatti-scheda: 88px;
}

/* Dopo l'invio si torna alla pagina saltando all'ancora del modulo: senza dire
   al modulo quanto spazio lasciare in cima, l'avviso («messaggio inviato»,
   oppure i campi da correggere) finirebbe sotto la barra, che resta in vista
   mentre si scorre. Il modulo espone la misura, il tema la riempie. */
.dnpa-form {
	--dnpa-form-ancora: calc( var( --dnpa-header-h ) + var( --wp--preset--spacing--30 ) );
}

/* Foto segnaposto del tema: sta qui e non nel blocco copertina perché il
   percorso è relativo a questo file e regge qualunque installazione. Appena
   il cliente sceglie una sua foto dal blocco, WordPress aggiunge l'immagine
   dentro la copertina e questa regola si spegne da sola. */
.dnpa-contatti:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/contattaci.jpg" );
	background-position: center;
	background-size: cover;
}

/* La scheda del modulo lascia intravedere la foto sotto, come nel design. */
.dnpa-contatti__scheda {
	background-color: color-mix( in srgb, var( --wp--preset--color--crema-scuro ) 90%, transparent );
	padding: var( --dnpa-contatti-scheda ) 32px;
}

.dnpa-contatti__titolo {
	max-width: 750px;
}

/* Le due colonne non hanno spazio fra loro: la scheda arriva fino al bordo
   della wide, e il titolo respira grazie alla sua larghezza massima. Quando
   si impilano (a 1024px, con `dnpa-impila-1024` di `brand.css`: il modulo
   diventa stretto molto prima della soglia di WordPress), ci vuole aria. */
.dnpa-contatti .wp-block-columns {
	column-gap: 0;
	row-gap: var( --wp--preset--spacing--50 );
}

/* Schermi stretti: la scheda perde i margini interni generosi del desktop. */
@media ( max-width: 781px ) {
	.dnpa-contatti {
		--dnpa-contatti-scheda: var( --wp--preset--spacing--40 );
	}
}

/* --- Pagina Contatti --- */

/**
 * Misure prese dal frame Contatti a canvas 1920: pagina tutta bruna, contenuto
 * sulla wide 1760 (margini 80px), colonna del testo larga 868 e colonna del
 * modulo 797 con 96px di mezzo, elenco dei recapiti a 38px di passo.
 */

/* Il modulo qui non ha la scheda chiara sotto: le sue variabili passano dal
   fondo scuro. Il filo dei campi resta il grigio del design, che sul bruno
   sta a 3,2:1 (sopra la soglia per un contorno di campo). */
.dnpa-pagina-contatti .dnpa-form {
	--dnpa-form-testo: var( --wp--preset--color--bianco );
	--dnpa-form-scelta: var( --wp--preset--color--crema );
	--dnpa-form-scelta-testo: var( --wp--preset--color--bruno );
	--dnpa-form-avviso: rgba( 255, 255, 255, 0.1 );
}

/* Fra il paragrafo e i recapiti il design lascia più aria che fra titolo e
   paragrafo: è l'unico scarto dal passo della colonna. */
/* La classe del blocco è nel selettore apposta: il passo fra i blocchi della
   colonna (16px) arriva da una regola di WordPress che pesa quanto una classe,
   e a parità vincerebbe l'ultima scritta. */
.wp-block-list.dnpa-pagina-contatti__info {
	margin-block-start: var( --wp--preset--spacing--40 );
	padding-inline-start: 24px;
}

.dnpa-pagina-contatti__info li + li {
	margin-block-start: 16px;
}

/* Il pallino dell'elenco è quello delle etichette di sezione: 8px nel mock,
   qui il pallino vero dell'elenco ingrandito, così le righe restano un elenco
   anche per chi le ascolta (toglierlo con `list-style: none` glielo leverebbe).
   Nel mock è il rosso della variante 2 (vedi `design/tokens/styles.md`): qui è
   il terracotta del tema, come tutti gli altri pallini del sito. */
.dnpa-pagina-contatti__info li::marker {
	color: var( --wp--preset--color--terracotta );
	font-size: 1.25em;
	line-height: 1;
}

/* Sul bruno il terracotta dei link del tema starebbe a 3,2:1: i recapiti si
   riconoscono dalla sottolineatura e restano del colore del testo, come già
   fa il consenso privacy del modulo. */
.dnpa-pagina-contatti__info a {
	color: inherit;
	text-decoration: underline;
}

/* Anche qui le colonne si impilano a 1024px come nella fascia Contattaci: la
   regola è `dnpa-impila-1024`, in `brand.css`. */