/*
 * Menu mobile dell'header: classe CSS "lab-menu" sul widget Menu di Elementor (Avanzate → Classi CSS).
 * - Toggle: due linee che si incrociano a X quando il menu è aperto (le icone scelte nel widget restano
 *   impostate ma nascoste).
 * - Voci: si aprono sotto l'header e spingono giù la pagina (assets/js/menu.js allunga l'header),
 *   su fondo trasparente, e compaiono in cascata.
 * Senza la classe il widget torna al comportamento standard di Elementor.
 */

/* Toggle a due linee. */
.lab-menu .elementor-menu-toggle {
	position: relative;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	cursor: pointer;
}

.lab-menu .elementor-menu-toggle > svg,
.lab-menu .elementor-menu-toggle > i {
	display: none !important;
}

.lab-menu .elementor-menu-toggle::before,
.lab-menu .elementor-menu-toggle::after {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	height: 1.5px;
	background: currentColor;
	transition: transform .35s cubic-bezier(.65, 0, .35, 1), top .35s cubic-bezier(.65, 0, .35, 1);
}

.lab-menu .elementor-menu-toggle::before {
	top: 11px;
}

.lab-menu .elementor-menu-toggle::after {
	top: 19.5px;
}

.lab-menu .elementor-menu-toggle.elementor-active::before,
.lab-menu .elementor-menu-toggle.elementor-active::after {
	top: 15.25px;
}

.lab-menu .elementor-menu-toggle.elementor-active::before {
	transform: rotate(45deg);
}

.lab-menu .elementor-menu-toggle.elementor-active::after {
	transform: rotate(-45deg);
}

/* Pannello: trasparente, si vede la foschia dietro. */
.lab-menu .elementor-nav-menu--dropdown,
.lab-menu .elementor-nav-menu--dropdown ul,
.lab-menu .elementor-nav-menu--dropdown a,
.lab-menu .elementor-nav-menu--dropdown a:hover,
.lab-menu .elementor-nav-menu--dropdown a.elementor-item-active {
	background: transparent !important;
	box-shadow: none;
}

/* Niente effetto "schiacciato" di Elementor (scaleY): il pannello si apre solo in altezza. */
.lab-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	transform: none !important;
	transition: max-height .35s cubic-bezier(.65, 0, .35, 1);
}

/* L'header si allunga quanto il pannello aperto: la pagina scende invece di finire sotto. */
.elementor-location-header {
	transition: padding-bottom .35s cubic-bezier(.65, 0, .35, 1);
}

.elementor-location-header.lab-menu-open {
	padding-bottom: var(--lab-menu-h, 0px);
}

/* Voci in cascata. */
.lab-menu .elementor-nav-menu--dropdown .menu-item {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .3s ease, transform .3s ease;
}

.lab-menu .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .menu-item {
	opacity: 1;
	transform: none;
}

.lab-menu .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .menu-item:nth-child(1) { transition-delay: .08s; }
.lab-menu .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .menu-item:nth-child(2) { transition-delay: .14s; }
.lab-menu .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .menu-item:nth-child(3) { transition-delay: .20s; }
.lab-menu .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .menu-item:nth-child(4) { transition-delay: .26s; }
.lab-menu .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .menu-item:nth-child(5) { transition-delay: .32s; }
.lab-menu .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .menu-item:nth-child(n+6) { transition-delay: .38s; }

@media (prefers-reduced-motion: reduce) {
	.lab-menu .elementor-menu-toggle::before,
	.lab-menu .elementor-menu-toggle::after,
	.elementor-location-header,
	.lab-menu .elementor-nav-menu--dropdown .menu-item {
		transition: none;
	}
}