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

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

/*--------------------------------------------------------------
# Shared Menu Styles
--------------------------------------------------------------*/
body {
	--menu-height: 3.2rem; /* Change the height of the top level menu */

	/* Top Level Primary Menu Colors - now managed on the block level */
	--wp--preset--color--menu-background: inherit;
	--wp--preset--color--menu-color: var(--white);
	--wp--preset--color--menu-hover-color: var(--white);
	--wp--preset--color--menu-hover-bg: var(--wp--preset--color--color-2);

	/* Sub Menu Colors */
	--wp--preset--color--sub-menu-background: var(--white);
	--wp--preset--color--sub-menu-color: var(--wp--preset--color--primary);
	--wp--preset--color--sub-menu-hover-color: var(--wp--preset--color--primary);
	--wp--preset--color--sub-menu-hover-bg: var(--wp--preset--color--color-3);
}


.fuel6-walker-menu {
	position: static; background: var(--wp--preset--color--menu-background, inherit);
	& .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.3rem; 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(--black);
		
				/* Top level hover/focus */
				&[aria-expanded="true"] {color: var(--wp--preset--color--menu-color);background: var(--accent-color);}
			}
		}
	}

	& .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 - 10rem)); background: var(--wp--preset--color--sub-menu-background);
		& .menu-link { display: flex; justify-content: space-between; align-items: center; }
		& .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);
		& .menu-link { margin-left: -0.4rem; }
		& a:not(.notice, .wp-element-button, .button, .address.cover-link) {color: var(--black) !important;}
		& a:is(.menu-link, .back-link) { padding: 0.3rem 0.8rem; }
		& a:is(.menu-link, .back-link):is(:hover, :focus-visible) {color: var(--black);background: rgba(219, 197, 161, 0.35);}
	}

	& .sub-menu-content.lvl-2 { z-index: 3; }
	& .sub-menu-content.lvl-3 { padding: 0; }
	& .menu-title {margin: 0.5rem 0 1rem 0.2rem;padding-bottom: 0.6rem;font-weight: bold;font-family: var(--content-font);color: var(--black);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, 3rem); 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); }
	.full-width-content .sub-menu-content { display: block; padding: 0; }
	.full-width-content .sub-menu-content:not(:has(.menu-item:nth-child(2))) .synced-pattern { width: 100%; max-width: unset; }
	& .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);
	}

	body:not(.ios.chrome) .wp-block-group:has( > .fuel6-walker-menu) { padding-bottom: env(safe-area-inset-bottom) !important; }
	.wp-block-group:has( > .fuel6-walker-menu) {position: fixed;inset: auto 0 0;z-index: 20;box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);border-top: 1px solid var(--black);transition: bottom 0.5s ease;}

	.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(--black);}

		& .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 button styling */
		& .sub-menu-content .wp-block-group :is(.wp-element-button, .button) {/* color: var(--accent-color); *//* background: var(--wp--preset--color--sub-menu-color); */border: none;}
		.wp-block-search__button { border-radius: 0 0.3rem 0.3rem 0; }
		
		/* Submenu button hover styling */
		& .sub-menu-content .wp-block-group :is(.wp-element-button, .button):is(:hover, :focus-visible) {/* color: var(--wp--preset--color--sub-menu-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)); overscroll-behavior: contain;
			& .menu-title {margin: 1rem 0 0;padding: 0.5rem 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, .button, .address, .phone):is(:hover, :focus-visible) {background: rgba(255,255,255,0.25);color: var(--black);}
		}
		& .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; }
	
		/* Menu Bios */
		.sub-menu .bio-list li:nth-child(odd) { background-color: rgba(255, 255, 255, 0.25); }
		.sub-menu .bio-list li:nth-child(even) {background-color: unset;}
		.sub-menu .bio-list .bio-details * { color: var(--black) !important; }
		.sub-menu .bio-list svg { color: var(--black); }

		.location-card {
			.menu-title {color: var(--black) !important;background: none !important;fon;font-family: "Lato" !important;font-size: 1.2rem !important;font-weight: 400 !important;}
			.wp-block-fuel-svg path { fill: var(--accent-color); }
			.hours { color: var(--black); }
		}

		/* Menu Quotes/Buttons */
		li:has(>.about-quote-text) {max-width: none !important;border-top: 1px solid var(--black);margin: 1rem 1rem 2rem !important;padding-top: 1rem;}
		.about-quote-text {max-width: 20rem;color: var(--black);text-align: center;font-family: "Barlow Condensed";font-size: 1.2rem !important;font-style: normal;margin: 0 auto !important;}
		.mobile-menu-quote { 
			border-left: none;color: var(--black);text-align: center;font-family: "Barlow Condensed";font-size: 1.2rem !important;font-style: normal;margin: 1rem 0 0 !important;padding: 0 !important;
			p {font-size: 1.2rem;max-width: none;padding: 1rem 0 0 !important;border-top: 1px solid var(--black);margin: 0 1rem !important;}
			.wp-block-buttons {justify-content: center;margin-right: auto !important;margin-left: auto !important;}		
		}
	}
}


/*--------------------------------------------------------------
# Desktop Menu
--------------------------------------------------------------*/
@media (min-width: 68.5em) {
	.fuel6-walker-menu {
		max-width: 70rem !important;

		/* Submenu single column positioning */
		& .menu-single .sub-menu { width: 25rem; }
		& .menu-single .sub-menu-content.lvl-2 { display: block; }

		/* Two column layout for Submenu column */
		& .menu-span-2 { column-count: 2; }
		& .menu-span-2 .menu-title { column-span: all; }
	
		/* 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; position: fixed; }
		}
	
		/* 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 hover/focus */
		& .depth-0 .menu-link:is(:hover, :focus-visible) {color: var(--wp--preset--color--menu-color); background: var(--accent-color);}
		
		/* 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(--black);transform: rotate(270deg);}
		& .sub-menu.lvl-2 .menu-link[aria-expanded]:hover::after { transform: translateX(0.3rem) rotate(270deg); }
		& .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 { position: absolute;opacity: 0;height: 0;width: 0; }
	
		/* Menu Quotes */
		.about-quote-text {color: var(--black);font-size: 1.4rem !important;font-style: italic;max-width: 25rem;margin-left: 0rem !important;}
		.mobile-menu-quote > p {font-size: 1.2rem;}

		/* Menu Bios */
		.bio-list > ul { gap: 0 2.8rem; }

		/* Location */
		& .location-card .menu-title {color: var(--black) !important;background: none !important;font-family: "Barlow Condensed" !important;font-size: 1.6rem !important;font-weight: 400 !important;}
		.hours { color: var(--black); }

		/* Search */
		.wp-block-search__inside-wrapper { max-width: 28rem; }
		.wp-block-search__button.wp-element-button {border-radius: 0 0.3rem 0.3rem 0;}
		.wp-block-search__button:is(:hover, :focus-visible) {background: var(--primary-color);color: var(--black);}
		.menu-desktop-search .submenu-background-decoration { display: none; }
	}
}


/*--------------------------------------------------------------
# Notifications Menu
--------------------------------------------------------------*/ 	
#notification_content {display: block;padding: 0 0.5rem;}
.menu-notifications li { margin-bottom: 0.4rem; background: var(--accent-color);}
.linkIcon { background: rgba(255, 255, 255, 0.15); }
.linkIcon svg { color: var(--white); }

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

/* Notification Desktop Menu */
@media (min-width: 68.5em) {	
	#notification_content {padding: 0.75rem 2rem 1.5rem;}
	.menu-notifications li {}
	.menu-notifications li::before { left: 0.9rem; z-index: 2; }
	.menu-notifications a {overflow: hidden;}
	.menu-notifications a::after {content: '';width: 100%;height: 100%;background-color: rgba(255, 255, 255, 0.15);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; }
		.linkIcon { background: none; }
	}
	#notices a {z-index: 1;position: relative;}
}


/*--------------------------------------------------------------
# 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); }

@media (min-width: 68.5em) {
	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 */ { padding-top: 2rem; padding-bottom: 2rem; }
}

/* 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 .depth-0 > .menu-link[aria-expanded=true]) .entry-content:before { background: rgba(0, 0, 0, 0.5); pointer-events: unset; }