header nav {
	--menu-bgc                : #009de4;
	--menu-li-bgc             : #009de4;
	--menu-a-color            : #000;
	--menu-a-bgc              : var(--menu-bgc);
	--menu-a-color-hover      : #fff;
	--menu-a-bgc-hover        : var(--menu-bgc);
	--menu-a-color-focus      : #009de4;
	--menu-a-bgc-focus        : var(--menu-bgc);
	--menu-a-em-color         : var(--menu-a-color);
	--menu-a-em-color-hover   : ;
	--menu-a-em-color-focus   : ;

	--menu-dd-bgc             : var(--menu-bgc);
	--menu-dd-li-bgc          : var(--menu-bgc);
	--menu-dd-a-color         : ;
	--menu-dd-a-bgc           : ;
	--menu-dd-a-color-hover   : ;
	--menu-dd-a-bgc-hover     : #fff;
	--menu-dd-a-color-focus   : ;
	--menu-dd-a-bgc-focus     : ;
	--menu-dd-a-em-color      : ;
	--menu-dd-a-em-color-hover: ;
	--menu-dd-a-em-color-focus: ;
}

menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .5rem;
}
menu.dd {
	background-color: var(--menu-bgc);
}

menu li {
	margin: 0;
	display: block;
	position: relative;
	text-decoration: none;
	transition-duration: .25s;
}

/* Styling links */
menu a {
	text-decoration: none;
	color: var(--menu-a-color);
	font-size: 1.1rem;
	display: block;
	padding: .6rem 1rem;
	width: 100%;
}

menu li:hover,
menu li:focus-within {
	background-color: var(--menu-a-bgc-hover);
}
menu > li:hover a,
menu > li:focus-within a {
	color: var(--menu-a-color-hover);
}
menu a:hover {
	color           : var(--menu-a-color-hover);
}
menu a:focus {
	color           : var(--menu-a-color-focus);
	background-color: var(--menu-a-bgc-focus);
}

menu > li:hover a + button,
menu > li:focus-within a + button {
	filter: invert(1);
}


/* navigation title */
menu li > a span {
	display: inline-block;
	line-height: 1.1;
}

/* Declarative Sentence */
menu li > a em {
	font-size: 0.8rem;
	color: inherit;
	margin: 0;
	display: block;
	opacity: 0.8;
}


menu.dd li > [aria-haspopup="true"] {
	padding-right: 1.75rem;
	position: relative;
}

menu.dd li > [aria-haspopup="true"] + button {
	text-indent: 4rem;
	border: 0;
	background-color: unset;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>'); /* found here: https://iconmonstr.com/arrow-25-svg/ or https://www.svgrepo.com/svg/348084/chevron-right/ */
	background-repeat: no-repeat;
	background-position: center;
	background-size: .6rem;
	width:  1rem;
	height: 1rem;
	font-size: 1rem;
	position: absolute;
	right: .75rem;
	top: 1rem;
	transform: rotate(90deg);
	overflow: hidden;
	display: block;
	cursor: pointer;
	/*filter: invert(1);*/
	padding: 0;
}

menu.dd li > [aria-haspopup="true"]:hover + button,
menu.dd li:hover > [aria-haspopup="true"] + button {
	transform: rotate(270deg);
}

menu.dd li li > [aria-haspopup="true"] + button,
menu.dd li li > [aria-haspopup="true"] + button {
	filter: invert(1);
	transform: rotate(0deg);
	opacity: 0.8;
}

menu.dd li li > [aria-haspopup="true"]:hover + button,
menu.dd li li:hover > [aria-haspopup="true"] + button {
	transform: rotate(180deg);
}






/* Dropdown Styles */
menu .dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	list-style: none;
	min-width: 12rem;
	/* z-index: 10; */
}

menu ul {
	background-color: var(--menu-dd-bgc);
}

menu ul ul {
	background-color: var(--menu-dd-bgc);
}



menu .dropdown li {
	width: 100%;
}

menu .dropdown a {
	padding: 1rem;
	color: #fff;
	text-align: left;
}

menu .dropdown a:hover,
menu .dropdown a:focus {
	background-color: var(--menu-dd-a-bgc-hover);
	color           : var(--menu-dd-a-color-hover);
}


/* Media Query for Accessibility (Make dropdowns keyboard accessible) */
@media (hover: none) {
	menu li > a:focus + .dropdown, li > a:focus-within + .dropdown {
		display: block;
	}
}

/* Hover state for better user feedback */
menu li:hover > button {
	background-color: #00ffcc;
	color: #111;
}

/* Ensure submenu links aren't focusable unless expanded */
menu .dropdown a {
	display: block;
	padding: .5rem 1.5rem;
}

menu button[aria-expanded="false"] + .dropdown a {
	tabindex: -1; /* Prevents focus when submenu is closed */
}

menu button[aria-expanded="true"] + .dropdown a {
	tabindex: 0; /* Allows focus when submenu is open */
}




@media (min-width:90rem) {
	#mainMenuOpen {
		display:none;
	}

	menu.dd li ul ul,
	menu.dd li:hover ul ul {
		/* display: none; /* we just want 1 level dropdowns here */
		top: -1px; /* .dropdown border width */
		left: 100%;
	}

	/* Show dropdown on hover/focus */
	menu li:hover > .dropdown,
	menu li:focus-within > .dropdown {
		display: block;
	}

	/* Ensure submenus are initially hidden and not focusable */
	.dropdown {
		display: none;
		visibility: hidden; /* Makes it invisible but not focusable */
		pointer-events: none; /* Prevents interaction when hidden */
	}

	/* Hover on li to show dropdown */
	menu li:hover > .dropdown,
	menu button[aria-expanded="true"] + .dropdown {
		display: block;
		visibility: visible;
		pointer-events: auto;
	}
}









/* mobile menu magic */
@media (max-width:90rem) {
	:root {
		overscroll-behavior: none;
	}
	body {
		overscroll-behavior-y: contain;
	}
	/* menu overflow magic */
	html.menu-open {
		overflow: hidden;
	}
	body.menu-open {
		/*overflow: scroll;*/
		height: 100%;
	}

	body > aside {
		order: 20;
	}

	body > header {
		overflow: hidden;
	}

	header #logo,
	.sticky header #logo,
	.menu-open header #logo {
		position: fixed;
		top: 0;
		z-index: 12345;
		width: calc(100vw - var(--scrollbar-width, 0));
	}
	.menu-open #header {
		height: 100vh; /* fallback for IEos < 15.4 */
		height: 100dvh;
		overflow: auto;
		background: #fff;
		pointer-events: auto;
	}
	body #menu {
		height: unset;
	}

	#mainMenuOpen {
		position: fixed;
		top: 0;
		right: var(--scrollbar-width, 0);
		display:block;
		flex-grow:0;
		font-family: initial;
		font-size:2em;
		line-height:1.75rem;
		border:0;
		background:inherit;
		color: inherit;
		padding: 1rem;
		width: 4rem;
		height: 4rem;
		cursor: pointer;
		z-index: 123456;
	}

	#mainMenuOpen:after {
		content:"\2261";
		display: block;
		width: 2rem;
		height: 2rem;
	}
	.menu-open #mainMenuOpen:after {
		content:"\2715";
		font-size: .66em;
		line-height: 1.8rem;
	}


	#mainMenuOpen + #nav {
		position:absolute;
		top:-100%;
		left:0;
		width:100%;
		min-height:100%;
		min-height: fill-available;
		overflow:auto;
		display:flex;
		align-items:center;
		justify-content:flex-start;
		opacity:0;
		background:#fff;
		transition: opacity 0s;
		z-index: 234;

		padding: 4rem 0;
	}

	#mainMenuOpen:focus + #nav {
		transition: opacity 0.3s ease-in;
	}
	#mainMenuOpen:focus + #nav,
	#mainMenuOpen + #nav.active,
	#mainMenuOpen + #nav:focus-within {
		top:0;
		opacity:1;
	}
	/*
		.menu-open #mainMenuOpen + #nav:after {
			content:"\1F5D9";
			display:block;
			position:fixed;
			top: 0;
			right: 0;
			font-size: 1.9rem;
			padding: 1rem;
			line-height:1;
			cursor: pointer;
			pointer-events:auto;
			filter: invert(1);
		}
	 */






	#nav {
		flex-flow: column;
	}

	#nav menu.dd {
	}
	#nav menu li {
		float: unset;
		position: relative;
	}
	#nav menu.utilities li {
		display: block;
	}

	menu.dd {
		--hover-bg: #fff;
		--hover-fg: inherit;
		flex-flow: column;
	}

	menu.dd li > [aria-haspopup="true"] + button {
		top: .5rem;
		right: 1.05rem;
		padding: 1rem;
	}

	menu.dd li > [aria-haspopup="true"] + button[aria-expanded="false"] {
	}
	menu.dd li > [aria-haspopup="true"]:hover + button,
	menu.dd li:hover > [aria-haspopup="true"] + button {
		transform: rotate(270deg);
	}
	menu.dd li li > [aria-haspopup="true"] + button {
		transform: rotate(90deg) translateX(-0.5rem);
	}
	menu.dd li > [aria-haspopup="true"] + button[aria-expanded="true"] {
		transform: rotate(270deg);
	}
	menu.dd li li:hover > [aria-haspopup="true"] + button {
		transform: rotate(270deg)  translateX(0.5rem);
	}
	menu.dd li li > [aria-haspopup="true"] + button[aria-expanded="true"] {
		transform: rotate(270deg) translateX(0.5rem);
	}

	menu .dropdown {
		min-width: 100%;
	}

	menu button[aria-expanded="false"] + .dropdown {
		display: none;
		visibility: hidden;
		pointer-events: auto;
	}
	menu button[aria-expanded="true"] + .dropdown {
		display: block;
		visibility: visible;
		pointer-events: auto;
	}
	menu li button + .dropdown,
	menu li li button + .dropdown {
		position: relative;
		top: 0;
		left: 0;
	}

}





nav.breadcrumbs {

}