/*
 * Lightweight custom mobile menu.
 * Structural and accessibility styles only; decorative polish belongs in Custom CSS.
 */

.submenu-toggle {
	display: none;
}

@media (max-width: 991.98px) {
	.menu_outer {
		position: relative;
	}

	.mobile-menu-panel-column {
		position: static;
	}

	.mobile_menu {
		display: block;
	}

	.mobile-menu-placeholder {
		touch-action: manipulation;
	}

	.mobile-menu-placeholder span {
		transform-origin: center;
		transition: opacity 160ms ease, transform 160ms ease;
	}

	.mobile-menu-placeholder[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.mobile-menu-placeholder[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}

	.mobile-menu-placeholder[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.header-area .main-header-area .main-menu[data-mobile-menu-panel] {
		box-sizing: border-box;
		display: block;
		float: none !important;
		left: 0;
		max-height: calc(100svh - var(--lakeshore-header-height, 0px));
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 100%;
		visibility: hidden;
		width: 100%;
		z-index: 100;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.header-area .main-header-area .main-menu[data-mobile-menu-panel].is-open {
		pointer-events: auto;
		visibility: visible;
	}

	#primary-menu,
	#primary-menu ul,
	#primary-menu li {
		box-sizing: border-box;
		list-style: none;
		margin: 0;
		max-width: 100%;
		padding: 0;
	}

	.header-area .main-header-area .main-menu #primary-menu li {
		display: block;
		position: relative;
	}

	.header-area .main-header-area .main-menu #primary-menu a,
	.header-area .main-header-area .main-menu #primary-menu span {
		box-sizing: border-box;
		display: block;
		max-width: 100%;
		overflow-wrap: anywhere;
		position: relative;
		width: 100%;
	}

	.header-area .main-header-area .main-menu #primary-menu .menu-item-has-children > a {
		padding-right: 52px;
	}

	.header-area .main-header-area .main-menu #primary-menu a::before,
	.header-area .main-header-area .main-menu #primary-menu a::after {
		display: none;
	}

	.header-area .main-header-area .main-menu #primary-menu .sub-menu {
		box-shadow: none;
		display: none;
		left: auto;
		margin: 0;
		opacity: 1;
		position: static;
		right: auto;
		top: auto;
		transition: none;
		visibility: visible;
		width: auto;
	}

	.header-area .main-header-area .main-menu #primary-menu .menu-item-open > .sub-menu {
		display: block;
	}

	#primary-menu .submenu-toggle {
		align-items: center;
		background: transparent;
		border: 0;
		cursor: pointer;
		display: flex;
		height: 44px;
		justify-content: center;
		margin: 0;
		padding: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 44px;
		z-index: 2;
	}

	#primary-menu .submenu-toggle::before {
		border-bottom: 2px solid currentColor;
		border-right: 2px solid currentColor;
		content: "";
		display: block;
		height: 9px;
		transform: rotate(45deg);
		width: 9px;
	}

	#primary-menu .submenu-toggle[aria-expanded="true"]::before {
		transform: rotate(-135deg);
	}

	body.mds-mobile-menu-open {
		overflow: hidden;
	}
}

@media (min-width: 992px) {
	.mobile_menu {
		display: none;
	}

	.main-menu[data-mobile-menu-panel] {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu-placeholder span {
		transition: none;
	}
}