/*
 * GOYN — Footer
 *
 * Fonte: src/components/Footer.jsx e le classi .grid-footer / .footer-brand /
 * .foot-link di src/styles.css del progetto React.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-footer`.
 *
 * DAL TEMA, NON RISCRITTI: `.goyn-accent` (Playfair corsivo), `.goyn-label`
 * (Oswald maiuscolo).
 *
 * ⚠️ Il filetto delle voci NON è `.goyn-link-sweep` del tema. Quella classe è
 *    tarata su un richiamo grande (12.5px, spaziatura 2, padding sotto di 6px, e
 *    un secondo filetto sempre visibile al 30%). Qui la voce è un collegamento di
 *    elenco da 14px con un solo filetto che compare in hover: usare la classe
 *    condivisa vorrebbe dire sovrascriverne metà.
 *
 * Nessuna animazione d'entrata: non ce l'ha nemmeno l'originale, ed è giusto —
 * è l'ultima cosa della pagina, farla arrivare in ritardo non aiuta nessuno.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. La griglia
 *   3. Il marchio
 *   4. Le colonne di collegamenti
 *   5. La riga legale
 *   6. Responsive
 *   7. prefers-reduced-motion
 */

/* ============================================================
   1. Radice e costanti locali
   ============================================================ */

.goyn-footer {
	--goyn-ft-bg: var(--goyn-petrol-deep, #163e46);
	--goyn-ft-text: var(--goyn-cream-72, rgba(233, 229, 217, 0.75));
	--goyn-ft-accent: var(--goyn-peach, #e8c39f);
	--goyn-ft-rule: var(--goyn-cream-12, rgba(233, 229, 217, 0.14));
	--goyn-ft-legal: var(--goyn-cream-50, rgba(233, 229, 217, 0.5));
	--goyn-ft-logo-bg: var(--goyn-cream, #e9e5d9);

	--goyn-ft-pad-top: 70px;
	--goyn-ft-pad-bottom: 34px;
	--goyn-ft-gap: 40px;
	--goyn-ft-logo-h: 118px;
	--goyn-ft-brand-max: 280px;
	--goyn-ft-col-brand: 1.4fr;
	--goyn-ft-cols: 3;

	padding: var(--goyn-ft-pad-top) var(--goyn-pad, clamp(22px, 5vw, 80px)) var(--goyn-ft-pad-bottom);
	color: var(--goyn-ft-text);
	background-color: var(--goyn-ft-bg);
}

/* ============================================================
   2. La griglia
   ------------------------------------------------------------
   Il marchio più largo delle colonne di collegamenti: 1.4 contro 1 ciascuna,
   come nell'originale.

   ⚠️ Il numero di colonne è una variabile scritta dal template, non
      `repeat(auto-fit, …)`: senza un limite quest'ultimo genera trentadue tracce
      e ventotto restano larghe zero. Verificato leggendo
      `gridTemplateColumns` in pagina.

   Il filetto sotto la griglia è quello che separa dalla riga legale.
   ============================================================ */

.goyn-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--goyn-ft-col-brand)) repeat(var(--goyn-ft-cols), minmax(0, 1fr));
	gap: var(--goyn-ft-gap);
	padding-bottom: 46px;
	border-bottom: 1px solid var(--goyn-ft-rule);
}

/* ============================================================
   3. Il marchio
   ============================================================ */

/*
 * La tessera chiara dietro il logo. `inline-block` e non `block`: la tessera
 * deve essere larga quanto il logo, non quanto la colonna.
 */
.goyn-footer__logo {
	display: inline-block;
	padding: 6px;
	background-color: var(--goyn-ft-logo-bg);
}

/*
 * ⚠️ Regola discendente e non una classe sola: `.elementor img` imposta
 *    `height: auto` con specificità (0,1,1) e batterebbe `.goyn-footer__logo-img`.
 *    È la stessa trappola annotata per il logo dell'header.
 */
.goyn-footer .goyn-footer__logo-img {
	display: block;
	width: auto;
	height: var(--goyn-ft-logo-h);
}

.goyn-footer__tagline {
	margin: 10px 0 0;
	font-size: 16px;
	color: var(--goyn-ft-accent);
}

.goyn-footer__address {
	max-width: var(--goyn-ft-brand-max);
	margin: 18px 0 0;
	font-size: 13px;
	line-height: 1.6;
}

/* ============================================================
   4. Le colonne di collegamenti
   ============================================================ */

.goyn-footer__col-title {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--goyn-ft-accent);
}

.goyn-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * `width: fit-content` sulla voce: senza, il collegamento è un blocco largo
 * quanto la colonna e resta cliccabile anche molto a destra del testo — un
 * bersaglio invisibile.
 *
 * Il padding verticale è la superficie da toccare: 5px sul desktop, 9 sotto gli
 * 860px, come nell'originale.
 */
.goyn-footer__link {
	display: block;
	width: fit-content;
	padding: 5px 0;
	font-size: 14px;
	color: inherit;
	text-decoration: none;
}

/*
 * Il filetto che scorre da sinistra. Sta sullo `<span>` dentro il link (lo
 * aggiunge `link_before` / `link_after` nel template) perché deve essere largo
 * quanto il testo, non quanto la colonna.
 */
.goyn-footer__link span {
	position: relative;
	display: inline-block;
	transition: color var(--goyn-dur, 0.5s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-footer__link span::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--goyn-ft-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--goyn-dur, 0.5s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* `:focus-visible` accanto a `:hover`: sono collegamenti veri e chi naviga da
   tastiera deve vedere dove si trova. L'originale ha solo l'hover. */
.goyn-footer__link:hover span,
.goyn-footer__link:focus-visible span {
	color: var(--goyn-ft-accent);
}

.goyn-footer__link:hover span::after,
.goyn-footer__link:focus-visible span::after {
	transform: scaleX(1);
}

/* Voce che corrisponde alla pagina corrente: acceso e con il filetto già
   disteso. Non è nell'originale — che non ha un concetto di pagina corrente —
   ma le classi le mette WordPress e non usarle sarebbe uno spreco. */
.goyn-footer__list .current-menu-item > .goyn-footer__link span {
	color: var(--goyn-ft-accent);
}

.goyn-footer__list .current-menu-item > .goyn-footer__link span::after {
	transform: scaleX(1);
}

/* ============================================================
   5. La riga legale
   ============================================================ */

.goyn-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 24px;
	font-size: 11px;
	letter-spacing: 1.5px;
	color: var(--goyn-ft-legal);
}

.goyn-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.goyn-footer__legal-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--goyn-dur, 0.5s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-footer__legal-link:hover,
.goyn-footer__legal-link:focus-visible {
	color: var(--goyn-ft-accent);
}

/*
 * Il "torna su" sale di 3px in hover, come nell'originale. La freccia è dentro
 * un `<span>` suo, così si può muovere lei sola se un domani servisse.
 */
.goyn-footer__top {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-footer__top:hover,
.goyn-footer__top:focus-visible {
	color: var(--goyn-ft-accent);
	transform: translateY(-3px);
}

/* ============================================================
   6. Responsive
   ------------------------------------------------------------
   Sotto gli 860px: due colonne, con il marchio a tutta larghezza sopra. Il
   marchio ha il logo e tre righe di testo — in una colonna su due starebbe
   stretto, e le colonne di collegamenti sarebbero altissime.
   ============================================================ */

@media (max-width: 860px) {
	.goyn-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.goyn-footer__brand {
		grid-column: 1 / -1;
	}

	/* Col dito la superficie comoda è più alta: 9px per lato invece di 5. */
	.goyn-footer__link {
		padding: 9px 0;
	}
}

@media (max-width: 560px) {
	/* La riga legale in colonna: su schermi stretti copyright e "torna su" agli
	   estremi lascerebbero un buco in mezzo, e il copyright andrebbe a capo male. */
	.goyn-footer__legal {
		justify-content: flex-start;
		gap: 12px;
	}
}

/* ============================================================
   7. prefers-reduced-motion
   ------------------------------------------------------------
   Il child theme azzera le durate dentro `.goyn-widget`, quindi i tre effetti
   scatterebbero invece di scorrere. Il filetto resta — è un'informazione, dice
   quale voce è sotto il puntatore — mentre lo spostamento del "torna su" si
   annulla: è decorativo e un salto di 3px è solo un tremolio.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-footer__top:hover,
	.goyn-footer__top:focus-visible {
		transform: none;
	}
}