/*
 * Mentora — header e footer.
 *
 * La barra in alto è alluminio spazzolato con quattro viti agli angoli;
 * la navigazione è un binario incassato in cui la voce corrente sporge
 * come un tasto. Il footer è metallo scuro.
 */

/* ================================================================== *
 * HEADER
 * ================================================================== */

.m-header-guscio {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 24px 0;
}

/* ------------------------------------------------------------------ *
 * LA BARRA PIENA HA BISOGNO DI PIU' LARGHEZZA DEL CONTENUTO
 *
 * Il conto, misurato a barra piena col selettore di lingua vero:
 *
 *   marchio 179 + menu 528 + profili 224 + lingue 144 + area clienti 44
 *   + quattro spazi da 16 = 1183 in inglese, 1269 in francese
 *   (il menu francese chiede 86px in piu' — misurato nel Piano 2).
 *
 * Con 1200px di guscio ne restano **1116**: la barra andava a capo gia'
 * in inglese, e il selettore non ci stava affatto.
 *
 * Allargare il guscio e non togliere pezzi: la barra e' un oggetto che
 * galleggia sopra la pagina, non un contenitore del contenuto, e non
 * deve per forza finire dove finisce il testo. Solo sopra i 1200px,
 * cioe' solo dove la barra piena si vede: sotto comanda il menu a
 * scomparsa, e un guscio largo stirerebbe una barra di due elementi.
 * ------------------------------------------------------------------ */
@media (min-width: 1200px) {
	.m-header-guscio {
		max-width: 1400px;
	}
}

.m-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 18px;
	border-radius: var(--m-r-xl);
}

/* Le viti stanno dietro a tutto il resto. */
.m-header > :not(.m-viti) {
	position: relative;
	z-index: 1;
}

/* --- Marchio --- */
.m-header__marchio {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	/* 44px anche qui: è un link, e sta in alto a sinistra dove si clicca. */
	min-height: 44px;
	text-decoration: none;
	color: var(--m-ink);
}

.m-header__nome {
	font-family: var(--m-font-display);
	/* 1.5rem cresciuto del 10%. */
	font-size: 1.65rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
	/* Avvicinato di 5px al medaglione. */
	margin-left: -5px;
}

/*
 * Il punto fa parte del logotipo, non del nome del sito: sta qui e non
 * dentro `get_bloginfo( 'name' )`, che finisce anche nel titolo della
 * scheda, nei feed e nelle email di WordPress.
 */
.m-header__nome::after {
	content: ".";
}

/* --- Il rollover del logotipo ---
 *
 * Tre cose insieme: la scritta scorre a sinistra ed entra nel cerchio,
 * il marchio fa un quarto di giro antiorario, e il colore passa da
 * bicolore a pieno. Premendo, il marchio diventa nero.
 */

/*
 * Il cerchio sta SOPRA la scritta: e' lui a mascherarla. Senza questo,
 * la scritta scorrerebbe davanti al marchio invece che dietro.
 */
.m-marchio-pila {
	z-index: 2;
}

.m-marchio__faccia {
	transition:
		opacity var(--m-dur-base) var(--m-ease-soft),
		rotate var(--m-dur-slow) var(--m-ease-spring);
}

/* Le due facce alternative stanno esattamente sopra la prima, spente. */
.m-marchio__faccia--sopra,
.m-marchio__faccia--premuto {
	position: absolute;
	top: 50%;
	left: 50%;
	/*
	 * `translate` e `rotate` come proprieta' separate, non dentro a un
	 * `transform`: cosi' il centraggio resta fermo mentre la rotazione
	 * si anima per conto suo, senza doverli riscrivere tutti e due.
	 */
	translate: -50% -50%;
	opacity: 0;
}

.m-header__marchio:hover .m-marchio__faccia,
.m-header__marchio:focus-visible .m-marchio__faccia {
	rotate: -90deg;
}

.m-header__marchio:hover .m-marchio__faccia--riposo,
.m-header__marchio:focus-visible .m-marchio__faccia--riposo {
	opacity: 0;
}

.m-header__marchio:hover .m-marchio__faccia--sopra,
.m-header__marchio:focus-visible .m-marchio__faccia--sopra {
	opacity: 1;
}

/* Mentre si preme. */
.m-header__marchio:active .m-marchio__faccia--sopra {
	opacity: 0;
}

.m-header__marchio:active .m-marchio__faccia--premuto {
	opacity: 1;
}

/*
 * Il guscio taglia la scritta al bordo SINISTRO del cerchio, non al
 * suo bordo destro: cosi' la scritta sparisce dietro al cerchio — che
 * e' opaco e sta sopra — invece di spuntare dall'altra parte. Il
 * margine negativo sposta il taglio, il padding rimette la scritta
 * dov'era; quelli verticali lasciano respirare l'ombra incisa.
 *
 * I 68px sono il cerchio (56) piu' lo stacco (12).
 */
.m-header__nome-guscio {
	overflow: hidden;
	margin: -6px 0 -6px calc(-1 * (56px + 12px));
	padding: 6px 0 6px calc(56px + 12px);
}

.m-header__nome {
	display: inline-block;
	transition: translate var(--m-dur-slow) var(--m-ease-drawer);
}

/*
 * Quanto scorre: tutta la sua larghezza piu' i 7px che la separano dal
 * cerchio (lo stacco di 12 meno i 5 di avvicinamento). Alla fine il
 * suo bordo destro e' esattamente sul bordo destro del cerchio.
 */
.m-header__marchio:hover .m-header__nome,
.m-header__marchio:focus-visible .m-header__nome {
	translate: calc(-100% - 7px);
}

/*
 * Chi ha chiesto meno movimento non vede ne' lo scorrimento ne' la
 * rotazione. Il cambio di colore resta: non e' movimento.
 */
@media (prefers-reduced-motion: reduce) {
	.m-header__marchio:hover .m-header__nome,
	.m-header__marchio:focus-visible .m-header__nome {
		translate: none;
	}

	.m-header__marchio:hover .m-marchio__faccia,
	.m-header__marchio:focus-visible .m-marchio__faccia {
		rotate: none;
	}
}

/* --- Navigazione: binario incassato, la voce corrente sporge --- */
.m-header__nav {
	display: flex;
	gap: 2px;
	padding: 4px;
	margin-inline: auto;
	border-radius: var(--m-r-md);
	background: linear-gradient(180deg, #DCD9D3, #EFEDE8);
	box-shadow: var(--m-well);
}

.m-header__voce {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	/*
	 * 12 e non 16: servivano una cinquantina di pixel per far stare la
	 * fila dei profili sulla stessa riga. La voce piu' stretta resta
	 * larga 59px, molto oltre il minimo.
	 */
	padding: 0 12px;
	border-radius: var(--m-r-sm);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--m-ink-2);
	text-decoration: none;
	transition:
		color var(--m-dur-fast) var(--m-ease-soft),
		background-color var(--m-dur-fast) var(--m-ease-soft);
}

.m-header__voce:hover {
	color: var(--m-ink);
	background: rgba(255, 255, 255, .5);
}

/* Il tasto premuto: sporge, come nella barra dei segmenti. */
.m-header__voce.is-attiva {
	color: var(--m-ink);
	background: linear-gradient(180deg, #FFFFFF, #F1EFEA);
	box-shadow:
		inset 0 1px 0 #fff,
		0 2px 4px rgba(60, 50, 40, .28);
}

/* --- Coda: lingue, CTA, menu --- */
.m-header__coda {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

/*
 * Quadrato con la sola icona. `.m-btn` e' gia' un flex centrato alto
 * 44px: qui basta togliere il padding orizzontale e fissare la
 * larghezza perche' diventi un quadrato.
 */
.m-header__cta {
	width: 44px;
	padding: 0;
	white-space: nowrap;
}

.m-header__cta-icona {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* --- I profili ---
 *
 * I marchi sono monocromatici e si disegnano con `currentColor`:
 * cambiare colore al rollover e' una riga, non tre immagini sovrapposte
 * come per il nostro marchio, che e' a piu' colori.
 */
.m-social {
	display: flex;
	align-items: center;
}

.m-social__voce {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * Alti 44px come ogni altro bersaglio della barra, ma stretti:
	 * otto quadrati da 44 sono 352px e la barra non li regge accanto
	 * al menu.
	 *
	 * 28 e non 30, da quando i profili sono otto. Il conto, misurato
	 * a barra piena: marchio 179 + menu 528 + profili + area clienti
	 * 44, piu' tre spazi da 16. In francese il menu chiede 614 invece
	 * di 528, cioe' 86px in piu', e la barra ha 1116px e non uno di
	 * piu' — e' al suo massimo, allargare la finestra non ne aggiunge.
	 *
	 * Con 30px: 1125. Nove di troppo, e la barra andava a capo.
	 * Con 28px: 1109. Sette di margine.
	 *
	 * 28 resta sopra il minimo di 24px che WCAG 2.2 AA chiede per un
	 * bersaglio, ma il margine ormai e' sottile: al prossimo profilo,
	 * o col selettore di lingua di WPML, qui non si shava piu' niente
	 * e la barra va ripensata. E' lo Step 7.
	 */
	width: 28px;
	height: 44px;
	color: var(--m-ink-3);
	transition:
		color var(--m-dur-base) var(--m-ease-soft),
		rotate var(--m-dur-slow) var(--m-ease-spring);
}

.m-social__voce svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Un quarto di giro antiorario e il colore d'accento, come il marchio. */
.m-social__voce:hover,
.m-social__voce:focus-visible {
	color: var(--m-accent);
	rotate: -90deg;
}

.m-social__voce:active {
	color: var(--m-ink);
}

/*
 * Nel footer: bianche, perche' il grigio che prendono nella barra
 * chiara qui sul metallo scuro non si vedrebbe. Il margine negativo a
 * sinistra rimette i segni in asse coi testi, che il bersaglio da 44
 * e' piu' largo del segno da 16.
 */
/*
 * La fila dei profili sta sempre in asse con l'ULTIMA voce del menu
 * accanto, qualunque essa sia — non con una voce in particolare.
 *
 * Non con un margine fisso, che varrebbe solo per il contenuto di
 * oggi, ma per costruzione, con due pezzi che lavorano insieme:
 *
 * 1. `margin-top: auto` la butta in fondo alla sua colonna, e la
 *    colonna arriva al fondo della riga perche' `.m-footer__dentro`
 *    distende i figli. Quindi il fondo della fila coincide col fondo
 *    della colonna del menu.
 * 2. ogni segno e' alto quanto una voce di quel menu (sotto): con
 *    altezze uguali, fondi allineati vuol dire centri allineati.
 *
 * Regge finche' la colonna del menu resta la piu' alta delle due. Se
 * un giorno i dati a sinistra crescessero oltre, la fila scenderebbe
 * con loro e si vedrebbe subito.
 */
.m-social--footer {
	margin-top: auto;
	/* I segni partono dal testo: il bersaglio e' piu' largo del segno. */
	margin-left: -7px;
}

/*
 * L'altezza di una voce del menu qui sotto, con la stessa formula:
 * corpo 0.8125rem per interlinea 1,35, piu' 4px di padding per lato.
 * Scritta cosi' e non come numero, perche' se cambia una delle due
 * cose il conto si rifa' da solo.
 */
.m-social--footer .m-social__voce {
	height: calc(0.8125rem * 1.35 + 8px);
}

.m-social--footer .m-social__voce {
	color: var(--m-footer-link);
}

/* Nel drawer il fondo e' pelle scura. */
.m-social--drawer {
	margin-top: 18px;
	flex-wrap: wrap;
}

.m-social--drawer .m-social__voce {
	color: var(--m-leather-text);
}

@media (prefers-reduced-motion: reduce) {

	.m-social__voce:hover,
	.m-social__voce:focus-visible {
		rotate: none;
	}
}

/* --- Pulsante del menu (solo telefono) --- */
.m-header__menu {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--m-metal-edge);
	border-radius: var(--m-r-sm);
	background-image: linear-gradient(180deg, #FFFFFF, #EDECE8 50%, #DCDAD5 51%, #E8E7E3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 4px rgba(60, 50, 40, .2);
	cursor: pointer;
}

/* I tre tratti, disegnati con le ombre: nessun elemento in più. */
.m-header__tratti,
.m-header__tratti::before,
.m-header__tratti::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--m-ink);
}

.m-header__tratti {
	position: relative;
}

.m-header__tratti::before,
.m-header__tratti::after {
	content: "";
	position: absolute;
	left: 0;
}

.m-header__tratti::before { top: -6px; }
.m-header__tratti::after { top: 6px; }

/* ================================================================== *
 * SELETTORE DI LINGUA
 *
 * Stile del tema, non il widget di WPML: porterebbe un CSS estraneo.
 * Non compare finché il sito è in una lingua sola.
 * ================================================================== */

/*
 * Una bandiera, il codice, una freccina — e la tendina.
 *
 * Prima erano tre segmenti sempre in vista: tre bersagli da 44px sulla
 * barra, per una scelta che si fa una volta sola. Adesso il comando e'
 * uno e le altre lingue stanno sotto, come ha chiesto Emanuele.
 */

.m-lingue {
	position: relative;
}

/*
 * `background-color` dichiarato, e non e' pignoleria: un `button`
 * senza fondo esplicito prende `ButtonFace` dal browser, che e'
 * `rgb(239,239,239)`. Sulla barra non si vedeva, perche' sopra c'e'
 * un gradiente opaco; nel piede, dove il gradiente e' vetro
 * trasparente, quel grigio passava sotto e il comando diventava una
 * pastiglia bianca in mezzo al metallo scuro — con «EN» chiaro sopra,
 * illeggibile. Misurato: `backgroundColor: rgb(239, 239, 239)`.
 */
.m-lingue__scelta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--m-metal-edge);
	border-radius: var(--m-r-sm);
	background-color: var(--m-metal-2);
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, rgba(0, 0, 0, .03) 2px 3px),
		linear-gradient(180deg, #FFFFFF, #EDECE8 50%, #DCDAD5 51%, #E8E7E3);
	box-shadow: var(--m-hl), 0 2px 3px rgba(60, 50, 40, .2);
	font-family: var(--m-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--m-ink);
	cursor: pointer;
}

/* La bandiera e' un rettangolo: un filo di bordo la stacca dal metallo. */
.m-lingue__bandiera {
	display: block;
	flex: 0 0 auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

.m-lingue__freccia {
	transition: transform var(--m-dur-fast) var(--m-ease-soft);
}

.m-lingue__scelta[aria-expanded="true"] .m-lingue__freccia {
	transform: rotate(180deg);
}

.m-lingue__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	min-width: 190px;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--m-metal-edge);
	border-radius: var(--m-r-md);
	background: linear-gradient(180deg, #FBF9F5, #EFEBE3);
	box-shadow: var(--m-hl), var(--m-drop);
	list-style: none;
}

/*
 * Nel piede il fondo e' metallo scuro spazzolato, quindi il comando non
 * puo' essere il metallo chiaro della barra: sparirebbe. Vetro sul
 * metallo, inchiostri chiari, testo inciso verso l'alto.
 */
.m-lingue--piede .m-lingue__scelta {
	border-color: rgba(255, 255, 255, .24);
	/*
	 * Un fondo scuro suo, e non la sola trasparenza: cosi' il testo
	 * chiaro ha il suo contrasto qualunque cosa passi sotto — la
	 * venatura del metallo, il fluido, una texture che cambia.
	 */
	background-color: rgba(18, 14, 11, .55);
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), var(--m-drop-on-dark);
	color: var(--m-leather-text);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
	letter-spacing: .1em;
}

/*
 * Aria intorno al comando: nel piede sta fra la fila dei social e il
 * menu, e appiccicato a tutti e due sembrava un errore di
 * impaginazione piu' che una scelta.
 */
.m-lingue--piede {
	margin-block: 20px 8px;
}

/*
 * Nel piede si apre verso l'alto: sotto non c'e' pagina. E centrata
 * sul comando invece che allineata a destra: nel piede il comando e'
 * centrato lui, e la tendina appesa a un angolo pendeva di lato.
 */
.m-lingue--piede .m-lingue__menu {
	top: auto;
	bottom: calc(100% + 8px);
	right: auto;
	left: 50%;
	translate: -50%;
	/* Una carta che emerge dal metallo: il distacco lo fa l'ombra. */
	box-shadow: var(--m-hl), 0 20px 36px rgba(0, 0, 0, .45), 0 4px 8px rgba(0, 0, 0, .3);
}

.m-lingue__voce {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 0.875rem;
	color: var(--m-ink);
	text-decoration: none;
}

.m-lingue__voce:hover {
	background: rgba(0, 0, 0, .05);
}

.m-lingue__voce.is-attiva {
	font-weight: 700;
	background: rgba(0, 0, 0, .06);
}

/*
 * Le lingue che non ci sono ancora: spente, non nascoste. Stessa
 * scelta dei pulsanti disattivati delle pagine prodotto.
 */
.m-lingue__voce.is-spenta {
	color: var(--m-ink-3);
	cursor: default;
}

/*
 * Spenta, non cancellata. A grigio pieno e opacita' bassa le tre
 * bandiere diventavano tre quadratini uguali: si capiva che erano
 * spente e non si capiva piu' cosa fossero. Un filo di colore resta,
 * e la differenza fra «non attiva» e «non pervenuta» si legge.
 */
.m-lingue__voce.is-spenta .m-lingue__bandiera {
	opacity: .65;
	filter: grayscale(.65);
}


/* ================================================================== *
 * MENU LATERALE — le parti che non stanno in interactive.css
 * ================================================================== */

.m-drawer__testata {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

/*
 * Il medaglione del drawer porta alla home. Il segno riempie tutto il
 * bersaglio da 44px, quindi il bordo del segno e' il bordo del link:
 * senza margini, lo stacco dal bordo del pannello e' il padding della
 * scheda, 24px — lo stesso che hanno la X a destra e tutti e due in
 * alto. Tre lati uguali.
 */
.m-drawer__casa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	text-decoration: none;
}

/* Stesso quarto di giro antiorario del marchio nella barra. */
.m-drawer__casa img {
	transition: rotate var(--m-dur-slow) var(--m-ease-spring);
}

.m-drawer__casa:hover img,
.m-drawer__casa:focus-visible img {
	rotate: -90deg;
}

@media (prefers-reduced-motion: reduce) {

	.m-drawer__casa:hover img,
	.m-drawer__casa:focus-visible img {
		rotate: none;
	}
}

.m-drawer__cta {
	margin-top: 24px;
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * LE LINGUE DENTRO IL PANNELLO
 *
 * Il pannello e' **pelle cucita** (`m-tex-pelle`), e la skill su una
 * superficie scura chiede altre cose: inchiostri chiari, testo inciso
 * con l'ombra in alto e non in basso, e le ombre portate da
 * `--m-drop-on-dark`, che e' nera — `--m-drop` e' bruna e sul fondo
 * scuro **schiarisce** invece di scurire.
 *
 * La lista e' una **teca di vetro sopra la pelle**, che e' la coppia
 * che la skill prevede: non si mette carta chiara dentro un pannello
 * di cuoio.
 *
 * Qui niente tendina: le tre lingue stanno in fila, gia' aperte. Una
 * tendina dentro un pannello che e' gia' una tendina e' un giro di
 * troppo, e lo spazio per mostrarle tutte c'e'.
 * ------------------------------------------------------------------ */

.m-drawer .m-lingue {
	margin-top: 24px;
	align-self: stretch;
	width: auto;
}

.m-lingue__titolo {
	margin: 0 0 12px;
	font-family: var(--m-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--m-leather-text-2);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}

.m-lingue--piatto .m-lingue__menu {
	position: static;
	min-width: 0;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--m-r-md);
	background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .35),
		var(--m-drop-on-dark);
}

/* Piu' aria: 48 invece di 44, e un respiro fra una voce e l'altra. */
.m-lingue--piatto .m-lingue__voce {
	min-height: 48px;
	color: var(--m-leather-text);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}

.m-lingue--piatto li + li .m-lingue__voce {
	margin-top: 4px;
}

.m-lingue--piatto .m-lingue__voce:hover {
	background: rgba(255, 255, 255, .1);
}

.m-lingue--piatto .m-lingue__voce.is-attiva {
	background: rgba(255, 255, 255, .16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.m-lingue--piatto .m-lingue__voce.is-spenta {
	color: var(--m-leather-text-2);
	opacity: .75;
}


/* ================================================================== *
 * FOOTER
 * ================================================================== */

.m-footer {
	margin-top: var(--wp--preset--spacing--80);
	padding-block: var(--wp--preset--spacing--70);
}

.m-footer__dentro {
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	/*
	 * `stretch` e non `flex-start`: serve perche' la fila dei profili
	 * possa agganciarsi al fondo della riga — vedi `.m-social--footer`.
	 * Le colonne di link non cambiano aspetto, i loro elenchi restano
	 * in alto.
	 */
	align-items: stretch;
	justify-content: space-between;
}

.m-footer__marchio {
	display: flex;
	/*
	 * In asse col nome, non col centro del blocco: da quando sotto il
	 * nome ci sono tre righe di dati, un segno centrato verticalmente
	 * finiva a meta' del testo e sembrava staccato dal logotipo.
	 */
	align-items: flex-start;
	gap: 14px;
}

/* Il segno e' 36px, la riga del nome e' piu' bassa: lo rimetto in asse. */
.m-footer__segno {
	margin-top: -4px;
}

/*
 * Il marchio del footer porta alla home. Il segno ne misura 36 ma il
 * bersaglio ne vuole 44: il margine negativo lo rimette in asse col
 * bordo sinistro, come nel drawer.
 */
.m-footer__casa {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin-left: -4px;
	text-decoration: none;
}

/* Stesso quarto di giro antiorario del marchio in alto. */
.m-footer__casa img {
	transition: rotate var(--m-dur-slow) var(--m-ease-spring);
}

.m-footer__casa:hover img,
.m-footer__casa:focus-visible img {
	rotate: -90deg;
}

@media (prefers-reduced-motion: reduce) {

	.m-footer__casa:hover img,
	.m-footer__casa:focus-visible img {
		rotate: none;
	}
}

.m-footer__nome {
	font-family: var(--m-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.02em;
	/* Bianco pieno, non l'avorio dei link: e' il nome. */
	color: #fff;
}

/*
 * Il segno di Cult ID davanti al nome dell'impresa madre.
 *
 * Alto quanto la riga (`1em`) e non in pixel: se cambia il corpo del
 * testo, il segno lo segue. E' decorativo — il nome e' scritto subito
 * accanto — quindi nel markup ha `alt=""` e `aria-hidden`: ripeterlo
 * lo farebbe leggere due volte a chi usa un lettore di schermo.
 */
/* ------------------------------------------------------------------ *
 * I RECAPITI NEL FOOTER
 *
 * Sotto la riga di Freemius, staccati di una riga vuota: non
 * appartengono a quella frase, sono un blocco a sé.
 *
 * Numero e indirizzo sono link veri — su un telefono il numero si
 * chiama toccandolo — e restano del colore dei link del footer invece
 * di accendersi: in un piede pieno di testo, due link colorati in
 * mezzo ai dati fiscali griderebbero.
 * ------------------------------------------------------------------ */
.m-footer__recapiti {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/*
	 * Gap generoso in orizzontale e stretto in verticale: numero e
	 * mail stanno sulla stessa riga finche' ci stanno, e quando vanno
	 * a capo non si allontanano.
	 */
	/*
	 * Stretto: i punti separano gia' a vista, e la riga deve starci
	 * tutta. Il conto, misurato: mail 153 + telefono 116 + due segni
	 * da 24 + i due punti fanno 332, e la colonna ne offre 343 sul
	 * telefono. Con 6px di spazio servivano 348 e andava a capo; con
	 * 4 ne servono 340.
	 */
	gap: 2px 4px;
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: 0.8125rem;
	color: var(--m-footer-text);
}

/*
 * 24px di bersaglio, non i 16 che dava il solo corpo del testo.
 *
 * E' il minimo della WCAG 2.2 AA, non i 44 del progetto: qui il passo
 * del footer e' quello stretto che Emanuele ha chiesto per i menu, e
 * questi link stanno nella stessa fascia.
 */
.m-footer__recapiti a {
	color: var(--m-footer-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/*
 * 26px di bersaglio anche per il numero, che dentro il gruppo e' un
 * link suo: il solo corpo del testo ne dava 20, sotto il minimo di 24
 * della WCAG 2.2.
 */
.m-footer__recapito,
.m-footer__recapito > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 26px;
}

/* I due segni, in coda alla riga. */
.m-footer__messaggistica {
	display: inline-flex;
	align-items: center;
}

/*
 * I segni della messaggistica piu' stretti che altrove: qui stanno in
 * riga con due indirizzi, e 24px e' il minimo della WCAG 2.2.
 */
.m-footer__messaggistica .m-social__voce {
	width: 24px;
}

.m-footer__punto {
	color: var(--m-footer-text);
	opacity: .55;
}

.m-footer__cultid {
	height: 1em;
	width: auto;
	margin-right: 6px;
	/* In asse con la base del testo, non col suo bordo superiore. */
	vertical-align: -0.14em;
}

/*
 * Il punto fa parte del logotipo, come nell'header: sta nel CSS e non
 * dentro `get_bloginfo( 'name' )`, che finisce anche nel titolo della
 * scheda, nei feed e nelle email di WordPress.
 */
.m-footer__nome::after {
	content: ".";
}

.m-footer__sede {
	/*
	 * Righe strette: sono tre dati di seguito, non tre paragrafi. Con
	 * l'interlinea del corpo (1,55) e 4px di stacco sembravano slegati.
	 */
	margin: 1px 0 0;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--m-footer-text);
}

/*
 * L'identita': il marchio con i suoi dati e, sotto, la riga Freemius.
 * Stanno insieme in una colonna perche' dicono la stessa cosa — chi
 * siamo e da chi passano i pagamenti.
 */
.m-footer__identita {
	max-width: 420px;
	/* Colonna, perche' la fila dei profili possa scendere in fondo. */
	display: flex;
	flex-direction: column;
}

/*
 * La catena che porta l'altezza della riga fin dentro al blocco dei
 * testi, dove sta la fila dei profili. Serve tutta: basta un anello
 * che non si distende e il `margin-top: auto` della fila non trova
 * spazio su cui lavorare — ed e' esattamente quello che succedeva.
 */
.m-footer__identita > .m-footer__marchio {
	flex: 1;
	align-items: stretch;
}

/* Il segno pero' non si stira: resta in alto, in asse col nome. */
.m-footer__casa {
	align-self: flex-start;
}

.m-footer__testi {
	display: flex;
	flex-direction: column;
}

/*
 * Le due colonne di link: una il menu del sito, l'altra i documenti
 * legali. In verticale, non a riga: cinque e sei voci su una riga sola
 * diventano un muro di testo in cui non si trova niente.
 */
/*
 * La riga Freemius. Stava in product.css, che si carica DOPO questo
 * foglio: la sua `margin` abbreviata vinceva su qualunque
 * `margin-top` scritto qui, anche dentro una media query — le media
 * query non aggiungono specificita'. Sta col resto del footer.
 */
.m-footer__freemius {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	font-size: 0.8125rem;
	color: var(--m-footer-text);
}

.m-footer__freemius img {
	/* 104px: sotto i 100 non si scende, e' una loro regola. */
	width: 104px;
	height: auto;
}

/*
 * Le due colonne viaggiano insieme: nella riga del footer contano come
 * un blocco solo, cosi' restano vicine fra loro invece di finire una
 * per parte.
 */
.m-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 56px;
}

.m-footer__colonna {
	display: flex;
	flex-direction: column;
}

.m-footer__colonna a {
	display: inline-flex;
	align-items: center;
	font-size: 0.875rem;
	/*
	 * La stessa interlinea dei dati a sinistra, 1,35.
	 */
	line-height: 1.35;
	/*
	 * I 3px per lato portano il bersaglio a 25px. Non sono decorativi:
	 * con la sola interlinea il link sarebbe alto 18,9px e scenderebbe
	 * sotto i 24px che WCAG 2.2 AA chiede a un bersaglio — e qui si
	 * vende un plugin di accessibilita'. Da 44 che erano, la colonna di
	 * sei voci passa da 264px a 150.
	 */
	padding-block: 3px;
	color: var(--m-footer-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.m-footer__colonna a:hover {
	text-decoration-thickness: 2px;
}

/*
 * La colonna del menu in maiuscolo. Con la spaziatura: il maiuscolo
 * senza respiro fra le lettere si legge peggio del minuscolo, ed e'
 * anche quello che la skill chiede alle etichette (§ tipografia).
 *
 * Il maiuscolo lo fa il CSS e non il testo: nel markup le voci restano
 * scritte normali, cosi' un lettore di schermo le pronuncia come
 * parole e non le compita lettera per lettera.
 */
.m-footer__colonna--menu a {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 0.8125rem;
	/*
	 * 4px e non 3: col corpo a 13px l'interlinea da' 17,55, e con 3 per
	 * lato il bersaglio sarebbe 23,55 — sotto i 24 di WCAG 2.2 AA per
	 * meno di mezzo pixel. A occhio non si vede, nella misura si'.
	 */
	padding-block: 4px;
}

/* ================================================================== *
 * TELEFONO E TABLET
 *
 * Sotto i 900px la navigazione non ci sta più nella barra senza
 * stringersi: passa al menu laterale.
 * ================================================================== */

/*
 * La barra piena — marchio, menu, profili, area clienti — passa al menu
 * a tendina sotto i 1200px, e non sotto i 900 come prima.
 *
 * La misura e' questa: in francese il menu da solo chiede 614px, i
 * profili 210 e il resto 268; servono 1092px dentro la barra, cioe'
 * circa 1176 di finestra. Sotto, la barra andava a capo su due righe.
 */
/* ------------------------------------------------------------------ *
 * QUANDO LA BARRA PIENA NON CI STA PIU'
 *
 * Due soglie, non una, perche' l'ingombro dipende da cosa c'e' dentro:
 *
 * - **senza selettore di lingua** (oggi, senza WPML) la barra piena
 *   chiede 1109px in francese e ne ha 1116: passa da 1200px in su;
 * - **col selettore** ne chiede 1267, e sotto i 1400 di finestra non
 *   ce ne sono abbastanza nemmeno col guscio allargato.
 *
 * La classe `ha-lingue` la mette il PHP quando il selettore esiste
 * davvero. Cosi' chi naviga oggi su un portatile da 1366px vede la
 * barra piena, e non paga da subito un ingombro che arrivera' con
 * WPML.
 * ------------------------------------------------------------------ */
.m-header-guscio.ha-lingue .m-lingue {
	display: flex;
}

@media (max-width: 1399px) {
	.ha-lingue .m-header__nav,
	.ha-lingue .m-header__cta,
	.ha-lingue .m-header__coda > .m-social,
	.ha-lingue .m-header > .m-header__coda > .m-lingue {
		display: none;
	}

	.ha-lingue .m-header__menu {
		display: inline-flex;
	}
}

@media (max-width: 1199px) {

	.m-header__nav,
	.m-header__cta {
		display: none;
	}

	/* Qui la fila dei profili non ci sta: vive nel drawer. */
	.m-header__coda > .m-social {
		display: none;
	}

	.m-header__menu {
		display: inline-flex;
	}

	/* Nella barra stretta le lingue starebbero scomode: stanno nel menu. */
	.m-header > .m-header__coda > .m-lingue {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Footer su tablet
 *
 * Qui le colonne di link sono gia' andate sotto l'identita', e a
 * destra del blocco dei testi avanza spazio vuoto. Ci vanno Freemius
 * e i profili, incolonnati e allineati a destra.
 * ------------------------------------------------------------------ */
@media (min-width: 601px) and (max-width: 1023px) {

	/*
	 * Due colonne: a sinistra il nome e i dati, a destra Freemius e i
	 * profili. Le righe sono quelle naturali dei testi — nome, «A
	 * division of», il nome dell'impresa, i numeri — e i pezzi a destra
	 * si agganciano a quelle, cosi' restano in riga con loro anche se
	 * un testo va a capo.
	 */
	/*
	 * Niente tetto di 420px: li' dentro adesso ci stanno due colonne, e
	 * con quel limite la colonna di sinistra scendeva a 101px — «A
	 * division of Cult ID Network» andava a capo tre volte.
	 */
	.m-footer__identita {
		max-width: none;
		width: 100%;
	}

	.m-footer__testi {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 40px;
		align-items: start;
		/*
		 * `flex: 1` perche' qui dentro il blocco e' un elemento flex
		 * della riga del marchio, e un elemento flex si dimensiona sul
		 * proprio contenuto: la griglia finiva a 609px su 976
		 * disponibili, e Freemius risultava allineato a destra di
		 * niente, in mezzo al footer. Distesa la griglia, la sua
		 * seconda colonna arriva al bordo.
		 */
		flex: 1;
	}

	.m-footer__nome,
	.m-footer__sede {
		grid-column: 1;
	}

	/*
	 * In riga con «A division of», col marchio SOPRA l'etichetta.
	 *
	 * `column-reverse` e non l'ordine cambiato nel markup: cosi' chi
	 * legge con un lettore di schermo sente comunque «Payments and
	 * licences through Freemius», nell'ordine in cui la frase ha senso.
	 */
	.m-footer__freemius {
		grid-column: 2;
		grid-row: 2 / span 2;
		flex-direction: column-reverse;
		align-items: flex-end;
		gap: 10px;
		margin: 0;
		text-align: right;
	}

	/*
	 * I profili in colonna, a destra, nella stessa fascia dei menu.
	 *
	 * Fuori dal flusso, perche' nel markup la fila sta dentro al blocco
	 * dei testi mentre i menu sono una riga a parte: nessuna regola di
	 * griglia puo' metterli accanto senza spostarla nel markup, e li'
	 * serve dov'e' per gli altri due layout.
	 *
	 * Ancorata in BASSO e non in alto: il fondo dei menu e' l'unico
	 * riferimento che il CSS conosce senza sapere quanto e' alta
	 * l'identita' qui sopra. Le due altezze coincidono quasi — sette
	 * voci fanno 179px e sette segni altrettanto — quindi la colonna
	 * copre la stessa fascia.
	 */
	.m-footer__dentro {
		position: relative;
	}

	.m-social--footer {
		position: absolute;
		right: 24px;
		bottom: 0;
		margin: 0;
		flex-direction: column;
		align-items: flex-end;
	}

	/* Il marchio raddoppia: da 40 a 80. */
	.m-footer__casa img {
		width: 80px;
		height: 80px;
	}

	/*
	 * Niente rientro ne' correzioni d'asse: con un segno da 80px i
	 * conti della colonna del testo devono tornare esatti.
	 */
	.m-footer__casa {
		margin-left: 0;
		/*
		 * Senza, il segno si lascia stringere come ogni elemento flex e
		 * arriva a 55px invece di 80 — e la colonna del testo, che si
		 * misura a partire da lui, finisce fuori asse.
		 */
		flex-shrink: 0;
	}

	.m-footer__segno {
		margin-top: 0;
	}

	/*
	 * I due menu partono dove parte il testo, non dal bordo: il segno
	 * (80) piu' lo stacco del marchio (14). Scritto come somma e non
	 * come numero, cosi' se il segno cambia il conto si rifa' da solo.
	 */
	.m-footer__menu {
		margin-left: calc(80px + 14px);
	}
}

@media (max-width: 600px) {

	.m-header-guscio {
		padding: 12px 16px 0;
	}

	.m-header {
		padding: 10px 14px;
		gap: 12px;
	}

	.m-header__nome {
		/* 1.25rem cresciuto del 10%, come sopra. */
		font-size: 1.375rem;
	}

	.m-footer__dentro {
		padding-inline: 16px;
	}

	/*
	 * Sul telefono l'identita' si centra e il marchio cresce: in una
	 * colonna sola, senza niente a fianco, un marchio da 40px in alto a
	 * sinistra sembra una briciola.
	 *
	 * Si centra tutto il blocco, non il solo marchio: un logo centrato
	 * sopra a dei testi allineati a sinistra non sembra una scelta,
	 * sembra un errore.
	 */
	/*
	 * `width: 100%` e non solo `align-items: center`: senza, la colonna
	 * e' larga quanto il suo contenuto e si centra dentro se stessa
	 * restando a sinistra della riga. Misurato: tutto il blocco cadeva
	 * 43px prima del centro.
	 */
	.m-footer__identita,
	.m-footer__menu,
	.m-footer__colonna {
		width: 100%;
		max-width: none;
	}

	.m-footer__identita {
		align-items: center;
		text-align: center;
	}

	/* Anche i due elenchi di link, centrati. */
	.m-footer__colonna {
		align-items: center;
	}

	.m-footer__identita > .m-footer__marchio {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.m-footer__casa {
		align-self: center;
		/* Il rientro serve solo quando il segno e' in colonna a sinistra. */
		margin-left: 0;
	}

	.m-footer__casa img {
		width: 64px;
		height: 64px;
	}

	/* Il segno non ha piu' un nome a fianco da inseguire. */
	.m-footer__segno {
		margin-top: 0;
	}

	.m-footer__testi {
		align-items: center;
	}

	/*
	 * In colonna: la frase su una riga sua e il marchio Freemius sotto,
	 * tutti e due centrati. Di fianco, con quella frase lunga, la
	 * coppia occupava quasi tutta la larghezza e il centraggio non si
	 * leggeva.
	 */
	.m-footer__freemius {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		/*
		 * Piu' aria fra i dati fiscali e questo blocco: in colonna, con
		 * tutto centrato, i 12px del layout a fianco li incollavano.
		 */
		margin-top: 24px;
	}

	/*
	 * Qui le colonne sono in pila, quindi non c'e' nessuna ultima voce
	 * di menu a fianco a cui agganciarsi: `auto` non avrebbe spazio e
	 * varrebbe 0. Lo stacco si dichiara.
	 */
	.m-social--footer {
		/* Lo stesso respiro che c'e' sopra Freemius. */
		margin-top: 24px;
		margin-left: 0;
		justify-content: center;
	}
}