/*
 * Mobile off-canvas menu - slides in from the left with navy background.
 * Applied to Elementor nav-menu dropdowns on tablet + mobile (<= 1024px).
 */

@media ( max-width: 1024px ) {

	.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		bottom: auto !important;
		width: min( 82vw, 340px ) !important;
		height: 100vh !important;
		min-height: 100vh !important;
		max-height: 100vh !important;
		margin: 0 !important;
		padding: 28px 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background-color: #003366 !important;
		box-shadow: 0 0 30px rgba( 0, 0, 0, 0.4 ) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		transform-origin: left top !important;
		transform: translateX( -110% ) !important;
		transition: transform 0.35s ease !important;
		animation: none !important;
		z-index: 9998 !important;
	}

	/*
	 * Open state - two hooks so it works with (JS moves the panel to body)
	 * and without our JS (Elementor sibling selector still present).
	 */
	.elementor-nav-menu--dropdown.elementor-nav-menu__container.arab-menu--open,
	.elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		transform: translateX( 0 ) !important;
	}

	/* Menu items - clear white links on navy */
	.elementor-nav-menu--dropdown.elementor-nav-menu__container a,
	.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-sub-item {
		color: #ffffff !important;
		font-family: "Montserrat", Sans-serif !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 1.5 !important;
		padding: 14px 26px !important;
		border-inline-start: 0 !important;
		justify-content: flex-start !important;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item-active,
	.elementor-nav-menu--dropdown.elementor-nav-menu__container a:hover,
	.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-sub-item:hover {
		background-color: rgba( 255, 255, 255, 0.12 ) !important;
		color: #ffffff !important;
	}

	/* Section header spacing inside the panel */
	.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu {
		width: 100%;
	}

	/* Sub-menu block separated slightly */
	.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu ul {
		background-color: rgba( 0, 0, 0, 0.18 ) !important;
	}

	/* Submenus are collapsed by default inside the off-canvas panel */
	.elementor-nav-menu--dropdown.elementor-nav-menu__container li.menu-item-has-children > ul.sub-menu {
		display: none;
	}

	/* Expanded state toggled by our JS (only when smartmenus is not bound) */
	.elementor-nav-menu--dropdown.elementor-nav-menu__container li.menu-item-has-children.arab-sub-open > ul.sub-menu {
		display: block;
	}

	/* Rotate the caret when a submenu is open */
	.elementor-nav-menu--dropdown.elementor-nav-menu__container li.menu-item-has-children > a .sub-arrow {
		transition: transform 0.25s ease;
		color: #ffffff !important;
	}

	.elementor-nav-menu--dropdown.elementor-nav-menu__container li.menu-item-has-children > a .sub-arrow svg {
		fill: #ffffff !important;
	}

	.elementor-nav-menu--dropdown.elementor-nav-menu__container li.menu-item-has-children.arab-sub-open > a .sub-arrow {
		transform: rotate( 180deg );
	}

	/* Indent + soften child items */
	.elementor-nav-menu--dropdown.elementor-nav-menu__container li.menu-item-has-children > ul.sub-menu .elementor-sub-item {
		padding-left: 40px !important;
		font-size: 15px !important;
		font-weight: 400 !important;
	}
}

/* Backdrop + body scroll lock (added by JS) */
.arab-menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9997;
	background-color: rgba( 0, 0, 0, 0.55 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.arab-menu-backdrop--open {
	opacity: 1;
	visibility: visible;
}

html.arab-menu-lock,
html.arab-menu-lock body {
	overflow: hidden;
}

/*
 * Desktop: our JS moves the dropdown to <body>, so Elementor's widget-scoped
 * display:none no longer matches and the panel would render below the footer.
 * Hide it above the tablet breakpoint where the horizontal menu is used.
 */
@media ( min-width: 1025px ) {
	.elementor-nav-menu--dropdown.elementor-nav-menu__container[ data-arab-offcanvas="yes" ] {
		display: none !important;
	}

	.arab-menu-backdrop {
		display: none !important;
	}
}