/* =========================================================================
   Piede.
   Navy pieno: chiude la pagina come le fasce profonde chiudono le sezioni,
   e fa da fondo scuro dopo qualunque colore di corso venga sopra.
   ========================================================================= */

.piede {
	background: var(--navy-scuro);
	color: #fff;
	margin-top: var(--fascia-g);
}

/* Quando l'ultima cosa della pagina e' gia' una fascia colorata, lo stacco
   sopra il piede e' di troppo: due fondi pieni attaccati stanno meglio.

   La versione precedente non agganciava niente: cercava una classe `fascia`
   nuda che nessun elemento porta, e comunque il fratello del piede e' sempre
   <main>, mai una fascia. Risultato: su copertina e pagine corso, che
   finiscono con la chiamata rossa, restava un vuoto bianco di 4-8rem. */
.contenuto:has( > * > .chiamata:last-child ),
.contenuto:has( > .chiamata:last-child ) { margin-bottom: 0; }

.contenuto:has( .chiamata ) + .piede { margin-top: 0; }

.piede a { color: #fff; }

.piede-alto { padding-block: var(--fascia); }

.piede-griglia {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--s10) var(--s8);
	align-items: start;
}

.piede-marchio img { height: 3rem; width: auto; }

/* Il logo e' fatto per fondi chiari. Qui sta su navy, quindi gli metto sotto
   una pastiglia bianca: e' la stessa soluzione della locandina, che nel piede
   mette il marchio su bianco. */
.piede-marchio .custom-logo-link,
.piede-marchio .marchio-testo {
	display: inline-block;
	background: #fff;
	padding: var(--s3) var(--s4);
	border-radius: var(--raggio-g);
}

/* Senza questo il marchio testuale — che compare se il logo viene tolto —
   sarebbe bianco sulla pastiglia bianca: `.piede a { color:#fff }` vince
   su `.marchio-testo`. */
.piede-marchio .marchio-testo { color: var(--navy); }

.piede-frase {
	margin: var(--s5) 0 var(--s4);
	font-size: var(--t-picc);
	max-width: 34ch;
	opacity: .78;
}

.piede-recapiti {
	font-style: normal;
	font-size: var(--t-picc);
	line-height: 1.75;
}

.piede-recapiti a { text-decoration: none; font-weight: var(--peso-medio); }
.piede-recapiti a:hover { text-decoration: underline; }

/* Bianco, non il colore del corso: il ripiego `#fff` non scattava mai perche'
   --corso e' sempre definita, e a 12px su navy scuro il rosso faceva 3,78:1,
   l'arancione ancora meno. */
.widget-titolo {
	margin: 0 0 var(--s4);
	font-size: 0.75rem;
	font-weight: var(--peso-nero);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

/* Vale sia per i widget sia per le colonne che il tema scrive da se'.
   Le aree widget del piede non sono popolate, quindi il caso REALE e' sempre
   il secondo: puntare solo `.widget` lasciava gli elenchi coi pallini e il
   rientro del browser in ogni pagina del sito. */
.piede .widget ul,
.piede-colonna ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s2);
	font-size: var(--t-picc);
}

.piede .widget a,
.piede-colonna a { text-decoration: none; opacity: .82; }

.piede .widget a:hover,
.piede-colonna a:hover { opacity: 1; text-decoration: underline; }

/* --- riga finale ------------------------------------------------------------ */

.piede-basso {
	border-top: 1px solid rgba(255, 255, 255, .16);
	padding-block: var(--s5);
	font-size: var(--t-mini);
}

.piede-basso-in {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3) var(--s6);
	align-items: center;
	justify-content: space-between;
}

.piede-diritti { margin: 0; opacity: .7; }

/* La firma dell'agenzia sta dentro la riga dei diritti, quindi ne eredita
   l'opacita': su questo navy fa 6,5:1, che basta. Va sottolineata perche' ha lo
   STESSO colore del testo intorno, e un collegamento non puo' distinguersi dal
   colore soltanto (WCAG 1.4.1). */
.piede-firma {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
	/* Su telefono la riga va a capo e il nome si spezzava in «Le» / «Due G
	   Creators»: un nome proprio non si taglia. Sono 111px, ci stanno anche a
	   375. */
	white-space: nowrap;
}

.piede-firma:hover,
.piede-firma:focus-visible { text-decoration-thickness: 2px; }

.menu-legale {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-legale a { text-decoration: none; opacity: .7; }
.menu-legale a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 60rem) {
	.piede-griglia { grid-template-columns: 1fr 1fr; }
	.piede-marchio { grid-column: 1 / -1; }
}

@media (max-width: 34rem) {
	.piede-griglia { grid-template-columns: 1fr; gap: var(--s8); }
}