/* ============================================================
   OneDayQuiz — Header nativo (sostituisce il template Elementor #9)
   Valori presi 1:1 dagli stili computati dell'header Elementor.
   ============================================================ */

.odq-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: #fff;
	box-shadow: 0 0 40px 0 rgba(0, 0, 0, .1);
	padding: 5px 20px;
}

.odq-header__inner {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 70px;
}

.odq-header__col {
	display: flex;
	align-items: center;
}

/* I contenitori `__top` e `__panel` esistono per il mobile (vedi la media query in
   fondo). Su desktop `display:contents` li toglie di mezzo: logo, menu e login
   restano figli diretti del flex di `__inner` e tengono le colonne di sempre. */
.odq-header__top,
.odq-header__panel {
	display: contents;
}

/* ---------- Logo (colonna ~10%) ---------- */
.odq-header__logo {
	flex: 0 0 10%;
}

.odq-logo {
	display: inline-block;
	line-height: 0;
}

.odq-logo__img {
	display: block;
	max-width: 200px;
	width: 100%;
	height: auto;
}

/* ---------- Menu WordPress (colonna 75%) ----------
   Era 55%: il 20% del pulsante "Storie Interattive" è passato qui, così il
   menu regge cinque voci fino a ~1092px di finestra invece di rompersi a 1412. */
.odq-header__menu {
	flex: 0 0 75%;
	padding-left: 50px;
}

.odq-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.odq-menu li {
	position: relative;
}

.odq-menu a {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: #000;
	text-decoration: none;
	transition: color .2s ease, text-shadow .2s ease;
}

.odq-menu a:hover {
	/* var(--ui-accent) e non l'hex: il blu del testo deve restare quello
	   accessibile, deciso una volta sola in kit.css. */
	color: var(--ui-accent);
	text-shadow: 0 0 20px rgba(153, 0, 204, .47);
}

.odq-menu .current-menu-item > a,
.odq-menu .current-menu-ancestor > a,
.odq-menu .current-menu-parent > a {
	color: var(--ui-accent);
}

/* Sottomenu */
.odq-menu ul.sub-menu {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	background: #fff;
	box-shadow: 0 10px 30px -9px rgba(0, 0, 0, .16);
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	z-index: 10;
	/* ⚠️ Niente `transition` nello stato base. Se il foglio di stile viene
	   applicato dopo il primo disegno (Firefox su pagina pesante), ogni proprietà
	   che cambia passa da «non stilato» a «stilato» in 0,2 s: si vedevano i
	   pannelli di tutti i sottomenu per un istante, mezzi trasparenti e con un
	   bordo scuro (14/10, riprodotto: a 80 ms opacità .58, bordo 2px nero).
	   La transizione sta solo sullo stato aperto: si apre con dissolvenza, si
	   chiude di scatto, e nessun menu resta a metà mentre se ne apre un altro. */
}

.odq-menu li:hover > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .18s ease, transform .18s ease;
}

.odq-menu ul.sub-menu li {
	display: block;
}

.odq-menu ul.sub-menu a {
	display: block;
	padding: 8px 20px;
	font-size: 15px;
	font-weight: 500;
}

/* Megamenu «Giochi» — la voce di primo livello porta la classe `odq-mega` (dal
   pannello Menu) e il menu ha tre livelli: genitore → intestazioni di colonna →
   link. Il pannello è una griglia di testo, senza immagini.
   ⚠️ Le intestazioni NON usano `href="#"` come discriminante di «non cliccabile»
   per il mobile (vedi la regola in fondo, che nasconde solo `> a[href="#"]` di
   primo livello): la colonna senza destinazione porta la classe
   `odq-mega__label`, che qui la rende inerte. */
@media (min-width: 1025px) {
	.odq-menu > li.odq-mega > ul.sub-menu {
		display: grid;
		grid-template-columns: repeat(3, minmax(190px, 1fr));
		gap: 0 44px;
		left: auto;
		right: 0;
		width: max-content;
		max-width: min(760px, 92vw);
		padding: 22px 28px 16px;
	}

	.odq-menu li.odq-mega:focus-within > ul.sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .18s ease, transform .18s ease;
	}

	/* I sottomenu delle colonne sono parte del pannello, non dropdown a sé. */
	/* ⚠️ `visibility: inherit`, NON `visible`: un figlio `visible` dentro un
	   genitore `hidden` resta visibile e, anche con opacity 0 sopra, cattura il
	   mouse. Era il bug del 14/10: le colonne del megamenu, nascoste, stavano
	   sotto i dropdown di Indovinelli e Storie e al passaggio accendevano il
	   pannello «Giochi». */
	.odq-menu li.odq-mega ul.sub-menu ul.sub-menu {
		position: static;
		min-width: 0;
		padding: 0;
		background: none;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: inherit;
		transform: none;
	}

	/* Cintura e bretelle: il pannello chiuso non deve ricevere il puntatore. */
	.odq-menu > li.odq-mega > ul.sub-menu {
		pointer-events: none;
	}

	.odq-menu > li.odq-mega:hover > ul.sub-menu,
	.odq-menu > li.odq-mega:focus-within > ul.sub-menu {
		pointer-events: auto;
	}

	.odq-menu li.odq-mega > ul.sub-menu > li > a {
		padding: 0 0 8px;
		margin-bottom: 6px;
		border-bottom: 1px solid rgba(0, 0, 0, .1);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		/* Una riga sola: se un'intestazione va a capo i link della sua colonna
		   partono più in basso delle altre. */
		white-space: nowrap;
	}

	.odq-menu li.odq-mega ul.sub-menu ul.sub-menu a {
		padding: 6px 0;
	}

	.odq-menu li.odq-mega > ul.sub-menu > li.odq-mega__label > a {
		pointer-events: none;
		cursor: default;
		color: inherit;
	}
}

/* Aspetto dei sottomenu (desktop). Bianco su bianco non staccava dalla pagina:
   barra in alto con i due colori del logo, bordo sottile, ombra più piena e un
   piccolo stacco dalla voce. Le tinte vengono dai token del kit (viola brand per
   il passaggio del mouse, accento UI per il testo), niente colori nuovi.
   Solo ≥1025px: sul mobile i sottomenu sono liste dentro il pannello. */
@media (min-width: 1025px) {
	.odq-menu > li > ul.sub-menu {
		top: calc(100% + 10px);
		padding: 14px 10px 10px;
		border: 1px solid rgba(122, 63, 242, .14);
		border-radius: 12px;
		background:
			linear-gradient(90deg, var(--brand-blue, #2181C1), var(--brand-purple, #7a3ff2)) top / 100% 4px no-repeat,
			#fff;
		box-shadow: 0 18px 40px -12px rgba(26, 24, 60, .28), 0 2px 6px rgba(26, 24, 60, .06);
	}

	/* Con il padding nuovo i 210px di prima facevano andare a capo «Logica e
	   matematica»: più larghi, e una riga per voce. */
	.odq-menu > li:not(.odq-mega) > ul.sub-menu {
		min-width: 240px;
	}

	.odq-menu > li > ul.sub-menu a {
		white-space: nowrap;
	}

	/* Ponte invisibile: lo stacco di 10px non deve far chiudere il menu mentre
	   il mouse scende dalla voce al pannello. */
	.odq-menu > li > ul.sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -12px;
		height: 12px;
	}

	.odq-menu > li > ul.sub-menu a {
		border-radius: 8px;
		transition: background-color .15s ease, color .15s ease;
	}

	.odq-menu > li > ul.sub-menu a:hover,
	.odq-menu > li > ul.sub-menu a:focus-visible {
		background: rgba(122, 63, 242, .08);
		color: var(--ui-accent);
		text-shadow: none;
	}

	/* Megamenu: pannello più arioso e intestazioni nel viola del brand. */
	.odq-menu > li.odq-mega > ul.sub-menu {
		padding: 22px 22px 14px;
		gap: 0 40px;
	}

	.odq-menu li.odq-mega > ul.sub-menu > li > a {
		color: var(--brand-purple, #7a3ff2);
		border-bottom: 2px solid rgba(122, 63, 242, .18);
		border-radius: 0;
		background: none;
	}

	.odq-menu li.odq-mega > ul.sub-menu > li > a:hover {
		background: none;
		color: var(--brand-purple, #7a3ff2);
	}

	.odq-menu li.odq-mega ul.sub-menu ul.sub-menu a {
		padding: 7px 10px;
		margin-left: -10px;
	}

	/* «Tutti i migliori giochi»: link ombrello a tutta larghezza sotto le tre
	   colonne (voce di secondo livello senza figli, classe `odq-mega__all`). */
	.odq-menu li.odq-mega > ul.sub-menu > li.odq-mega__all {
		grid-column: 1 / -1;
		margin-top: 12px;
		padding-top: 10px;
		border-top: 2px solid rgba(122, 63, 242, .18);
	}

	.odq-menu li.odq-mega > ul.sub-menu > li.odq-mega__all > a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5em;
		margin: 0;
		padding: 10px 12px;
		border: 0;
		border-radius: 8px;
		font-size: 14px;
		text-transform: none;
		letter-spacing: .02em;
	}

	.odq-menu li.odq-mega > ul.sub-menu > li.odq-mega__all > a::after {
		content: "\2192";
	}

	.odq-menu li.odq-mega > ul.sub-menu > li.odq-mega__all > a:hover,
	.odq-menu li.odq-mega > ul.sub-menu > li.odq-mega__all > a:focus-visible {
		background: rgba(122, 63, 242, .08);
		color: var(--brand-purple, #7a3ff2);
	}
}

/* Indicatore per le voci che aprono un sottomenu: sono tre e nessuna lo
   dichiarava, quindi il sottomenu si scopriva solo passandoci sopra per caso.
   Disegnato con i bordi e non con un glifo: il font delle icone è un subset
   generato, aggiungerci un carattere vorrebbe dire rigenerarlo. */
.odq-menu > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .38em;
	height: .38em;
	margin-left: .45em;
	vertical-align: .16em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	opacity: .6;
	transition: transform .2s ease, opacity .2s ease;
}

.odq-menu > li.menu-item-has-children:hover > a::after,
.odq-menu > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(225deg);
	opacity: 1;
}

/* ---------- Colonne pulsanti ---------- */
.odq-header__storie {
	flex: 0 0 20%;
	justify-content: flex-end;
	padding-left: 15px;
}

.odq-header__login {
	flex: 0 0 15%;
	justify-content: flex-end;
	padding-left: 15px;
}

/* ---------- Pulsanti pill ---------- */
.odq-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	padding: 12px 30px;
	border: 1px solid transparent;
	border-radius: 50px;
	background: transparent;
	box-shadow: 0 10px 30px -9px rgba(0, 0, 0, .16);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.odq-btn__icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

/* Bottoni header (UI/chrome) → accento blu, testo + bordo. :visited coperto
   (specificità (0,2,0)) così restano blu anche da visitati e non cedono al
   globale a:visited. Hover: riempimento blu, testo bianco. */
.odq-btn--storie,
.odq-btn--storie:visited,
.odq-btn--accedi,
.odq-btn--accedi:visited {
	color: var(--ui-accent);
	border-color: rgba(33, 129, 193, .32);
}

.odq-btn--storie:hover,
.odq-btn--accedi:hover {
	background: var(--ui-accent);
	color: #fff;
	border-color: var(--ui-accent);
}

/* ---------- Utente loggato ---------- */
.odq-user {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
}

.odq-user__avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
}

.odq-user__meta {
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
}

.odq-user__name {
	color: #90c;
	text-decoration: none;
}

.odq-user__logout {
	color: #000;
	text-decoration: none;
}

.odq-user__sep {
	margin: 0 4px;
	color: #999;
}

/* ---------- Hamburger (nascosto su desktop) ---------- */
.odq-header__toggle {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

.odq-header__toggle span {
	display: block;
	height: 2px;
	background: #000;
	border-radius: 2px;
	transition: .25s ease;
}

/* Il reset del tema padre colora TUTTI i <button> di magenta su hover/focus
   (hello-elementor/reset.css: `button:focus,button:hover{background:#c36}`, (0,1,1)).
   Il toggle è un <button>, quindi al click/hover lampeggiava magenta. Lo blindiamo
   a trasparente in ogni stato — specificità (0,2,0) batte il (0,1,1) del padre. */
.odq-header__toggle:hover,
.odq-header__toggle:focus,
.odq-header__toggle:focus-visible,
.odq-header__toggle:active {
	background: transparent;
	color: inherit;
}

/* Scarto della admin bar di WordPress, per il tetto del menu mobile qui sotto.
   Il core spinge la pagina giù (`html{margin-top:46px}`) e un tetto in `dvh` non lo
   sa: da loggati l'header aperto sbordava di quei 46px e le ultime voci restavano
   irraggiungibili — lo stesso difetto che la media query risolve, in scala ridotta.
   Sta in una variabile perché il valore cambia con la larghezza (il core passa a 32px
   sopra i 782px) e perché il tetto è una riga sola, che così non va duplicata. */
.admin-bar {
	--odq-adminbar: 46px;
}

@media (min-width: 783px) {
	.admin-bar {
		--odq-adminbar: 32px;
	}
}

/* ---------- Responsive (<= 1024px) ---------- */
@media (max-width: 1024px) {
	/* Header in colonna: sopra la riga logo/hamburger, sotto il pannello che si apre. */
	.odq-header__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.odq-header__top {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		min-height: 70px;
	}

	/* `min-width:0` è la rete di sicurezza: un flex item ha per default un minimo
	   automatico pari alla larghezza del contenuto, e per un `<img>` quel minimo è la
	   sua larghezza dichiarata. Senza questo, il logo non cede un pixel e a schermi
	   stretti spinge fuori l'hamburger invece di stringersi. */
	.odq-header__logo {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Nella sezione quiz in testata c'è anche la pillola «Area» (resa dal plugin nello
	   slot `odq_header_extra`): a 360px il logo da 200 non ci sta più insieme a lei e
	   all'hamburger. Il tetto vale SOLO dove quel pulsante c'è davvero — `:has()`, non
	   una media query, perché la condizione è «c'è la pillola», non «è uno schermo
	   piccolo». Dove `:has()` non è supportato interviene il `min-width:0` qui sopra:
	   il logo si stringe da sé, non sfonda la riga. */
	.odq-header__top:has(.odq-header__area) .odq-logo__img {
		max-width: 150px;
	}

	.odq-header__toggle {
		display: flex;
	}

	/* ⚠️ IL MENU APERTO DEVE SCORRERE DA SÉ.
	   L'header è `position:sticky; top:0`, e un elemento sticky più alto della
	   finestra resta inchiodato in cima: la parte che sborda NON si raggiunge
	   scorrendo la pagina, mai. Col menu cresciuto (5 voci di primo livello +
	   sottomenu) l'header aperto misura ~840px, quindi su un telefono da 667px di
	   viewport le ultime voci — Sondaggi, Curiosità e il pulsante Accedi — erano
	   semplicemente irraggiungibili.
	   Lo scorrimento sta quindi DENTRO il pannello: `__inner` si ferma all'altezza
	   della finestra (meno il padding dell'header), `__top` è a taglia fissa e il
	   pannello si prende quel che resta e scorre. Niente numeri magici sull'altezza
	   della riga del logo: la fa il flex. `min-height:0` è obbligatorio, senza quello
	   un flex item non scende sotto la propria altezza di contenuto e non scorre. */
	.odq-header.is-open .odq-header__inner {
		max-height: calc(100vh - 10px - var(--odq-adminbar, 0px));
		max-height: calc(100dvh - 10px - var(--odq-adminbar, 0px));
	}

	.odq-header__panel {
		display: none;
		flex-direction: column;
		align-items: stretch;
		flex: 1 1 auto;
		min-height: 0;
	}

	.odq-header.is-open .odq-header__panel {
		display: flex;
		overflow-y: auto;
		/* Arrivati in fondo al menu, il gesto non deve mettersi a scorrere la pagina
		   sotto: il pannello copre la finestra e il salto sarebbe incomprensibile. */
		overscroll-behavior: contain;
		/* Il pannello deve arrivare AI BORDI della finestra. Rientrato com'era (20px di
		   padding dell'header più il `padding:0 3vw` del body) restava lungo il lato
		   destro una striscia in cui il dito scorreva la PAGINA invece del menu, e
		   l'indicatore di scorrimento cadeva 32px più a sinistra di quello della pagina:
		   due barrette di posizione e lunghezza diverse — la «barra a pezzi».
		   Il margine negativo e il padding sono la stessa quantità di segno opposto, così
		   l'area che scorre si allarga fino ai bordi e il testo non si muove di un pixel.
		   Scritti in `calc()` sulla finestra e non con i due valori: 3vw appartiene al
		   body e 20px all'header, riscriverli qui vorrebbe dire tenerli allineati a mano.
		   L'unica cosa che questo dà per buona è che il pannello sia centrato nella
		   finestra — lo è, i rientri sono simmetrici da entrambe le parti. */
		margin-inline: calc(50% - 50vw);
		padding-inline: calc(50vw - 50%);
	}

	.odq-header__menu,
	.odq-header__login {
		flex: 0 0 auto;
		padding-left: 0;
		justify-content: center;
		display: flex;
	}

	.odq-header.is-open .odq-header__menu {
		margin-top: 12px;
		/* Un po' d'aria a sinistra delle voci. Sta QUI e non sul padding
		   dell'header, che regge anche logo e X: alzando quello si sposterebbe
		   tutta la testata, anche a menu chiuso. Così il logo resta al suo posto
		   e rientrano solo le voci — che è la richiesta.
		   I figli delle sezioni si spostano di conseguenza: il loro rientro è
		   relativo al sottomenu, non allo schermo. */
		padding-left: 16px;
	}

	.odq-header__login {
		margin-top: 12px;
	}

	/* Respiro tra l'ultimo bottone (Accedi/Utente) e la fine del menu aperto. */
	.odq-header.is-open .odq-header__login {
		margin-bottom: 24px;
	}

	/* Menu mobile allineato a sinistra, non centrato. Col centraggio ogni voce
	   partiva a un'ascissa diversa a seconda di quanto era lunga (148px «Giochi
	   Quiz», 90px «Indovinelli», 136px «Migliori Giochi»): l'occhio non trovava
	   un bordo comune, e i sottomenu centrati sotto un'etichetta che sembrava a
	   sinistra facevano sembrare le due cose scollegate. `stretch` fa occupare
	   la riga a ogni voce, così tutti i testi partono dallo stesso bordo. */
	.odq-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	/* Appiattisce SOLO i contenitori senza destinazione — oggi "Di più …", che
	   ha href="#": l'etichetta sparisce e i suoi figli diventano voci di primo
	   livello come le altre.
	   ⚠️ Il selettore era generico (`> a`, senza `[href="#"]`) e valeva finché
	   "Di più …" era l'unico dropdown del menu. Da quando anche Indovinelli e
	   Storie e Racconti hanno figli, quella regola nascondeva l'etichetta ANCHE
	   a loro: nel menu mobile i link a /indovinelli/ e /storie/ sparivano, e si
	   vedevano due "Per bambini" di fila senza niente che dicesse di che cosa.
	   Un'assunzione scritta in un commento è scaduta senza far rumore. */
	.odq-menu > li.menu-item-has-children > a[href="#"] {
		display: none;
	}

	.odq-menu ul.sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		padding: 0;
		text-align: left;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	/* Rientro SOLO i figli di una sezione vera: dice che stanno sotto la loro
	   etichetta. Il contenitore appiattito («Di più …», href="#") ha l'etichetta
	   nascosta qui sopra, quindi i suoi figli sono voci di primo livello a tutti
	   gli effetti — rientrarli li farebbe pendere da niente. Stesso `:has()` che
	   regola già il loro peso: se il browser non lo supporta, decade in un menu
	   piatto e leggibile. */
	.odq-menu > li.menu-item-has-children:not(:has(> a[href="#"])) > ul.sub-menu {
		padding-left: 14px;
		margin-top: 14px;
	}

	/* I figli di un contenitore appiattito appaiono identici alle voci di primo
	   livello (16px/600, no padding): senza il genitore, sono voci a sé. */
	.odq-menu ul.sub-menu a {
		padding: 0;
		font-size: 16px;
		font-weight: 600;
	}

	/* I figli di una sezione vera invece stanno SOTTO la loro etichetta, quindi
	   vanno alleggeriti: il menu è centrato, non rientrato, e senza un salto di
	   peso "Per bambini" di Indovinelli e "Per bambini" di Storie sono la stessa
	   riga scritta due volte. Se `:has()` non è supportato la regola decade e i
	   figli tornano identici al primo livello: leggibile, solo più piatto. */
	.odq-menu > li.menu-item-has-children:not(:has(> a[href="#"])) > ul.sub-menu a {
		font-size: 14px;
		font-weight: 500;
		opacity: .72;
	}

	/* Megamenu «Giochi»: le intestazioni di colonna fanno da sezioni, i link
	   sotto restano alleggeriti come quelli delle altre sezioni. Specificità
	   scritta per battere la regola dei figli di una sezione vera (qui sopra). */
	.odq-menu > li.odq-mega.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > a {
		font-size: 14px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		opacity: 1;
	}

	.odq-menu > li.odq-mega > ul.sub-menu > li > ul.sub-menu {
		margin-top: 10px;
		padding-left: 0;
		gap: 10px;
	}

	/* Link ombrello in fondo al pannello: voce piena, come un'intestazione. */
	.odq-menu > li.odq-mega > ul.sub-menu > li.odq-mega__all > a {
		font-size: 14px;
		font-weight: 700;
		opacity: 1;
		color: var(--brand-purple, #7a3ff2);
		margin-top: 6px;
	}

	/* Sul mobile i sottomenu sono già tutti aperti: la freccia non indica nulla. */
	.odq-menu > li.menu-item-has-children > a::after {
		display: none;
	}

	.odq-header.is-open .odq-header__toggle span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.odq-header.is-open .odq-header__toggle span:nth-child(2) {
		opacity: 0;
	}

	.odq-header.is-open .odq-header__toggle span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

/* Megamenu «Scuola»: intestazione secondaria dentro una colonna (voce di terzo livello inerte, classe `odq-mega__sep`). */
.odq-menu li.odq-mega ul.sub-menu ul.sub-menu li.odq-mega__sep > a {
	pointer-events: none;
	cursor: default;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .6;
}

/* Megamenu (desktop): intestazioni di colonna tutte nel viola del brand, anche quelle inerti (`odq-mega__label`), e icona dello stesso colore. */
@media (min-width: 1025px) {
	.odq-menu li.odq-mega > ul.sub-menu > li.odq-mega__label > a { color: var(--brand-purple, #7a3ff2); }
	.odq-menu li.odq-mega > ul.sub-menu > li > a .odq-mi-ico { color: inherit; opacity: 1; }
}