/*
 * Header / Navbar (pattern pqmd/header).
 * Fixed two-tier header: lime utility bar over a white bar with rounded bottom
 * corners. Pages start below it through --pqmd-header-height (theme.css), which
 * assets/js/theme.js keeps equal to the header's real height.
 * Below 900px the menu collapses into core's overlay (core's own breakpoint is 600px).
 */

.pqmd-site-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 40;
	border-radius: 0 0 var(--wp--custom--radius--l) var(--wp--custom--radius--l);
	box-shadow: var(--wp--preset--shadow--header);
}

@media (max-width: 600px) {
	/* The admin bar scrolls away on small screens, so do not reserve room for it. */
	.admin-bar .pqmd-site-header {
		top: 0;
	}
}

/* ---------- Utility bar ---------- */
.pqmd-utility-bar {
	padding: 0.5625rem var(--wp--custom--header--gutter);
	gap: var(--wp--preset--spacing--l);
}
.pqmd-utility-bar > * {
	margin: 0;
}
.pqmd-utility-link {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--link);
	text-transform: uppercase;
}
.pqmd-utility-link a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}
.pqmd-utility-link a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--navy-deep);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.pqmd-utility-button .wp-block-button__link {
	min-height: 0;
	padding: 0.5rem 1.25rem 0.375rem;
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: var(--wp--custom--tracking--link);
	white-space: nowrap;
}

/* ---------- Main bar ---------- */
.pqmd-header-bar {
	gap: var(--wp--preset--spacing--l);
	padding: var(--wp--preset--spacing--s) var(--wp--custom--header--gutter) var(--wp--preset--spacing--m);
	border-radius: 0 0 var(--wp--custom--radius--l) var(--wp--custom--radius--l);
}
.pqmd-header-bar .wp-block-site-logo {
	flex: none;
}

/* Top-level links: 12px uppercase navy, orange on hover. */
.pqmd-primary-nav {
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: 0.02em;
}
.pqmd-primary-nav .wp-block-navigation-item__content {
	padding-block: 0;
	white-space: nowrap;
}
.pqmd-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible),
.pqmd-primary-nav .wp-block-navigation__container > .has-child:is(:hover, :focus-within) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--orange);
}

/* Utility links only appear inside the mobile overlay. */
.pqmd-primary-nav .pqmd-nav-utility {
	display: none;
}

/* Dropdown: light glass panel. */
.pqmd-primary-nav .wp-block-navigation__submenu-container {
	left: calc(-1 * var(--wp--preset--spacing--m)) !important;
	min-width: 18.125rem !important;
	padding: var(--wp--preset--spacing--s) 0 !important;
	border: var(--wp--custom--border--hairline) solid var(--wp--custom--glass--menu-border) !important;
	border-radius: var(--wp--custom--radius--m);
	background: var(--wp--custom--glass--light) !important;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	box-shadow: var(--wp--preset--shadow--raised);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: normal;
	text-transform: none;
}
/*
 * The last dropdown (News & Events) opens from its item's right edge, so the panel stays
 * on screen. It is the last submenu before the mobile-only utility links.
 */
@media (min-width: 901px) {
	.pqmd-primary-nav .wp-block-navigation-submenu:not(:has(~ .wp-block-navigation-submenu)) > .wp-block-navigation__submenu-container {
		right: calc(-1 * var(--wp--preset--spacing--m)) !important;
		left: auto !important;
	}
}
/* Core gives every item `background-color: inherit`, which stacks the glass once per row. */
.pqmd-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
	background: transparent;
}
.pqmd-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	min-height: 0;
	padding: 0.625rem 1.25rem !important;
	color: var(--wp--preset--color--ink);
	font-weight: 400;
	line-height: 1.35;
	white-space: normal;
	border-radius: 0;
}
.pqmd-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--slate-tint);
	color: var(--wp--preset--color--orange);
}

/*
 * Keyboard: focusing a top link does not open its dropdown. theme.js adds
 * .pqmd-keyboard-menus to the nav and .pqmd-open to an item opened with Space or
 * the arrow keys. Without the script core's focus-within opening still applies.
 */
.pqmd-primary-nav.pqmd-keyboard-menus .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:not(.pqmd-open):not(:hover) > .wp-block-navigation__submenu-container {
	visibility: hidden;
	opacity: 0;
}

/* Fade the dropdown in. Core toggles visibility on hover and focus-within. */
@media (prefers-reduced-motion: no-preference) {
	.pqmd-primary-nav .has-child > .wp-block-navigation__submenu-container {
		transform: translateY(4px);
		transition:
			opacity var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
			transform var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
	}
	.pqmd-primary-nav .has-child:is(:hover, .pqmd-open) > .wp-block-navigation__submenu-container,
	.pqmd-primary-nav:not(.pqmd-keyboard-menus) .has-child:focus-within > .wp-block-navigation__submenu-container {
		transform: none;
	}
}

/* ---------- Up to 900px: burger and overlay ---------- */
@media (max-width: 900px) {
	.pqmd-utility-link {
		display: none;
	}

	.pqmd-primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.pqmd-primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.pqmd-primary-nav .wp-block-navigation__responsive-container-open svg,
.pqmd-primary-nav .wp-block-navigation__responsive-container-close svg {
	width: 2rem;
	height: 2rem;
}

/* Overlay: full-screen white list with sub-items indented. */
.pqmd-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(var(--wp--preset--spacing--m) + 3.5rem) var(--wp--custom--header--gutter) var(--wp--preset--spacing--xxl);
}
.pqmd-primary-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	gap: 0 !important;
	padding-top: 0 !important;
}
.pqmd-primary-nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
}
.pqmd-primary-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	flex-direction: column;
	align-items: stretch !important;
}
.pqmd-primary-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	min-height: 0;
	padding: 0.75rem 0 !important;
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--slate-tint);
	font-size: var(--wp--preset--font-size--card);
}
.pqmd-primary-nav .is-menu-open .wp-block-navigation__submenu-container {
	left: 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	transform: none;
}
.pqmd-primary-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: 0;
	padding: 0.5rem 0 0.5rem var(--wp--preset--spacing--m) !important;
	color: var(--wp--preset--color--text-soft);
}
.pqmd-primary-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	background: none;
	color: var(--wp--preset--color--orange);
}
.pqmd-primary-nav .is-menu-open .pqmd-nav-utility {
	display: flex;
}
.pqmd-primary-nav .is-menu-open .pqmd-nav-utility:not(.pqmd-nav-utility ~ .pqmd-nav-utility) {
	margin-top: var(--wp--preset--spacing--s);
	padding-top: var(--wp--preset--spacing--s);
	border-top: var(--wp--custom--border--thin) solid var(--wp--preset--color--lime);
}
.pqmd-primary-nav .is-menu-open .pqmd-nav-utility:last-child > .wp-block-navigation-item__content {
	border-bottom: 0;
}