/* =========================================
   MOBILE FULLSCREEN MENU - SCOPED TO MAIN MENU
   + STAGGERED ITEM ANIMATION
   + BODY SCROLL LOCK
   + SUB-MENU SAFE FALLBACK
   ========================================= */

@media (max-width: 880px){

	/* -------------------------------------------------
	   Main mobile dropdown container only
	   IMPORTANT: target the NAV container inside #main-menu
	   ------------------------------------------------- */

	/* Make the main dropdown menu fill the viewport height. */
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container{
		height: 100vh !important;
		max-height: 100vh !important;
		background-color: rgba(255, 255, 255, 0.95) !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* -------------------------------------------------
	   Main menu list only
	   ------------------------------------------------- */

	/* Reset spacing and vertically adjust the first-level menu list. */
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu{
		margin: 0;
		padding: 0;
		transform: translateY(-10%);
	}

	/* -------------------------------------------------
	   First-level items alignment
	   ------------------------------------------------- */

	/* Center-align first-level menu items. */
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > li{
		text-align: center;
	}

	/* -------------------------------------------------
	   First-level links typography and color
	   ------------------------------------------------- */

	/* Style all menu links inside the scoped mobile dropdown. */
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-item{
		font-size: 1.5rem;
		line-height: 1.2;
		color: var(--e-global-color-primary);
		fill: var(--e-global-color-primary);
	}

	/* -------------------------------------------------
	   Sub-menu visual hierarchy
	   ------------------------------------------------- */

	/* Add spacing above sub-menus. */
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu{
		margin-top: 0.5rem;
	}

	/* Center-align sub-menu items. */
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu li{
		text-align: center;
	}

	/* Visually reduce sub-menu link prominence. */
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu a{
		font-size: 1.2rem;
		opacity: 0.8;
	}

	/* =========================================
	   STAGGERED ITEM ANIMATION
	   FIRST LEVEL ONLY
	   ========================================= */

	/* Set the initial hidden state before the menu opens. */
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > li{
		opacity: 0;
		transform: translateY(12px);
		will-change: transform, opacity;
	}

	/* Animate first-level items only when the scoped menu is open. */
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container.menu-open > .elementor-nav-menu > li{
		animation-name: mobileMenuItemIn;
		animation-duration: 420ms;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
		animation-delay: var(--stagger-delay, 0ms);
	}

	/* Define the menu item entrance animation. */
	@keyframes mobileMenuItemIn{
		to{
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Keep first-level items visible when the scoped menu is closed. */
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container:not(.menu-open) > .elementor-nav-menu > li{
		opacity: 1;
		transform: none;
		animation: none;
	}

	/* -------------------------------------------------
	   Sub-menu fallback
	   Keep sub-menus out of the fullscreen animation logic
	   ------------------------------------------------- */

	/* Prevent animations from affecting sub-menu elements. */
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu,
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu li,
	#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu a{
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		will-change: auto !important;
	}

	/* -------------------------------------------------
	   Accessibility: reduced motion
	   ------------------------------------------------- */

	@media (prefers-reduced-motion: reduce){

		/* Disable animation for first-level menu items when reduced motion is requested. */
		#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > li{
			animation: none !important;
			opacity: 1 !important;
			transform: none !important;
		}

		/* Disable animation for sub-menu items when reduced motion is requested. */
		#main-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu li{
			animation: none !important;
			opacity: 1 !important;
			transform: none !important;
		}

	}

	/* =========================================
	   PREVENT PAGE SCROLLING WHEN THE MOBILE MENU IS OPEN
	   ========================================= */

	/* Lock body scrolling when the mobile menu open class is active. */
	body.mobile-menu-open{
		overflow: hidden;
	}

}