@charset "utf-8";
/* ------------------------------------------------------------------
   PEGS1979 — site navigation.

   Keeps the original ul.MenuBarHorizontal markup so every page's links
   are untouched, but the presentation is rebuilt: CSS-driven dropdowns
   that work on hover, on keyboard focus, and on tap.
   ------------------------------------------------------------------ */

ul.MenuBarHorizontal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	font-family: var(--sans);
	font-size: 0.95rem;
	cursor: default;
}

ul.MenuBarHorizontal li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- top level ----------------------------------------------------- */

ul.MenuBarHorizontal > li > a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	height: 100%;
	padding: 1.1rem 1rem;
	color: #d7def6;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	margin-bottom: -3px;
}

ul.MenuBarHorizontal > li > a:hover,
ul.MenuBarHorizontal > li > a:focus-visible,
ul.MenuBarHorizontal > li:hover > a,
ul.MenuBarHorizontal > li:focus-within > a {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
	border-bottom-color: var(--blue);
}

/* dropdown indicator, drawn rather than loaded as a GIF */
ul.MenuBarHorizontal a.MenuBarItemSubmenu::after {
	content: "";
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-top-color: currentColor;
	opacity: 0.65;
	margin-top: 3px;
	flex: none;
}

/* --- submenus ------------------------------------------------------ */

ul.MenuBarHorizontal ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1020;
	min-width: 250px;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--rule);
	border-top: 3px solid var(--blue);
	border-radius: 0 0 3px 3px;
	box-shadow: 0 14px 32px rgba(10, 18, 64, 0.22);
}

ul.MenuBarHorizontal li:hover > ul,
ul.MenuBarHorizontal li:focus-within > ul,
ul.MenuBarHorizontal li.MenuBarSubmenuVisible > ul,
ul.MenuBarHorizontal li.is-open > ul {
	display: block;
}

ul.MenuBarHorizontal ul a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	color: var(--ink);
	font-size: 0.92rem;
	font-weight: 400;
	text-decoration: none;
}

ul.MenuBarHorizontal ul a:hover,
ul.MenuBarHorizontal ul a:focus-visible {
	background: var(--blue);
	color: #fff;
}

/* --- third level opens to the side --------------------------------- */

ul.MenuBarHorizontal ul ul {
	top: -0.35rem;
	left: 100%;
	border-top: 1px solid var(--rule);
	border-left: 3px solid var(--blue);
	border-radius: 0 3px 3px 0;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu::after {
	border-top-color: transparent;
	border-left-color: currentColor;
	margin-top: 0;
}

/* keep deep submenus on screen near the right edge */
ul.MenuBarHorizontal > li:nth-last-child(-n + 2) ul ul {
	left: auto;
	right: 100%;
	border-left: 1px solid var(--rule);
	border-right: 3px solid var(--blue);
	border-radius: 3px 0 0 3px;
}

/* --- mobile toggle -------------------------------------------------- */

.pegs-navtoggle {
	display: none;
	align-items: center;
	gap: 0.55rem;
	margin-left: auto;
	padding: 0.6rem 0.85rem;
	font-family: var(--sans);
	font-size: 0.92rem;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 3px;
	cursor: pointer;
}

.pegs-navtoggle__bars {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
}
.pegs-navtoggle__bars::before,
.pegs-navtoggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: #fff;
}
.pegs-navtoggle__bars::before { top: -6px; }
.pegs-navtoggle__bars::after  { top: 6px; }

@media (max-width: 900px) {
	.pegs-navtoggle { display: flex; }

	/* keep the brand and the menu button on one row */
	#banner { gap: 0.4rem 0.75rem; }
	#banner .pegs-brand { padding: 0.7rem 0; }

	ul.MenuBarHorizontal {
		display: none;
		flex-direction: column;
		width: 100%;
		padding-bottom: 1rem;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	#banner.nav-open ul.MenuBarHorizontal { display: flex; }

	ul.MenuBarHorizontal > li > a { padding: 0.8rem 0.25rem; }

	ul.MenuBarHorizontal > li > a,
	ul.MenuBarHorizontal > li:hover > a {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		margin-bottom: 0;
		background: none;
	}

	/* every level is laid open — no nested tapping to reach a PDF */
	ul.MenuBarHorizontal ul,
	ul.MenuBarHorizontal ul ul {
		display: block;
		position: static;
		min-width: 0;
		background: none;
		border: none;
		box-shadow: none;
		padding: 0 0 0.5rem 1rem;
		border-left: 2px solid rgba(255, 255, 255, 0.18);
		margin: 0.25rem 0 0.5rem 0.25rem;
	}

	ul.MenuBarHorizontal ul a {
		color: #b9c4e8;
		padding: 0.42rem 0.25rem;
	}

	ul.MenuBarHorizontal ul a:hover,
	ul.MenuBarHorizontal ul a:focus-visible {
		background: none;
		color: #fff;
		text-decoration: underline;
	}

	ul.MenuBarHorizontal a.MenuBarItemSubmenu::after { display: none; }
}
