/*
Theme Name: In.NET 3
Theme URI: https://innetmap.it
Author: Progetto In.NET
Description: Tema a blocchi del sito istituzionale In.NET 3 - servizi per l'integrazione nell'area metropolitana di Palermo. Progetto finanziato dal programma FAMI 2021-2027, Prefettura U.T.G. di Palermo e CISS.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: innet-theme
Tags: block-theme, full-site-editing, accessibility-ready
*/

/*
 * Quasi tutto lo stile sta in theme.json: colori, tipografia, spaziature
 * e raggi sono design token, non CSS scritto a mano.
 *
 * Qui restano solo le poche cose che theme.json non sa esprimere.
 */

/* --------------------------------------------------------------------
   Icone usate come maschera CSS, cosi' prendono il colore del testo
   invece di essere immagini colorate a parte.
   -------------------------------------------------------------------- */
:root {
	--innet-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--innet-scarica: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
	--innet-chiudi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------
   Barra superiore, intestazione, contenuto e piè di pagina devono stare
   attaccati. WordPress inserisce lo spazio globale fra blocchi anche fra
   i blocchi di primo livello, e fra header e contenuto si vedeva una
   striscia bianca. Lo spazio fra blocchi dentro il contenuto resta.
   -------------------------------------------------------------------- */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------
   Kicker - l'occhiello maiuscolo sopra i titoli di pagina.
   Non e' un blocco a se': e' un paragrafo con questa classe, applicata
   dall'editor tramite "Stili aggiuntivi del CSS".
   -------------------------------------------------------------------- */
.innet-kicker {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blu);
	margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------
   Voce di menu attiva: bianca, con sottolineatura azzurra.
   Il blocco navigazione marca la pagina corrente con .current-menu-item,
   ma non offre controlli per questo stato.
   -------------------------------------------------------------------- */
.wp-block-navigation .current-menu-item > a {
	font-weight: 700;
	color: #fff;
	border-bottom: 2px solid var(--wp--preset--color--azzurro);
	padding-bottom: 2px;
}

/* --------------------------------------------------------------------
   Tessere e schede cliccabili: cambiano fondo al passaggio del mouse.
   theme.json non gestisce gli stati hover dei blocchi contenitore.
   -------------------------------------------------------------------- */
.innet-tessera {
	transition: background-color 150ms ease;
}

.innet-tessera:hover,
.innet-tessera:focus-within {
	background-color: var(--wp--preset--color--azzurro-tinta) !important;
}

/* --------------------------------------------------------------------
   Accessibilita': chi naviga da tastiera deve vedere dove si trova.
   Il contorno di default sparisce su alcuni fondi colorati.
   -------------------------------------------------------------------- */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--azzurro);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Segnaposto delle sei aree di servizio.

   Sono le icone del progetto, in forma di pin da mappa: rafforzano la
   metafora che regge tutto il sito e ogni area ha il proprio colore.
   Non sono quadrate (53.73 x 63.85), quindi si dimensionano sull'altezza
   e la larghezza segue.

   Vanno referenziate come <img> e non incorporate nella pagina: ogni
   file porta con se' un <style> con classi .cls-1, .cls-2, e sei SVG
   incollate nello stesso documento si sovrascriverebbero i colori a
   vicenda.
   -------------------------------------------------------------------- */
.innet-pin {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: 48px;
}

/* Sulle schede estese di "Il progetto" il pin e' piu' grande */
.innet-scheda-area .innet-pin {
	height: 56px;
}

/* --------------------------------------------------------------------
   Quadrato bianco per le icone disegnate a mano, ancora usate nella
   sezione "Come muoversi" della Guida.
   -------------------------------------------------------------------- */
.innet-icona {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	border-radius: 6px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.innet-scheda-area > .wp-block-group {
	flex: 1 1 auto;
	min-width: 0;
}

/* Etichetta "Trova servizi per:" */
.innet-etichetta {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	margin-bottom: 0;
}

/* Elenco di parole chiave sotto ogni scheda */
.innet-chip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.innet-chip span {
	background: #fff;
	border: 1px solid var(--wp--preset--color--bordo-chip);
	border-radius: 4px;
	padding: 6px 12px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	line-height: 1.4;
}

/* --------------------------------------------------------------------
   Schede dei partner (pagina "Chi siamo"): logo a sinistra, testo a destra.
   -------------------------------------------------------------------- */
.innet-logo-partner {
	flex: 0 0 110px;
	margin: 0;
}

.innet-logo-partner img {
	width: 110px;
	height: auto;
}

.innet-scheda-partner > .wp-block-group {
	flex: 1 1 auto;
	min-width: 0;
}

/* --------------------------------------------------------------------
   Ancore di sezione in cima a "Guida a Palermo".
   -------------------------------------------------------------------- */
.innet-ancore {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.innet-ancore a {
	background: #fff;
	border: 1px solid var(--wp--preset--color--bordo-azzurro);
	border-radius: 4px;
	padding: 10px 16px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.innet-ancore a:hover {
	background: var(--wp--preset--color--azzurro-tinta);
}

/* Le sezioni sono raggiunte da ancore: senza questo scarto il titolo
   finisce sotto il bordo superiore della finestra. */
[id="citta"],
[id="muoversi"],
[id="numeri"],
.innet-scheda-area[id] {
	scroll-margin-top: 24px;
}

/* --------------------------------------------------------------------
   Illustrazioni del progetto.
   Sono quadrate (1080x1080) e vanno lasciate respirare: senza un limite
   riempirebbero tutta la colonna e sbilancerebbero la pagina.
   -------------------------------------------------------------------- */
.innet-illustrazione {
	margin: 0;
}

.innet-illustrazione img {
	display: block;
	width: 100%;
	max-width: 380px;
	height: auto;
	margin-inline: auto;
}

/* Le illustrazioni delle pagine (famiglia, mani con il mondo) entrano
   con una dissolvenza dal basso e poi galleggiano piano, 8px in sette
   secondi: un po' di vita senza distrarre. Escluse la mappa dell'eroe,
   che ha la sua animazione, e la mappa "Tu sei qui", che si esplora. */
.innet-illustrazione:not(.innet-illustrazione--eroe):not(.innet-minimappa) img {
	animation:
		innet-entra 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both,
		innet-galleggia 7s ease-in-out 700ms infinite;
}

@keyframes innet-entra {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes innet-galleggia {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

/* "Chi siamo": le mani con il mondo (assets/illustrazioni/mani-mondo.svg,
   scambiato in functions.php). All'apertura le mani salgono da 80 unita'
   piu' in basso e il mondo scende da 60 piu' in
   alto, con una curva dolce e in dissolvenza; poi una luce attraversa il
   globo avanti e indietro. Le misure sono unita' del viewBox (1080), non
   pixel. Le copie di riserva nell'SVG coprono una separazione fino a 280
   unita': 60 in alto e' anche il massimo prima che il globo esca dal
   riquadro. */
.innet-illustrazione .innet-mondo {
	display: block;
	width: 100%;
	height: auto;
}

.innet-mondo__mani {
	animation: innet-mondo-mani 2.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.innet-mondo__globo {
	animation: innet-mondo-globo 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.innet-mondo__luce {
	animation: innet-mondo-luce 11s ease-in-out infinite alternate;
}

@keyframes innet-mondo-mani {
	from {
		transform: translateY(80px);
		opacity: 0;
	}

	35% {
		opacity: 1;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes innet-mondo-globo {
	from {
		transform: translateY(-60px);
		opacity: 0;
	}

	35% {
		opacity: 1;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes innet-mondo-luce {
	from {
		transform: translateX(-430px);
	}

	to {
		transform: translateX(430px);
	}
}

/* --------------------------------------------------------------------
   Mappa dei servizi nell'eroe della home.

   Non e' un'immagine accanto al testo ma lo sfondo della meta' destra
   della fascia: grande, centrata in verticale, con le linee che escono dai
   bordi sopra e sotto come se la mappa continuasse fuori. Come riquadro in
   colonna lasciava vuoti diversi sopra e sotto a seconda dello schermo, e
   sembrava appoggiata li'.

   Il disegno nasce come copertina del libretto, dove le linee escono da
   tutti i bordi della pagina. Qui fanno lo stesso: a destra proseguono
   fino al bordo dello schermo (le "code", lunghe abbastanza anche per gli
   schermi molto larghi), a sinistra si avvicinano al testo e in alto e in
   basso escono dalla fascia. Su schermi larghi l'SVG non taglia cio' che
   sta fuori dal suo quadrato: taglia la fascia.

   E' un SVG in linea al posto dell'immagine (lo scambio avviene in
   functions.php), con le linee come tracciati veri. All'apertura si
   disegnano e compaiono le fermate; poi lungo le linee scorrono piano dei
   riflessi di luce, come convogli sui percorsi, ognuno col suo passo.

   Il movimento continuo ha un pulsante per fermarlo: per le linee guida
   sull'accessibilita' (criterio 2.2.2) cio' che si muove da solo per piu'
   di 5 secondi deve potersi fermare. Chi ha chiesto meno animazioni al
   sistema vede la mappa ferma, e il pulsante non gli serve.
   -------------------------------------------------------------------- */
.innet-eroe {
	position: relative;
	overflow: hidden;
}

.innet-illustrazione .innet-mappa {
	display: block;
	width: 100%;
	height: auto;
}

/* Schermi larghi: sfondo della meta' destra. Sotto i 1200px il titolo va
   su tre righe e il testo arriverebbe a sfiorare le linee. */
@media (min-width: 1201px) {
	/* Il quadrato dell'illustrazione ha ai lati un margine trasparente
	   (16,7%): lo si sposta a destra di tanto, cosi' e' il disegno, non il
	   quadrato, ad arrivare al bordo del contenuto. */
	.innet-eroe .innet-illustrazione--eroe {
		position: absolute;
		top: 50%;
		right: max(var(--wp--style--root--padding-right, 40px), calc((100% - 1160px) / 2));
		height: 124%;
		aspect-ratio: 1;
		margin: 0;
		transform: translate(16.7%, -50%);
	}

	.innet-eroe .innet-illustrazione--eroe .innet-mappa,
	.innet-eroe .innet-illustrazione--eroe img {
		width: 100%;
		height: 100%;
		max-width: none;
	}

	.innet-eroe .innet-illustrazione--eroe .innet-mappa {
		overflow: visible;
	}
}

/* Schermi medi e piccoli: accanto al testo non c'e' posto senza finirci
   sopra. La mappa va sotto il testo, centrata, appoggiata al fondo della
   fascia (il margine negativo vale il padding inferiore, 72px). */
@media (max-width: 1200px) {
	.innet-eroe .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.innet-eroe .wp-block-column {
		flex-basis: 100% !important;
	}

	.innet-eroe .innet-illustrazione--eroe {
		width: 100%;
		max-width: 420px;
		margin: 8px auto -72px;
	}

	.innet-eroe .innet-illustrazione--eroe img,
	.innet-eroe .innet-illustrazione--eroe .innet-mappa {
		max-width: none;
	}
}

/* Telefono: la mappa diventa una striscia da bordo a bordo in fondo alla
   fascia, con le linee che escono dai lati. Come quadrato centrato restava
   stretta, con i lati vuoti, e sembrava un'immagine appoggiata.
   Il disegno e' largo due terzi del suo quadrato: l'SVG si allarga al 150%
   e si sposta di un quarto a sinistra, cosi' il disegno riempie la
   larghezza. In altezza si vede la fascia centrale, dove stanno le fermate. */
@media (max-width: 768px) {
	.innet-eroe {
		padding-top: 36px !important;
		padding-bottom: 0 !important;
	}

	/* Vicina al pulsante (16px, prima erano 52) e sfumata in alto: le
	   linee escono dal fondo della fascia senza un bordo netto sotto il
	   pulsante. */
	.innet-eroe .innet-illustrazione--eroe {
		position: relative;
		width: auto;
		max-width: none;
		height: 250px;
		margin: -8px calc(-1 * var(--wp--style--root--padding-right, 20px)) 0 calc(-1 * var(--wp--style--root--padding-left, 20px));
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
		mask-image: linear-gradient(to bottom, transparent, #000 40%);
	}

	.innet-eroe .innet-illustrazione--eroe .innet-mappa {
		position: absolute;
		top: 50%;
		left: -25%;
		width: 150%;
		height: auto;
		max-width: none;
		transform: translateY(-50%);
	}

	.innet-mappa__pausa {
		bottom: 12px;
	}
}

/* Apertura: le linee si disegnano, poi compaiono le fermate */
.innet-mappa__linea {
	stroke-dasharray: 1 1;
	animation: innet-traccia 2.4s cubic-bezier(0.65, 0, 0.35, 1) backwards;
	animation-delay: calc(var(--i, 0) * 220ms);
	transition: opacity 300ms ease;
}

.innet-mappa__fermata {
	transform-box: fill-box;
	transform-origin: center;
	animation: innet-fermata 700ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
	animation-delay: calc(1800ms + var(--i, 0) * 260ms);
	transition: opacity 300ms ease;
}

/* La coda a destra riparte quando la linea ha finito di disegnarsi, e
   accelera: la linea sembra proseguire fuori dallo schermo. */
.innet-mappa__linea.innet-mappa__coda {
	animation: innet-traccia 4s cubic-bezier(0.5, 0, 1, 1) backwards;
	animation-delay: calc(var(--i, 0) * 220ms + 2400ms);
}

@keyframes innet-traccia {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes innet-fermata {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
}

/* Dopo: riflessi di luce che scorrono lungo le linee. Ogni linea ha una
   copia sovrapposta con un solo tratto corto e chiaro, che avanza. La
   lunghezza del tratto e la durata del giro sono nell'SVG, calcolate sulla
   lunghezza di ogni linea: cosi' i riflessi hanno tutti una misura simile.
   Vicino al bordo destro si dissolvono (maschera nell'SVG). */
.innet-mappa__flusso {
	fill: none;
	stroke: #fff;
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: var(--tratto, 0.06) var(--vuoto, 0.94);
	opacity: 0;
	pointer-events: none;
	animation:
		innet-flusso-appare 1200ms ease forwards,
		innet-flusso var(--durata, 13s) linear infinite;
	animation-delay: calc(4600ms + var(--i, 0) * 500ms);
}

@keyframes innet-flusso-appare {
	to {
		opacity: 0.85;
	}
}

@keyframes innet-flusso {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

.innet-eroe.is-mappa-ferma .innet-mappa__flusso {
	animation-play-state: paused;
	opacity: 0 !important;
}

/* Una linea sotto il mouse resta piena, le altre si attenuano. Solo con un
   puntatore vero: sul touch non esiste il passaggio sopra. */
@media (hover: hover) {
	.innet-mappa:has(.innet-mappa__linea:hover, .innet-mappa__fermata:hover) .innet-mappa__linea,
	.innet-mappa:has(.innet-mappa__linea:hover, .innet-mappa__fermata:hover) .innet-mappa__fermata {
		opacity: 0.25;
	}

	.innet-mappa:has([data-colore="arancione"]:hover) [data-colore="arancione"],
	.innet-mappa:has([data-colore="rosso"]:hover) [data-colore="rosso"],
	.innet-mappa:has([data-colore="verde"]:hover) [data-colore="verde"],
	.innet-mappa:has([data-colore="giallo"]:hover) [data-colore="giallo"],
	.innet-mappa:has([data-colore="blu"]:hover) [data-colore="blu"],
	.innet-mappa:has([data-colore="viola"]:hover) [data-colore="viola"],
	.innet-mappa:has([data-colore="azzurro"]:hover) [data-colore="azzurro"] {
		opacity: 1;
	}
}

/* Pulsante per fermare il movimento, in basso a destra nella fascia */
.innet-mappa__pausa {
	position: absolute;
	right: max(var(--wp--style--root--padding-right, 40px), calc((100% - 1160px) / 2));
	bottom: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--bordo-azzurro);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	transition: background-color 150ms ease;
}

.innet-mappa__pausa:hover {
	background: #fff;
}

.innet-mappa__pausa svg {
	display: block;
	width: 14px;
	height: 14px;
}

.innet-mappa__icona-riprendi,
.innet-eroe.is-mappa-ferma .innet-mappa__icona-ferma {
	display: none !important;
}

.innet-eroe.is-mappa-ferma .innet-mappa__icona-riprendi {
	display: block !important;
}

/* Testo per chi usa uno screen reader, invisibile a video */
.innet-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.innet-mappa__linea,
	.innet-mappa__fermata {
		animation: none;
	}

	.innet-mappa__flusso,
	.innet-mappa__pausa {
		display: none;
	}
}

/* --------------------------------------------------------------------
   Home, fascia "Cos'e' In.NET?": a destra la scheda della app, come
   nella revisione dei testi ("La app di In.NET3", con il codice QR).
   L'app non e' ancora negli store: pulsante e codice aprono la versione
   web. Il codice si inquadra da un altro schermo, quindi sul telefono
   non c'e'. Nelle colonne strette dei tablet va sotto il testo.
   -------------------------------------------------------------------- */
.innet-scheda-app__testo {
	flex: 1 1 200px;
	min-width: 0;
}

.innet-scheda-app__testo > * {
	margin: 0;
}

.wp-block-image.innet-scheda-app__qr {
	flex: 0 0 auto;
	margin: 0;
}

.innet-scheda-app__qr img {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 6px;
}

.innet-scheda-app__qr .wp-element-caption {
	max-width: 120px;
	margin: 8px 0 0;
	font-size: 0.75rem;
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--azzurro-pallido);
}

@media (max-width: 781px) {
	.wp-block-image.innet-scheda-app__qr {
		display: none;
	}
}

/* --------------------------------------------------------------------
   Avviso sulle traduzioni automatiche, sotto l'intestazione.

   Compare a lingua cambiata e sparisce con "Ho capito" (innet_avviso_lingua()
   in functions.php). Sta nel flusso, non sopra il contenuto: chi legge non
   se lo trova addosso, e la pagina non balla quando si chiude.
   -------------------------------------------------------------------- */
.innet-avviso-lingua {
	background: var(--wp--preset--color--azzurro-tinta);
	border-bottom: 1px solid var(--wp--preset--color--bordo-azzurro);
}

.innet-avviso-lingua__dentro {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1160px;
	margin: 0 auto;
	padding: 10px 24px;
}

.innet-avviso-lingua__icona {
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--wp--preset--color--blu);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.innet-avviso-lingua__testo {
	/* su schermo stretto il testo resta accanto al mondino e va a capo da
	   solo: a mandarlo sotto, l'icona restava sospesa su una riga vuota */
	flex: 1 1 200px;
	min-width: 0;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
}

.innet-avviso-lingua__chiudi {
	flex: none;
	margin-left: auto;
	min-height: 38px;
	padding: 7px 16px;
	border: 1px solid var(--wp--preset--color--blu);
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--blu);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	cursor: pointer;
}

.innet-avviso-lingua__chiudi:hover,
.innet-avviso-lingua__chiudi:focus-visible {
	background: var(--wp--preset--color--blu);
	color: var(--wp--preset--color--bianco);
}

@media (max-width: 600px) {
	.innet-avviso-lingua__dentro {
		flex-wrap: wrap;
		padding: 12px 20px;
	}

	/* il pulsante va a capo sotto il testo, allineato con esso */
	.innet-avviso-lingua__chiudi {
		margin-left: 34px;
	}
}

@media print {
	.innet-avviso-lingua {
		display: none;
	}
}

/* --------------------------------------------------------------------
   Mappa "Tu sei qui" da esplorare (Guida a Palermo).

   Una finestra in cui la mappa si ingrandisce e si sposta, con i comandi
   in alto a destra come nelle mappe che tutti conoscono. Il markup e' in
   innet_minimappa() (functions.php), il comportamento in
   assets/js/minimappa.js. Finche' lo script non parte si vede il WebP,
   ritagliato sulla parte disegnata della tavola.
   -------------------------------------------------------------------- */
.innet-minimappa {
	position: relative;
}

.innet-minimappa__cornice {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--bordo-azzurro);
	border-radius: 6px;
	background: #fff;
}

.innet-minimappa__finestra {
	position: relative;
	/* il riquadro resta piu' alto della mappa del mondo: con tutta la mappa
	   dentro avanza del bianco sopra e sotto, che pero' e' il colore del mare */
	aspect-ratio: 1080 / 942;
	overflow: hidden;
	/* un dito fa scorrere la pagina; lo zoom del browser resta fuori */
	touch-action: pan-x pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.innet-minimappa.is-attiva .innet-minimappa__finestra {
	cursor: grab;
}

.innet-minimappa.is-trascina .innet-minimappa__finestra {
	cursor: grabbing;
}

.innet-minimappa__finestra:focus-visible {
	outline: 3px solid var(--wp--preset--color--azzurro);
	outline-offset: -3px;
}

.innet-illustrazione.innet-minimappa img {
	width: 100%;
	max-width: none;
	height: 100%;
	/* la mappa del mondo e' piu' larga della finestra: ci sta tutta, e il
	   bianco sopra e sotto non si distingue dal mare */
	object-fit: contain;
}

.innet-minimappa__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.innet-minimappa__comandi {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* senza script i comandi non servono: il display qui sopra batterebbe hidden */
.innet-minimappa__comandi[hidden] {
	display: none;
}

.innet-minimappa__pulsante {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--bordo-azzurro);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 3px rgba(7, 28, 64, 0.14);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}

/* + e - vanno insieme; dopo, un po' di stacco */
.innet-minimappa__pulsante[data-azione="meno"] {
	margin-bottom: 6px;
}

.innet-minimappa__pulsante:hover {
	background: var(--wp--preset--color--azzurro-tinta);
}

.innet-minimappa__pulsante:focus-visible {
	outline: 3px solid var(--wp--preset--color--azzurro);
	outline-offset: 1px;
}

.innet-minimappa__pulsante[aria-disabled="true"] {
	color: #9aa8bc;
	cursor: default;
}

.innet-minimappa__pulsante[aria-disabled="true"]:hover {
	background: rgba(255, 255, 255, 0.95);
}

.innet-minimappa__icona {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Il nome del pulsante: e' il suo nome per gli screen reader, e compare
   come etichetta a sinistra quando il puntatore o il fuoco ci arrivano */
.innet-minimappa__nome {
	position: absolute;
	top: 50%;
	right: calc(100% + 8px);
	padding: 4px 8px;
	border-radius: 4px;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(-50%);
	pointer-events: none;
	transition: opacity 120ms ease;
}

.innet-minimappa__pulsante:focus-visible .innet-minimappa__nome {
	opacity: 1;
}

@media (hover: hover) {
	.innet-minimappa__pulsante:hover .innet-minimappa__nome {
		opacity: 1;
	}
}

.innet-minimappa .innet-minimappa__se-aperta,
.innet-minimappa.is-schermo-intero .innet-minimappa__se-chiusa {
	display: none;
}

.innet-minimappa.is-schermo-intero .innet-minimappa__se-aperta {
	display: block;
}

.innet-minimappa__avviso {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(7, 28, 64, 0.6);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.innet-minimappa__avviso.is-visibile {
	opacity: 1;
}

.innet-minimappa__aiuto {
	margin: 8px 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--testo-tenue);
}

.innet-minimappa__aiuto-tocco {
	display: none;
}

@media (pointer: coarse) {
	.innet-minimappa__aiuto-mouse {
		display: none;
	}

	.innet-minimappa__aiuto-tocco {
		display: inline;
	}
}

/* Anello sotto il segnaposto: pulsa due volte all'apertura e quando si
   torna su Palermo. Meno di 5 secondi, quindi senza pulsante per fermarlo. */
.innet-minimappa__impulso {
	fill: #ea5b5a;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.innet-minimappa__impulso.is-pulsa {
	animation: innet-impulso 2s ease-out 2;
}

@keyframes innet-impulso {
	from {
		opacity: 0.55;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(5);
	}
}

/* Schermo intero: la mappa copre la pagina, che sotto non scorre */
html.innet-minimappa-aperta {
	overflow: hidden;
}

.innet-minimappa.is-schermo-intero {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	max-width: none;
	margin: 0;
	padding:
		calc(12px + env(safe-area-inset-top, 0px))
		calc(12px + env(safe-area-inset-right, 0px))
		calc(12px + env(safe-area-inset-bottom, 0px))
		calc(12px + env(safe-area-inset-left, 0px));
	background: var(--wp--preset--color--azzurro-tinta);
}

.innet-minimappa.is-schermo-intero .innet-minimappa__cornice {
	flex: 1 1 auto;
	min-height: 0;
}

.innet-minimappa.is-schermo-intero .innet-minimappa__finestra {
	height: 100%;
	aspect-ratio: auto;
	touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
	.innet-minimappa__impulso.is-pulsa {
		animation: none;
	}
}

/* --------------------------------------------------------------------
   Materiali scaricabili (archivio di IN.Net 2): una scheda per documento,
   con la copertina del PDF, il tipo e la lingua, e i collegamenti.
   Prima erano righe di collegamenti con un pulsante "Scarica" accanto,
   disallineati e tutti uguali: non si capiva cosa si stava scaricando.
   -------------------------------------------------------------------- */
.innet-materiali__sezione {
	margin-top: var(--wp--preset--spacing--50);
}

.innet-griglia-documenti {
	margin-top: 20px;
}

.innet-documento {
	gap: 18px;
	height: 100%;
	padding: 20px;
	border-radius: 6px;
	background: var(--wp--preset--color--grigio-azzurro);
}

.innet-documento--grande {
	max-width: 620px;
}

.innet-documento__copertina {
	flex: 0 0 auto;
	margin: 0;
}

.innet-documento__copertina img {
	display: block;
	width: 84px !important;
	height: auto;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(7, 28, 64, 0.2), 0 0 0 1px rgba(7, 28, 64, 0.06);
}

.innet-documento--grande .innet-documento__copertina img {
	width: 110px !important;
}

.innet-documento__testo {
	flex: 1 1 auto;
	gap: 6px;
	min-width: 0;
}

.innet-documento__tipo {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blu);
}

.innet-documento__titolo {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.innet-documento__azioni {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 8px 0 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

.innet-documento__azioni a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--blu);
	text-decoration: none;
}

.innet-documento__azioni a::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background: currentColor;
	-webkit-mask: var(--innet-scarica) center / contain no-repeat;
	mask: var(--innet-scarica) center / contain no-repeat;
}

.innet-documento__azioni a:hover {
	text-decoration: underline;
}

.innet-documento__peso {
	font-weight: 400;
	color: var(--wp--preset--color--testo-tenue);
}

@media (max-width: 1024px) {
	.innet-griglia-documenti.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.innet-griglia-documenti.is-layout-grid {
		grid-template-columns: 1fr;
	}

	/* Nelle schede strette "Bianco e nero (PDF, 0,2 MB)" non sta su una riga:
	   andava a capo a pezzi, parola per parola. Il peso scende sotto,
	   intero, allineato all'etichetta. */
	.innet-documento__azioni a {
		flex-wrap: wrap;
		row-gap: 0;
		white-space: nowrap;
	}

	.innet-documento__peso {
		flex-basis: 100%;
		padding-left: 24px;
		font-size: 0.8125rem;
	}

	.innet-documento__copertina img {
		width: 64px !important;
	}
}

/* --------------------------------------------------------------------
   "Con il sostegno di", in fondo all'archivio di IN.Net 2: i loghi del
   progetto di allora. Ogni file e' un quadrato con molto bianco intorno:
   sotto i 782px, dove WordPress impila le colonne, ogni logo prendeva
   tutta la larghezza e la sezione era lunga quasi due schermate. Qui
   vanno a tre per riga, e a due sui telefoni, centrati.
   Lo spazio sotto li stacca dalla fascia dei loghi del piè di pagina,
   che ne ripete alcuni: attaccati sembravano un'unica sezione.
   -------------------------------------------------------------------- */
@media (max-width: 781px) {
	body .wp-block-columns.innet-sostegno {
		justify-content: center;
		gap: 0 16px;
		padding-bottom: 48px;
	}

	body .wp-block-columns.innet-sostegno > .wp-block-column {
		flex: 0 0 calc((100% - 32px) / 3) !important;
	}
}

@media (max-width: 480px) {
	body .wp-block-columns.innet-sostegno > .wp-block-column {
		flex-basis: calc((100% - 16px) / 2) !important;
	}
}

/* --------------------------------------------------------------------
   Segnaposto per il materiale non ancora fornito.
   Tratteggiato di proposito: deve saltare all'occhio che manca.
   -------------------------------------------------------------------- */
.innet-segnaposto-foto {
	height: 220px;
	border: 1px dashed var(--wp--preset--color--azzurro-tenue);
	border-radius: 6px;
	background: var(--wp--preset--color--grigio-azzurro);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: monospace;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--testo-tenue);
	margin-bottom: 20px;
}

/* --------------------------------------------------------------------
   Numeri utili (pagina "Guida a Palermo").
   -------------------------------------------------------------------- */
.innet-emergenza {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--wp--preset--color--blu);
	border-radius: 6px;
	padding: 24px 28px;
	margin-bottom: 20px;
}

.innet-emergenza p {
	color: #fff;
	margin: 0;
}

.innet-badge-grande {
	background: #fff;
	color: var(--wp--preset--color--blu);
	font-size: 1.875rem;
	font-weight: 700;
	border-radius: 6px;
	padding: 8px 18px;
	line-height: 1.2;
}

.innet-numeri {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.innet-numeri > div {
	background: var(--wp--preset--color--grigio-azzurro);
	border-radius: 6px;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.innet-badge {
	background: #fff;
	color: var(--wp--preset--color--blu);
	font-size: 1.25rem;
	font-weight: 700;
	border-radius: 4px;
	padding: 6px 12px;
	white-space: nowrap;
}

.innet-nota {
	font-size: 0.875rem;
	color: var(--wp--preset--color--testo-tenue);
	margin: 14px 0 24px;
}

.innet-numeri-verdi > div {
	background: var(--wp--preset--color--grigio-azzurro);
	border-radius: 6px;
	padding: 16px 24px;
	margin-bottom: 10px;
	font-size: 0.9375rem;
}

/* I numeri verdi sono l'informazione da trovare a colpo d'occhio */
.innet-numeri-verdi span {
	font-weight: 700;
	color: var(--wp--preset--color--blu);
	white-space: nowrap;
}

/* Numeri ed email si toccano: dal telefono partono chiamata o email. */
.innet-numeri-verdi a {
	color: inherit;
}

/* Richiamo ai numeri utili in home: la pagina della Guida e' lontana e
   questa e' l'informazione che serve di corsa. Il filo rosso a sinistra e
   il 112 rosso lo distinguono dal resto, che e' tutto blu. */
.innet-richiamo-numeri {
	align-items: center;
	background: var(--wp--preset--color--grigio-azzurro);
	box-shadow: inset 6px 0 0 var(--innet-linea-rosso);
}

.innet-richiamo-numeri .innet-badge-grande {
	background: var(--innet-linea-rosso);
	color: #fff;
}

.innet-richiamo-numeri__testo {
	flex: 1 1 320px;
	margin: 0;
	font-size: 0.9375rem;
}

.innet-richiamo-numeri__link {
	margin: 0;
	white-space: nowrap;
}

/* --------------------------------------------------------------------
   Elenco di domande in "Contatti".
   -------------------------------------------------------------------- */
.innet-domande {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.innet-domande li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.innet-domande span {
	flex: 0 0 40px;
	height: 40px;
	border-radius: 6px;
	background: var(--wp--preset--color--azzurro-tinta);
	color: var(--wp--preset--color--blu);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Moduli (Contatti, Segnala un servizio): i colori di WPForms diventano
   quelli del sito. WPForms li legge da queste variabili. */
.innet-modulo .wpforms-container {
	--wpforms-button-background-color: var(--wp--preset--color--blu);
	--wpforms-button-border-color: var(--wp--preset--color--blu);
	--wpforms-button-border-radius: 4px;
	--wpforms-field-border-radius: 4px;
	--wpforms-button-size-font-size: 1rem;
}

/* il margine di WPForms si sommava al padding del riquadro grigio */
.innet-modulo .wpforms-container {
	margin-top: 0;
	margin-bottom: 0;
}

.innet-modulo .wpforms-container .wpforms-submit {
	font-weight: 700;
}

.innet-modulo .wpforms-container .wpforms-submit:hover {
	background-color: var(--wp--preset--color--blu-scuro) !important;
}

/* Segnala un servizio: i tre passi, numerati come le domande dei Contatti */
.innet-passi {
	counter-reset: innet-passo;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.innet-passi li {
	position: relative;
	min-height: 40px;
	margin-bottom: 16px;
	padding: 8px 0 0 54px;
	line-height: 1.5;
}

.innet-passi li::before {
	counter-increment: innet-passo;
	content: counter(innet-passo);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	background: var(--wp--preset--color--azzurro-tinta);
	color: var(--wp--preset--color--blu);
	font-weight: 700;
}

.innet-passi strong {
	color: var(--wp--preset--color--navy);
}

/* --------------------------------------------------------------------
   Selettore di lingua.

   GTranslate stampa solo una fila di bandiere. Uno script in
   functions.php le sposta dentro un <details> e aggiunge il nome della
   lingua: qui si veste il risultato.

   Perche' il nome e non la sola bandiera: una bandiera non identifica
   una lingua (il francese non si parla solo in Francia, l'arabo in
   nessuno dei paesi raffigurati), e chi arriva su questo sito spesso non
   legge l'italiano. Il nome scritto nella lingua stessa e' l'unico
   segnale che funziona.
   -------------------------------------------------------------------- */
.innet-lang {
	position: relative;
	display: inline-block;
}

.innet-lang__scelta {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	transition: background-color 150ms ease;
}

/* Il triangolino di serie del <details> va tolto: ne disegniamo uno
   coerente con il resto. */
.innet-lang__scelta::-webkit-details-marker {
	display: none;
}

.innet-lang__scelta::marker {
	content: "";
}

.innet-lang__scelta:hover {
	background: rgba(255, 255, 255, 0.15);
}

.innet-lang__scelta::after {
	content: "";
	width: 10px;
	height: 10px;
	flex: 0 0 10px;
	background: currentColor;
	-webkit-mask: var(--innet-freccia) center / contain no-repeat;
	mask: var(--innet-freccia) center / contain no-repeat;
	transition: transform 150ms ease;
}

.innet-lang[open] .innet-lang__scelta::after {
	transform: rotate(180deg);
}

.innet-lang img {
	display: block;
	width: 20px;
	height: 15px;
	border-radius: 2px;
	/* Filo scuro: le bandiere con parti bianche altrimenti si perdono
	   sul fondo chiaro della tendina. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.innet-lang__lista {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 100;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(7, 28, 64, 0.3);
}

.innet-lang__lista a.glink {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 4px;
	color: var(--wp--preset--color--navy);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.innet-lang__lista a.glink:hover,
.innet-lang__lista a.glink:focus-visible {
	background: var(--wp--preset--color--azzurro-tinta);
}

/* La lingua in uso resta segnata anche dentro l'elenco */
.innet-lang__lista a.gt-current-lang {
	background: var(--wp--preset--color--azzurro-tinta);
	font-weight: 700;
}

/* Avviso di traduzione automatica, sotto le lingue */
.innet-lang__nota {
	margin: 4px 0 0;
	padding: 8px 10px 4px;
	border-top: 1px solid var(--wp--preset--color--bordo-chip);
	max-width: 220px;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--wp--preset--color--testo-tenue);
	white-space: normal;
}

/* --------------------------------------------------------------------
   Piè di pagina, in due fasce.

   Sopra, su bianco, i loghi. Il manuale FAMI vuole il blocco istituzionale
   (UE | FAMI | Ministero) su fondo monocromatico, nella versione adatta al
   fondo, con i marchi separati da linee grigie; i loghi dei partner vanno
   a piè di pagina ma fuori dal blocco. Su bianco restano leggibili anche
   Prefettura e CISS: sul blu il rosso del CISS spariva.

   Sotto, sul blu: il progetto, le pagine, i contatti, e in fondo la nota
   sul finanziamento e la privacy. Il logo di In.NET sta qui e non nel
   blocco istituzionale, come chiede il manuale.
   -------------------------------------------------------------------- */
.innet-loghi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px 56px;
}

.innet-loghi__blocco,
.innet-loghi__partner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.innet-loghi a {
	display: block;
	line-height: 0;
}

.innet-loghi img {
	display: block;
	width: auto;
	max-width: none;
}

.innet-loghi__blocco a + a {
	margin-left: 32px;
	padding-left: 32px;
	border-left: 1px solid var(--wp--preset--color--bordo-chip);
}

/* Altezze diverse per un peso visivo simile: a parita' di altezza i
   marchi larghi e bassi (UE, Ministero, CISS) sembrano piu' grandi di
   quelli compatti (FAMI, Prefettura). L'emblema UE resta il piu' largo,
   come chiede il regolamento. */
.innet-loghi__ue         { height: 48px; }
.innet-loghi__fami       { height: 56px; }
.innet-loghi__ministero  { height: 44px; }
.innet-loghi__prefettura { height: 68px; }
.innet-loghi__ciss       { height: 42px; }

.innet-loghi__partner {
	gap: 24px;
}

.innet-loghi__etichetta {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--testo-tenue);
}

/* Fascia scura */
.innet-piede {
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* Spazi regolari dentro le colonne: 12px fra i blocchi, 16px dopo il titolo. */
.innet-piede .wp-block-column > * {
	margin-block: 0;
}

.innet-piede .wp-block-column > * + * {
	margin-block-start: 12px;
}

.innet-piede .wp-block-column > .innet-piede__titolo + * {
	margin-block-start: 16px;
}

.innet-piede a {
	color: var(--wp--preset--color--bianco);
	text-decoration-color: rgba(255, 255, 255, 0.45);
	text-underline-offset: 3px;
}

.innet-piede a:hover {
	color: var(--wp--preset--color--azzurro-chiaro);
}

.innet-piede__nome {
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--wp--preset--color--bianco);
}

.innet-piede__titolo {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azzurro-chiaro);
}

.innet-piede__menu a {
	text-decoration: none;
}

.innet-piede__menu a:hover {
	text-decoration: underline;
}

/* Nel piede la pagina corrente non ha bisogno della sottolineatura
   azzurra dell'intestazione: basta il grassetto. */
.innet-piede__menu .current-menu-item > a {
	border-bottom: 0;
	padding-bottom: 0;
}

.innet-piede__fondo {
	margin-top: 40px;
	padding: 20px 0 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	gap: 8px 32px;
}

.innet-piede__nota {
	margin: 0;
	max-width: 880px;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #a9bddb;
}

/* Sotto i 1200px blocco e partner vanno su due righe: centrati, invece
   che appoggiati a sinistra con il vuoto a destra. */
@media (max-width: 1199px) {
	.innet-loghi {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	/* Su schermi stretti i loghi vanno su righe fisse, invece di andare a
	   capo dove capita (il Ministero finiva da solo su una riga). Il
	   blocco istituzionale tiene l'emblema UE da solo in alto, il piu'
	   largo come chiede il regolamento, e sotto FAMI e Ministero, separati
	   dalla linea grigia come su desktop. I partner stanno sotto una linea,
	   con l'etichetta sopra, cosi' i due gruppi non si confondono. */
	.innet-loghi {
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
	}

	.innet-loghi__blocco {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		gap: 18px 0;
	}

	.innet-loghi__blocco a:first-child {
		grid-column: 1 / -1;
		justify-self: center;
	}

	.innet-loghi__blocco a + a {
		margin-left: 24px;
		padding-left: 24px;
	}

	.innet-loghi__blocco a:nth-child(2) {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}

	.innet-loghi__partner {
		justify-content: center;
		gap: 12px 28px;
		padding-top: 22px;
		border-top: 1px solid var(--wp--preset--color--bordo-chip);
	}

	.innet-loghi__etichetta {
		flex-basis: 100%;
		text-align: center;
	}

	.innet-loghi__ue         { height: 44px; }
	.innet-loghi__fami       { height: 48px; }
	.innet-loghi__ministero  { height: 36px; }
	.innet-loghi__prefettura { height: 58px; }
	.innet-loghi__ciss       { height: 36px; }

	.innet-piede__fondo {
		margin-top: 28px;
	}
}

/* ====================================================================
   MOBILE - fino a 768px
   Il design mobile e' a 390px e i breakpoint intermedi non sono stati
   progettati: si interpola fra i due layout, come indica l'handoff.
   ==================================================================== */
@media (max-width: 768px) {

	/* Padding orizzontale di pagina: 40px -> 20px */
	body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}

	/* Spazi fra le sezioni: 72 e 48px sono misure da desktop, su telefono
	   lasciavano bande vuote alte quasi quanto il contenuto. */
	body {
		--wp--preset--spacing--60: 44px;
		--wp--preset--spacing--50: 36px;
		--wp--preset--spacing--40: 28px;
	}

	/* Tipografia mobile dell'handoff: H1 28-29, H2 22, H3 17.5-18, body 15.
	   Le prime tre le gestisce gia' la tipografia fluida di theme.json;
	   qui si allinea il corpo. */
	body {
		font-size: 0.9375rem;
	}

	/* Tessere delle aree: 3 colonne -> 2, come da specifica mobile.
	   Le altre griglie passano a colonna singola. */
	.innet-griglia-aree.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.innet-griglia-cta.is-layout-grid {
		grid-template-columns: 1fr;
	}

	/* Colonne affiancate impilate */
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap;
	}

	/* Schede delle aree e dei partner: icona sopra il testo, non accanto */
	.innet-scheda-area,
	.innet-scheda-partner {
		flex-wrap: wrap !important;
	}

	/* Numeri utili: righe impilate, come da tavola mobile */
	.innet-numeri {
		grid-template-columns: 1fr;
	}

	.innet-emergenza {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Richiami principali a tutta larghezza */
	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button .wp-block-button__link {
		display: block;
		text-align: center;
	}

	/* Barra superiore su una riga sola: il testo a sinistra, che se serve
	   va a capo dentro la sua colonna, e la bandiera a destra. Centrati,
	   la bandiera finiva su una seconda riga e la barra raddoppiava. */
	.innet-topbar .wp-block-group {
		flex-wrap: nowrap !important;
		justify-content: space-between;
		gap: 12px;
		text-align: left;
	}

	.innet-topbar p {
		line-height: 1.35 !important;
	}

	/* "FAMI 2021-2027" resta intero: andava a capo sul trattino. */
	.innet-topbar p .notranslate {
		white-space: nowrap;
	}

	.innet-topbar .innet-lingua {
		flex-shrink: 0;
	}

	/* 11px come da tavola mobile: a 12.5px la riga sul FAMI andava a capo
	   anche senza il selettore accanto. */
	.innet-topbar p {
		font-size: 0.6875rem !important;
	}

	/* Il selettore resta visibile e raggiungibile: e' l'unico modo di
	   cambiare lingua, e chi ne ha bisogno e' proprio chi non riesce a
	   leggere il resto della pagina.
	   Area toccabile di 44px, come chiede l'handoff. */
	/* Nel pulsante resta la sola bandiera: il nome della lingua allunga
	   la riga e manda a capo il testo FAMI accanto. I nomi compaiono
	   dentro il menu, dove servono davvero per scegliere.

	   Il pulsante non segue il minimo di 44px, le voci del menu si'.
	   Quella misura serve dove i bersagli sono adiacenti e si rischia di
	   sbagliare voce; qui e' un comando isolato, e a 44px la barra
	   diventava piu' alta dell'intestazione del sito. */
	.innet-lang__scelta {
		padding: 4px 7px;
		gap: 5px;
	}

	.innet-topbar {
		padding-top: 5px !important;
		padding-bottom: 5px !important;
	}

	.innet-lang__scelta .innet-lang__nome {
		display: none;
	}

	.innet-lang__lista {
		right: 0;
		left: auto;
		min-width: 220px;
	}

	.innet-lang__lista a.glink {
		min-height: 44px;
	}

	/* Intestazione come da tavola mobile: logo piu' piccolo, nome 17px.
	   Il logo e' il marchio ritagliato (non quadrato): conta la larghezza. */
	header .wp-block-site-logo img {
		width: 46px !important;
		height: auto !important;
	}

	header .wp-block-site-title {
		font-size: 1.0625rem !important;
	}

	/* Aree toccabili di almeno 44px, come chiede l'handoff */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------
   Il menu a scomparsa di WordPress passa a orizzontale a 600px, ma il
   design lo vuole fino a 768px. Fra le due misure si forza l'overlay.
   -------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 768px) {
	/* Stessa specificita' della regola del core (tre classi): con due sole
	   vinceva il core, e fra 600 e 768px si vedevano insieme il pulsante
	   del menu e tutte le voci in fila. */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* --------------------------------------------------------------------
   Menu a scomparsa (telefono e tablet), come da tavola mobile.

   Pannello blu che parte sotto l'intestazione: l'intestazione resta
   visibile e il pulsante del menu diventa una X nello stesso punto.
   Voci a tutta larghezza da 17px con divisori; la pagina corrente e'
   bianca con una barra azzurra a sinistra. In fondo le lingue e il
   richiamo alla mappa. Il comportamento e' in functions.php.
   -------------------------------------------------------------------- */

/* Pulsante nell'intestazione: icona centrata nell'area di tocco da 44px e
   allineata al bordo del contenuto (prima era incollata in alto a
   sinistra, e sembrava fuori posto). */
header .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	margin-right: -10px;
}

/* A menu aperto il pulsante diventa una X */
html.has-modal-open header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

html.has-modal-open header .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: var(--innet-chiudi) center / contain no-repeat;
	mask: var(--innet-chiudi) center / contain no-repeat;
}

/* Il pannello sotto l'intestazione (la classe la aggiunge lo script, dopo
   aver misurato dove finisce l'intestazione: senza script il menu resta
   quello di WordPress, a tutto schermo con la sua X) */
html.innet-menu-sotto .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--innet-menu-top, 0px);
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	animation: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	min-height: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
}

/* La X di WordPress dentro il pannello: nascosta, ma raggiungibile con la
   tastiera, e visibile quando riceve il fuoco. */
html.innet-menu-sotto .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

html.innet-menu-sotto .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	top: 12px;
	right: 12px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1 1 auto;
	align-items: stretch;
	padding: 0 !important;
	gap: 0;
}

html:not(.innet-menu-sotto) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: calc(2rem + 24px) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
	margin: 0;
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 16px 20px !important;
	border-left: 3px solid transparent;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	color: var(--wp--preset--color--azzurro-pallido);
}

.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	border-bottom: 0;
	border-left-color: var(--wp--preset--color--azzurro);
	background: rgba(255, 255, 255, 0.06);
	font-weight: 700;
	color: var(--wp--preset--color--bianco);
}

/* Lingue e mappa, in fondo al pannello. Fuori dal menu aperto non esistono. */
.innet-menu-extra {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .innet-menu-extra {
	display: block;
	margin-top: auto;
	padding: 24px 20px 32px;
}

.innet-menu-extra__titolo {
	margin: 0 0 10px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azzurro-tenue);
}

.innet-menu-lingue {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.innet-menu-lingue button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--azzurro-pallido);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
}

.innet-menu-lingue .innet-bandiera {
	width: 20px;
	height: auto;
	border-radius: 2px;
	/* le bandiere chiare (Giappone, Bangladesh) su fondo blu hanno bisogno
	   di un filo di contorno per non sembrare ritagliate male */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.innet-menu-lingue button[aria-pressed="true"] {
	border-color: var(--wp--preset--color--bianco);
	background: var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--blu);
}

.innet-menu-extra__mappa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
	padding: 13px 20px;
	border-radius: 4px;
	background: var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--blu) !important;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.innet-menu-extra__mappa:hover {
	background: var(--wp--preset--color--azzurro-tinta);
}


/* --------------------------------------------------------------------
   Colore ai lati e nelle tessere (17/09/2026).

   La cliente trovava il blu "troppo piatto" e chiedeva di estendere le
   linee della mappa in un colore tenue, come nella seconda pagina del
   libretto, sulle barre laterali, senza distrarre dal testo. Tre cose.

   1. Nelle barre laterali, fuori dai 1160px del contenuto, le linee della
      mappa in pastello: una tessera SVG (400x1200, ripetuta in verticale)
      disegnata con le regole della mappa dell'eroe (spessore 12, curve di
      raggio 30, qualche fermata), a sinistra e a destra specchiata e
      sfalsata. Ferma: scorre con la pagina come una filigrana stampata.
      Solo sul bianco: stanno in fondo a <main> (z-index negativo), cosi'
      ogni fascia con uno sfondo - eroe, intestazioni azzurre, fascia navy
      della home - le copre da sola, e intestazione e pie' di pagina, fuori
      da <main>, non le vedono. Sfumano verso il contenuto dalla meta' del
      disegno e si fermano a 56px dal suo bordo. Sotto i 1360px le barre
      sono strette: niente.
   2. Le tessere delle aree (home) e le schede (Il progetto) hanno il
      bordo sinistro nel colore della propria icona, come la linea a cui
      appartiene una fermata. Un'ombra interna, cosi' non sposta nulla.
   3. Davanti all'occhiello delle pagine una fermata (cerchio con anello),
      in linea con il testo, che si sposta di quel tanto a destra.

   I colori sono quelli delle linee della mappa (mappa-servizi.svg).
   -------------------------------------------------------------------- */
:root {
	--innet-linea-arancione: #f09835;
	--innet-linea-rosso: #ea5b5a;
	--innet-linea-verde: #46b493;
	--innet-linea-giallo: #f5bc1c;
	--innet-linea-azzurro: #50ace1;
	--innet-linea-viola: #9d94c7;
	--innet-linea-blu: #2f63ac;
	/* Le linee in pastello per le barre laterali: tessera 400x1200. */
	--innet-tessera-linee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 1200' width='400' height='1200'%3E%3Cg fill='none' stroke-width='12' stroke-linecap='butt'%3E%3Cpath stroke='%23f5bc1c' d='M0,90H310a30,30,0,0,1,30,30V300a30,30,0,0,0,30,30H400'/%3E%3Cpath stroke='%239d94c7' d='M330,0V30a30,30,0,0,0,30,30H400M400,1130H360a30,30,0,0,0-30,30V1200'/%3E%3Cpath stroke='%23ea5b5a' d='M70,0V190a30,30,0,0,0,30,30H200a30,30,0,0,1,30,30V440a30,30,0,0,1-30,30H100a30,30,0,0,0-30,30V1200'/%3E%3Cpath stroke='%2346b493' d='M150,0V610a30,30,0,0,0,30,30H300a30,30,0,0,1,30,30V870a30,30,0,0,1-30,30H180a30,30,0,0,0-30,30V1200'/%3E%3Cpath stroke='%2350ace1' d='M0,1060H250a30,30,0,0,0,30-30V560a30,30,0,0,1,30-30H400'/%3E%3C/g%3E%3Cg%3E%3Cg transform='translate(340 200) scale(0.7984) translate(-754.36 -753.54)'%3E%3Ccircle cx='754.36' cy='753.54' r='29.84' fill='%23ecdfbc' stroke='%23f5bc1c' stroke-width='8.46' stroke-miterlimit='10'/%3E%3C/g%3E%3Cg transform='translate(230 340) scale(0.7146) translate(-432.33 -684.70)'%3E%3Cpath fill='%23f3d7d7' d='M432.36,718.74a8.7,8.7,0,0,1-7.63-4.52L417.48,701a3.32,3.32,0,0,0-1.34-1.34l-13.26-7.25a8.69,8.69,0,0,1,0-15.25l13.26-7.25a3.32,3.32,0,0,0,1.34-1.34l7.25-13.26a8.69,8.69,0,0,1,15.25,0l7.25,13.26a3.32,3.32,0,0,0,1.34,1.34l13.26,7.25a8.69,8.69,0,0,1,0,15.25l-13.26,7.25a3.32,3.32,0,0,0-1.34,1.34L440,714.22A8.69,8.69,0,0,1,432.36,718.74Z'/%3E%3Cpath fill='%23ea5b5a' d='M432.36,655a4.43,4.43,0,0,1,3.91,2.32l7.25,13.26a7.63,7.63,0,0,0,3,3l13.26,7.25a4.47,4.47,0,0,1,0,7.83l-13.26,7.25a7.69,7.69,0,0,0-3,3l-7.25,13.26a4.46,4.46,0,0,1-7.83,0l-7.25-13.26a7.63,7.63,0,0,0-3-3l-13.26-7.25a4.47,4.47,0,0,1,0-7.83l13.26-7.25a7.57,7.57,0,0,0,3-3l7.25-13.26a4.44,4.44,0,0,1,3.92-2.32m0-8.46A12.93,12.93,0,0,0,421,653.24l-7.13,13-13,7.13a12.92,12.92,0,0,0,0,22.67l13,7.13,7.13,13a12.92,12.92,0,0,0,22.67,0l7.13-13,13-7.13a12.92,12.92,0,0,0,0-22.67l-13-7.13-7.13-13a12.93,12.93,0,0,0-11.33-6.72Z'/%3E%3C/g%3E%3Cg transform='translate(330 780) scale(0.6970) translate(-597.00 -512.79)'%3E%3Cpath fill='%23d6eae3' d='M597,547.73a34.94,34.94,0,0,1,0-69.88,12.26,12.26,0,0,1,0,24.52,10.42,10.42,0,1,0,10.42,10.42,12.26,12.26,0,0,1,24.52,0A35,35,0,0,1,597,547.73Z'/%3E%3Cpath fill='%2346b493' d='M597,482.08a8,8,0,0,1,0,16.06,14.65,14.65,0,1,0,14.65,14.65,8,8,0,0,1,16.06,0A30.71,30.71,0,1,1,597,482.08m0-8.46a39.17,39.17,0,1,0,39.17,39.17,16.48,16.48,0,0,0-25.14-14,16.48,16.48,0,0,0-14-25.14ZM597,519a6.19,6.19,0,1,1,0-12.38,16.37,16.37,0,0,0,8.65-2.46,16.37,16.37,0,0,0-2.46,8.65A6.2,6.2,0,0,1,597,519Z'/%3E%3C/g%3E%3Cg transform='translate(280 800) scale(0.6988) translate(-540.00 -841.38)'%3E%3Cpath fill='%23d2ecfb' d='M540,876.22a14.57,14.57,0,0,1-14.55-14.55v-5.74h-5.74a14.55,14.55,0,0,1,0-29.1h5.74v-5.74a14.55,14.55,0,1,1,29.1,0v5.74h5.74a14.55,14.55,0,1,1,0,29.1h-5.74v5.74A14.57,14.57,0,0,1,540,876.22Z'/%3E%3Cpath fill='%2350ace1' d='M540,810.77a10.32,10.32,0,0,1,10.32,10.32v10h10a10.32,10.32,0,1,1,0,20.64h-10v10a10.32,10.32,0,0,1-20.64,0v-10h-10a10.32,10.32,0,1,1,0-20.64h10v-10A10.32,10.32,0,0,1,540,810.77m0-8.46a18.8,18.8,0,0,0-18.78,18.78v1.51h-1.51a18.78,18.78,0,0,0,0,37.56h1.51v1.51a18.78,18.78,0,1,0,37.56,0v-1.51h1.51a18.78,18.78,0,1,0,0-37.56h-1.51v-1.51A18.8,18.8,0,0,0,540,802.31Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width: 1360px) {
	/* z-index: 0 chiude il contesto: il -1 delle linee resta dentro main,
	   sopra lo sfondo della pagina e sotto tutto il contenuto. */
	main {
		position: relative;
		z-index: 0;
	}

	main::before,
	main::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: -1;
		/* Larga quanto la barra laterale, ma non piu' del disegno (400px):
		   su schermi molto larghi la decorazione resta accanto al testo e
		   il resto della barra e' bianco. */
		width: min(400px, calc((100% - 1160px) / 2 - 56px));
		opacity: 0.32;
		pointer-events: none;
		background-image: var(--innet-tessera-linee);
		background-size: 400px 1200px;
		background-repeat: repeat-y;
		background-position: 0 -80px;
		/* Sfumano da entrambi i lati: verso il bianco sul lato esterno (120px,
		   o il 30% sulle barre strette) e verso il testo dalla meta' del
		   disegno in poi. Cosi' non si vede mai un taglio netto. */
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 min(120px, 30%), #000 50%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 min(120px, 30%), #000 50%, transparent 100%);
	}

	/* Ancorate al contenuto (largo 1160px, centrato), non al bordo dello
	   schermo: il lato interno sta a 56px dal testo. Sulle barre strette
	   coincide con il bordo dello schermo. */
	main::before {
		right: calc(50% + 580px + 56px);
	}

	main::after {
		left: calc(50% + 580px + 56px);
		transform: scaleX(-1);
		background-position: 0 -640px;
	}
}

/* Barre strette (1360-1600px): tessera al 70%, cosi' nel poco spazio si
   vede una linea intera e non solo frammenti. */
@media (min-width: 1360px) and (max-width: 1600px) {
	main::before,
	main::after {
		background-size: 280px 840px;
	}
}

/* Bordo d'area su tessere (home) e schede (Il progetto). In home il
   colore segue il link della tessera, non la posizione: se nell'editor
   si cambia l'ordine, i colori restano giusti. */
.innet-griglia-aree > .innet-tessera,
.innet-scheda-area {
	box-shadow: inset 6px 0 0 var(--innet-area, var(--innet-linea-blu));
}

.innet-griglia-aree > .innet-tessera:has(a[href$="#documenti"]),
.innet-scheda-area#documenti    { --innet-area: var(--innet-linea-giallo); }
.innet-griglia-aree > .innet-tessera:has(a[href$="#lavoro"]),
.innet-scheda-area#lavoro       { --innet-area: var(--innet-linea-verde); }
.innet-griglia-aree > .innet-tessera:has(a[href$="#salute"]),
.innet-scheda-area#salute       { --innet-area: var(--innet-linea-azzurro); }
.innet-griglia-aree > .innet-tessera:has(a[href$="#accoglienza"]),
.innet-scheda-area#accoglienza  { --innet-area: var(--innet-linea-rosso); }
.innet-griglia-aree > .innet-tessera:has(a[href$="#scuola"]),
.innet-scheda-area#scuola       { --innet-area: var(--innet-linea-blu); }
.innet-griglia-aree > .innet-tessera:has(a[href$="#orientamento"]),
.innet-scheda-area#orientamento { --innet-area: var(--innet-linea-viola); }

/* Fermata davanti all'occhiello: uno dei sette simboli della mappa
   dell'eroe (assets/fermate/, ritagliati da mappa-servizi.svg), diverso
   da pagina a pagina. Quale, lo decide functions.php dal nome della
   pagina, con una classe sul body; senza classe resta il cerchio giallo.
   Il simbolo occupa 26px; il testo parte dopo.
   border-box: dove l'occhiello e' figlio diretto della fascia, WordPress
   gli da' max-width 1160px e lo centra; con il rientro il blocco
   diventava piu' largo e slittava di 19px a sinistra del titolo. */
.innet-kicker {
	position: relative;
	box-sizing: border-box;
	padding-left: 38px;
}

.innet-kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 26px;
	height: 26px;
	transform: translateY(-50%);
	background: var(--innet-fermata, url("assets/fermate/giallo.svg")) center / contain no-repeat;
	pointer-events: none;
}

body.innet-fermata-blu       { --innet-fermata: url("assets/fermate/blu.svg"); }
body.innet-fermata-giallo    { --innet-fermata: url("assets/fermate/giallo.svg"); }
body.innet-fermata-arancione { --innet-fermata: url("assets/fermate/arancione.svg"); }
body.innet-fermata-rosso     { --innet-fermata: url("assets/fermate/rosso.svg"); }
body.innet-fermata-verde     { --innet-fermata: url("assets/fermate/verde.svg"); }
body.innet-fermata-azzurro   { --innet-fermata: url("assets/fermate/azzurro.svg"); }
body.innet-fermata-viola     { --innet-fermata: url("assets/fermate/viola.svg"); }

@media print {
	main::before,
	main::after,
	.innet-kicker::before {
		display: none;
	}
}

/* --------------------------------------------------------------------
   Rispetta chi ha chiesto meno animazioni a livello di sistema.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	/* Un'animazione infinita accorciata a 0,01ms tremerebbe: si toglie. */
	.innet-illustrazione img,
	.innet-mondo__mani,
	.innet-mondo__globo,
	.innet-mondo__luce {
		animation: none;
	}
}