header nav {
	--menu-bgc              : var(--main-bgc);
	--menu-a-col            : #000;
	--menu-a-bgc            : ;
	--menu-a-col-hover      : #7f623b;
	--menu-a-bgc-hover      : ;
	--menu-a-col-focus      : ;
	--menu-a-bgc-focus      : ;
	--menu-a-em-col         : ;
	--menu-a-em-col-hover   : ;
	--menu-a-em-col-focus   : ;

	--menu-dd-bgc           : var(--menu-bgc);
	--menu-dd-a-col         : var(--main-col);
	--menu-dd-a-bgc         : ;
	--menu-dd-a-col-hover   : var(--menu-a-col-hover);
	--menu-dd-a-bgc-hover   : ;
	--menu-dd-a-col-focus   : ;
	--menu-dd-a-bgc-focus   : ;
	--menu-dd-a-em-col      : #ff00ff;
	--menu-dd-a-em-col-hover: ;
	--menu-dd-a-em-col-focus: ;

	--menu-dd-ul-bgc        : var(--menu-bgc);
}

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

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

/* Styling links */
menu a {
	text-decoration: none;
	color: var(--menu-a-col);
	font-size: 1.2rem;
	display: block;
	padding: 1rem 2rem;
}

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

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

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


menu.dd li:has([aria-haspopup="true"]) {
	margin-right: 1.5rem;
}
menu.dd li > [aria-haspopup="true"] {
	padding-right: 1.5rem;
	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: .8rem;
	position: absolute;
	right : .25rem;
	top   : 1rem;
	width :  1rem;
	height: 1rem;
	font-size: 1rem;
	transform: rotate(90deg);
	overflow: hidden;
	display: block;
	cursor: pointer;
	/* filter: invert(1); */
}

menu.dd li > [aria-haspopup="true"]:focus + button,
menu.dd li > [aria-haspopup="true"]:hover + button,
menu.dd li:hover > [aria-haspopup="true"] + button {
	transform: rotate(270deg);
	filter: invert(39%) sepia(38%) saturate(554%) hue-rotate(355deg) brightness(90%) contrast(85%); /* https://codepen.io/sosuke/pen/Pjoqqp */
}

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: 38rem;
	/* z-index: 10; */
}

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

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



menu .dropdown li {
	width: 100%;
}

menu .dropdown a {
	padding: 1rem;
	color: var(--menu-dd-a-col);
	text-align: left;
}

menu .dropdown a:hover,
menu .dropdown a:focus {
	background-color: var(--menu-dd-a-bgc-hover);
	color: var(--menu-dd-a-col-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 2rem;
}

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));
	}
	.menu-open #header {
		height: 100vh; /* fallback for IEos < 15.4 */
		height: 100dvh;
		overflow: auto;
	}
	body #menu {
		height: unset;
	}

	#mainMenuOpen {
		position: fixed;
		top: 0;
		right: var(--scrollbar-width);
		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:#000; */
		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 {
		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 {

}