/*
Mobile submenu overlay.
A child menu slides in from the right over the open drawer.
These rules use !important so they win against the theme accordion styles.
*/

@media (min-width: 993px) {
	.submenu-back {
		display: none !important;
	}
}

@media (max-width: 992px) {
	body .main-navigation ul.menu li.menu-item-has-children > .sub-menu-wrapper {
		box-sizing: border-box !important;
		position: fixed !important;
		z-index: 130 !important;
		top: var(--mobile-drawer-top, 0px) !important;
		left: var(--mobile-drawer-left, 0px) !important;
		width: var(--mobile-drawer-width, 300px) !important;
		height: var(--mobile-drawer-height, 100%) !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 15px 24px !important;
		background: var(--mobile-menu-surface, #fff) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		opacity: 1 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transform: translateX(100%) !important;
		transition: none !important;
	}

	body.mn-nav-ready .main-navigation ul.menu li.menu-item-has-children > .sub-menu-wrapper {
		transition: transform 0.28s ease !important;
	}

	body .main-navigation ul.menu li.menu-item-has-children.dropdown-open > .sub-menu-wrapper {
        visibility: visible;
		pointer-events: auto !important;
		transform: translateX(0) !important;
		border-bottom: 0 !important;
		transition: none !important;
	}
	
	body.mobile-toggled .main-navigation ul.menu li.menu-item-has-children.dropdown-open > .sub-menu-wrapper {
		visibility: visible !important;
	}

	body.mn-nav-ready .main-navigation ul.menu li.menu-item-has-children.dropdown-open > .sub-menu-wrapper {
		transition: transform 0.28s ease !important;
	}

	body .col-full-nav {
		transition: none !important;
	}

	body.mn-nav-ready .col-full-nav {
		transition: left 0.35s ease !important;
	}

	body .main-navigation ul.menu li.dropdown-open > .sub-menu-wrapper {
		z-index: 130 !important;
	}

	body .main-navigation ul.menu li.dropdown-open li.dropdown-open > .sub-menu-wrapper {
		z-index: 140 !important;
	}

	body .main-navigation ul.menu li.dropdown-open li.dropdown-open li.dropdown-open > .sub-menu-wrapper {
		z-index: 150 !important;
	}

	body .main-navigation ul.menu .sub-menu-wrapper .sub-menu-wrapper {
		margin: 0 !important;
		padding: 0 15px 24px !important;
	}

	body .menu-primary-menu-container > ul > li.dropdown-open {
		margin-bottom: 0 !important;
	}

	body.rtl .main-navigation ul.menu li.menu-item-has-children > .sub-menu-wrapper {
		right: var(--mobile-drawer-left, 0px) !important;
		left: auto !important;
		transform: translateX(-100%) !important;
	}

	body.rtl .main-navigation ul.menu li.menu-item-has-children.dropdown-open > .sub-menu-wrapper {
		transform: translateX(0) !important;
	}

	body .main-navigation ul.menu li.menu-item-has-children span.caret:after {
		-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L16 12L9 19' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
		mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L16 12L9 19' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	}

	body .main-navigation ul.menu li.menu-item-has-children.dropdown-open > span.caret,
	body .main-navigation ul.menu li.menu-item-has-children li.menu-item-has-children.dropdown-open > span.caret {
		transform: none !important;
	}

	body .submenu-back {
		display: flex !important;
		align-items: center;
		gap: 10px;
		position: sticky;
		z-index: 3;
		top: 0;
		width: calc(100% + 30px);
		margin: 0 -15px 8px;
		padding: 16px 15px;
		border: 0;
		border-bottom: 1px solid rgba(17, 17, 17, 0.08);
		background: var(--mobile-menu-surface, #fff);
		color: inherit;
		cursor: pointer;
		font: inherit;
		font-weight: 600;
		line-height: 1.3;
		text-align: left;
	}

	body .submenu-back-icon {
		display: inline-flex;
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
		background-color: currentColor;
		-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 19L8 12L15 5' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 19L8 12L15 5' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
}

@media (max-width: 992px) and (prefers-reduced-motion: reduce) {
	body .main-navigation ul.menu li.menu-item-has-children > .sub-menu-wrapper {
		transition: none !important;
	}
}