/*
Fuel6 Theme: Fuel6 Walker Menu
Version: 6.4.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Shared Menu Styles
# Mobile Menu
# Desktop Menu
# Notifications Menu
# Open/Close Sub-Menus
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Shared Menu Styles
--------------------------------------------------------------*/
.fuel6-walker-menu {
	--menu-height: 3.2rem;
	/* Change the height of the top level menu */
	position: static;
	background: var(--wp--preset--color--menu-background);

	& .menu-link {
		display: block;
		page-break-inside: avoid;
		cursor: pointer;
	}

	& .menu-link[aria-expanded]::after {
		content: '';
		display: inline-block;
		background: currentColor;
		clip-path: url(#menu_chevron);
		margin-left: 0.5rem;
		margin-top: 0.1rem;
		width: 0.6rem;
		height: 0.4rem;
		transition: transform 0.3s;
	}

	/* Top level styling */
	&>.lvl-1 {
		display: flex;

		&>li {
			flex: 1 1 auto;

			&>.menu-link {
				display: flex;
				justify-content: center;
				align-items: center;
				height: var(--menu-height);
				color: var(--wp--preset--color--menu-color);

				&:is(:hover, :focus-visible, [aria-expanded="true"]) {
					color: var(--wp--preset--color--menu-color);
					background: var(--wp--preset--color--menu-hover-bg);
				}
			}
		}
	}

	& .sub-menu.lvl-2 {
		display: grid;
		position: absolute;
		inset: var(--sub-menu-lvl-2-inset, auto 0);
		z-index: 1;
		visibility: hidden;
		clip-path: rect(0 100% 0 0);
		transition: clip-path 0.5s ease, visibility 0.5s ease;
		overflow: auto;
		max-height: var(--sub-menu-max-height, calc(100vh - 12rem));
		background: var(--wp--preset--color--sub-menu-background);

		& .menu-link {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 4px;
		}

		& .menu-label-text {
			flex: 1 1 auto;
		}
	}

	& .sub-menu-content {
		grid-area: 1 / 1;
		position: relative;
		padding: 2rem 1rem;
		color: var(--wp--preset--color--sub-menu-color);
		background: var(--wp--preset--color--sub-menu-background);

		& .menu-link {
			margin-left: -0.4rem;
		}

		& a:not(.notice, .wp-element-button) {
			color: var(--wp--preset--color--sub-menu-color);
		}

		& a:is(.menu-link, .back-link) {
			padding: 0.1rem 0.8rem;
			margin-bottom: 0.2rem;
			border-radius: 4px;
		}

		& a:is(.menu-link, .back-link):is(:hover, :focus-visible) {
			color: var(--wp--preset--color--sub-menu-hover-color);
			background: var(--accent-color);
		}
	}

	& .sub-menu-content.lvl-2 {
		z-index: 3;
	}

	& .menu-title {
		margin: 0.5rem 0 1rem 0.2rem;
		padding-bottom: 0.6rem;
		font-weight: bold;
		font-family: var(--content-font);
		color: var(--wp--preset--color--sub-menu-color);
		font-size: var(--wp--preset--font-size--content);
		border-bottom: 1px solid;
	}

	& .sub-menu-content.lvl-2,
	& .sub-menu-content.lvl-3 .sub-menu {
		display: grid;
		grid-auto-flow: column;
		align-content: flex-start;
		justify-content: center;
		gap: 0 clamp(1rem, -21rem + 40vw, 4.5rem);
		transition: height 0.5s, visibility 0.5s;
	}

	& .sub-menu-content:not(:has(.menu-item:nth-child(2))) .synced-pattern {
		width: 59rem;
		max-width: calc(100vw - 3rem);
	}

	& .sub-menu-content.lvl-3 .sub-menu {
		height: 0;
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
		transform: translateX(var(--distance, 1.5rem));
		transition: visibility 0s ease .6s, opacity .3s ease-in-out, transform .6s ease-in-out;
		padding-left: var(--contain-padding);
		padding-right: var(--contain-padding);
	}

	& .sub-menu-content.lvl-3 .sub-menu>*:not(.back-link) {
		grid-area: 2 / auto
	}

	/* Hide empty lists - when sub menu only has sycned blocks, also hide SVGs inside back link */
	& .sub-menu-content-column:has(> li:nth-child(2):empty) {
		display: none;
	}
}


/*--------------------------------------------------------------
# Mobile Menu
--------------------------------------------------------------*/
@media (max-width: 68.49em) {
	body {
		/* Reverses menu colors from desktop */
		--wp--preset--color--sub-menu-background: var(--primary-color);
		--wp--preset--color--sub-menu-color: var(--white);
	}

	.wp-block-group:has(> .fuel6-walker-menu) {
		position: fixed;
		inset: auto 0 0;
		padding-bottom: env(safe-area-inset-bottom) !important;
		z-index: 20;
		box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
		border-top: 1px solid vaR(--white);
	}

	.fuel6-walker-menu {
		/* Mobile App Bar */
		--sub-menu-lvl-2-inset: auto 0 calc(var(--menu-height) + 0.05rem) 0;

		& li.depth-0:nth-child(n+3) {
			border-left: 1px solid var(--white);
		}

		& .depth-0>.menu-link {
			min-width: 3.5rem;
			flex-direction: column;

			&>.menu-label-text {
				display: block;
				font-size: .7rem;
			}

			&[aria-expanded]::after {
				display: none;
			}
		}

		/* Submenu */
		& .sub-menu-content.lvl-2::before,
		& .sub-menu-content.lvl-3 .sub-menu::before {
			content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="35" height="29" viewBox="0 0 35 29" fill="none"><path d="M18.1732 0.00394611V9.31283C19.2915 9.60879 20.1184 10.621 20.1184 11.8285C20.1184 13.2668 18.9465 14.4349 17.499 14.4349C16.0515 14.4349 14.8796 13.2688 14.8796 11.8285C14.8796 10.621 15.7045 9.60879 16.8248 9.31283V0L0 28.9961C3.79327 23.4123 10.2159 19.7444 17.499 19.7444C24.7822 19.7444 31.2047 23.4162 35 29L18.1732 0.00394611Z" fill="%23ffffff"/></svg>');
			background: var(--wp--preset--color--sub-menu-background);
			display: block;
			width: fit-content;
			margin: 0 auto 0.5rem;
			padding: 0.5rem 0.5rem 0;
			position: relative;
			z-index: 1;
		}


		& .sub-menu-content.lvl-2::after,
		& .sub-menu-content.lvl-3 .sub-menu::after {
			content: '';
			height: 1px;
			width: calc(100% - 2rem);
			background: var(--wp--preset--color--sub-menu-color);
			position: absolute;
			inset: 1.5rem 0 auto 0;
			margin: auto;
		}

		& .has-h-3-font-size {
			max-width: 15rem;
			margin: 2.5rem auto;
		}

		& .has-h-3-font-size br {
			display: none;
		}

		/* Submenu button styling */
		& .sub-menu-content .wp-block-group .wp-element-button {
			color: var(--white);
			background: unset;
			border: 1px solid var(--wp--preset--color--sub-menu-color);
		}

		& .sub-menu-content .wp-block-group .wp-element-button svg {
			color: var(--accent-color);
			margin-top: -0.2rem;
			margin-right: 0.2rem;
		}

		/* Submenu button hover styling */
		& .sub-menu-content .wp-block-group .wp-element-button:is(:hover, :focus-visible) {
			color: var(--primary-color);
			background: var(--white);
			border-color: var(--wp--preset--color--sub-menu-color)
		}

		& .sub-menu.lvl-2 {
			clip-path: rect(100% 100% 100% 0);
			--sub-menu-max-height: calc(100dvh - var(--menu-height));

			& .menu-title {
				margin: 1rem 0 0;
				padding: 0.8rem 1rem;
				background: rgba(255, 255, 255, 0.25);
				border: none;
			}

			& .menu-link {
				padding: 0.3rem 1rem 0.3rem 1.8rem;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.menu-label-text {
					flex: 1 1 auto;
				}

				&[aria-expanded]::after {
					transform: rotate(270deg);
					background: currentColor;
				}
			}

			& a:not(.wp-element-button):is(:hover, :focus-visible) {
				background: var(--wp--preset--color--sub-menu-hover-bg);
				color: var(--wp--preset--color--sub-menu-hover-color);
			}
		}

		& .sub-menu-content:not(:has(.menu-item:nth-child(2))) .synced-pattern {
			max-width: 100vw;
		}

		& .sub-menu-content:is(.lvl-2, .lvl-3),
		& .sub-menu-content.lvl-3 .sub-menu {
			display: flex;
			flex-direction: column;
			padding: 0;
			overflow: hidden;
		}

		/* Add line above sycned pattern group block */
		& .sub-menu-content.lvl-3 .wp-block-group::before {
			content: '';
			display: block;
			height: 1px;
			/* background-color: rgba(255, 255, 255, 0.5); */
			margin-bottom: 1rem;
			width: calc(100% - 1rem);
		}
	}

	.menu-item-has-children .menu-link {
		position: relative;
	}

	.depth-2.menu-item-has-children .menu-link {
		margin-top: 1rem;
	}

	.depth-2.menu-item-has-children .menu-link::before {
		content: '';
		width: calc(100% - 1.6rem);
		height: 100%;
		background-color: rgba(255, 255, 255, .1);
		border-radius: 4px;
		position: absolute;
		top: 0;
		left: 1rem;
	}

	.sub-menu .synced-pattern:has(>.has-h-3-font-size) {
		border-top: 1px solid var(--white);
		margin-top: 3rem;
	}

	.sub-menu .synced-pattern:has(>.has-h-3-font-size) svg {
		display: none;
	}

	.depth-2:has(> .has-h-5-font-size)::before {
		display: none;
	}

	.depth-2>.wp-block-group {
		border-top: 1px solid var(--white);
		border-left: unset !important;
	}

	.depth-2 .has-h-5-font-size {
		text-align: center;
		font-size: 1.2rem !important;
		font-family: var(--title-font);
		max-width: 16rem;
		margin: auto !important;
	}

	.depth-2 .wp-block-button {
		margin: auto;
	}
}


/*--------------------------------------------------------------
# Desktop Menu
--------------------------------------------------------------*/
@media (min-width: 68.5em) {
	.fuel6-walker-menu {

		/* Submenu single column positioning */
		& .menu-single .sub-menu {
			min-width: 20rem;
			width: calc(100% - 0.9rem);
			max-width: 25rem;
		}

		& .menu-single .sub-menu-content.lvl-2 {
			display: block;
		}

		& .depth-1 .menu-item-has-children>a {
			background-color: #2D6190;
			border-radius: 4px;
			margin-bottom: 0.5rem;
			padding: 0.1rem 0.8rem;
		}

		& li.depth-1 {
			min-width: 14rem;
		}

		& .synced-pattern .has-h-3-font-size {
			max-width: 19rem;
		}

		& .synced-pattern:not(.synced-pattern-location-section) svg path {
			fill: var(--light-blue);
		}


		/* Position sub-menu based on new position-anchor property */
		@supports (anchor-name: --notices) {
			& .menu-single .sub-menu.depth-0 {
				position-anchor: var(--name);
				position-area: bottom span-right;
			}
		}

		/* Fallback sub-menu positioning if position-anchor not supported */
		@supports not (anchor-name: --notices) {
			& .menu-single .sub-menu.depth-0 {
				--sub-menu-lvl-2-inset: auto;
				transform: translateX(-18.7rem);
			}
		}

		/* Sub-menu chevron */
		& .depth-0 .menu-link[aria-expanded=true]::after {
			transform: rotate(-180deg);
		}

		& .depth-0>.menu-link>.menu-label-svg svg {
			font-size: 1.4rem;
			max-width: none;
		}

		& .sub-menu.lvl-2 .menu-link[aria-expanded]::after {
			background: var(--wp--preset--color--sub-menu-color);
			transform: rotate(270deg);
		}

		& .sub-menu.lvl-2 .menu-link[aria-expanded]:hover::after {
			transform: translateX(0.3rem) rotate(270deg);
			background-color: var(--primary-color);
		}

		& .back-link {
			width: fit-content;
			margin-bottom: 1rem;
			margin-left: -0.8rem;
		}

		& .sub-menu-content.lvl-3 .sub-menu .sub-menu-content-column {
			column-count: 3;
			column-gap: 2rem;
		}

		& .sub-menu-content.lvl-3 .sub-menu .menu-title {
			column-span: all;
		}

		& .hide-label .menu-link::after,
		& .hide-label .menu-link .menu-label-text,
		& .menu-item:not(.hide-label) .menu-label-svg {
			display: none;
		}

		& .synced-pattern-location-section {
			width: 100vw !important;
			max-width: unset !important;
		}
	}

	body.js-active .fuel6-walker-menu .sub-menu-content.lvl-3 .sub-menu.active,
	body:not(.js-active) .fuel6-walker-menu .sub-menu-content.lvl-3 :target {
		background: unset !important;
	}

	.sub-menu.sub-menu.lvl-2>ul::before {
		content: '';
		width: 100%;
		height: 2.8rem;
		background: linear-gradient(0deg, #164F84 21.43%, #05121E 316.67%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.sub-menu.sub-menu.lvl-2>ul::after {
		content: '';
		height: calc(100% + 11rem);
		width: 28%;
		max-height: 29rem;
		aspect-ratio: 906 / 751;
		background-image: url(../images/menu-bg.svg);
		background-size: cover;
		position: absolute;
		right: 0rem;
		bottom: -7rem;
		z-index: -1;
	}

	.sub-menu-content:has(.synced-pattern-location-section) {
		padding: 0;
	}
}






/*--------------------------------------------------------------
# Notifications Menu
--------------------------------------------------------------*/
#notification_content {
	display: block;
}

.menu-notifications li {
	margin-bottom: 0.4rem;
}

.menu-notifications li::before {
	content: '';
	width: 0.8rem;
	height: 100%;
	background: var(--noticeColor);
	border-radius: 0;
	position: absolute;
	top: 0;
	left: 0;
	border: unset;
}

/* Notifications Mobile Menu */
@media (max-width: 68.49em) {
	.menu-notifications .menu-title {
		display: none;
	}

	.menu-notifications li {
		background: var(--wp--preset--color--menu-hover-bg);
	}
}

/* Notification Desktop Menu */
@media (min-width: 68.5em) {
	#notification_content {
		padding: 2rem;
	}

	.menu-notifications li {
		background-color: var(--wp--preset--color--sub-menu-color);
		background-color: rgba(255, 255, 255, .2);
	}

	.menu-notifications li::before {
		left: 0;
		z-index: 2;
	}

	.linkIcon {
		background: var(--wp--preset--color--menu-hover-bg);
	}

	.menu-notifications a {
		overflow: hidden;
	}

	.menu-notifications a::after {
		content: '';
		width: 100%;
		height: 100%;
		background-color: var(--wp--preset--color--menu-hover-bg);
		position: absolute;
		top: 0;
		left: calc(100% - 1.5rem);
		z-index: -1;
		transition: left 300ms;
	}

	.menu-notifications a:is(:hover, :focus-visible)::after {
		left: 0;
	}

	#notices a {
		z-index: 1;
		position: relative;
	}

	#notices a:hover {
		color: var(--wp--preset--color--sub-menu-background);
		background-color: var(--wp--preset--color--sub-menu-color);
	}
}


/*--------------------------------------------------------------
# Open/Close Sub-Menus
--------------------------------------------------------------*/

/* Main sub menu opener (opens wrapper that contains all sub-menus) */
body.js-active .fuel6-walker-menu .menu-link[aria-expanded=true]+.sub-menu,
/* JS */
body:not(.js-active) .fuel6-walker-menu ul.lvl-1>li:has(:target)>.sub-menu

/* NO JS*/
	{
	visibility: visible;
	clip-path: rect(0 100% 110% 0);
	overflow-x: hidden;
}

/* Close sub menus inside main sub menu wrapper */
body:not(.js-active) .fuel6-walker-menu .sub-menu-content:not(:target, :has(.sub-menu:target))

/* NO JS*/
	{
	visibility: hidden;
	z-index: -1;
}

/* Pre-Animate lvl-2 sub-menu on open - fade down*/
body.js-active .fuel6-walker-menu .sub-menu-content.lvl-2 {
	opacity: 0;
	transform: translateY(var(--fadein-direction, -1.5rem));
	transition: opacity .6s ease 0s, transform .6s ease 0s
}

/* Animate lvl-2 sub-menu on open - fade down*/
body.js-active .fuel6-walker-menu .sub-menu-content.lvl-2.active {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .6s ease .3s, transform .6s ease .3s
}

/* Open sub menus inside main sub menu wrapper */
body.js-active .fuel6-walker-menu .active,
/* JS */
body.js-active .fuel6-walker-menu.lvl-2 .sub-menu-content:has(.active),
/* JS */
body:not(.js-active) .fuel6-walker-menu .sub-menu-content:has(:target, .sub-menu:target)

/* NO JS */
	{
	visibility: visible;
}

/* 3rd level fade-in-right animation when 3rd level opened */
body.js-active .fuel6-walker-menu .sub-menu-content.lvl-3 .sub-menu.active,
/* JS */
body:not(.js-active) .fuel6-walker-menu .sub-menu-content.lvl-3 :target

/* NO JS */
	{
	opacity: 1;
	height: 100%;
	transform: translateX(0);
	visibility: visible;
	transition: visibility 0s ease 0s, opacity .3s ease-in-out, transform .6s ease-in-out;
	position: relative;
	z-index: 3;
	background: var(--wp--preset--color--sub-menu-background);
}

/* 2nd level fade-in-left animation when 3rd level closed */
body.js-active .fuel6-walker-menu .sub-menu.lvl-2 .sub-menu-content.lvl-2>* {
	opacity: 1;
	transform: translateX(0);
	transition: visibility 0s ease 0s, opacity .3s ease-in-out, transform .6s ease-in-out;
}

/* When 3rd level open, make 2nd level content hidden and setup for fade-in-left animation when 3rd level closed */
body.js-active .fuel6-walker-menu .sub-menu.lvl-2:has(.sub-menu-content.lvl-3 .active) .sub-menu-content.lvl-2>* {
	opacity: 0;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	transform: translateX(var(--distance, -1.5rem));
	transition: visibility 0s ease .6s, opacity .3s ease-in-out, transform .6s ease-in-out;
}


/* Blanket when menu open */
.entry-wrapper .entry-content:first-child:before,
main>.entry-content:first-child:before {
	content: '';
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	background: rgba(0, 0, 0, 0);
	transition: background-color 0.3s;
	pointer-events: none;
	z-index: 19;
}

body:has(.fuel6-walker-menu .menu-link[aria-expanded=true]) .entry-content:before {
	background: rgba(0, 0, 0, 0.5);
	pointer-events: unset;
}