/**
 * Footer (parts/footer.html).
 *
 * Misure dal PNG Home a canvas 1920: fondo bruno full-bleed, contenuto sulla
 * wide (1760px → margini 80px), riga superiore logo+descrizione a sinistra e
 * due colonne di link a destra, riga legale sotto un filo grigio.
 */

/* Il footer si appoggia alla sezione che lo precede, senza niente in mezzo:
   nel mock la fascia Contattaci e il footer si toccano, e il distanziamento
   che WordPress mette fra i blocchi di primo livello (24px) lascerebbe una
   riga crema fra due fasce scure — su tutte le pagine, perché il footer è lo
   stesso dappertutto.

   Il footer va nominato insieme al suo contenitore: la regola di WordPress è
   `:root :where(.wp-site-blocks) > *`, che pesa quanto `.dnpa-footer` da solo,
   e a parità vince l'ultima scritta. Sul sito il nostro foglio arriva dopo e
   vinceva lo stesso; nell'editor no, e la striscia crema si vedeva lì. */
.wp-site-blocks > .dnpa-footer {
	margin-block-start: 0;
}

/* Il fondo bruno arriva ai bordi dello schermo, il contenuto resta sulla wide
   (layout `constrained` a 1760px definito nel template part). */
.dnpa-footer__inner {
	padding-block: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--40 );
	padding-inline: var( --wp--preset--spacing--30 );
}

.dnpa-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--60 );
}

/* Il layout "flow" di WP distanzia i figli con un margine: dove impagina
   flex le distanze le dà `gap`, altrimenti le colonne scenderebbero. */
.dnpa-footer__top > *,
.dnpa-footer__links > *,
.dnpa-footer__col > * {
	margin-block: 0;
}

.dnpa-footer__brand {
	flex: 1 1 320px;
	max-width: 420px;
}

.dnpa-footer__about {
	margin-block: var( --wp--preset--spacing--30 ) 0;
	line-height: 1.5;
}

/* --- Colonne link --- */

/* Lo stacco fra le due colonne è quello del design (280px fra i due titoli a
   canvas 1920), che scende con la finestra. */
.dnpa-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: clamp( 48px, 10.4vw, 200px );
}

.dnpa-footer__col-title {
	margin-block: 0 12px;
}

.dnpa-footer__col-links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dnpa-footer__col-links li {
	line-height: 1.2;
}

.dnpa-footer__col-links a {
	color: var( --wp--preset--color--bianco );
	font-weight: 600;
	text-decoration: none;
}

/* Sottolineatura al passaggio invece del terracotta: su fondo bruno il
   terracotta sta a 3,2:1, sotto la soglia AA per questo corpo (il terracotta
   del tema è scurito per stare sopra soglia sul crema — ticket 11 — e sul
   bruno perciò scende ancora). */
.dnpa-footer__col-links a:hover,
.dnpa-footer__col-links a:focus {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Filo divisorio + riga legale --- */

.dnpa-footer__inner .wp-block-separator {
	margin-block: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--40 );
	border: 0;
	border-top: 1px solid var( --wp--preset--color--grigio-scuro );
	opacity: 1;
}

.dnpa-footer__legal {
	margin-block: 0;
}

@media ( max-width: 781px ) {
	.dnpa-footer__top {
		gap: var( --wp--preset--spacing--50 );
	}

	.dnpa-footer__brand {
		max-width: none;
	}

	.dnpa-footer__links {
		gap: var( --wp--preset--spacing--60 );
	}
}