/*
 * 0.2.15 — readable mobile menu overlay.
 * Core paints the open overlay white while the theme forces nav links white
 * (+ text-shadow on hero pages) => white on white. Make the open overlay navy
 * with large, left-aligned white links and ≥44px tap targets.
 * Only touches the OPEN responsive container; desktop header is unchanged.
 */
.wp-block-navigation__responsive-container.is-menu-open,
.msd-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrast, #021228) !important;
	color: var(--wp--preset--color--accent-3, #ffffff) !important;
	padding: clamp(1rem, 5vw, 2rem) clamp(1.25rem, 6vw, 2.5rem) 2rem;
	overflow-y: auto;
}

/* Close (×): white, 44×44 tap area, clear of the edge. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 10px;
	top: 0;
	right: 0;
	color: var(--wp--preset--color--accent-3, #ffffff);
	background: transparent;
	border-radius: 999px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* Content: full-width, left-aligned stack under the close button. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	padding-top: 3.5rem;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100%;
	gap: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	align-items: stretch !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Links: white, no shadow, big, ≥44px. Beats the hero-page text-shadow rules. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.msd-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
body.home .msd-header--overlay .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
body:has(.msd-page-hero.wp-block-cover) .msd-header--overlay .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	box-sizing: border-box;
	display: flex !important;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 0.25rem !important;
	color: var(--wp--preset--color--accent-3, #ffffff) !important;
	text-shadow: none !important;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent, #C9A227) !important;
}

/* Current page: gold. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent, #C9A227) !important;
}

/* Submenus: readable, indented, slightly smaller. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	padding: 0 0 0.5rem 1rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.125rem;
	font-weight: 500;
	min-height: 44px;
}

/* Keyboard focus: gold outline. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #C9A227);
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * msd-base-b.css forces display:flex on the hamburger, which also showed it
 * above the desktop nav. Restore core's breakpoint (menu is "mobile" only).
 */
@media (min-width: 600px) {
	.msd-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}