/*
 * IDD — overlay del menu a schermo intero
 * ----------------------------------------------------------------
 * Unico menu del sito a ogni risoluzione (vedi header.php e
 * IDD_Overlay_Nav_Walker in functions.php): niente più barra orizzontale su
 * desktop, l'hamburger è il default richiesto dal cliente (indicazioni.md
 * §4). Qui solo ciò che Tailwind via CDN non copre bene: lo stato
 * aperto/chiuso e l'etichetta testuale dell'hamburger.
 */

.idd-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 45;
	overflow-y: auto;
	/* Esplicito: senza, lo spec CSS forza anche l'asse X a "auto" (perché
	   overflow-y non è "visible"), facendo comparire una scrollbar
	   orizzontale ogni volta che un elemento decorativo (es. il numero
	   "ghost" enorme) sconfina leggermente oltre il bordo destro. */
	overflow-x: hidden;
	background-color: #15120F;
	-webkit-overflow-scrolling: touch;
}

/* Etichetta "Menu" accanto alle 3 barre: si legge "Chiudi" quando il
   pannello è aperto (testo scambiato via JS, vedi js/main.js). Nascosta sui
   telefoni più stretti per lasciare respiro a logo + CTA Open Day. */
.idd-burger-label {
	display: none;
}

@media (min-width: 480px) {
	.idd-burger-label {
		display: inline-block;
	}
}

.idd-burger {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.5rem 0.25rem;
	cursor: pointer;
}

.idd-burger-bar {
	display: block;
	height: 3px;
	border-radius: 9999px;
	background-color: currentColor;
	transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease, width 0.25s ease;
}

.idd-burger-bar-1 {
	width: 30px;
}

.idd-burger-bar-2 {
	width: 20px;
}

.idd-burger-bar-3 {
	width: 26px;
}

.idd-burger:hover .idd-burger-bar {
	width: 30px;
}

.idd-burger.is-open .idd-burger-bar-1 {
	width: 30px;
	transform: translateY(10px) rotate(45deg);
}

.idd-burger.is-open .idd-burger-bar-2 {
	opacity: 0;
	transform: translateX(10px);
}

.idd-burger.is-open .idd-burger-bar-3 {
	width: 30px;
	transform: translateY(-10px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}