/* ============================================================================
   MEEC — Struttura: intestazione, menu, piede
   ----------------------------------------------------------------------------
   Markup in parts/testata.php e parts/piede.php. Solo token --meec-*.
   Punto di rottura del menu: 67.5rem (1080px). Sotto, menu e azioni passano
   nel pannello aperto dal bottone "Menu" (Figma mobile: 393px, bottone 40x40).
   ============================================================================ */

/* --- Intestazione --------------------------------------------------------- */
/* Due stati, dal component set «Header» del Design System Figma (riquadro
   «Nuovo», 1181:9457, definitivo dal 25/09/2026):
     Expanded  1440x157  = riga alta 93 (UniCal + MEEC lungo + DIMES, pulsanti,
                           filo verde sotto) + navigazione 64
     Compact   1440x76   = marchio corto, navigazione e pulsanti in una riga
   Il markup e' lo stesso: cambia solo la griglia. Sotto 1080 vale il
   componente «Header mobile» (57 di altezza): vedi in fondo al file.        */
.meec-testata{
	/* Sotto i 1080 resta sticky: occupa il suo posto nel flusso, nessun salto.
	   z-index sopra le sezioni (che arrivano al massimo a 2), sotto salto al
	   contenuto e finestre dei plugin. */
	position:sticky;top:var(--meec-barra-admin);
	z-index:50;
	background:var(--meec-sup-sezione-bianca);
	box-shadow:var(--meec-ombra-md);   /* Figma: la stessa su entrambi gli stati */
}
/* Tiene il posto dell'intestazione quando da 1080 in su diventa fixed. Vedi
   parts/testata.php: e' alto zero finche' l'intestazione sta nel flusso. */
.meec-testata__spazio{height:0}
.meec-logo-esteso{display:none}
/* Marchio MEEC fra i due marchi istituzionali, distanti 24 (Figma: frame dei
   marchi, itemSpacing 24). UniCal e DIMES si vedono solo nello stato esteso;
   da mobile li mostra il piede del pannello (.meec-testata__enti).          */
.meec-testata__marchi{display:flex;align-items:center;gap:var(--meec-sp-4);min-width:0}
.meec-testata__ente{display:none}
.meec-marchio{max-width:100%;height:auto}
.meec-testata__interno{
	display:flex;align-items:center;gap:var(--meec-sp-8);
	min-height:var(--meec-testata-h);
}
.meec-testata__logo{
	display:inline-flex;align-items:center;flex:none;
	color:var(--meec-verde);
	text-decoration:none;
}
.meec-logo{display:block;height:2rem;width:auto}
/* Il marchio non cambia colore al passaggio (richiesta Zona-p, 23/09/2026):
   senza queste righe a:hover di base.css lo colorava di magenta, perche'
   pesa piu' di .meec-testata__logo. Il segnale d'azione e' una leggera
   scurita del verde; nel piede, su fondo scuro, una leggera attenuazione. */
.meec-testata__logo:is(:hover,:focus-visible){color:var(--meec-verde);filter:brightness(.8)}
.meec-testata__logo,.meec-piede__logo{transition:filter var(--meec-durata),opacity var(--meec-durata)}

/* Bottone Menu (solo sotto il punto di rottura, e solo con JavaScript) */
.meec-testata__menu{display:none}

/* Due livelli: il pannello e' l'involucro che si apre e si chiude (mobile),
   dentro c'e' il contenuto. Da desktop il pannello non fa nulla: dispone il
   contenuto l'involucro interno, con le stesse regole di prima. */
.meec-testata__pannello{flex:1 1 auto;min-width:0}
.meec-testata__pannello-interno{
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--meec-sp-5);
}
/* 16 fra i due pulsanti: Figma "Header extended" > CTA, itemSpacing 16. */
.meec-testata__azioni{display:flex;align-items:center;gap:var(--meec-sp-3);flex:none}

/* --- Menu principale ------------------------------------------------------- */
.meec-menu__elenco{
	display:flex;flex-wrap:wrap;align-items:center;
	gap:var(--meec-sp-1) var(--meec-sp-4);
	list-style:none;margin:0;padding:0;
}
.meec-menu__elenco > li{position:relative;display:flex;align-items:center;gap:var(--meec-sp-1)}
.meec-menu__elenco a{
	display:inline-block;
	padding-block:var(--meec-sp-1);
	color:var(--meec-testo-primario);
	font-size:var(--meec-corpo);line-height:1.5;
	text-decoration:none;
}
.meec-menu__elenco a:hover{color:var(--meec-testo-accento)}
/* Pagina corrente: il Figma non la disegna, ma chi naviga deve sapere dove si
   trova (WCAG 2.4.8, buona pratica). Colore + sottolineatura, non solo colore. */
.meec-menu__elenco .current-menu-item > a,
.meec-menu__elenco .current-menu-ancestor > a,
.meec-menu__elenco a[aria-current="page"]{
	color:var(--meec-testo-accento);
	text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em;
}

.meec-menu__apri{
	display:inline-flex;align-items:center;justify-content:center;
	width:1.5rem;height:1.5rem;padding:0;
	border:0;border-radius:var(--meec-raggio-xs);
	background:transparent;color:var(--meec-testo-primario);
	cursor:pointer;
}
/* La freccia gira insieme al sottomenu, con le stesse curve. */
.meec-menu__apri .meec-icona{
	width:1.25rem;height:1.25rem;
	transition:transform 240ms var(--meec-curva-uscita);
}
.meec-menu__apri[aria-expanded="true"] .meec-icona{
	transform:rotate(180deg);
	transition:transform 280ms var(--meec-curva);
}

.meec-menu__elenco .sub-menu{
	list-style:none;margin:0;padding:var(--meec-sp-2);
	min-width:15rem;
	background:var(--meec-sup-sezione-bianca);
	border:1px solid var(--meec-bordo-terziario);
	border-radius:var(--meec-raggio-sm);
	box-shadow:var(--meec-ombra-lg);
}
.meec-menu__elenco .sub-menu a{display:block;padding:var(--meec-sp-2) var(--meec-sp-3);border-radius:var(--meec-raggio-xs)}
.meec-menu__elenco .sub-menu a:hover{background:var(--meec-sup-sezione-grigia)}
/* Voce che il Figma mette solo nel menu mobile («Home», Header mobile
   Expanded): classe CSS impostata sulla voce da Aspetto > Menu. Il piede
   stampa lo stesso menu e non la vuole mai; da 1080 in su nemmeno la testata. */
.meec-piede .meec-menu__solo-mobile{display:none}
/* Voce che sta solo nel piede («Contatti», tolta dalla navigazione principale il
   29/09/2026 su indicazione di Zona-p per alleggerire la testata): stessa
   meccanica, classe CSS sulla voce da Aspetto > Menu. La testata la salta,
   pannello mobile compreso; la colonna MENU del piede la stampa. */
.meec-testata .meec-menu__solo-piede{display:none}

/* --- Piede -----------------------------------------------------------------
   Master component «Footer desktop» 1246:12040 (1440x537) del Design System,
   letto con la Plugin API il 25/09/2026:
     padding 56 sopra e sotto, 48 fra le tre fasce (alto, filo, fondo);
     alto: marchi 526 | 134 | MENU 307 | 24 | INFORMAZIONI 306;
     marchi in colonna distanti 32: MEEC lungo 526x48, UniCal+DIMES 526x57,
       MUR 119 + 40 + dicitura 14px;
     titoli colonna Inter SemiBold 18/110% maiuscoli in un blocco da 44,
       voci 16 ogni 32; social 24 con passo 40, 40 sotto l'elenco;
     filo 1px Neutri/200 (Variable), fondo: copyright 14/140% | note legali
       16 in caselle 12/8 distanti 16.
   Il padding laterale del frame e' 80: il tema tiene il contenitore unico
   (72 a 1440), come per tutte le sezioni.                                   */
.meec-piede{
	background:var(--meec-sup-piede);   /* Brand/Dark/950, legato alla Variable nel Figma */
	color:var(--meec-testo-invertito);
	padding-block:var(--meec-sp-8);     /* 56 */
}
/* La colonna vuota fa da molla: 24 + molla + 24 = 134 a 1440 (1296 di
   contenuto), e sotto si stringe invece di sbordare.                         */
.meec-piede__alto{
	display:grid;
	grid-template-columns:minmax(0,32.875rem) minmax(0,1fr) minmax(0,19.1875rem) minmax(0,19.125rem);
	column-gap:var(--meec-sp-4);
	align-items:start;
}
.meec-piede__identita{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--meec-sp-5)}
.meec-piede__colonna--menu{grid-column:3}
.meec-piede__colonna--info{grid-column:4;display:flex;flex-direction:column;gap:var(--meec-sp-6)}
.meec-piede__logo{display:block;width:100%;max-width:32.875rem;color:var(--meec-testo-invertito);text-decoration:none}
.meec-piede__logo img{display:block;width:100%;height:auto}
.meec-piede__logo:is(:hover,:focus-visible){opacity:.8;text-decoration:none}
.meec-piede__ateneo{width:100%;max-width:32.875rem}                 /* 526x57 */
.meec-piede__mur{display:flex;align-items:center;gap:var(--meec-sp-6)}   /* 40 */
.meec-piede__mur .meec-marchio--mur{flex:none;width:7.4375rem}           /* 119 */
/* Il Figma la scrive in Titillium Web 14/100%: il tema non carica quel font
   per un solo paragrafo, resta Inter 14 con un'interlinea che ne rispetta
   l'ingombro (5 righe in ~76).                                             */
.meec-piede__finanziamento{
	margin:0;max-width:22.9375rem;                                        /* 367 */
	font-size:var(--meec-testo-sm);line-height:1.1;
}

.meec-piede__titolo{
	margin:0 0 var(--meec-sp-3);
	padding-block:calc(var(--meec-sp-2) + var(--meec-sp-1));   /* 12px: blocco di 44 come nel Figma */
	font-family:var(--meec-font-testo);
	font-size:var(--meec-testo-lg);font-weight:600;line-height:1.25rem;
	text-transform:uppercase;
	color:var(--meec-testo-invertito);
}
.meec-piede__elenco{list-style:none;margin:0;padding:0;display:grid;gap:var(--meec-sp-2)}   /* righe ogni 32px, come nel Figma */
.meec-piede a{color:var(--meec-testo-invertito);text-decoration:none}
.meec-piede a:hover{text-decoration:underline}

/* --- Social del piede -----------------------------------------------------
   Letto dal Figma con la Plugin API: frame "Social Icons" 266x24 dentro la
   colonna CONTATTI, a filo del suo bordo sinistro, icone 24 con gap 16 ->
   passo 40.
   Il collegamento e' una cassa da 40 con l'icona centrata: cosi' il passo e'
   esattamente quello del Figma e il bersaglio tattile resta 40x40 (WCAG 2.5.8
   chiede 24; i 44 di Apple avrebbero dato passo 44, cioe' 4px piu' larghi del
   disegno). L'elenco rientra di mezza differenza cassa-icona perche' la prima
   icona resti allineata al testo della colonna.
   Il colore e' quello del testo: sul verde del piede fa 14,4:1.             */
/* --- Fila dei profili social ----------------------------------------------
   Le classi sono generiche (.meec-social) e non del piede, perche' la stessa
   fila la mostra anche la fascia «Resta aggiornato» della pagina Contatti,
   leggendo lo stesso menu: vedi meec_social_fila() e lo shortcode
   [meec_social]. Qui c'e' il componente; la taglia grande sta in pagine.css.
   Cassa 40 con icona 24 = passo 40, che e' quello del Figma. I 44 di Apple
   avrebbero dato passo 44: 40 resta molto sopra il minimo WCAG 2.5.8 (24).  */
.meec-social{
	display:flex;flex-wrap:wrap;align-items:center;
	list-style:none;margin:0;padding:0;
	--_social-cassa:2.5rem;--_social-icona:1.5rem;
}
.meec-social__link{
	display:inline-flex;align-items:center;justify-content:center;
	width:var(--_social-cassa);height:var(--_social-cassa);
	border-radius:var(--meec-raggio-sm);
	transition:opacity var(--meec-durata), translate var(--meec-durata);
}
.meec-social__link .meec-icona{width:var(--_social-icona);height:var(--_social-icona)}
/* Micro-interazione discreta: l'icona sale di 1px, e col mouse si schiarisce
   appena. L'opacita' NON si tocca sul focus da tastiera: opacity vale anche
   per l'outline, e l'anello di focus deve restare a contrasto pieno (WCAG
   1.4.11). Da tastiera si muove solo, l'anello fa il resto.                 */
.meec-social__link:hover,
.meec-social__link:focus-visible{translate:0 -1px;text-decoration:none}
.meec-social__link:hover{opacity:.75}
.meec-social__link:focus-visible{opacity:1}
@media (prefers-reduced-motion:reduce){
	.meec-social__link{transition:none}
	.meec-social__link:hover,
	.meec-social__link:focus-visible{translate:none}
}
@media (forced-colors:active){
	.meec-social__link:hover{opacity:1}
}

/* Nel piede: bianca, rientrata di (40-24)/2 perche' la prima icona resti a
   filo del testo della colonna. La distanza dall'elenco (40) la da' il gap
   della colonna. Da desktop si vede la fila sotto INFORMAZIONI, da mobile
   quella del fondo: l'altra e' display:none (vedi parts/piede.php).        */
.meec-social--piede{margin:calc(-1 * (2.5rem - 1.5rem) / 2)}
.meec-social--piede .meec-social__link{color:var(--meec-testo-invertito)}
.meec-piede__social--fondo{display:none}

.meec-piede__fondo{
	display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
	gap:var(--meec-sp-3) var(--meec-sp-7);
	margin-top:var(--meec-sp-7);padding-top:var(--meec-sp-7);
	border-top:1px solid var(--meec-bordo-terziario);   /* Neutri/200, legato alla Variable nel Figma definitivo */
}
.meec-piede__copyright{margin:0;font-size:var(--meec-testo-sm);line-height:1.4}
/* Caselle 12/8 come nel Figma; il margine destro negativo porta il testo
   dell'ultima voce a filo del contenitore, come il copyright a sinistra.   */
.meec-piede__legale{
	display:flex;flex-wrap:wrap;gap:var(--meec-sp-3);
	list-style:none;margin:0 calc(-1 * var(--meec-sp-2)) 0 0;padding:0;
}
.meec-piede__legale a{display:inline-block;padding:calc(var(--meec-sp-2) + var(--meec-sp-1)) var(--meec-sp-2);line-height:1}

/* Sotto i 1280 le quattro colonne non ci stanno: i marchi (526) si
   stringerebbero a 300. Vanno sopra, a tutta riga, e le due colonne di menu
   sotto, alla loro misura. Tipografia ancora desktop fino a 1080.           */
@media (max-width:79.99rem){
	.meec-piede__alto{grid-template-columns:repeat(2,minmax(0,19.1875rem));row-gap:var(--meec-sp-7)}
	.meec-piede__identita{grid-column:1 / -1}
	.meec-piede__colonna--menu{grid-column:1}
	.meec-piede__colonna--info{grid-column:2}
}

/* --- GeneratePress: cio' che il suo CSS aggiunge attorno a intestazione e
   piede non serve piu'. --------------------------------------------------- */
.site-footer{background:transparent;padding:0}

/* ==========================================================================
   Desktop (>= 1080px): sottomenu a tendina
   ========================================================================== */
@media (min-width:67.5rem){
	/* A tendina: si stacca l'involucro, la lista dentro resta com'e'. */
	.meec-menu__elenco > li > .meec-sottomenu{
		position:absolute;top:100%;left:0;
		margin-top:var(--meec-sp-2);
		display:none;
	}
	/* Senza JS: passaggio del mouse e focus. Con JS: lo stato del bottone. */
	.meec-menu__elenco > li:hover > .meec-sottomenu,
	.meec-menu__elenco > li:focus-within > .meec-sottomenu{display:block}
	.meec-js .meec-menu__elenco > li:focus-within > .meec-sottomenu{display:none}
	.meec-js .meec-menu__elenco > li:hover > .meec-sottomenu,
	/* Il selettore e' lungo apposta: deve battere la riga qui sopra, che ha un
	   :focus-within e vincerebbe proprio quando il bottone e' appena stato
	   premuto da tastiera (cioe' quando serve che la tendina si apra). */
	.meec-js .meec-menu__elenco > li > .meec-menu__apri[aria-expanded="true"] + .meec-sottomenu{display:block}
	/* Ponte invisibile tra voce e tendina, cosi' il mouse non la chiude. */
	.meec-menu__elenco > li.menu-item-has-children::after{
		content:"";position:absolute;left:0;right:0;top:100%;height:var(--meec-sp-2);
	}
}

/* ==========================================================================
   Tablet e mobile (< 1080px)
   ========================================================================== */
@media (max-width:67.49rem){
	.meec-testata__interno{
		flex-wrap:wrap;gap:0 var(--meec-sp-3);
		align-content:flex-start;
		min-height:0;
		justify-content:space-between;
	}
	/* La prima riga (logo + bottone) e' alta 72px come nel Figma; il pannello
	   aperto va sulla riga successiva, sotto, senza sovrapporsi. */
	.meec-testata__logo{min-height:var(--meec-testata-h-mobile)}
	/* I due simboli (menu / chiudi) stanno nella stessa cella e si scambiano in
	   dissolvenza: nessuno dei due sparisce di colpo e il bottone non cambia
	   misura. Area di tocco sempre 40x40, come nel Figma. */
	.meec-js .meec-testata__menu{
		display:inline-grid;place-items:center;
		width:2.5rem;height:2.5rem;padding:var(--meec-sp-2);
		border:0;border-radius:var(--meec-raggio-sm);
		background:transparent;color:var(--meec-testo-primario);
		cursor:pointer;
	}
	.meec-testata__menu .meec-icona{width:1.5rem;height:1.5rem}
	.meec-testata__menu-apri,
	.meec-testata__menu-chiudi{
		grid-area:1 / 1;display:inline-flex;
		transition:opacity 180ms ease,transform 240ms var(--meec-curva);
	}
	.meec-testata__menu-chiudi,
	.meec-testata__menu[aria-expanded="true"] .meec-testata__menu-apri{opacity:0;transform:scale(.85)}
	.meec-testata__menu[aria-expanded="true"] .meec-testata__menu-chiudi{opacity:1;transform:none}

	.meec-testata__pannello{flex:1 0 100%}
	/* Il margine negativo compensato dal padding lascia spazio all'anello del
	   focus ai lati. min-height:0 perche' e' la cella della griglia che deve
	   poter scendere a zero: l'involucro la segue e taglia cio' che avanza. */
	.meec-testata__pannello-interno{
		flex-direction:column;align-items:stretch;gap:var(--meec-sp-4);
		padding-block:var(--meec-sp-3) var(--meec-sp-5);
		padding-inline:var(--meec-sp-2);margin-inline:calc(-1 * var(--meec-sp-2));
		min-height:0;overflow-y:auto;overscroll-behavior:contain;
	}

	/* --- Apertura e chiusura (solo con JavaScript) --------------------------
	   Il pannello sta nel flusso, sulla seconda riga dell'intestazione: per
	   entrare e uscire deve cambiare altezza. L'unico modo fluido senza misure
	   scritte a mano e' la riga della griglia da 0fr a 1fr. Il contenuto arriva
	   subito dopo, in dissolvenza e con mezzo rem di discesa. Chi chiude non
	   vede un lampo: visibility aspetta la fine della transizione, e non
	   display:none, che la troncherebbe. Aperto dentro un'intestazione sticky
	   il pannello non puo' superare lo schermo: max-height lo limita e
	   l'involucro scorre al suo interno senza trascinare la pagina. */
	.meec-js .meec-testata__pannello{
		display:grid;grid-template-rows:0fr;
		visibility:hidden;pointer-events:none;
		max-height:calc(100vh - var(--meec-sopra));
		max-height:calc(100dvh - var(--meec-sopra));
		transition:
			grid-template-rows var(--meec-durata-chiusura) var(--meec-curva-uscita),
			visibility 0s linear var(--meec-durata-chiusura);
	}
	.meec-js .meec-testata__pannello.is-aperto{
		grid-template-rows:1fr;
		visibility:visible;pointer-events:auto;
		transition:
			grid-template-rows var(--meec-durata-apertura) var(--meec-curva),
			visibility 0s;
	}
	/* Il padding verticale sta dentro la riga che si chiude: se restasse, da
	   chiuso il pannello sarebbe alto quanto il padding. Si chiude con lei. */
	.meec-js .meec-testata__pannello-interno{
		padding-block:0;
		transition:padding var(--meec-durata-chiusura) var(--meec-curva-uscita);
	}
	.meec-js .meec-testata__pannello.is-aperto > .meec-testata__pannello-interno{
		padding-block:var(--meec-sp-3) var(--meec-sp-5);
		transition:padding var(--meec-durata-apertura) var(--meec-curva);
	}
	/* Due soli gruppi, sfalsati di poco: il menu resta un oggetto solo, non una
	   sequenza. In chiusura nessun ritardo, cosi' il contenuto va via per primo. */
	.meec-js .meec-testata__pannello .meec-menu,
	.meec-js .meec-testata__pannello .meec-testata__enti,
	.meec-js .meec-testata__pannello .meec-testata__azioni{
		opacity:0;transform:translateY(-.5rem);
		transition:opacity 160ms ease,transform var(--meec-durata-chiusura) var(--meec-curva-uscita);
	}
	.meec-js .meec-testata__pannello.is-aperto .meec-menu,
	.meec-js .meec-testata__pannello.is-aperto .meec-testata__enti,
	.meec-js .meec-testata__pannello.is-aperto .meec-testata__azioni{opacity:1;transform:none}
	.meec-js .meec-testata__pannello.is-aperto .meec-menu{
		transition:opacity 240ms ease 50ms,transform 300ms var(--meec-curva) 50ms;
	}
	.meec-js .meec-testata__pannello.is-aperto .meec-testata__enti,
	.meec-js .meec-testata__pannello.is-aperto .meec-testata__azioni{
		transition:opacity 240ms ease 100ms,transform 300ms var(--meec-curva) 100ms;
	}
	/* All'apertura il focus entra nel pannello: niente anello per chi arriva
	   col dito o col mouse, resta per chi usa la tastiera (:focus-visible). */
	.meec-testata__pannello:focus{outline:none}

	/* Menu aperto: la pagina sotto sta ferma. --meec-barra-scorrimento e'
	   misurata in navigazione.js e vale 0 dove la barra non occupa spazio,
	   cosi' togliendola la pagina non si allarga di colpo. */
	.meec-menu-aperto{overflow:hidden;padding-inline-end:var(--meec-barra-scorrimento,0px)}

	.meec-menu__elenco{flex-direction:column;align-items:stretch;gap:0}
	/* row-gap a zero: l'involucro del sottomenu, anche chiuso, occupa una riga
	   del flex, e i 4px si vedrebbero sempre. Quei 4px tornano come padding
	   dentro la lista, dove si chiudono insieme a lei. */
	.meec-menu__elenco > li{flex-wrap:wrap;justify-content:space-between;row-gap:0;border-bottom:1px solid var(--meec-bordo-terziario)}
	.meec-menu__elenco a{padding-block:var(--meec-sp-3);flex:1 1 auto}
	.meec-menu__apri{width:2.75rem;height:2.75rem}
	.meec-sottomenu{flex:1 0 100%}
	.meec-menu__elenco .sub-menu{
		border:0;box-shadow:none;border-radius:0;
		padding:var(--meec-sp-1) 0 var(--meec-sp-2) var(--meec-sp-3);
	}

	/* Apertura del sottomenu: stessa tecnica del pannello (riga di griglia da
	   0fr a 1fr), su misura piu' piccola e quindi un po' piu' svelta. Il
	   padding della lista sta dentro l'involucro che taglia, percio' si chiude
	   da solo e non serve animarlo. Senza JavaScript nulla di tutto questo:
	   il sottomenu resta aperto. */
	.meec-sottomenu__interno{min-height:0;overflow:hidden}
	.meec-js .meec-menu__elenco .meec-sottomenu{
		display:grid;grid-template-rows:0fr;
		visibility:hidden;
		transition:
			grid-template-rows 240ms var(--meec-curva-uscita),
			visibility 0s linear 240ms;
	}
	.meec-js .meec-menu__apri[aria-expanded="true"] + .meec-sottomenu{
		grid-template-rows:1fr;
		visibility:visible;
		transition:
			grid-template-rows 300ms var(--meec-curva),
			visibility 0s;
	}
	.meec-js .meec-menu__elenco .meec-sottomenu .sub-menu{
		opacity:0;transform:translateY(-.25rem);
		transition:opacity 130ms ease,transform 240ms var(--meec-curva-uscita);
	}
	.meec-js .meec-menu__apri[aria-expanded="true"] + .meec-sottomenu .sub-menu{
		opacity:1;transform:none;
		transition:opacity 200ms ease 40ms,transform 300ms var(--meec-curva) 40ms;
	}

	.meec-testata__azioni{flex-direction:column;align-items:stretch}
	.meec-testata__azioni .meec-bottone{width:100%}

	/* --- Piede sotto i 1080: master component «Footer mobile» 1246:22417 ---
	   393x872, padding 48/16. Marchi in colonna distanti 24 (MEEC lungo a
	   tutta larghezza, UniCal+DIMES 360, MUR 126 + 16 + dicitura 14/105%),
	   poi 48, poi MENU e INFORMAZIONI affiancate (gap 32): titolo 14/20,
	   16 sotto, voci SemiBold 16/24 distanti 12. Filo a 48, poi 48, poi
	   social, 24, copyright, 24, note legali in tre colonne uguali 14/20.
	   Da tablet i marchi si fermano alla misura desktop (526).              */
	.meec-piede{padding-block:var(--meec-sp-7)}
	.meec-piede__alto{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:var(--meec-sp-7) var(--meec-sp-5);
	}
	.meec-piede__identita{grid-column:1 / -1;gap:var(--meec-sp-4)}
	.meec-piede__colonna--menu{grid-column:1}
	.meec-piede__colonna--info{grid-column:2}
	.meec-piede__mur{gap:var(--meec-sp-3);max-width:32.875rem}
	.meec-piede__mur .meec-marchio--mur{width:7.875rem}                    /* 126 */
	.meec-piede__finanziamento{max-width:none;line-height:1.05}
	.meec-piede__titolo{padding-block:0;font-size:var(--meec-testo-sm);line-height:1.25rem}
	.meec-piede__elenco{gap:var(--meec-sp-2) var(--meec-sp-2);row-gap:.75rem}
	.meec-piede__elenco a{font-weight:600}
	.meec-piede__social--alto{display:none}
	.meec-piede__social--fondo{display:block}
	.meec-piede__fondo{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:var(--meec-sp-4)}
	.meec-piede__copyright{line-height:1.25rem}
	.meec-piede__legale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--meec-sp-2);margin:0}
	.meec-piede__legale a{padding:0;font-size:var(--meec-testo-sm);line-height:1.25rem}
}

/* ==========================================================================
   Intestazione da 1080px in su: stato esteso e stato compatto
   ==========================================================================
   Misure prese con la Plugin API dal component set «Header» del Design System
   (riquadro «Nuovo», nodo 1181:9457, 25/09/2026), non stimate dagli
   screenshot:

     Expanded 1440x157   riga alta 93: padding 24/72, marchi alti 38 distanti
                         24 (UniCal 109, MEEC lungo 416, DIMES 59), pulsanti
                         44 con 16 di distanza, filo 1px #5CA053 a TUTTA
                         larghezza sotto la riga;
                         riga navigazione 64: padding 16/72, distanza 40.
     Compact  1440x76    padding 16/72, marchio corto 109x40, 96 fra marchio e
                         navigazione, 24 fra le voci, pulsanti distanti 8.
     ombra    su entrambi 0 2px 4px -2px rgba(29,29,31,.06),
                          0 4px 8px -2px rgba(29,29,31,.1) = --meec-ombra-md.

   Nel Figma la riga alta ha allineamento MIN con distanza fissa (236 fra
   marchi e pulsanti): a 1440 riempie esattamente i 1296 del contenitore,
   percio' qui e' space-between, stesso risultato alla misura di progetto e
   sotto i 1440 si stringe invece di sbordare. Nel compatto marchio e
   navigazione distano 24 (non 96: vedi sotto), e la navigazione, che ha
   minmax(0,1fr), va a capo prima di spingere fuori i pulsanti.

   position:fixed e non sticky: l'intestazione cambia altezza fra i due stati,
   e con sticky il posto che occupa nel flusso si accorcerebbe con lei,
   facendo saltare su di 113px tutto il contenuto. Fixed la toglie dal flusso
   e il posto lo tiene .meec-testata__spazio, che resta sempre alto 189.
   Niente overflow:hidden sull'intestazione: taglierebbe le tendine del menu,
   che sono in posizione assoluta sotto la voce.                             */
@media (min-width:67.5rem){
	.meec-testata{
		position:fixed;left:0;right:0;
		height:var(--meec-testata-h-estesa);
		transition:height var(--meec-durata) var(--meec-curva);
	}
	.meec-testata__spazio{height:var(--meec-testata-h-estesa)}

	/* Il pannello serve solo al menu mobile: qui sparisce dal box tree e i suoi
	   figli (navigazione e pulsanti) diventano caselle di questa griglia. */
	.meec-testata__pannello,
	.meec-testata__pannello-interno{display:contents}

	.meec-testata__interno{
		display:grid;height:100%;min-height:0;gap:0;
		grid-template-columns:auto minmax(0,1fr);
		grid-template-rows:var(--meec-testata-riga-alta) var(--meec-testata-riga-nav);
		grid-template-areas:
			"logo azioni"
			"nav  nav";
		align-items:center;
	}
	.meec-testata__marchi{grid-area:logo}
	.meec-testata .meec-menu{grid-area:nav;min-width:0}
	.meec-testata__azioni{grid-area:azioni;justify-self:end}

	/* Il filo fra le due righe e' largo quanto la finestra, non quanto il
	   contenitore: sta sull'intestazione, non dentro .meec-contenitore. */
	.meec-testata::after{
		content:"";position:absolute;left:0;right:0;
		top:calc(var(--meec-testata-riga-alta) - 1px);height:1px;
		background:var(--wp--custom--colore--brand-light--500);
	}

	.meec-logo-esteso{display:block;width:26rem;height:2.375rem}  /* 416x38 */
	.meec-testata__logo .meec-logo{display:none}
	.meec-testata__ente{display:block;width:auto;height:2.375rem}   /* 38: UniCal 109, DIMES 59 */
	/* Marchi 632 + pulsanti 265: a 1080 il contenitore e' ~975, ci stanno
	   alla misura piena senza ridursi (verificato a 1080).                  */
	/* 40 fra le voci a 1440 come nel Figma; scende con la finestra (31 a 1080)
	   perche' le sette voci, tre con tendina, stiano su una riga.          */
	.meec-testata .meec-menu__elenco{gap:var(--meec-sp-1) clamp(var(--meec-sp-4), calc(2.5vw + .25rem), var(--meec-sp-6))}

	/* --- Stato compatto: una riga sola ------------------------------------ */
	.meec-testata.is-compatta{height:var(--meec-testata-h)}
	.meec-testata.is-compatta .meec-testata__interno{
		grid-template-columns:auto minmax(0,1fr) auto;
		grid-template-rows:var(--meec-testata-h);
		grid-template-areas:"logo nav azioni";
	}
	/* Il Figma mette 96 fra marchio e navigazione e 24 fra le voci, ma e'
	   disegnato con sei voci. Il menu del sito ne ha sette, tre con tendina
	   (decisione di Mariano, 26/09/2026): a 1440 non ci starebbero. Qui 16
	   ai lati della navigazione e 20 fra le voci (margine di ~55px a 1440,
	   per i font che rendono piu' larghi), e il compatto scatta solo da 1440
	   (navigazione.js).                                                      */
	.meec-testata.is-compatta .meec-menu{
		justify-self:start;
		margin-inline:var(--meec-sp-3);
	}
	.meec-testata.is-compatta .meec-testata__azioni{gap:var(--meec-sp-2)}   /* 8 */
	.meec-testata.is-compatta::after{content:none}
	.meec-testata.is-compatta .meec-logo-esteso,
	.meec-testata.is-compatta .meec-testata__ente{display:none}
	.meec-testata.is-compatta .meec-testata__logo .meec-logo{display:block}
	.meec-testata.is-compatta .meec-menu__elenco{gap:var(--meec-sp-1) 1.25rem}  /* 20: vedi sopra */

	/* Marchio compatto 109x40 come nel Figma. */
	.meec-testata .meec-logo{height:2.5rem}
	/* Il pannello mobile non c'e': i suoi marchi nemmeno. */
	.meec-testata__enti{display:none}
	.meec-testata .meec-menu__solo-mobile{display:none}
}

/* ==========================================================================
   Chi ha chiesto meno movimento: il menu si apre e si chiude come prima, ma
   di colpo. base.css azzera gia' le durate; qui restano i ritardi (che quella
   regola non tocca) e gli scostamenti, che non devono lasciare traccia.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
	.meec-testata__pannello,
	.meec-testata__pannello-interno,
	.meec-testata__pannello .meec-menu,
	.meec-testata__pannello .meec-testata__enti,
	.meec-testata__pannello .meec-testata__azioni,
	.meec-testata__menu-apri,
	.meec-testata__menu-chiudi,
	.meec-sottomenu,
	.meec-sottomenu .sub-menu{
		transition-delay:0s!important;
		transform:none!important;
	}
	/* La freccia indica lo stato: resta girata, ma senza animazione (le durate
	   le azzera gia' base.css). */
	.meec-menu__apri[aria-expanded="true"] .meec-icona{transform:rotate(180deg)!important}
}

/* ==========================================================================
   Intestazione sotto i 1080px — componente «Header mobile» del Design System
   (Figma 1084:17955, inserito da Zona-p il 18/09/2026). Letto con la Plugin API:

     Compact   393x57   padding 16, marchio LUNGO 270x25 a sinistra,
                        hamburger 24 (tratto 2, #1d1d1f) a destra.
     Expanded  393x694  riga 60 col marchio CORTO 76x28 e la X; sotto il
                        pannello: voci Inter SemiBold 16/24, padding 8/16,
                        alte 40, distanza 8, padding 24 sopra e sotto, NESSUN
                        separatore fra le voci; filo 2px Neutri/200 (#dedede);
                        piede del pannello padding 32/16/24: marchi UniCal
                        155x54 e DIMES distanti 32 (aggiunti nel riquadro
                        «Nuovo», 25/09/2026), 40 sotto due bottoni xl 48 a
                        tutta larghezza distanti 8 (secondario sopra).

   Scelte:
   - La riga resta alta 57 anche a menu aperto (il Figma la porta a 60): tre
     pixel di salto all'apertura sarebbero piu' visibili dei tre pixel.
   - Il bottone resta una cassa da 40 (bersaglio tattile, WCAG 2.5.8): sta
     dentro i 57 della riga, l'icona e' la stessa da 24 del Figma.
   - Il marchio lungo e' lo stesso file del desktop (416x38, proporzione
     identica a 270x25). Sotto i 342px non ci starebbe accanto al bottone:
     si stringe, non va a capo.
   ========================================================================== */
@media (max-width:67.49rem){
	.meec-testata__logo{min-height:var(--meec-testata-h-mobile)}
	.meec-testata .meec-logo-esteso{
		display:block;
		width:16.875rem;height:auto;                                 /* 270 */
		max-width:calc(100vw - 2 * var(--meec-margine) - 2.5rem - var(--meec-sp-3));
	}
	.meec-testata__logo .meec-logo{display:none;height:1.75rem}       /* 28: marchio corto a menu aperto */
	.meec-menu-aperto .meec-testata .meec-logo-esteso{display:none}
	.meec-menu-aperto .meec-testata__logo .meec-logo{display:block}
	/* Il bottone da 40 sporge di 8 nel margine: l'icona da 24 cade a filo del
	   margine destro, come nel Figma (hamburger a x 353-377 su 393). */
	.meec-js .meec-testata__menu{margin-inline-end:calc(-1 * var(--meec-sp-2))}

	/* Pannello: 24 sopra e sotto il menu, poi filo da 2, poi i bottoni. */
	.meec-js .meec-testata__pannello.is-aperto > .meec-testata__pannello-interno,
	.meec-testata__pannello-interno{gap:0;padding-block:var(--meec-sp-4) var(--meec-sp-4)}
	.meec-js .meec-testata__pannello-interno{padding-block:0}

	.meec-menu__elenco{gap:var(--meec-sp-2)}
	.meec-menu__elenco > li{border-bottom:0}
	.meec-menu__elenco > li > a{
		padding-block:var(--meec-sp-2);
		font-weight:600;color:var(--meec-testo-primario);
	}
	.meec-menu__apri{width:2.5rem;height:2.5rem;margin-inline-end:calc(-1 * var(--meec-sp-2))}
	.meec-menu__apri .meec-icona{width:1.25rem;height:1.25rem}        /* chevron 20 */
	.meec-menu__elenco .sub-menu{padding:0 0 var(--meec-sp-2) var(--meec-sp-3)}
	.meec-menu__elenco .sub-menu a{padding:var(--meec-sp-2) 0;font-weight:400}

	/* Piede del pannello: filo da 2, 32, marchi, 40, bottoni. */
	.meec-testata__enti{
		display:flex;align-items:center;gap:var(--meec-sp-5);         /* 32 */
		margin-top:var(--meec-sp-4);
		padding-top:var(--meec-sp-5);                                  /* 24 del menu + 32 del piede */
		border-top:2px solid var(--meec-bordo-terziario);
	}
	.meec-testata__enti .meec-marchio{width:auto;height:3.375rem}      /* 54: UniCal 155, DIMES 84 */
	.meec-testata__azioni{
		gap:var(--meec-sp-2);
		margin-top:var(--meec-sp-6);                                   /* 40 */
	}
	.meec-testata__azioni .meec-bottone{
		min-height:3rem;                                               /* xl 48 */
		padding:calc(var(--meec-sp-2) + var(--meec-sp-1) - 1px) calc(var(--meec-sp-4) - 1px);
	}
}