/* 3rd level menu support (desktop flyout + mobile accordion) */

/* ---------- Desktop ---------- */
.menu-wrap nav .drop-menu .has-sub-menu {
	position: relative;
}
.menu-wrap nav .drop-menu .has-sub-menu:hover > a,
.menu-wrap nav .drop-menu .has-sub-menu:focus-within > a {
	color: rgb(0 0 0);
}
.menu-wrap nav .drop-menu .sub-drop-menu {
	display: none;
	position: absolute;
	top: -1rem;
	left: 100%;
	margin-left: 1rem;
	width: max-content;
	max-width: 20rem;
	padding: 1rem;
	background-color: rgb(237 30 27);
	border-radius: 2px;
	box-shadow: -1px 11px 18px -2px rgba(0, 0, 0, .75);
	z-index: 3;
}
/* invisible bridge so the flyout stays open while moving the mouse */
.menu-wrap nav .drop-menu .sub-drop-menu:before {
	content: "";
	position: absolute;
	top: 0;
	left: -1rem;
	width: 1rem;
	height: 100%;
	background: transparent;
}
.menu-wrap nav .drop-menu .has-sub-menu:hover > .sub-drop-menu,
.menu-wrap nav .drop-menu .has-sub-menu:focus-within > .sub-drop-menu {
	display: block;
}
/* open to the left when there is no room on the right */
.menu-wrap nav .drop-menu .has-sub-menu.flip-left > .sub-drop-menu {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: 1rem;
}
.menu-wrap nav .drop-menu .has-sub-menu.flip-left > .sub-drop-menu:before {
	left: auto;
	right: -1rem;
}
.menu-wrap nav .drop-menu .sub-drop-menu .sub-dropdown-link {
	color: rgb(255 255 255);
}

/* ---------- Mobile ---------- */
.mobile-menu .mobile-menu-wrap .sub-menu-toggle {
	background: none;
	border: 0;
	padding: .25rem;
	line-height: 0;
	cursor: pointer;
	color: inherit;
}
.mobile-menu .mobile-menu-wrap .sub-menu-toggle svg,
.mobile-menu .mobile-menu-wrap .sub-menu-toggle img {
	transition: transform .3s ease;
}
.mobile-menu .mobile-menu-wrap .has-sub-menu.open > .sub-menu-row .sub-menu-toggle svg,
.mobile-menu .mobile-menu-wrap .has-sub-menu.open > .sub-menu-row .sub-menu-toggle img {
	transform: rotate(180deg);
}
.mobile-menu .mobile-menu-wrap .sub-drop-menu {
	display: none;
	padding-left: 1rem;
	margin-top: .75rem;
}
.mobile-menu .mobile-menu-wrap .has-sub-menu.open > .sub-drop-menu {
	display: block;
}

/* icon sizes (w-3/h-3/h-4 are not in the compiled bundle) */
.menu-wrap nav .drop-menu .sub-menu-arrow {
	width: .75rem;
	height: .75rem;
	flex-shrink: 0;
	vertical-align: middle;
}
.mobile-menu .mobile-menu-wrap .sub-menu-toggle svg,
.mobile-menu .mobile-menu-wrap .sub-menu-toggle img {
	width: 1rem;
	height: 1rem;
}

/* ---------- Mobile: make long menus scrollable ---------- */
@media screen and (max-width: 1024px) {
	.mobile-menu .mobile-menu-wrap {
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	/* closed submenu panels should not add empty scroll space */
	.mobile-menu .mobile-menu-wrap .drop-menu:not(.slide) {
		overflow: hidden;
	}
}
/* fit the menu to the visible screen (it starts below the header) */
@media screen and (max-width: 768px) {
	.mobile-menu.v1 .mobile-menu-wrap { height: calc(100vh - 5.2rem); height: calc(100dvh - 5.2rem); }
	.mobile-menu.v2 .mobile-menu-wrap { height: calc(100vh - 6.2rem); height: calc(100dvh - 6.2rem); }
	.mobile-menu.v4 .mobile-menu-wrap { height: calc(100vh - 8.6rem); height: calc(100dvh - 8.6rem); }
}
@media screen and (max-width: 640px) {
	.mobile-menu.v2 .mobile-menu-wrap { height: calc(100vh - 13.4rem); height: calc(100dvh - 13.4rem); }
	.mobile-menu.v4 .mobile-menu-wrap { height: calc(100vh - 12rem); height: calc(100dvh - 12rem); }
}
@media screen and (max-width: 1024px) {
	.mobile-menu .mobile-menu-wrap .drop-menu > li:last-child {
		padding-bottom: 2rem;
	}
}
