/* ESL — Footer. Il markup sta in esl-footer.php (shortcode [esl_footer]).
   Sta in un file e non dentro lo shortcode perché in linea qualcosa lo svuotava
   nel browser: qui invece è una foglia di stile normale, che passa dalla cache. */

.esl-ft{
	--ft-oro:#b08a3a; --ft-oro-chiaro:#cfa955;
	--ft-testo:#d3dad1; --ft-tenue:#8d998e;
	font-family:'DM Sans',system-ui,-apple-system,sans-serif;
	color:var(--ft-testo);
	padding:72px 0 0;
}
.esl-ft *{box-sizing:border-box}
.esl-ft a{color:inherit;text-decoration:none}
.esl-ft-in{max-width:1180px;margin:0 auto;padding:0 clamp(24px,3vw,44px)}

.esl-ft-griglia{display:grid;grid-template-columns:1.1fr 1fr 1.15fr;gap:clamp(30px,4.4vw,64px);align-items:start}

.esl-ft-marchio{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.esl-ft-logo{width:230px;height:auto;max-width:100%;display:block}
/* I social stanno sotto i contatti: sono un modo per farsi sentire
   quanto il telefono, e così le tre colonne finiscono alla stessa altezza. */
.esl-ft-soc{display:flex;gap:13px;margin-top:26px}
.esl-ft-soc a{
	width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;
	display:grid;place-items:center;transition:border-color .18s,background-color .18s;
}
.esl-ft-soc a:hover,.esl-ft-soc a:focus-visible{border-color:var(--ft-oro);background-color:rgba(176,138,58,.16)}
.esl-ft-soc svg{width:16px;height:16px;fill:#cfd6cd;transition:fill .18s}
.esl-ft-soc a:hover svg,.esl-ft-soc a:focus-visible svg{fill:var(--ft-oro-chiaro)}

.esl-ft-etichetta{
	font-size:15px;letter-spacing:.17em;text-transform:uppercase;
	color:var(--ft-oro);font-weight:600;margin:0 0 24px;
}
.esl-ft-cip{display:inline-block;width:32px;height:1px;background:var(--ft-oro);vertical-align:middle;margin-left:11px}

.esl-ft-voci{display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.esl-ft-voci a{font-size:15px;line-height:1.3;letter-spacing:.03em;color:var(--ft-testo);transition:color .18s,padding-left .18s}
.esl-ft-voci a:hover,.esl-ft-voci a:focus-visible{color:var(--ft-oro-chiaro);padding-left:5px}

.esl-ft-contatti{display:flex;flex-direction:column;gap:16px}
.esl-ft-riga{display:flex;gap:12px;align-items:flex-start}
.esl-ft-riga svg{
	width:17px;height:17px;flex:0 0 auto;margin-top:3px;
	fill:none;stroke:var(--ft-oro);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.esl-ft-val{font-size:15px;line-height:1.5;color:var(--ft-testo);transition:color .18s}
a.esl-ft-val:hover,a.esl-ft-val:focus-visible{color:var(--ft-oro-chiaro)}
/* La seconda riga dell'indirizzo è uguale alla prima: è un indirizzo solo,
   spezzato su due righe, non una didascalia. */
.esl-ft-picc{display:block;font-size:15px;line-height:1.5;color:var(--ft-testo);margin-top:1px;letter-spacing:.03em}

.esl-ft-coda{
	border-top:1px solid rgba(255,255,255,.11);
	margin-top:54px;padding:24px 0 30px;
	display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
	font-size:13px;letter-spacing:.04em;color:var(--ft-tenue);
}
.esl-ft-legali{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.esl-ft-legali a,.esl-ft .esl-ft-cookie{
	color:var(--ft-tenue);border-bottom:1px solid transparent;
	transition:border-color .18s,color .18s;
}
.esl-ft-legali a:hover,.esl-ft-legali a:focus-visible{color:var(--ft-oro-chiaro);border-bottom-color:var(--ft-oro-chiaro)}
.esl-ft-sep{color:rgba(255,255,255,.3)}

/* Il pulsante dei cookie deve SEMBRARE un link, ma <button> serve a Complianz:
   aggancia il clic su button.cmplz-manage-consent, con un <a> non riapre nulla.
   Il tema hello-elementor però colora di rosa (#c36) ogni <button> con il
   selettore [type=button], che pesa quanto una classe e viene caricato dopo:
   per vincere serve una classe in più davanti, .esl-ft. Non togliere. */
.esl-ft .esl-ft-cookie{
	background:none;border:0;border-bottom:1px solid transparent;border-radius:0;
	padding:0;margin:0;width:auto;text-align:inherit;
	font:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit;
	white-space:normal;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.esl-ft .esl-ft-cookie:hover,.esl-ft .esl-ft-cookie:focus,.esl-ft .esl-ft-cookie:focus-visible{
	background:none;color:var(--ft-oro-chiaro);border-bottom-color:var(--ft-oro-chiaro);
}

/* Sotto i 1100px il tasto verde di WhatsApp, che sta fisso in basso a destra,
   finisce sopra le note legali: si mandano a capo, così restano a sinistra. */
@media (max-width:1100px){
	.esl-ft-coda{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:1024px){
	.esl-ft-griglia{grid-template-columns:1fr 1fr 1.15fr;gap:36px}
}
@media (max-width:780px){
	.esl-ft{padding-top:56px}
	.esl-ft-griglia{grid-template-columns:1fr 1fr;gap:38px}
	.esl-ft-marchio{grid-column:1/-1}

	/* Da qui in giù si tocca col dito, e le voci erano alte 20px. Si allarga
	   l'area sensibile con del padding e si toglie quasi tutto lo spazio fra
	   una e l'altra, così il passo resta quello e il footer non si allunga.
	   Su email e telefono il padding è annullato da un margine negativo: se no
	   il testo scenderebbe e non sarebbe più allineato alla sua iconcina. */
	.esl-ft-voci{gap:2px}
	.esl-ft-voci a{padding:10px 0}
	.esl-ft-legali{gap:7px}
	.esl-ft-legali a,.esl-ft .esl-ft-cookie{padding:7px 0}
	a.esl-ft-val{display:inline-block;padding:9px 0;margin:-9px 0}
}
@media (max-width:560px){
	.esl-ft-griglia{grid-template-columns:1fr;gap:36px}
	.esl-ft-coda{flex-direction:column;align-items:flex-start;gap:12px;margin-top:44px}
	/* Sul telefono le tre note legali stanno su una riga sola e il tasto verde
	   di WhatsApp, fisso nell'angolo, copre l'ultima parola: si tiene libero
	   l'angolo così l'ultima voce va a capo e resta a sinistra, lontana.
	   Andando a capo i puntini di separazione restavano appesi a fine riga:
	   spariscono, e al loro posto basta un po' più di spazio fra le voci. */
	.esl-ft-legali{padding-right:76px;gap:20px}
	.esl-ft-sep{display:none}
}
@media (prefers-reduced-motion:reduce){.esl-ft *{transition:none!important}}