/*************
 * Site Nav
 */
nav.site-nav {
	color: #222;
	overscroll-behavior: contain;
	position: relative;
	z-index: 115;

	& a {
		padding: .75em 2em .75em 1em;
		display: block;
		text-decoration: none;
		color: var(--colorGarnet_dark);
		box-sizing: border-box;

		&:hover, &:active {
			background: var(--sitenav-hover-background, #dfdfdf);
		}
	}

	.current-menu-parent > a,
	.current-menu-ancestor > a {
		border-left: 5px solid var(--colorGarnet);
	}

	& a.nav-closer {
		text-align: right;
		text-transform: uppercase;
		font-weight: bold;
		font-size: .8em;
		background: hsl(0 0% 0% / .1);
		color: #000;
		padding-block: 1rem;
	}

	& ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	& li {
		position: relative;
	}

	&.js-active {
		transform: translateX(0);
	}

	ul.sub-menu {
		display: none;
		background: hsl(0 0% 50% / .1);
	}

	@media ( MAX-width: 1024px ) {
		background: #dfdfdf;
		position: fixed;
		transform: translateX(-100vw);
		transition: 250ms transform;
		width: max-content;
		min-width: min(300px, 100vw);
		max-width: 90vw;
		height: 100vh;
		overflow: auto;
		top: 0;
		left: 0;

		.current-menu-item {
			& > a {
				background: var(--colorGarnet);
				color: white;
			}

			& > .toggle-submenu {
				filter: invert(1);
			}
		}

		ul.sub-menu li {
			padding-left: 1em;
		}
	}

	@media ( min-width: 1024px) {

		/* For the larger header size, this left-aligns the text (rather than the padding). should be
		 * the same as the <a> left padding.
		 * The :not(:has(...)) ensure this rule isn't applied if the first nav element is current,
		 * meaning it has the visible border-bottom. So that the visible border-bottom aligns left
		*/
		body.header-size-expanded &:not(:has( #site-nav-menu > li:first-child.current-menu-item )) {
			transform: translateX(-1em);
		}

		& a.nav-closer {
			display: none;
		}

		& a {
			/* padding: 1em 1.25em calc(1em - 4px) 1.25em; */
			padding: 1.5em 1.25em calc(1.5em - 4px) 1.25em;
			border-bottom: 4px solid transparent;
			border-left: 0;
			box-sizing: content-box;
			color: inherit;
		}

		.sub-menu li.menu-item-has-children > a {
			padding-right: 3.5em;
		}

		& a:hover, & a:active, .current-menu-item > a {
			border-bottom-color: var(--colorGarnet);
		}

		.current-menu-parent > a,
		.current-menu-ancestor > a {
			border-left: 0;
			background: hsl(0 0% 50% / .1);
		}

		& > ul {
			display: flex;
			align-items: flex-end;
		}

		& > ul > li {
			align-self: stretch;
			align-content: center;
		}

		& > ul > li > a {
			height: 100%;
			box-sizing: border-box;
		}

		& > ul > li > .toggle-submenu {
			display: none;
		}

		li:hover > ul.sub-menu,
		li:focus-within > ul.sub-menu,
		li:focus > ul.sub-menu {
			transform: translateX(0);
		}

		ul.sub-menu {
			display: block;
			position: absolute;
			width: max-content;
			z-index: 110;
			transform: translateX(-9999px);
			background: #f2f2f2;

			& a {
				border-bottom: 0;
				border-left: 4px solid transparent;
				padding-block: 1.15em;

				&:hover {
					border-left-color: var(--colorGarnet);
				}
			}

			.current-menu-item > a {
				background: var(--colorGarnet);
				color: white;
			}

			.menu-item-has-children > .toggle-submenu {
				pointer-events: none;
			}

			& ul.sub-menu {
				top: 0;
				left: 100%;
			}
		}
	}
}


/**
 * The button which toggles the visibility of the sitenav on small screens
 */
#sitenav-toggle {
	--color: black;
	--icon-color: var(--color);
	box-sizing: border-box;
	background: silver;
	padding-inline: 1rem;
	width: max-content;
	color: var(--color);
	border-bottom: var(--buttonBorderWidth) solid var(--colorGarnet);
	height: var(--buttonHeight);
	display: flex;
	gap: .8em;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	position: relative;
	z-index: 50;

	.menu-icon,
	.menu-icon::before,
	.menu-icon::after {
		content: '';
		width: 16px;
		height: 2px;
		background: var(--icon-color);
		position: relative;
		transition: all .3s;
	}

	.menu-icon::before,
	.menu-icon::after {
		position: absolute;
		top: -4px;
	}

	.menu-icon::after {
		top: 4px;
	}

	&.js-active .menu-icon {
		background: transparent;
	}

	&.js-active .menu-icon::before {
		top: 0;
		rotate: 45deg;
	}

	&.js-active .menu-icon::after {
		top: 0;
		rotate: -45deg;
	}

	@media ( min-width: 1024px) {
		display: none;
	}
}

/**
 * The little arrows which show when there's a sub menu available
 */
.toggle-submenu {
	display: none;
	--size: 26px;

	position: absolute;
	height: var(--size);
	width: var(--size);
	right: 1em;
	top: .45em;
	border-radius: var(--size);
	cursor: pointer;
	transition: .2s transform;
	background-image: url('images/icons/arrow-right.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: calc(var(--size) / 2);
	opacity: .75;
	rotate: 90deg;

	@media ( min-width: 1024px) {
		rotate: 0deg;
		top: .65em;
		right: .25em;
	}
}

li.js-active > .toggle-submenu {
	transform: rotate(180deg);
}

li.menu-item-has-children > .toggle-submenu {
	/* We're adding this element to every li item via the php wp_nav_menu parameter,
	/* but we'll only show the arrows when there's actually a submenu */
	display: block;
}

/**
 * The modal which shows on small screens when the nav menu is visible
 */
.sitenav-modal-back {
	background: hsl(0 0% 0% / .7);
	position: fixed;
	inset: 0;
	z-index: 110;
	display: none;
	overscroll-behavior: contain;

	@media ( min-width: 1024px) {
		display: none !important;
	}
}

body:has(.sitenav-modal-back.js-active) {
	overflow: hidden;

	/* allow our sitenav to render over the wp admin bar. They use 99999 as the z-index. eyeroll */

	#wpadminbar.mobile {
		z-index: 89;
	}
}

/**
 * This displays an indicator to an administrator when a site navigation is getting truncated. The
 * .admin-note-truncated-sitemenu class gets added via php when this happens.
 * see /features/limited-site-nav-items/index.php filter "wp_nav_menu_objects"
 */
#site-nav:has( .admin-note-truncated-sitemenu ) > ul > li:last-of-type {
	--flagged-color: oklch(66.62% 0.2664 25.94);
	border-right: 8px dotted var(--flagged-color);

	&::after {
		background-color: var(--flagged-color); /* hsl( 0 100% 42% ); */
		color: white;
		position: absolute;
		top: -2em;
		right: 0;
		width: max-content;
		padding: 5px 8px;
		font-size: .9em;
		content: 'TRUNCATED';
		text-transform: uppercase;
	}
}

@media print {
	#site-nav {
		display: none !important;
	}
}


a.nav-menu-context-edit-link[id^="nav-menu-context-edit-link"] {
	position:  absolute;
	top:  2px;
	right:  2px;
	background: hsl( 183 54% 57% / .6 );
	color: hsl(203, 91%, 18%);
	border:  none;
	display:  inline-block;
	padding:  4px;
	border-radius: 3px;
	font-size:  .8em;
	text-decoration: none;
}

a.nav-menu-context-edit-link:hover {
	border:  none;
	text-decoration: underline;
}