/* accessible dropdown navigation */

ul.dd {

	--hover-bg: #f2f2f2;
	--hover-fg: inherit;

	/* background: darkorange; */
	list-style: none;
	margin: 0;
	padding-left: 0;
}

ul.dd li {
	color: #000;
	display: block;
	float: left;
	margin: 0;
	/* padding: 1rem; */
	/* position: relative; */
	text-decoration: none;
	transition-duration: .25s;
}

ul.dd li a {
	display: block;
	padding: .6rem 1rem;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: #181818;
	position: relative;
}

ul.dd li:hover,
ul.dd li:focus-within {
	background: var(--hover-bg);
	cursor: pointer;
}

ul.dd li:hover a {
	background: var(--hover-bg);
	color:      var(--hover-fg);
}

ul.dd li > [aria-haspopup="true"] {
	padding-right: 1.5rem;
	position: relative;
}
ul.dd li > [aria-haspopup="true"]:after {
	content: " ";
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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/ */
	background-size: 10px;
	width:  10px;
	height: 10px;
	font-size: 12px;
	position: absolute;
	right: 0.66rem;
	top: 50%;
	transform: translateY(-40%) rotate(90deg);
}
ul.dd li.has-sub > [aria-haspopup="true"]:hover:after,
ul.dd li.has-sub:hover > [aria-haspopup="true"]:hover:after {
	transform: translateY(-50%) rotate(90deg);
}
ul.dd li:hover > a:after {
	/*filter: invert(1);*/
	transform: translateY(-50%) rotate(270deg);
}
ul.dd li > [aria-haspopup="true"] + button {
	display: none;
}

ul.dd li li > [aria-haspopup="true"]:after,
ul.dd li li:hover > a:after {
	/*filter: invert(1);*/
	transform: translateY(-50%) rotate(0deg);
	opacity: 0.5;
}

ul.dd > li > a:before {
	content: "";
	display: block;
	width: 1rem;
	height: 1rem;
	background-color: #cacaca;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
ul.dd li > a > span {
	padding-left: 1.333rem;
	display: inline-block;
}
ul.dd > li > a:hover:before {
	background-color: #9a9a9a;
}
ul.dd > li > a.selected:before {
	background-color: #FABE5D;
}





ul.dd li ul {
	background: var(--hover-bg);
	visibility: hidden;
	opacity: 0;
	min-width: 14rem;
	position: absolute;
	transition: all .25s ease;
	margin-top: 0;
	margin-left: 0;
	padding-left: 0;
	/* display: none; */
}

ul.dd li:hover > ul,
ul.dd li:focus-within > ul,
ul.dd li ul:hover,
ul.dd li ul:focus {
	visibility: visible;
	opacity: 1;
	display: block;
	box-shadow: 0 16px 24px #00000008;
}

ul.dd li ul li {
	background: var(--hover-bg);
	clear: both;
	width: 100%;
}

ul.dd li ul li a {
	background: var(--hover-bg);
	/*color: #fff;*/
	font-weight: 300;
	font-size: .9rem;
	padding: .33rem 1rem;
}
ul.dd li ul li a:hover {
	background-color: #fff;
	color: #000;
}
ul.dd li ul li a span {
	padding-inline: 1.333rem;
}

ul.dd li a {
	text-decoration: none;
	letter-spacing: -.0125rem;
}


ul.dd li ul ul,
ul.dd li:hover ul ul {
	/* display: none; /* we just want 1 level dropdowns here */
	left: 100%;
	translate: 0 -2.1rem;
}



/* mobile menu magic */
@media (max-width:84rem) {

	/* menu overflow magic */
	html.menu-open {
		overflow: hidden;
	}
	body.menu-open {
		/*overflow: scroll;*/
		height: 100%;
	}
	body > aside {
		order: 20;
	}

	#mainMenuOpen {
		position: relative;
		display:block;
		flex-grow:0;
		font-size:1.8em;
		line-height:1;
		border:0;
		background:transparent;
		color: inherit;
		float: right;
		padding: 1.1rem 1.33rem .9rem;
	}
	#mainMenuOpen:after {
		content:"\2630";
	}

	#mainMenuOpen + nav {
		position:fixed;
		top:0;
		left:-100%;
		width:100%;
		height:100%;
		overflow:auto;
		display:flex;
		opacity:0;
		background: #fff;
		transition:left 0s 0.5s, opacity 0.5s;
		padding-top: 3.9rem;
	}
	/*#mainMenuOpen + nav, /* debug */
	#mainMenuOpen:focus + nav,
	.menu-open #mainMenuOpen + nav,
	#mainMenuOpen + nav:focus-within {
		left:0;
		opacity:1;
		transition:left 0s, opacity 0.5s;
	}
	#mainMenuOpen + #nav::after {
		content: "";
		background-image: url('data:image/svg+xml;charset=utf-8,<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z"/></svg>'); /* found here: https://iconmonstr.com/x-mark-circle-lined-svg/ */
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 2rem;
		position: absolute;
		top: 0;
		right: .66rem;
		height: 3.8rem;
		padding: 1rem 1.3rem;
		font-size: 1.8rem;
		line-height: 1;
		cursor: pointer;
		z-index: 23;
		background-color: #fff;
		display: block;
		visibility: hidden;
	}
	.menu-open #mainMenuOpen + #nav::after,
	#mainMenuOpen:focus + #nav::after,
	#mainMenuOpen + #nav:focus-within::after {
		visibility: visible;
	}

	#nav {
		flex-flow: column;
	}

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

	ul.dd {
		--hover-bg: #fff;
		--hover-fg: inherit;
	}
	ul.dd li > [aria-haspopup="true"]::after {
		display: none;
	}


	ul.dd li > [aria-haspopup="true"] + button {
		display: block;
		background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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/ */
		background-size: 12px;
		background-repeat: no-repeat;
		background-position: center center;
		transform: translateY(-50%) rotate(0);
		background-color: inherit;
		padding: 1rem;
		z-index: 12;
		position: absolute;
		top: 1.125rem;
		right: 1rem;
	}
	ul.dd li > [aria-haspopup="true"] + button:focus {
		pointer-events: none;
	}
	ul.dd li li > [aria-haspopup="true"] + button {
		display: none;
	}


	ul.dd li > [aria-haspopup="true"] + button:hover,
	ul.dd li:hover > [aria-haspopup="true"] + button:hover,
	ul.dd li > [aria-haspopup="true"] + button:focus:has( + ul ),
	ul.dd li > [aria-haspopup="true"] + button:has( + ul:focus-within ),
	ul.dd li:hover > [aria-haspopup="true"] + button:has( + ul:focus-within ) {
		transform: translateY(-50%) rotate(90deg);
	}

	ul.dd li ul {
		box-shadow: unset;
		left: auto;
		margin: 0;
		max-height: 0;
		opacity: 1;
		overflow: hidden;
		padding: 0;
		position: relative;
		transition: all .25s ease-in-out;
	}

	#nav ul li a[aria-haspopup="true"]+button.active + ul,
	#nav ul li a[aria-haspopup="true"]+button:focus + ul,
	#nav ul li a[aria-haspopup="true"]+button + ul:focus-within {
		display: block;
		margin: 0 0 10px;
		max-height: 1000vh;
		transition: all .25s ease-in-out;
	}

	ul.dd li ul li:last-child {
		padding-block-end: .25rem;
	}

	#menu #nav .primary   { margin: 2rem auto 0; background: none; }
	#menu #nav .secondary { margin: 0; background: none; }
	#menu #nav .utilities { margin: 0 auto	 1rem; }

	ul.dd li > [aria-haspopup="true"] {
		padding-right: 4rem;
	}
	ul.dd > li > [aria-haspopup="true"]::after {
		background-size: 14px;
		width: 14px;
		height: 14px;
		right: 1.75rem;
	}

}