/* ============================================================
   Footer - trascrizione della sezione FOOTER di components.css
   dell'HTML di riferimento. Cambiano solo i nomi dei token, che
   theme.json espone come preset.
   ============================================================ */

.footer {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text-muted);
	padding-block: 72px;
}

.footer-inner {
	display: grid;
	grid-template-columns: 1fr repeat(3, auto);
	gap: 40px 112px;
	padding-bottom: 88px;
}

.footer-brand .logo {
	margin-bottom: 14px;
}

.footer-brand .logo img {
	height: 72px;
	width: auto;
	display: block;
}

.footer-tagline {
	font-size: .95rem;
	line-height: 1.6;
	margin-bottom: 18px;
}

.footer-social {
	display: flex;
	gap: 14px;
	/* core imposta 24px e align-items:center sulla lista */
	font-size: 1rem;
	align-items: normal;
}

/* Il colore sta sul <li> e non sull'ancora: core lo blocca a currentcolor con
   .wp-block-social-links .wp-block-social-link.wp-social-link
   .wp-block-social-link-anchor, che vince su .footer-social a:hover e lasciava
   l'icona verde anche al passaggio del mouse. Dal <li> lo ereditano sia
   l'ancora sia lo stroke dell'SVG.

   transform: none perche' core ingrandisce l'icona del 10% al passaggio del
   mouse (.wp-block-social-link:hover): nel riferimento non succede. */
.footer-social .wp-social-link {
	color: var(--wp--preset--color--secondary);
	transition: color var(--wp--custom--transition);
}

.footer-social .wp-social-link:hover {
	color: var(--wp--preset--color--primary-dark);
	transform: none;
}

.footer-social a {
	transition: color var(--wp--custom--transition), text-decoration-color var(--wp--custom--transition);
}

/* core dimensiona le icone a 1em con .wp-block-social-links .wp-social-link svg:
   serve una specificita' maggiore per tornare ai 22px del riferimento. */
.footer-social.wp-block-social-links .wp-social-link svg {
	width: 22px;
	height: 22px;
	display: inline;
}

/* Le icone del riferimento sono a contorno. core impone fill:currentColor,
   che batte l'attributo fill="none" del markup e le rende sagome piene:
   il fill va annullato anche sulle forme figlie. */
.footer-social.wp-block-social-links .wp-social-link svg,
.footer-social.wp-block-social-links .wp-social-link svg * {
	fill: none;
	stroke: currentColor;
}

/* core rende l'ancora un flex box alto quanto l'icona; nel riferimento e' un
   <a> con l'SVG inline, quindi la riga e' alta quanto la line-height. */
.footer-social.wp-block-social-links .wp-social-link a {
	display: block;
	font-size: 1rem;
	line-height: 1.6;
	padding: 0;
}

.footer-links {
	display: contents;
}

.footer-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* h3 e non h4 come nel riferimento: dopo un <h2> di sezione il salto a h4
   rompe la scala delle intestazioni, ed e' l'unico rilievo di accessibilita'
   che Lighthouse trova in pagina. Il livello non si vede: corpo e peso
   restano quelli di .footer-col h4 di components.css. */
.footer-col h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 6px;
}

/* I link della colonna sono una lista (core/list): la lista prende lo stesso
   gap che nell'originale separava gli <a> fratelli. */
.footer-col ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-col li {
	display: block;
}

/* larghezza pari al testo, come i flex item del riferimento; block e non
   inline-block, altrimenti la line box aggiunge il discendente a ogni riga */
.footer-col a {
	display: block;
	width: fit-content;
}

.footer-col a {
	font-size: 1rem;
	line-height: 1.4;
	transition: color var(--wp--custom--transition), text-decoration-color var(--wp--custom--transition);
}

.footer-col a:hover {
	color: var(--wp--preset--color--secondary);
}

.footer-bottom {
	padding-block: 22px;
}

.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.footer-bottom p {
	font-size: .8rem;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* .footer-bottom p vale solo per la riga di copyright nel riferimento */
.footer-bottom .footer-legal {
	display: flex;
	gap: 24px;
	font-size: 1rem;
	line-height: 1.6;
}

.footer-legal a {
	font-size: .8rem;
	color: var(--wp--preset--color--text-muted);
	transition: color var(--wp--custom--transition), text-decoration-color var(--wp--custom--transition);
}

.footer-legal a:hover {
	color: var(--wp--preset--color--secondary);
}

/* Loghi istituzionali del cofinanziamento: striscia dedicata sopra la riga legale */
.footer-funding {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	flex-wrap: wrap;
	padding-top: 32px;
	padding-bottom: 8px;
	border-top: 1px solid var(--wp--preset--color--border-line);
}

/* Larghezza + height:auto (non l'inverso): con max-width al 100% dell'immagine
   il browser scala in proporzione, senza schiacciare il logo sugli schermi stretti. */
.footer-funding-logo {
	margin: 0;
}

.footer-funding-logo img {
	height: auto;
	max-width: 100%;
}

.footer-funding-logo--ue img {
	width: 267px;
}

.footer-funding-logo--masaf img {
	width: 331px;
}

.footer-funding-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-funding-note {
	max-width: 34ch;
	font-size: .75rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 960px) {
	.footer-inner {
		grid-template-columns: 1fr 1fr;
	}

	.footer-brand {
		grid-column: span 2;
	}
}

@media (max-width: 720px) {
	.footer-inner {
		grid-template-columns: 1fr;
	}

	.footer-brand {
		grid-column: 1;
	}

	.footer-funding {
		gap: 28px;
	}

	.footer-funding-logo--ue img {
		width: 210px;
	}

	.footer-funding-logo--masaf img {
		width: 262px;
	}

	.footer-funding-note {
		max-width: none;
	}
}

/* ─── Area cliccabile ────────────────────────────────── */
/* I link del footer sono alti 20-22px, sotto i 24px minimi che le WCAG
   chiedono per un bersaglio tattile. Il padding allarga l'area e il margine
   negativo uguale e contrario lascia il layout dov'era: la scatola di margine
   resta della misura di prima, quindi il gap delle colonne non cambia. */
.footer-col a,
.footer-legal a,
.footer-credit {
	padding-block: 3px;
	margin-block: -3px;
}

/* L'icona social e' larga 22px: mancano due pixel al minimo. La specificita'
   deve pareggiare quella della regola qui sopra, che azzera il padding. */
.footer-social.wp-block-social-links .wp-social-link a {
	padding: 1px;
	margin: -1px;
}