/**
 * core/navigation
 *
 * Loaded only on pages that render a Navigation block.
 * The mobile menu is the core overlay — we style it, we do not replace it,
 * so keyboard handling, focus trapping and Escape keep working for free.
 */

/* Underline grows from the start edge instead of appearing all at once. */
.wp-block-navigation.is-style-underline .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.wp-block-navigation.is-style-underline .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: -0.25em;
	width: 100%;
	height: var(--wp--custom--stroke--base);
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

/*
 * Underline the page you are on — and only that one.
 *
 * WordPress marks the whole chain: a post inside a category linked from a
 * submenu gets `current-menu-item` on the link, `current-menu-parent` on its
 * submenu and `current-menu-ancestor` above that. Styling all three underlines
 * half the menu at once and stops meaning anything.
 */
.wp-block-navigation.is-style-underline .wp-block-navigation-item__content:hover::after,
.wp-block-navigation.is-style-underline .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Ancestors get a quieter mark: present, but not competing with the current page. */
.wp-block-navigation.is-style-underline .current-menu-ancestor > .wp-block-navigation-item__content::after,
.wp-block-navigation.is-style-underline .current-menu-parent > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	opacity: 0.35;
}

/* Submenu entries never carry the underline: the panel already shows context. */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: none;
}

.wp-block-navigation.is-style-underline .wp-block-navigation-item__content:hover {
	text-decoration: none;
}

/*
 * Submenus.
 *
 * The core block hard-codes a white background and a 1px black border on the
 * dropdown, which is why an unstyled submenu looks like a 2005 context menu and
 * turns into a white slab on a dark page. Everything below is `!important` for
 * one reason: those defaults are inline-level in core's own stylesheet, and a
 * theme cannot otherwise reach them.
 */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--text) !important;
	border: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--lg);
	padding-block: var(--wp--preset--spacing--20);
	min-width: 13rem;
	overflow: hidden;

	/*
	 * The gap between the parent item and the panel must be *inside* the panel.
	 * A margin here looks identical but is not part of the element, so the
	 * pointer crosses dead space on the way down, hover is lost and the menu
	 * closes under the cursor. Padding keeps the whole path hoverable.
	 */
	margin-block-start: 0;
	padding-block-start: var(--wp--preset--spacing--30);
	/* Round only the visible panel, not the transparent bridge above it. */
	background-clip: padding-box;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-inline: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text);
	/* Rows read as rows: full width, hover fills the whole strip. */
	display: block;
	width: 100%;
	transition: background-color var(--wp--custom--duration--quick) var(--wp--custom--ease--base),
		color var(--wp--custom--duration--quick) var(--wp--custom--ease--base);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--primary);
}

/* No dividing lines between rows — the hover fill is the separation. */
.wp-block-navigation .wp-block-navigation__submenu-container li {
	border: 0;
}

/*
 * Soft arrival rather than an instant slab.
 *
 * Desktop only. Inside the mobile overlay the same container is an accordion
 * that must stay visible and clickable — hiding it with opacity there would
 * make every submenu unreachable on a phone.
 */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.wp-block-navigation .wp-block-navigation__submenu-container {
		transform: translateY(-0.35rem);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--wp--custom--duration--quick) var(--wp--custom--ease--out),
			transform var(--wp--custom--duration--quick) var(--wp--custom--ease--out);
	}

	.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
	.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
}

/* Open/close controls need a real touch target. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 2.75rem;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- Mobile overlay --------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	padding-inline: var(--wp--custom--gutter);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: flex-start;
	padding-block-start: var(--wp--preset--spacing--40);
}

/*
 * The desktop menu is right-aligned; the overlay must not inherit that. Reading
 * a stacked list from a ragged right edge is harder, and on a phone the eye
 * starts at the left.
 */
.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: flex-start;
	justify-content: flex-start;
	text-align: start;
	width: 100%;
}

/*
 * Menu entries are display-sized on mobile. A phone screen showing five small
 * links looks unfinished; the same five links set large read as a designed
 * screen, and the taps become impossible to miss.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	letter-spacing: -0.02em;
	padding-block: var(--wp--preset--spacing--20);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none;
	background-color: transparent;
	padding-inline-start: var(--wp--preset--spacing--30);
}

/* Long menu items wrap instead of pushing the overlay sideways. */
.wp-block-navigation .wp-block-navigation-item__label {
	overflow-wrap: break-word;
}


/* ------------------------------------------------------------
   Hamburger threshold
   ------------------------------------------------------------
   Core's "mobile" overlay switches at 600px, which assumes a
   short menu. With five items and two submenus the row runs out
   of space long before that and wraps under the logo.

   Below 1024px we hide the inline list and show core's own
   toggle instead — same markup, same overlay, same keyboard
   handling, just triggered earlier.
   ------------------------------------------------------------ */

@media (max-width: 1023px) {
	/*
	 * Core shows the inline list from 600px up with
	 * `.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open)`
	 * — four classes deep. Matching that shape is what makes this win; the
	 * !important covers the inline-level display core also emits.
	 */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
	.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	/* The overlay itself must stay visible once opened. */
	.wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
	}
}