/**
 * Footer template part.
 *
 * Colore, tipografia e sfondo arrivano dai supports del blocco e dai preset
 * di theme.json: qui sta solo quello che i blocchi non sanno esprimere, cioè
 * la griglia a colonne delle tre righe, le righe di separazione parziali e le
 * icone che nel riferimento sono sfondi CSS.
 */

/* Il core mette 24px di margine fra i blocchi di primo livello
   (:where(.wp-site-blocks) > *): senza annullarlo resta una striscia di carta
   fra l'ultima sezione e la fascia bordeaux del footer. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Il padding laterale è quello globale (il gruppo esterno è
   .has-global-padding, come .site-header): qui si aggiunge solo il respiro
   verticale del riferimento. */
.site-footer {
	padding-block: clamp( 40px, 6vw, 80px );

	/* Nel riferimento la colonna sinistra — logo, contatti, copyright — è
	   metà larghezza, e da quel valore dipendono anche le righe di
	   separazione, che partono dove comincia la colonna destra. Sta qui una
	   volta sola perché le tre righe e i divisori devono restare allineati
	   fra loro. */
	--cn-footer-split: 50%;
	--cn-footer-gap: clamp( 24px, 3vw, 40px );
}

/* Righe e linee di separazione si toccano: il ritmo verticale lo danno i
   `padding` delle righe, come nel riferimento. Senza questo reset il blockGap
   di core aggiungerebbe 24px prima e dopo ogni linea, e la fascia crescerebbe
   di quasi cento pixel rispetto al disegno. Due classi perché core stampa la
   regola del blockGap inline con una sola. */
.wp-block-group.site-footer__inner > * {
	margin-block: 0;
}

/* --- Righe ----------------------------------------------------------- */

/* Due classi e non una: il layout `flow` del gruppo resta attivo sotto e core
   lo stampa inline in <head> con un solo selettore di classe, quindi una
   regola a classe singola perderebbe. Stesso motivo per il reset del margine
   sui figli, che altrimenti aggiunge 24px a ogni cella della griglia. */
.wp-block-group.site-footer__row {
	display: grid;
	gap: var(--cn-footer-gap);
}

.wp-block-group.site-footer__row > * {
	margin-block: 0;
}

/* Logo | menù | invito. `start` e non `center`: nel riferimento le due colonne
   di link partono dall'alto, in linea con il logo. */
.wp-block-group.site-footer__row--top {
	grid-template-columns: var(--cn-footer-split) 1fr auto;
	align-items: start;
	padding-bottom: clamp( 28px, 4vw, 48px );
}

.wp-block-group.site-footer__row--mid {
	grid-template-columns: var(--cn-footer-split) 1fr;
	align-items: center;
}

.wp-block-group.site-footer__row--bottom {
	grid-template-columns: 1fr auto;
	align-items: start;
	padding-top: clamp( 36px, 4.5vw, 56px );
}

/* --- Righe di separazione -------------------------------------------- */

/* La catena è lunga per necessità: core dimensiona il separatore con
   `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)`, e i due
   `:not()` contano come classi, quindi vale 0-3-0. Con meno di quattro classi
   la larghezza resterebbe quella di core (100px) e il divisore comparirebbe
   come un trattino al centro.

   La linea non attraversa tutta la fascia: comincia dove comincia la colonna
   destra, come nel riferimento. */
.site-footer .site-footer__divider.wp-block-separator.has-alpha-channel-opacity {
	width: calc( 100% - var(--cn-footer-split) - var(--cn-footer-gap) );
	margin: 0 0 0 auto;
	height: 1px;
	border: 0;
	background-color: color-mix( in srgb, var(--wp--preset--color--cream) 22%, transparent );
}

/* --- Collegamenti ----------------------------------------------------- */

/* theme.json porta i link al rosso, che sul bordeaux sparirebbe. Il pulsante
   è escluso: ha già i suoi colori dai supports e questa regola, più specifica,
   glieli soffierebbe. */
.site-footer a:not(.wp-element-button) {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.site-footer a:not(.wp-element-button):hover,
.site-footer a:not(.wp-element-button):focus-visible {
	color: var(--wp--preset--color--white);
	opacity: 0.72;
}

@media ( prefers-reduced-motion: reduce ) {
	.site-footer a:not(.wp-element-button) {
		transition: none;
	}
}

/* --- Logo -------------------------------------------------------------- */

/* Il marchio del footer è il file vettoriale, non quello caricato in libreria.
   Il logo del sito è un AVIF da 300px: nell'header, dove viene disegnato a
   191px, si rimpicciolisce ed è nitido; qui va a 317px, cioè ingrandito, e su
   schermo retina serviva il quadruplo dei pixel che ha — si vedeva sgranato.
   Il riferimento infatti in questo punto usa `logo-white.svg`.

   Lo scambio è quello già collaudato nell'header per lo stato scorso: il file
   giusto entra come sfondo del contenitore e l'immagine del blocco resta al
   suo posto, invisibile ma presente, così il nome del sito non sparisce
   dall'albero di accessibilità. Le misure sono quelle del riferimento: la
   scatola è alta 72px e il marchio ci sta dentro «contain», quindi ne occupa
   una cinquantina. */
.site-footer__logo {
	width: clamp( 220px, 22vw, 320px );
	height: clamp( 48px, 5vw, 72px );
	background: var(--cn-media-logo-white) left center / contain no-repeat;
}

.site-footer__logo img {
	visibility: hidden;
	width: 100%;
	height: auto;
}

/* --- Menù -------------------------------------------------------------- */

.wp-block-group.site-footer__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 20px, 2.5vw, 48px );
}

/* Stesso reset delle righe: nell'editor la seconda colonna si portava dietro i
   24px di blockGap e partiva più in basso della prima. */
.wp-block-group.site-footer__nav > * {
	margin-block: 0;
}

.site-footer__nav-col {
	list-style: none;
	margin: 0;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: clamp( 8px, 1vw, 14px );
}

.site-footer__nav-col a {
	font-weight: 700;
	font-size: clamp( 14px, 1.05vw, 16px );
}

/* --- Invito ------------------------------------------------------------ */

.site-footer__cta-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

/* Lo stesso file del pin usato nell'header: è bicolore (goccia + tazzina), va
   quindi usato come immagine e non come maschera, che ne terrebbe solo la
   sagoma. */
.site-footer__cta-button .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background: var(--cn-media-cup-pin) center / contain no-repeat;
}

/* Il passaggio non è più qui: il bottone è bianco, e i bottoni bianchi virano
   tutti sullo stesso grigio chiaro, dichiarato una volta in `button.css`. La
   crema che c'era prima su un fondo bianco quasi non si vedeva. */

@media ( prefers-reduced-motion: reduce ) {
	.site-footer__cta-button .wp-block-button__link {
		transition: none;
	}
}

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

.site-footer__label {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
}

.wp-block-group.site-footer__contacts > .site-footer__label {
	margin-bottom: clamp( 10px, 1.2vw, 14px );
}

.wp-block-group.site-footer__contacts > .site-footer__address {
	margin-block: 0 clamp( 6px, 0.9vw, 10px );
	font-weight: 600;
	font-size: clamp( 14px, 1.1vw, 17px );
	color: var(--wp--preset--color--white);
}

.wp-block-group.site-footer__contacts > .site-footer__comm {
	margin-block: 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp( 14px, 2vw, 28px );
}

.site-footer__comm-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: clamp( 14px, 1.1vw, 17px );
}

.site-footer__comm-item::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background: center / contain no-repeat;
}

.site-footer__comm-item.is-phone::before {
	background-image: var(--cn-media-phone-icon);
}

.site-footer__comm-item.is-mail::before {
	background-image: var(--cn-media-mail-icon);
}

/* --- Social ------------------------------------------------------------ */

.wp-block-group.site-footer__social {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp( 16px, 2.5vw, 40px );
}

.wp-block-group.site-footer__social > * {
	margin-block: 0;
}

/* Le icone del riferimento sono dischi oro con il glifo in negativo. Il blocco
   core disegna il glifo e mette dietro il colore di marca: si sostituisce solo
   la coppia di colori, così le icone restano quelle di core e non sette file
   da tenere aggiornati.

   Due classi bastano: le regole di marca di core valgono 0-1-0
   (.wp-social-link-facebook). */
/* Il riferimento tiene le icone vicine — gap clamp(8px, 1vw, 14px) — mentre
   core parte dal blockGap globale, che qui vale 24px e le sparpagliava. */
.wp-block-social-links.site-footer__social-list {
	gap: clamp( 8px, 1vw, 14px );
}

.site-footer__social-list .wp-social-link {
	width: 40px;
	height: 40px;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--burgundy);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Nei file del riferimento disco e glifo sono un disegno solo, e il glifo
   riempie il cerchio molto più del `1em` (24px) che core dà agli SVG: a
   parità di disco le nostre icone sembravano una taglia in meno. */
.site-footer__social-list .wp-social-link svg {
	width: 26px;
	height: 26px;
}

/* Il colore del glifo va messo sul contenitore, non sull'ancora: core porta
   l'ancora a `currentcolor` con quattro classi
   (.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor),
   quindi qualunque colore scritto lì viene ignorato e vale invece quello
   ereditato dalla voce di elenco.

   È l'ancora a centrare il glifo, non la voce di elenco: core la tiene a
   `display: block` con più classi delle nostre, quindi il disco non può essere
   lui il contenitore flessibile. L'ancora si prende tutto il disco e ci centra
   dentro l'icona. */
.site-footer__social-list .wp-social-link .wp-block-social-link-anchor {
	width: 100%;
	height: 100%;
	justify-content: center;
	padding: 0;
}

.site-footer__social-list .wp-social-link:hover,
.site-footer__social-list .wp-social-link:focus-within {
	transform: scale( 1.08 );
	opacity: 0.88;
}

@media ( prefers-reduced-motion: reduce ) {
	.site-footer__social-list .wp-social-link {
		transition: none;
	}

	.site-footer__social-list .wp-social-link:hover,
	.site-footer__social-list .wp-social-link:focus-within {
		transform: none;
	}
}

/* --- Riga finale -------------------------------------------------------- */

.wp-block-group.site-footer__row--bottom > .site-footer__copyright,
.wp-block-group.site-footer__row--bottom > .site-footer__credit {
	margin-block: 0;
	color: var(--wp--preset--color--white);
}

.site-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.site-footer__credit > .site-footer__credit-text {
	margin-block: 0;
}

/* Il marchio è un blocco immagine: la figura di core porta un margine sotto
   che qui va tolto, e la larghezza sta sull'immagine invece che sulla figura
   perché è l'immagine a doversi rimpicciolire. L'altezza resta automatica —
   fissarla vorrebbe dire decidere le proporzioni del logo da qui, e cambiando
   il file in libreria si troverebbe schiacciato. */
.site-footer__credit > .site-footer__credit-logo {
	margin: 0;
}

.site-footer__credit > .site-footer__credit-logo img {
	display: block;
	width: clamp( 88px, 8vw, 112px );
	height: auto;
}

/* --- Schermi stretti ---------------------------------------------------- */

/* Stessa soglia dell'header: a 900px la colonna sinistra sparisce, le righe
   diventano una colonna sola centrata e i divisori tornano a piena larghezza. */
@media ( max-width: 900px ) {
	.site-footer {
		--cn-footer-split: 0%;
	}

	.wp-block-group.site-footer__row--top,
	.wp-block-group.site-footer__row--mid,
	.wp-block-group.site-footer__row--bottom {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.wp-block-group.site-footer__row--mid {
		padding-block: clamp( 26px, 6vw, 40px );
	}

	.site-footer__logo img {
		margin-inline: auto;
	}

	/* Le due colonne restano affiancate — sono nove voci, in colonna unica
	   allungherebbero il footer di parecchio — ma il blocco si centra. */
	.wp-block-group.site-footer__nav {
		gap: clamp( 8px, 1.6vw, 14px ) clamp( 20px, 6vw, 48px );
		width: fit-content;
		margin-inline: auto;
	}

	.site-footer__nav-col {
		align-items: center;
	}

	/* `justify-items: center` sulla riga fa restringere ogni cella al proprio
	   contenuto: senza rimettere in tiro questa, il pulsante resterebbe largo
	   quanto il testo invece di prendersi la riga. La seconda classe serve a
	   battere il `justify-content: flex-end` che core stampa inline per il
	   layout flex del gruppo di pulsanti. */
	.site-footer .site-footer__cta {
		justify-self: stretch;
		justify-content: center;
	}

	.site-footer__cta .wp-block-button,
	.site-footer__cta-button .wp-block-button__link {
		width: 100%;
	}

	/* Il pulsante prende tutta la riga, ma pin ed etichetta vanno al centro:
	   restando a sinistra sembrava un'altra cosa rispetto al riferimento. */
	.site-footer__cta-button .wp-block-button__link {
		justify-content: center;
	}

	.wp-block-group.site-footer__contacts > .site-footer__comm {
		justify-content: center;
	}

	.wp-block-group.site-footer__social {
		flex-direction: column;
		gap: clamp( 16px, 3vw, 24px );
	}

	.site-footer .site-footer__divider.wp-block-separator.has-alpha-channel-opacity {
		width: 100%;
	}
}