/*
 * Footer del sito: logo e frase, tre menu più i social, note legali.
 * Mobile first: due colonne (logo a tutta riga); da 600px una riga sola.
 */

.on-footer {
	padding: 56px var(--on-gutter) 28px;
}

.on-footer__in {
	max-width: var(--on-container);
	margin: 0 auto;
}

.on-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 20px;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--on-line-inv);
}

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

/*
 * Da 600px: il logo più largo, poi una colonna per ogni menu che esiste davvero
 * (le colonne vuote non si stampano, la griglia non lascia buchi).
 */
@media (min-width: 600px) {
	.on-footer__cols {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		grid-template-columns: minmax(0, 1.4fr);
	}

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

@media (min-width: 901px) {
	.on-footer {
		padding-top: 80px;
	}

	.on-footer__cols {
		gap: 32px;
		padding-bottom: 56px;
	}
}

.on-footer__logo {
	display: block;
	width: 140px;
	height: auto;
}

.on-footer__claim {
	max-width: 30ch;
	margin: 16px 0 0;
	color: var(--on-muted);
	font-size: var(--on-fs-small);
	line-height: var(--on-lh-body);
}

.on-footer__email {
	margin: 12px 0 0;
	font-size: var(--on-fs-small);
}

.on-footer__email a {
	color: var(--on-white);
	text-underline-offset: 4px;
}

/*
 * Titoli delle colonne: il prototipo li fa in --green-soft, che scene.css:623 riporta a #008D33
 * (home.css:444). Selettore con h2 perché la Theme Style del kit (.elementor-kit-N h2)
 * altrimenti imporrebbe la misura dei titoli di sezione.
 */
.on-footer h2.on-footer__titolo {
	margin: 0 0 14px;
	color: var(--on-green);
	font-family: var(--on-font-cond);
	font-size: var(--on-fs-small);
	font-weight: 700;
	letter-spacing: var(--on-ls-label);
	line-height: 1.2;
	text-transform: uppercase;
}

.on-footer__menu {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sul telefono ogni link è alto 44px senza spostare l'impaginato */
.on-footer__menu a {
	display: inline-block;
	margin: -7px 0;
	padding: 7px 0;
	color: inherit;
	text-decoration: none;
}

.on-footer__menu a:hover,
.on-footer__legali-menu a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (min-width: 901px) {
	.on-footer__menu a {
		margin: 0;
		padding: 0;
	}
}

.on-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px 24px;
	margin-top: 28px;
	color: var(--on-muted);
	font-size: var(--on-fs-small);
}

.on-footer__copy {
	margin: 0;
}

.on-footer__piva {
	margin-left: .75em;
}

.on-footer__legali-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.on-footer__legali-menu a {
	display: inline-block;
	padding: 4px 0;
	color: inherit;
	text-decoration: none;
}