/*
 * Navigation chrome that the static site did not have.
 *
 * The original markup had a flat, hard-coded nav and simply did
 * `.nav-links { display:none }` below 600px — on a phone the entire menu
 * vanished with nothing to replace it. WordPress menus add real submenus, so
 * this file supplies the dropdown and a working mobile drawer.
 *
 * Interaction is CSS-driven (:hover / :focus-within) so keyboard users get the
 * dropdown without JavaScript; ui.js only toggles the mobile drawer.
 */

/* ---------------------------------------------------------------- dropdown */

.nav-links li {
	position: relative;
}

.nav-links .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 248px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--blue-100);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 200;
}

.nav-links .menu-item-has-children:hover > .sub-menu,
.nav-links .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-links .sub-menu a {
	display: block;
	padding: 9px 12px;
	font-size: 13.5px;
	line-height: 1.5;
	white-space: normal;
}

/* Affordance that a top-level item opens a submenu. */
.nav-links .menu-item-has-children > a::after {
	content: "⌄";
	margin-inline-start: 6px;
	font-size: 13px;
	color: var(--text-light);
}

/* Current page/section highlight — orientation for the visitor and a signal
   to crawlers about where they are in the hierarchy. */
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a,
.nav-links .current_page_parent > a {
	background: var(--blue-50);
	color: var(--blue-700);
	font-weight: 700;
}

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

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: none;
	border: 1px solid var(--blue-100);
	border-radius: 10px;
	cursor: pointer;
}

.nav-toggle-bar {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--blue-700);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.nav-toggle:focus-visible {
	outline: 2px solid var(--blue-600);
	outline-offset: 2px;
}

/* -------------------------------------------------------------- breakpoints */

@media (max-width: 900px) {
	.nav-toggle {
		display: flex;
		order: 3;
	}

	.nav-cta {
		display: none;
	}

	/* The original rule hid the menu outright at 600px; this replaces it with a
	   drawer that is actually reachable. The 600px rule still exists in base.css,
	   so this must win at every width below 900px. */
	.nav-links {
		display: none;
		position: absolute;
		top: 100%;
		inset-inline: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		max-height: calc(100vh - 68px);
		overflow-y: auto;
		padding: 12px 6% 20px;
		background: #fff;
		border-bottom: 1px solid var(--blue-100);
		box-shadow: var(--shadow-lg);
	}

	.nav-links.nav-open {
		display: flex;
	}

	.nav-links a {
		display: block;
		padding: 12px 10px;
		font-size: 15px;
		border-radius: 8px;
	}

	/* Submenus expand inline on mobile: hover has no meaning on touch. */
	.nav-links .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		margin: 0 0 6px;
		padding: 0 0 0 8px;
		border: none;
		border-inline-start: 2px solid var(--blue-100);
		border-radius: 0;
		box-shadow: none;
	}

	.nav-links .menu-item-has-children > a::after {
		display: none;
	}

	.navbar {
		position: relative;
	}

	body.nav-locked {
		overflow: hidden;
	}
}

@media (min-width: 901px) {
	/* Beat the base.css `@media (max-width:600px){.nav-links{display:none}}` only
	   below 900px — above it the flex row must always be visible. */
	.nav-links {
		display: flex;
	}
}

/* --------------------------------------------------------------- footer list */

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}