/* ============================================================
   Alma Formazione — menu principale e mega menu

   Il menu deve reggere voci di lunghezza molto diversa senza
   andare a capo: una voce che si spezza su due righe alza la
   testata e spinge giù tutto il resto della pagina.
   ============================================================ */

/* ---------- MENU ORIZZONTALE ---------- */
.alma-nav__lista {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.alma-nav__lista > li { position: relative; }

.alma-nav__lista > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	font-family: var(--font-titoli);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--testo);
	border-radius: var(--raggio);
	/* Le voci non vanno mai a capo: preferiamo che il menu si
	   stringa nelle spaziature piuttosto che crescere in altezza. */
	white-space: nowrap;
}

.alma-nav__lista > li > a:hover,
.alma-nav__lista > li:focus-within > a {
	background: var(--beige);
	color: var(--blu);
}

.alma-nav__lista > .current-menu-item > a,
.alma-nav__lista > .current_page_item > a,
.alma-nav__lista > .current-menu-ancestor > a,
.alma-nav__lista > .current-menu-parent > a {
	color: var(--blu);
}

/* La freccetta ruota quando il pannello è aperto: dice che
   l'elemento si apre, e in che stato si trova. */
.alma-nav__freccia {
	width: 8px;
	height: 8px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
	flex-shrink: 0;
}
.alma-nav__lista > li[data-aperto="1"] > a .alma-nav__freccia {
	transform: translateY(1px) rotate(-135deg);
}

/* ---------- SOTTOMENU SEMPLICE ---------- */
.alma-sottomenu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	min-width: 240px;
	padding: 8px;
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-top: 3px solid var(--blu);
	list-style: none;
	margin: 0;
	/* Nascosto con visibility e non con display:none, così la
	   tastiera lo raggiunge e i lettori di schermo lo annunciano. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.alma-nav__lista > li:hover > .alma-sottomenu,
.alma-nav__lista > li:focus-within > .alma-sottomenu,
.alma-nav__lista > li[data-aperto="1"] > .alma-sottomenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.alma-sottomenu a {
	display: block;
	padding: 9px 12px;
	font-size: 14.5px;
	color: var(--testo);
	border-radius: var(--raggio);
	line-height: 1.35;
}
.alma-sottomenu a:hover { background: var(--beige); color: var(--blu); }

/* ---------- MEGA MENU ---------- */
/* Occupa tutta la larghezza: i 46 corsi sono il cuore del sito
   e meritano di essere raggiungibili in due clic, non nascosti
   dietro un elenco che scorre. */
.alma-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	background: var(--bianco);
	border-top: 1px solid var(--bordo);
	border-bottom: 1px solid var(--bordo);
	box-shadow: 0 12px 28px rgba(27, 33, 80, 0.09);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* Su schermo largo il mega menu si ancora alla testata, non alla
   voce: per questo la barra torna statica. Sotto i 1150px la
   regola va disfatta, o il pannello a scomparsa resta nel flusso
   e si stringe sul contenuto (vedi in fondo). */
.alma-testata__interno > .alma-nav { position: static; }

/* Il richiamo vive solo dentro il pannello a scomparsa: su
   schermo largo lo stesso bottone e' gia' accanto al logo. */
.alma-nav__azione { display: none; }
.alma-nav__lista > li.alma-ha-mega { position: static; }

.alma-nav__lista > li.alma-ha-mega:hover > .alma-mega,
.alma-nav__lista > li.alma-ha-mega:focus-within > .alma-mega,
.alma-nav__lista > li[data-aperto="1"] > .alma-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.alma-mega__interno {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr 1fr;
	gap: 40px;
	max-width: var(--larghezza-max);
	margin: 0 auto;
	padding: 28px var(--gutter) 32px;
}

.alma-mega__titolo {
	font-family: var(--font-titoli);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--testo-muto);
	margin: 0 0 14px;
}

.alma-mega__lista { list-style: none; margin: 0; padding: 0; }

/* Le aree su due colonne: undici voci in colonna singola
   allungherebbero il pannello oltre lo schermo. */
.alma-mega__lista--doppia {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 20px;
}

.alma-mega__lista a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 10px;
	font-size: 14.5px;
	color: var(--testo);
	border-radius: var(--raggio);
	line-height: 1.35;
}
.alma-mega__lista a:hover { background: var(--beige); color: var(--blu); }

.alma-mega__conteggio {
	font-family: var(--font-titoli);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--testo-muto);
	flex-shrink: 0;
}

.alma-mega__pallino {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-right: 9px;
}
.alma-mega__voce { display: flex; align-items: center; min-width: 0; }
.alma-mega__voce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La colonna di richiamo: chiude il pannello con un invito
   all'azione invece che con l'ennesimo elenco di link. */
.alma-mega__richiamo {
	padding: 20px;
	background: var(--beige);
	border-left: 3px solid var(--arancio);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.alma-mega__richiamo h3 { font-size: 17px; margin: 0; }
.alma-mega__richiamo p { font-size: 14px; line-height: 1.55; color: var(--testo-medio); margin: 0; }
.alma-mega__richiamo .alma-bottone { align-self: flex-start; margin-top: 4px; }

.alma-mega__tutti {
	display: block;
	margin-top: 12px;
	padding: 9px 10px;
	font-family: var(--font-titoli);
	font-size: 14px;
	font-weight: 600;
	color: var(--blu);
}

/* ---------- ADATTAMENTO ---------- */

/* Sotto i 1150px il menu esteso non ci sta più accanto al logo
   e alle azioni: si passa al pannello a scomparsa. */
@media (max-width: 1150px) {
	/* Stesso peso della regola che rende statica la barra sopra:
	   senza ripetere "alma-testata__interno >" quella vincerebbe e
	   il pannello resterebbe largo quanto le voci. */
	.alma-testata__interno > .alma-nav,
	.alma-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 50;
		background: var(--bianco);
		border-bottom: 1px solid var(--bordo);
		box-shadow: 0 12px 28px rgba(27, 33, 80, 0.09);
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		padding: 10px var(--gutter) 20px;
	}
	/* Anche l'apertura deve pesare quanto la regola qui sopra. */
	.alma-testata__interno > .alma-nav--aperto,
	.alma-nav--aperto { display: block; }
	.alma-panino { display: inline-flex; }

	.alma-nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
	.alma-nav__lista > li { border-bottom: 1px solid var(--bordo); }
	.alma-nav__lista > li:last-child { border-bottom: none; }
	.alma-nav__lista > li > a { padding: 14px 4px; font-size: 16px; justify-content: space-between; }
	/* La freccia apre e chiude: da sola sarebbe un bersaglio di
	   pochi pixel. Il segno e' disegnato con i bordi dell'elemento,
	   quindi allargarlo col riempimento allargherebbe il disegno:
	   l'area da toccare la stende un elemento vuoto sopra, che
	   resta invisibile. */
	.alma-nav__lista > li > a .alma-nav__freccia { position: relative; }
	.alma-nav__lista > li > a .alma-nav__freccia::after {
		content: '';
		position: absolute;
		/* Generosa in tutte le direzioni: il segno e' ruotato, e
		   un'area quadrata attorno resta comoda comunque. */
		top: -20px;
		right: -20px;
		bottom: -20px;
		left: -20px;
	}

	/* Nel pannello i sottomenu stanno nel flusso: sovrapporli
	   costringerebbe a inseguirli con il dito. */
	.alma-sottomenu,
	.alma-mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: none;
		box-shadow: none;
		background: none;
		padding: 0 0 12px;
		display: none;
	}
	.alma-nav__lista > li[data-aperto="1"] > .alma-sottomenu,
	.alma-nav__lista > li[data-aperto="1"] > .alma-mega { display: block; }

	/* Su tocco l'apertura è esplicita: il passaggio del dito non
	   esiste, quindi hover e focus-within non devono aprire nulla.
	   La voce aperta va esclusa qui dentro: dopo il tocco il fuoco
	   resta sul link, quindi ":focus-within" e' attivo proprio
	   sulla voce che si vuole vedere, e con due classi piu' una
	   pseudo-classe pesa piu' della regola che la apre. Il
	   risultato era un pannello che si apriva e si richiudeva
	   nello stesso istante. */
	.alma-nav__lista > li:not([data-aperto="1"]):hover > .alma-sottomenu,
	.alma-nav__lista > li:not([data-aperto="1"]):focus-within > .alma-sottomenu,
	.alma-nav__lista > li.alma-ha-mega:not([data-aperto="1"]):hover > .alma-mega,
	.alma-nav__lista > li.alma-ha-mega:not([data-aperto="1"]):focus-within > .alma-mega { display: none; }
	.alma-nav__lista > li[data-aperto="1"] > .alma-sottomenu,
	.alma-nav__lista > li[data-aperto="1"] > .alma-mega { display: block; }

	.alma-mega__interno { grid-template-columns: 1fr; gap: 22px; padding: 0 0 8px; }
	.alma-mega__lista--doppia { grid-template-columns: 1fr; }
	.alma-sottomenu a,
	.alma-mega__lista a { padding: 11px 8px; font-size: 15px; }
	.alma-mega__richiamo { padding: 16px; }
}

@media (max-width: 700px) {
	/* Sotto i 700px il bottone accanto al logo sparisce: qui
	   dentro riprende il suo posto, in fondo alle voci. */
	.alma-nav__azione {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid var(--bordo);
	}
	.alma-nav__azione .alma-bottone { width: 100%; padding: 14px; }
	.alma-nav__telefono {
		text-align: center;
		font-family: var(--font-titoli);
		font-size: 15px;
		font-weight: 600;
		color: var(--blu);
		padding: 6px;
	}
	.alma-nav__telefono:hover { color: var(--arancio); }
}

@media (max-width: 700px) {
	/* Su telefono il bottone testuale sparisce e resta il
	   carrello: due bottoni accanto al logo non ci stanno. */
	.alma-azioni > .alma-bottone { display: none; }
	.alma-nav__lista > li > a { font-size: 15.5px; }
}

/* ---------- MEGA MENU: ATENEI ---------- */

/* La fotografia apre il pannello: dice a colpo d'occhio di cosa
   si parla, prima ancora di leggere le voci. */
.alma-mega__vetrina {
	position: relative;
	overflow: hidden;
	border-radius: var(--raggio);
	min-height: 220px;
}
.alma-mega__vetrina img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	inset: 0;
}
.alma-mega__vetrina-testo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 18px 16px;
	/* La sfumatura tiene il testo leggibile su qualunque foto. */
	background: linear-gradient(180deg, rgba(27,33,80,0) 0%, rgba(27,33,80,0.88) 100%);
	color: var(--bianco);
	text-align: right;
}
.alma-mega__vetrina-testo strong {
	display: block;
	font-family: var(--font-titoli);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}
.alma-mega__vetrina-testo span {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--blu-nebbia);
}

/* L'icona accanto al titolo di colonna. */
.alma-mega__titolo {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bordo);
}
.alma-mega__titolo svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--blu);
}

/* Ogni ateneo: marchio, nome e una riga che lo distingue dagli
   altri. Il conteggio dei corsi resta a destra, allineato. */
.alma-mega__atenei { list-style: none; margin: 0; padding: 0; }
.alma-mega__atenei a {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 10px;
	border-radius: var(--raggio);
	color: var(--testo);
}
.alma-mega__atenei a:hover { background: var(--beige); }
.alma-mega__ateneo-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 42px;
	flex-shrink: 0;
	padding: 4px;
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
}
/* Il marchio qui e' piccolo e uguale per tutti: e' un segnale di
   riconoscimento, non il marchio in evidenza. */
.alma-mega__ateneo-logo img {
	width: auto !important;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	object-fit: contain;
}
.alma-mega__ateneo-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alma-mega__ateneo-testo strong {
	font-family: var(--font-titoli);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--blu-profondo);
	line-height: 1.25;
}
.alma-mega__ateneo-testo span {
	font-size: 12.5px;
	color: var(--testo-muto);
	line-height: 1.35;
}
.alma-mega__atenei .alma-mega__conteggio { margin-left: auto; }

/* ---------- MEGA MENU: AREA DOCENTI ---------- */
.alma-mega__servizi { list-style: none; margin: 0 0 18px; padding: 0; }
.alma-mega__servizi a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 10px;
	border-radius: var(--raggio);
	color: var(--testo);
}
.alma-mega__servizi a:hover { background: var(--beige); }
.alma-mega__servizi strong {
	font-family: var(--font-titoli);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--blu-profondo);
	line-height: 1.25;
}
.alma-mega__servizi span { font-size: 12.5px; color: var(--testo-muto); }

.alma-mega__richiamo { padding: 16px 18px; }
.alma-mega__richiamo h3 { font-size: 15.5px; }
.alma-mega__richiamo p { font-size: 13px; }

@media (max-width: 1150px) {
	/* Nel pannello a scomparsa la fotografia occuperebbe mezzo
	   schermo prima di arrivare alle voci: la togliamo. */
	.alma-mega__vetrina { display: none; }
	.alma-mega__atenei a,
	.alma-mega__servizi a { padding: 12px 8px; }
}