/**
 * Footer — restyling "professionale e concreto".
 *
 * Footer principale (footer-home), superficie --ags-forest, usato su tutte le pagine.
 *
 * Dipende esclusivamente dai token di ags-tokens.css: nessun valore colore
 * hardcoded. Il foglio va compilato con Laravel Mix (webpack.mix.js) e
 * incluso nel layout dopo frontend.css: registrazione a cura del supervisor.
 */

.ags-footer
{
	font-family: var(--ags-font);
}

.ags-footer__inner
{
	margin-inline:  auto;
	max-width:      1240px;
	padding-inline: clamp(var(--ags-space-3), 4vw, var(--ags-space-5));
}

/* ---------- Superfici ---------- */

.ags-footer--dark
{
	--ags-footer-siepe: clamp(56px, 7vw, 120px);

	/* La siepe fotografica copre tutto il footer, come nel footer originale.
	   Il profilo delle foglie resta sul bordo alto e si staglia sulla pagina;
	   sotto, un velo verde bosco leggero tiene leggibili i link senza coprire
	   la fotografia. L'ultimo strato è il ripiego in tinta se l'immagine non
	   arriva: parte sotto il profilo, quindi non riempie gli spazi fra le foglie. */
	background:
		linear-gradient(
			to bottom,
			transparent 0,
			transparent var(--ags-footer-siepe),
			color-mix(in srgb, var(--ags-forest) 34%, transparent) calc(var(--ags-footer-siepe) * 1.8),
			color-mix(in srgb, var(--ags-forest) 58%, transparent) 100%
		),
		var(--ags-footer-siepe-img) center top / cover no-repeat,
		linear-gradient(to bottom, transparent var(--ags-footer-siepe), var(--ags-forest) var(--ags-footer-siepe));
	color:         var(--ags-sand);
	padding-block: calc(var(--ags-footer-siepe) + var(--ags-space-5)) var(--ags-space-4);
}

/* ---------- Griglia del footer principale ---------- */

.ags-footer__grid
{
	display:               grid;
	gap:                   var(--ags-space-5) var(--ags-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 576px)
{
	.ags-footer__grid
	{
		grid-template-columns: repeat(2, 1fr);
	}

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

@media (min-width: 992px)
{
	.ags-footer__grid
	{
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}

	.ags-footer__brand
	{
		grid-column: auto;
	}
}

/* ---------- Brand ---------- */

.ags-footer__logo-link
{
	display: inline-block;
}

/* Il logo contiene anche lo slogan: sotto i 240px la seconda riga non si legge. */
.ags-footer__logo
{
	height:    auto;
	max-width: 240px;
	width:     100%;
}

.ags-footer__tagline
{
	font-size:   0.9375rem;
	line-height: 1.6;
	margin:      var(--ags-space-3) 0 0;
	max-width:   42ch;
	opacity:     0.85;
}

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

.ags-footer__social
{
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--ags-space-1);
	list-style: none;
	margin:     var(--ags-space-3) 0 0;
	padding:    0;
}

.ags-footer__social-link
{
	align-items:     center;
	border:          1px solid color-mix(in srgb, var(--ags-sand) 45%, transparent);
	border-radius:   50%;
	color:           var(--ags-sand);
	display:         inline-flex;
	font-size:       1.0625rem;
	height:          44px;
	justify-content: center;
	text-decoration: none;
	transition:      background-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1), transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
	width:           44px;
}

.ags-footer__social-link:hover
{
	background:   var(--ags-sand);
	border-color: var(--ags-sand);
	color:        var(--ags-forest);
	transform:    translateY(-2px);
}

/* ---------- Titoli di colonna ---------- */

.ags-footer__heading
{
	/* Colore del logotipo SoftInnova (.soft in resources/css/app.css): richiesto per dare
	   risalto ai titoli di colonna, in deroga alla sola palette AGS di questo file. */
	color:          #f5a118;
	font-size:      0.8125rem;
	font-weight:    700;
	letter-spacing: 0.08em;
	margin:         0 0 var(--ags-space-2);
	text-transform: uppercase;
}

/* ---------- Navigazione ---------- */

.ags-footer__nav
{
	list-style: none;
	margin:     0;
	padding:    0;
}

/* Stessa sottolineatura "disegnata al passaggio" del credito SoftInnova in fondo alla
   pagina (vedi .ags-credit-logo): coerenza tra i due unici link testuali del footer. */
.ags-footer__link
{
	background-color:    transparent;
	background-image:    linear-gradient(currentcolor, currentcolor);
	background-position: 0 100%;
	background-repeat:   no-repeat;
	background-size:     0% 1px;
	border:              0;
	color:               var(--ags-sand);
	cursor:              pointer;
	display:             inline-block;
	font:                inherit;
	padding:             var(--ags-space-1) 0;
	text-align:          left;
	text-decoration:     none;
	transition:          background-size 0.35s var(--ags-ease-out), color 0.2s ease;
}

.ags-footer--dark .ags-footer__link:hover,
.ags-footer--dark .ags-footer__link:focus-visible
{
	background-size: 100% 1px;
	color:           var(--ags-white);
}

/*
 * Su superficie scura il focus ring verde definito in ags-tokens.css ha
 * contrasto insufficiente: si mantiene lo stesso outline (2px, offset 2px)
 * cambiandone solo il colore. Il ring resta ben visibile da tastiera.
 */
.ags-footer--dark :focus-visible
{
	outline-color: var(--ags-cream);
}

/* ---------- Barra inferiore ---------- */

.ags-footer__divider
{
	border:       0;
	border-top:   1px solid var(--ags-sand);
	margin-block: var(--ags-space-5) 0;
	opacity:      0.25;
}

.ags-footer__bottom
{
	display:         flex;
	flex-wrap:       wrap;
	gap:             var(--ags-space-1) var(--ags-space-4);
	justify-content: space-between;
	margin-top:      var(--ags-space-4);
}

.ags-footer__copyright,
.ags-footer__credits
{
	font-size: 0.875rem;
	margin:    0;
}

.ags-footer__credits-link
{
	align-items:     baseline;
	color:           inherit;
	-moz-column-gap:      var(--ags-space-1);
	     column-gap:      var(--ags-space-1);
	display:         inline-flex;
	flex-wrap:       wrap;
	text-decoration: none;
	transition:      transform 0.25s var(--ags-ease-out);
}

.ags-footer__credits-link:hover,
.ags-footer__credits-link:focus-visible
{
	transform: translateY(-1px);
}

.ags-footer__credits-link:focus-visible
{
	border-radius:  4px;
	outline:        2px solid color-mix(in srgb, var(--ags-sand) 70%, transparent);
	outline-offset: 4px;
}

/* Testo introduttivo attenuato, per dare gerarchia al logotipo che segue. */
.ags-footer__credits-label
{
	color: color-mix(in srgb, var(--ags-sand) 62%, transparent);
}

/* Logotipo SoftInnova: i colori arrivano da .soft e .innova (resources/css/app.css).
   Un logotipo è esente dai requisiti di contrasto; il nome leggibile resta nello
   span nascosto per i lettori di schermo. La sottolineatura si disegna al passaggio
   invece di comparire di colpo: un tocco premium coerente con lo stile del pulsante
   "torna su" qui accanto. */
.ags-credit-logo
{
	background-image:    linear-gradient(currentcolor, currentcolor);
	background-position: 0 100%;
	background-repeat:   no-repeat;
	background-size:     0% 1px;
	font-weight:          800;
	letter-spacing:       0.03em;
	padding-bottom:       2px;
	transition:           background-size 0.35s var(--ags-ease-out);
	white-space:          nowrap;
}

.ags-footer__credits-link:hover .ags-credit-logo,
.ags-footer__credits-link:focus-visible .ags-credit-logo
{
	background-size: 100% 1px;
}

/* Il pulsante "torna su" è fisso in basso a destra: la riga finale gli lascia
   spazio, così il credito non finisce sotto il pulsante a fine pagina. */
.ags-footer__bottom
{
	padding-right: calc(5vw + 44px + var(--ags-space-2));
}

@media (prefers-reduced-motion: reduce)
{
	.ags-footer__social-link
	{
		transition: none;
	}

	.ags-footer__social-link:hover
	{
		transform: none;
	}

	.ags-footer__credits-link,
	.ags-credit-logo,
	.ags-footer__link
	{
		transition: none;
	}

	.ags-footer__credits-link:hover,
	.ags-footer__credits-link:focus-visible
	{
		transform: none;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767.98px)
{
	.ags-footer--dark
	{
		padding-block: calc(var(--ags-footer-siepe) + var(--ags-space-4)) var(--ags-space-3);
	}

	.ags-footer__bottom
	{
		margin-top: var(--ags-space-4);
	}

	.ags-footer__divider
	{
		margin-block-start: var(--ags-space-5);
	}

	/* Voci più raccolte: 36px restano comodi al tocco perché il link occupa tutta la
	   larghezza della colonna, e la lista si legge come un gruppo unico. */
	.ags-footer__link
	{
		align-items:                 center;
		border-radius:               var(--ags-radius-control);
		display:                     flex;
		min-height:                  36px;
		padding-block:               4px;
		transition:                  background-color 0.6s var(--ags-ease-out), color 0.6s var(--ags-ease-out), transform 0.4s var(--ags-ease-out);
		-webkit-tap-highlight-color: transparent;
	}

	/* Su touch l'hover resta "incollato" dopo il tap: niente sottolineatura. Al tocco la
	   voce si accende di colpo su una pastiglia chiara e poi sfuma lentamente, così il
	   segnale resta visibile anche dopo aver sollevato il dito. */
	.ags-footer--dark .ags-footer__link:hover
	{
		background-size: 0% 1px;
	}

	.ags-footer--dark .ags-footer__link:active
	{
		background-color:    color-mix(in srgb, var(--ags-white) 16%, transparent);
		color:               var(--ags-white);
		transform:           scale(0.97);
		transition-duration: 0s;
	}
}

/* ---------- Mobile stretto: colonna singola centrata ---------- */

/* Sotto i 576px la griglia è già a una colonna (vedi sopra): il blocco marca
   e le tre liste restavano allineate a sinistra come un modulo di form,
   mentre qui sono la chiusura di pagina. Centrate leggono meglio su una
   colonna stretta e restano scannerizzabili quanto allineate a sinistra. */
@media (max-width: 575.98px)
{
	.ags-footer__brand
	{
		text-align: center;
	}

	.ags-footer__tagline
	{
		margin-inline: auto;
	}

	.ags-footer__social
	{
		justify-content: center;
	}

	.ags-footer__section
	{
		text-align: center;
	}

	.ags-footer__heading
	{
		text-align: center;
	}

	/* Larghezza piena: "Accedi" e' un <button>, che a differenza dei link resta largo quanto
	   il testo e finiva attaccato a sinistra invece che centrato. */
	.ags-footer__link
	{
		justify-content: center;
		width:           100%;
	}

	.ags-footer__bottom
	{
		flex-direction: column;
		align-items:    center;
		/* Riga centrata: nessuno spazio riservato né a destra né sotto. Il pulsante
		   WhatsApp resta fisso in basso anche qui, ma sale insieme al torna-su quando
		   questa riga entra in vista (vedi .whatsapp-float-wrapper.is-sopra-crediti in
		   frontend.css), quindi non serve riservargli spazio a priori. */
		padding-right:  0;
		padding-bottom: 0;
		text-align:     center;
	}
}