/*
 * Navigation block.
 * Loaded only when the block is rendered. Typography comes from theme.json.
 */

/* Desktop: underline that slides in on hover. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.wp-block-navigation:not(.has-text-decoration-underline) .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.2em;
	height: 1px;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--transition);
}

.wp-block-navigation:not(.has-text-decoration-underline) .wp-block-navigation-item__content:hover::after,
.wp-block-navigation:not(.has-text-decoration-underline) .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Submenus: hairline border, no radius. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: var(--wp--custom--hairline);
	border-radius: 0;
	padding: 0.5rem 0;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	padding: 0;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 1.5rem;
	height: 1.5rem;
}

/*
 * Mobile overlay: a left-aligned editorial menu.
 *
 * The close button sits in a fixed top bar and only the menu scrolls under it.
 * Only the menu fades in, so the paper background covers the header from the
 * first frame. Selectors start with .wp-block-navigation to outrank core.
 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	--wooyeah-menu-start: max(var(--wp--custom--gutter), env(safe-area-inset-left));
	--wooyeah-menu-end: max(var(--wp--custom--gutter), env(safe-area-inset-right));
	overflow: hidden;
	padding: 0;
	animation: none;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) :is(.wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog) {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0;
	min-height: 0;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-close {
	position: static;
	display: grid;
	flex: none;
	place-items: center;
	align-self: flex-end;
	width: 2.75rem;
	height: 2.75rem;
	margin: max(var(--wp--preset--spacing--20), env(safe-area-inset-top)) calc(var(--wooyeah-menu-end) - 0.625rem) var(--wp--preset--spacing--20) 0;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	flex: 1;
	align-items: stretch;
	min-height: 0;
	padding: 0 var(--wooyeah-menu-end) max(var(--wp--preset--spacing--50), env(safe-area-inset-bottom)) var(--wooyeah-menu-start);
	overflow-y: auto;
	overscroll-behavior: contain;
	text-align: start;
}

@media not (prefers-reduced-motion) {

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
		animation: wooyeah-menu-in 240ms ease-out both;
	}
}

@keyframes wooyeah-menu-in {

	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

/* Every item fills the row; core centres them to match the desktop layout. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content :is(.wp-block-navigation__container, .wp-block-page-list, .wp-block-navigation-item, .wp-block-navigation__submenu-container) {
	align-items: stretch;
	gap: 0;
}

/* Top level: display face, hairline rows. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) :is(.wp-block-navigation__container, .wp-block-page-list) {
	border-top: var(--wp--custom--hairline);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item {
	border-bottom: var(--wp--custom--hairline);
}

/* Second level: body face in sentence case, one 44px row per link. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	min-width: 0;
	padding: 0 0 var(--wp--preset--spacing--30);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/* Top level (after the second level, which has lower specificity). */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 3.5rem;
	padding-block: 0.5rem;
	font-family: var(--wp--preset--font-family--bricolage-grotesque);
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}