/* =========================================================================
   css/pages/contact/contact-mobile-header-ux.css
   Auto-split from css/pages/contact.css.
   ========================================================================= */

/* Mobile off-canvas menu + overlay + scroll lock (consistent UX) */
@media screen and (max-width: 991px) {

	/* Hide right language button; show language inside the menu */
	.language-switcher {
		display: none !important;
	}

	.menu-item-language {
		display: block !important;
	}

	/* Off-canvas base */
	.nav-menu {
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out;
	}

	/* Drawer */
	/* Styles pour le menu mobile quand il est ouvert - Plein écran noir */
	.is-menu-toggled-on .nav-menu {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 100vh !important;
		background: #000000 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		padding-top: 140px !important;
		z-index: 10100 !important;
		transform: translateX(0) !important;
		transition: transform 0.3s ease !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.is-menu-toggled-on .nav-menu ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0 !important;
		padding: 0 40px;
		width: 100%;
	}

	/* Scroll lock */
	html.is-menu-toggled-on,
	html.is-menu-toggled-on body,
	body.is-menu-toggled-on {
		overflow: hidden !important;
	}

	.is-menu-toggled-on .nav-menu a {
		color: #ffffff !important;
		font-size: 20px !important;
		font-weight: 500 !important;
		text-transform: uppercase !important;
		letter-spacing: 2px !important;
		text-decoration: none;
		transition: all 0.3s ease;
		display: block;
		padding: 22px 0 !important;
		border-bottom: 1px solid #ffffff !important;
	}

	/* Burger Animation to X */
	.is-menu-toggled-on .menu-toggle .lines {
		background-color: transparent !important;
	}

	.is-menu-toggled-on .menu-toggle .lines:before {
		top: 0 !important;
		transform: rotate(45deg) !important;
		background-color: #ffffff !important;
		position: absolute !important;
		z-index: 10530 !important;
		width: 28px !important;
		display: block !important;
	}

	.is-menu-toggled-on .menu-toggle .lines:after {
		bottom: 0 !important;
		transform: rotate(-45deg) !important;
		background-color: #ffffff !important;
		position: absolute !important;
		z-index: 10530 !important;
		width: 28px !important;
		display: block !important;
	}

	/* FIX CONFLICTS MOBILE MENU - Raising Header Above Drawer */
	.is-menu-toggled-on .site-header {
		z-index: 10500 !important;
	}

	.is-menu-toggled-on .site-header .site-branding {
		position: fixed !important;
		top: 15px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		z-index: 10510 !important;
		pointer-events: none !important;
		display: flex !important;
		justify-content: center !important;
		width: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.is-menu-toggled-on .site-header .site-branding a {
		pointer-events: auto !important;
		display: block !important;
	}

	.is-menu-toggled-on .menu-toggle {
		z-index: 10520 !important;
		position: fixed !important;
		top: 10px !important;
		right: 15px !important;
	}
}