/* Navigation Styles */
nav.nav {

}

nav.nav ul {
	list-style: none;
	padding-left: 0;
}

nav.nav li {
	padding: 0;
}

nav.nav a {
	text-decoration: none;
	color: var(--color-base);
}

nav.nav a:hover,
nav.nav a:focus,
nav.nav a:focus-within {
	text-decoration: underline;
}

nav.nav > ul > li {
	position: relative;
	margin-left: 1em;
}

/* Default Navigation Styles */
nav.nav-default > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

nav.nav-default ul > li.menu-item-has-children > a::after {
	content: '';
	--size: 1rem;
	display: inline-flex;
	width: var(--size);
	height: var(--size);
	background-image: url('../assets/img/icon-dropdown.svg');
	margin-left: 0.25em;
	background-size: contain;
	background-position: 0 3px;
	background-repeat: no-repeat;
}

nav.nav-default ul > li:hover > a,
nav.nav-default ul > li:focus > a,
nav.nav-default ul > li:focus-within > a,
nav.nav-default ul > li > a:hover,
nav.nav-default ul > li > a:focus {
	text-decoration: underline;
}

nav.nav-default ul > li:hover .sub-menu,
nav.nav-default ul > li:focus .sub-menu,
nav.nav-default ul > li:focus-within .sub-menu,
nav.nav-default ul > li a:hover + .sub-menu,
nav.nav-default ul > li a:focus + .sub-menu,
nav.nav-default ul > li a:focus + .sub-menu.sub-menu-open {
	display: block;
	opacity: 1;
	top: 100%;
}

nav.nav-default .sub-menu {
	position: absolute;
	opacity: 0;
	top: -500px;
	min-width: 200px;
	background: var(--color-white);
	padding: 1em;
	margin: 1em 0;
	justify-content: left;
	border: 1px solid var(--color-flat);
	border-radius: 0.25em;
	z-index: 1;
}

nav.nav-default .sub-menu::before {
	content: '';
	position: absolute;
	display: none;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 1.125em;
	z-index: -1;
}

nav.nav-default .sub-menu li {
	margin: 0.125em 0;
	padding: 0.125em 0;
}

nav.nav-default ul > li:hover .sub-menu::before,
nav.nav-default ul > li:focus .sub-menu::before,
nav.nav-default ul > li:focus-within .sub-menu::before,
nav.nav-default ul > li a:hover + .sub-menu::before,
nav.nav-default ul > li a:focus + .sub-menu::before {
	display: block;
}

/* Touch Navigation Styles */
nav.nav-touch {
	display: none;
}

nav.nav-touch button.nav-menu-toggle {
	--size: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size);
	height: var(--size);
	border: none;
	background: none;
	cursor: pointer;
	padding: 0.125em;
	/* border: 2px solid; */
}

nav.nav-touch button.nav-menu-toggle svg {
	display: block;
	width: 100%;
	height: 100%;
}

nav.nav-touch ul.menu {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--color-white);
	padding: 1.5em;
}

nav.nav-touch ul.menu.menu-open {
	display: block;
	box-shadow: 0px 50px 50px -12px rgba(0, 0, 0, 0.4);
}

nav.nav-touch ul.menu > li {
	display: grid;
	grid-template-columns: auto 2.75rem;
	grid-column-gap: 2em;
	align-items: center;
	margin: 0.5em 0;
}

nav.nav-touch ul.menu > li > a {
	font-weight: 600;
}

nav.nav-touch ul.sub-menu {
	display: none;
	border-left: 2px solid var(--color-flat);
	padding: 0.25em;
	padding-left: 0.75em;
	margin: 0.25em 0;
}

nav.nav-touch ul.sub-menu li {
	margin: 0.25em 0;
}

nav.nav-touch ul.sub-menu a {
	display: inline-block;
	padding: 0.125em 0;
	font-size: 0.9375rem;
}

nav.nav-touch ul.menu button::before {
	content: '+';
}

nav.nav-touch ul > li:focus .sub-menu,
nav.nav-touch ul > li ul:focus-within .sub-menu,
nav.nav-touch ul > li .sub-menu.sub-menu-open {
	display: block;
}

nav.nav-touch ul > li:focus button::before,
nav.nav-touch ul > li ul:focus-within button::before,
nav.nav-touch ul > li button.sub-menu-toggle.sub-menu-open::before {
	content: '–';
}

/* Sets icon default display state */
nav.nav-touch button.nav-menu-toggle[aria-expanded="false"] path.nav-menu-toggle-icon-open,
nav.nav-touch button.nav-menu-toggle[aria-pressed="false"] path.nav-menu-toggle-icon-open,
nav.nav-touch button.nav-menu-toggle.menu-open path.nav-menu-toggle-icon-open {
	display: block;
}

nav.nav-touch button.nav-menu-toggle[aria-expanded="false"] path.nav-menu-toggle-icon-close,
nav.nav-touch button.nav-menu-toggle[aria-pressed="false"] path.nav-menu-toggle-icon-close,
nav.nav-touch button.nav-menu-toggle.menu-open path.nav-menu-toggle-icon-close {
	display: none;
}

/* Sets icon (open, expanded, pressed) display state */
nav.nav-touch button.nav-menu-toggle[aria-expanded="true"] path.nav-menu-toggle-icon-open,
nav.nav-touch button.nav-menu-toggle[aria-pressed="true"] path.nav-menu-toggle-icon-open,
nav.nav-touch button.nav-menu-toggle.menu-open path.nav-menu-toggle-icon-open {
	display: none;
}

nav.nav-touch button.nav-menu-toggle[aria-expanded="true"] path.nav-menu-toggle-icon-close,
nav.nav-touch button.nav-menu-toggle[aria-pressed="true"] path.nav-menu-toggle-icon-close,
nav.nav-touch button.nav-menu-toggle.menu-open path.nav-menu-toggle-icon-close {
	display: block;
}

/* Breakpoints */
/* Show touch nav on devices that support touch, and do not have hover */
@media (pointer: coarse) and (hover: none) {
	nav.nav-default {
		display: none;
	}
	nav.nav-touch {
		display: block;
	}
}

/* Breakpoints */
/* Show nav-default on small laptops and greater */
@media (pointer: coarse) and (min-width: 1024px) {
	nav.nav-default {
		display: block;
	}
	nav.nav-touch {
		display: none;
	}
}

/* Show nav-touch on tablets and smaller */
@media (max-width: 968px) {
	nav.nav-default {
		display: none;
	}
	nav.nav-touch {
		display: block;
	}
}

/* If Javascript is disabled */
html:not(.js-on) #navigation {
	grid-row: 2;
	grid-column: 1 / -1;
}

html:not(.js-on) nav.nav-touch button.nav-menu-toggle,
html:not(.js-on) nav.nav-touch button.sub-menu-toggle {
	display: none;
}

html:not(.js-on) nav.nav-touch ul.menu {
	position: relative;
	padding: 0;
}

html:not(.js-on) nav.nav-touch ul.sub-menu {
	display: block;
}