/* Navigation hover style variations for desktop, non-overlay menus. */
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	transition: color 0.15s ease;
}

.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle:focus-visible {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item {
	border-radius: 999px;
	isolation: isolate;
	position: relative;
}

.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item::before {
	background-color: rgba(17, 24, 39, 0.04);
	background-color: color-mix(in srgb, currentColor 4%, transparent);
	border-radius: inherit;
	content: "";
	inset: -0.5em -1em;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.15s ease;
	z-index: 0;
}

.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover::before,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:focus-within::before,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item::before,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor::before {
	opacity: 1;
}

.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	position: relative;
	z-index: 1;
}

.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-submenu__toggle {
	color: inherit;
	text-decoration: none;
}

/* Navigation submenu presentation is outside current block/theme.json controls. */
.wp-block-navigation__responsive-container:not(.is-menu-open) {
	--origin-canvas-navigation-nested-submenu-offset: 6px;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface-base);
	border: none;
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--medium);
	font-size: var(--wp--preset--font-size--small);
	min-width: 200px;
	padding: var(--wp--preset--spacing--small);
	z-index: 20;
}

/**
 * Top-level submenu clears the hover-pill badge (which extends 0.5em below the
 * item), offset via translate so its box still starts at the item's bottom edge
 * (no layout gap), and a transparent ::before bridges the visual gap so hover
 * stays continuous (no dead-zone).
 */
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
	transform: translateY(0.65em);
}

.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container::before {
	content: "";
	bottom: 100%;
	height: 0.65em;
	left: 0;
	position: absolute;
	right: 0;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 6px;
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	transition: color 0.15s ease;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
	align-items: center;
	border-radius: 6px;
	display: inline-flex;
	gap: var(--wp--preset--spacing--extra-small);
	padding: var(--wp--preset--spacing--small);
	transition: color 0.15s ease;
}

/**
 * Desktop caret box. The swapped Lucide glyph is cropped tight to its arrow, so
 * it fills this box; keep the desktop caret compact (smaller than mobile's 20px).
 */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon {
	height: 9px;
	margin-bottom: 0.1em;
	width: 9px;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon svg {
	stroke-width: 2;
}

/**
 * Shared stabilized-spin base for BOTH surfaces: rotate the SVG about its own
 * centre so the chevron spins in place. This one base serves desktop and mobile;
 * only the rotation TRIGGER selector differs per surface (see below).
 */
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	transform-origin: center;
	transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon svg,
.wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
	transform: rotate(-180deg);
}

/* Submenu hover text inherits by default; style variants override below. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:hover .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:focus-visible,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:focus-visible .wp-block-navigation__submenu-icon {
	color: inherit;
	text-decoration: none;
}

.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:hover,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:hover .wp-block-navigation__submenu-icon,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:focus-visible,
.wp-block-navigation.is-style-origin-canvas-hover-accent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:focus-visible .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle:hover,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle:focus,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle:focus-visible {
	background: transparent;
	border: none;
	box-shadow: none;
	color: inherit;
}

.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item,
.wp-block-navigation.is-style-origin-canvas-hover-pill .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-ancestor {
	background-color: rgba(17, 24, 39, 0.04);
	background-color: color-mix(in srgb, currentColor 4%, transparent);
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child {
	position: relative;
}

/* Shared by default Navigation, Hover Accent, and Hover Pill variants. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	left: 100%;
	margin-left: var(--origin-canvas-navigation-nested-submenu-offset);
	margin-top: calc(var(--wp--preset--spacing--small) * -1);
	opacity: 0;
	pointer-events: none;
	top: 0;
	visibility: hidden;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .has-child:focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .has-child:hover > .wp-block-navigation__submenu-container {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .has-child {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	margin-right: 0;
	padding-right: 0;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content {
	flex: 1;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-submenu__toggle {
	background: transparent;
	border: none;
	padding: var(--wp--preset--spacing--small);
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon {
	transform: rotate(-90deg);
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg path {
	stroke: currentColor !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border-radius: 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--extra-small);
	padding: var(--wp--preset--spacing--small) 0 0 var(--wp--preset--spacing--large);
	width: 100%;
}

/**
 * Collapse a submenu only when a sibling toggle exists to reopen it
 * (open-on-click / open-on-hover-click). Always-open submenus have no
 * toggle, so they are never trapped hidden.
 */
.wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
}

/**
 * Lift the main-nav submenu flyout above adjacent page content (e.g. a hero
 * below the sticky header) so the dropdown is never occluded. Scoped to the
 * main nav so unrelated navigations are unaffected.
 */
.origin-canvas-main-nav .wp-block-navigation__submenu-container {
	position: relative;
	z-index: 20;
}

/**
 * MOBILE OVERLAY (scoped to .origin-canvas-mobile-nav / .origin-canvas-mobile-menu)
 *
 * The mobile nav renders as a plain vertical <nav> (overlayMenu:never) with no
 * .is-menu-open wrapper, so everything below is scoped to the theme hook classes.
 * These blocks follow every desktop rule above so their specificity + source
 * order win where they must (e.g. the flyout-card reset).
 */

/**
 * Mobile chevron: 20px, ink, rotation keyed off the SIBLING toggle button
 * (the icon span is a sibling of the button, not its child). transform-origin
 * + transition come from the shared stabilized-spin base above.
 */
.origin-canvas-mobile-nav .wp-block-navigation__submenu-icon svg {
	height: 20px;
	width: 20px;
}

.origin-canvas-mobile-nav .wp-block-navigation__submenu-icon svg path {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.origin-canvas-mobile-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* Full-width left-aligned column so rows and their dividers span the menu. */
.origin-canvas-mobile-nav,
.origin-canvas-mobile-nav .wp-block-navigation {
	width: 100%;
}

.origin-canvas-mobile-nav .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	justify-content: flex-start;
	width: 100%;
}

.origin-canvas-mobile-nav .wp-block-navigation-item {
	width: 100%;
}

/**
 * Cancel core's floating flyout card and rebuild the submenu as a flat,
 * left-indented inline list. The `.wp-block-navigation` in the selector matches
 * the 3-class specificity of the desktop :not(.is-menu-open) flyout rule; being
 * later in source, this wins. 1.25rem = 20px indent per level (compounds to
 * 20/40px); intentional literal, no spacing token maps to 20px.
 */
.origin-canvas-mobile-nav .wp-block-navigation .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	flex-direction: column;
	font-size: inherit;
	gap: 0;
	min-width: 0;
	padding: 0;
	padding-inline-start: 1.25rem;
	position: static;
	width: 100%;
}

/**
 * Parent row: toggle button + sibling chevron on one line; submenu <ul> wraps
 * to the next line via flex-basis:100%.
 */
.origin-canvas-mobile-nav .has-child {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.origin-canvas-mobile-nav .has-child > .wp-block-navigation__submenu-container {
	flex-basis: 100%;
}

/* Rows: full-width flex with a comfortable tap target. */
.origin-canvas-mobile-nav .wp-block-navigation-item__content {
	align-items: center;
	display: flex;
	flex: 1;
	min-height: 52px;
	padding: var(--wp--preset--spacing--small) 0;
}

.origin-canvas-mobile-nav .wp-block-navigation-item:not(.has-child) .wp-block-navigation-item__content {
	width: 100%;
}

/* Uniform dark ink for every label + chevron at every depth. */
.origin-canvas-mobile-nav .wp-block-navigation-item__label,
.origin-canvas-mobile-nav .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--text-heading);
}

.origin-canvas-mobile-nav .wp-block-navigation-item__label {
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* Hover shifts the label to primary. */
.origin-canvas-mobile-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.origin-canvas-mobile-nav a.wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
	color: var(--wp--preset--color--primary);
}

.origin-canvas-mobile-nav .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/**
 * Hairline divider under EVERY row at EVERY depth (handoff: "dividers run under
 * every row"). Drawn by a ::after on the row content — NOT a border on the li: an
 * expanded parent li wraps its whole open group, so an li border falls below that
 * group instead of under the parent's own 52px row. The row content is inset by the
 * submenu container's compounding padding-inline-start (20px/level), so a plain
 * border-bottom would be indented; inset-inline:-100vw overshoots both gutters and
 * overflow-x:clip on the (position:relative) nav wrapper trims it back to the menu
 * edge — full-bleed at every depth, and inset-inline keeps it correct under RTL.
 * bottom:0 anchors the line to each row's real bottom, so it tracks taller wrapped
 * rows. (A negative margin pull was tried and fails: flexbox absorbs it on the
 * flex:1 submenu rows.)
 */
.origin-canvas-mobile-nav {
	overflow-x: clip;
	position: relative;
}

.origin-canvas-mobile-nav .wp-block-navigation-item__content {
	position: relative;
}

.origin-canvas-mobile-nav .wp-block-navigation-item__content::after {
	border-bottom: 1px solid var(--wp--preset--color--border);
	bottom: 0;
	content: "";
	inset-inline: -100vw;
	pointer-events: none;
	position: absolute;
}

/**
 * Chevron alignment: line the chevron glyph CENTRE up with the header hamburger's
 * glyph centre so the overlay reads as a continuation of the header. The hamburger
 * glyph (24px) is right-aligned to the large gutter, so its centre sits 12px past
 * the gutter edge (36px from the viewport at a 390px width). The 20px chevron glyph
 * centre should land on that same axis → its right edge 26px from the viewport,
 * i.e. 2px past the gutter edge → margin-inline-end:2px (with start:auto to push
 * it to the row's right edge first).
 */
.origin-canvas-mobile-nav .wp-block-navigation__submenu-icon {
	margin-inline-end: 2px;
	margin-inline-start: auto;
}

/**
 * Reveal motion — Option B. Core toggles display:none->flex (the global collapse
 * rules above), so height snaps; we layer a fade + slight slide so the open still
 * reads as motion. A true grid-height animation is not achievable on core markup.
 */
.origin-canvas-mobile-nav .wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-container {
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.origin-canvas-mobile-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	opacity: 1;
	transform: translateY(0);
}

.origin-canvas-mobile-nav .wp-block-navigation-item__label {
	transition: color 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
	.origin-canvas-mobile-nav .wp-block-navigation__submenu-icon svg,
	.origin-canvas-mobile-nav .wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-container,
	.origin-canvas-mobile-nav .wp-block-navigation-item__label {
		transition: none;
	}
}

/**
 * Overlay close (✕) button — 44x44 tap target, soft rounded hover background,
 * 24px glyph. margin-inline-end:-10px pulls the centred 24px glyph out to the
 * large gutter edge so it aligns with the header hamburger (whose 24px glyph is
 * right-aligned to that same gutter). Without it the glyph sits (44-24)/2 = 10px
 * inside the button, landing 10px left of the hamburger axis.
 * top:-2px is the vertical half of the same swap: the hamburger glyph centre sits
 * at 32px header padding + 12 = 44px, the ✕ centre at 24px overlay padding + 22 =
 * 46px. Relative positioning (not negative margin) so the 44px flex row keeps its
 * size and centring while the glyph lands exactly on the hamburger's axis.
 */
.origin-canvas-mobile-menu .wp-block-navigation-overlay-close {
	border-radius: 10px;
	color: var(--wp--preset--color--text-heading);
	height: 44px;
	margin-inline-end: -10px;
	position: relative;
	top: -2px;
	transition: background-color 0.15s ease;
	width: 44px;
}

.origin-canvas-mobile-menu .wp-block-navigation-overlay-close:hover,
.origin-canvas-mobile-menu .wp-block-navigation-overlay-close:focus-visible {
	background-color: var(--wp--preset--color--surface-muted);
}

.origin-canvas-mobile-menu .wp-block-navigation-overlay-close svg {
	height: 24px;
	width: 24px;
}

/**
 * Admin-bar offset — core parity for custom overlays. Core drops its DEFAULT
 * overlay's dialog by the admin-bar height (navigation/style.css guards that rule
 * with :not(.disable-default-overlay)), but custom overlay template parts get
 * nothing: the fixed overlay stays pinned to the viewport top while the admin bar
 * pushes the whole page — header and hamburger included — 46px (32px >782px) down.
 * The close ✕ then floats an admin-bar-height above the hamburger it replaces.
 * Mirror core's behaviour: the overlay keeps covering the bar (z-index 100000 vs
 * 99999) and the dialog drops by the bar height so open/close stay on one axis.
 * Logged out, body.admin-bar is absent and both rules are inert. These selectors
 * bind to core-internal classes (verified against WP 7.0.1); if a core release
 * renames them the rules simply go inert — fail-safe back to core behaviour.
 */
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__responsive-dialog {
	margin-top: var(--wp-admin--admin-bar--height, 0px);
}

/**
 * The overlay part sets min-height:100vh inline; with the dialog dropped by the
 * bar height that totals 100vh + 46px inside a 100vh overflow:auto container —
 * 46px of pointless scroll. Shrink to fit (!important to beat the inline style).
 * dvh tracks the visible viewport as mobile browser chrome expands/collapses
 * (100vh is the larger chrome-collapsed height); vh line stays as the fallback
 * for browsers without dvh support.
 */
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .origin-canvas-mobile-menu {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)) !important;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)) !important;
}

/**
 * Safe-area guard. The overlay is position:fixed at the viewport top, so in
 * full-bleed contexts (PWA/standalone, or if viewport-fit=cover is ever added to
 * the viewport meta — the theme does not set it today) the ✕ would crowd the
 * notch/status bar. env() computes to the 0px fallback in normal browsing, so
 * this is inert everywhere else. Stacks additively with the admin-bar margin
 * above by design: the two obstructions overlap, and over-clearing by a few px
 * beats a max() that could under-clear and hide the close button.
 */
.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__responsive-dialog {
	padding-top: env(safe-area-inset-top, 0px);
}

/**
 * EDITOR CANVAS PARITY (mobile overlay)
 *
 * The Site Editor renders this part statically (no .is-menu-open / fixed-overlay
 * JS state), so core's openSubmenusOnClick handling resolves each submenu-parent
 * row to .has-child.open-always in the editor vs .has-child.open-on-click on the
 * front end. Only .open-always carries competing core rules (block-library/style.css)
 * that beat this file's rules on specificity — collapsing parent rows to
 * content-width/centered and adding extra vertical gaps in the editor only, so the
 * full-bleed dividers above them read as short centered lines with a floating gap
 * instead of full-width. Core ships this as several rules across two properties
 * (width-related: flex-grow/flex-basis; spacing: gap), live-verified against both a
 * depth-1 and a depth-2 .has-child row via getBoundingClientRect + computed-style
 * checks in the actual editor iframe (not static file reading).
 *
 * Scoped to body.editor-styles-wrapper / body.block-editor-iframe__body (the
 * block-editor canvas iframe's own body classes, per core's navigation/editor.css
 * precedent) so this is completely inert on the front end, where .open-on-click
 * never matches core's rule and rows are already correct.
 *
 * IMPORTANT — do NOT wrap the body classes in :where(): live-tested and confirmed
 * :where() contributes zero specificity, which silently drops these rules to the
 * SAME specificity as some of core's competing .has-child.open-always declarations
 * (both 0-3-0 for the gap case below) — a tie that core wins on source order,
 * making the override a no-op despite loading later and despite `first.matches()`
 * returning true. Plain repeated selectors (one branch per body class) keep the
 * `body` element + class contributing real specificity on every declaration here,
 * which is required to reliably beat core's compound selectors.
 *
 * Depends on core's open-always/open-on-click modifier-class strategy for
 * openSubmenusOnClick (WP core internal, not public API). If a future core
 * upgrade renames/restructures this, rows will silently return to
 * content-width/centered in the editor — re-check via computed flex-grow on
 * .has-child > .wp-block-navigation-item__content if editor parity regresses.
 */
body.editor-styles-wrapper .origin-canvas-mobile-nav .has-child.open-always > .wp-block-navigation-item__content,
body.block-editor-iframe__body .origin-canvas-mobile-nav .has-child.open-always > .wp-block-navigation-item__content,
body.editor-styles-wrapper .origin-canvas-mobile-nav .has-child.open-always .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content,
body.block-editor-iframe__body .origin-canvas-mobile-nav .has-child.open-always .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	flex-grow: 1;
	width: 100%;
}

/**
 * .has-child row itself: core's .has-child.open-always rule (block-library/
 * style.css) sets gap: var(--wp--style--block-gap, 2em) between its two
 * flex-wrap children (__content + its submenu-container) — resolves to the
 * theme's clamp(1.5rem, 3vw, 2rem) default here (32px), visible in the
 * editor as a floating gap above every nested submenu block that the front
 * end never shows (.open-on-click never matches .has-child.open-always
 * there, so this core rule is simply absent). Zeroed to match the theme's
 * own front-end-targeting gap:0 (core-navigation.css:320), which is lower
 * specificity than core's compound and loses in the editor the same way
 * the width rules above did.
 */
body.editor-styles-wrapper .origin-canvas-mobile-nav .has-child.open-always,
body.block-editor-iframe__body .origin-canvas-mobile-nav .has-child.open-always {
	gap: 0;
}

/**
 * Nested .has-child rows only: once the fix above gives a parent row's own
 * __content flex-grow:1 on its .has-child.open-always row (flex-wrap:wrap,
 * two children: __content + its .wp-block-navigation__submenu-container,
 * flex-basis:100% per core-navigation.css:361-363), __content consumes the
 * full first flex line and the submenu-container wraps to its own line. Live
 * DOM testing (getBoundingClientRect + forced inline style overrides in the
 * actual editor iframe — repeated after each change to rule out stylesheet
 * caching) found flex-basis, flex-grow, and width (percentage OR keyword)
 * ALL have zero measurable effect on this element's rendered width there —
 * a genuine flex-sizing resolution gap specific to a flex-basis:100% item on
 * a *wrapped* line inside this editor's nested block-editor-block-list__layout
 * structure, not reproducible from the CSS alone. min-width, tested the same
 * way, is the only property that measurably worked (confirmed both as a
 * literal px value and as min-width:100%, live) — min-width is applied as a
 * floor after flex-basis sizing rather than folded into the basis/grow
 * calculation, so it isn't subject to the same resolution gap. Also zeroes
 * this same submenu-container's OWN gap (core sets it a second time, between
 * sibling items inside the container) to match the theme's front-end-
 * targeting gap:0 (core-navigation.css:343), for the same reason as above.
 */
body.editor-styles-wrapper .origin-canvas-mobile-nav .has-child.open-always > .wp-block-navigation__submenu-container,
body.block-editor-iframe__body .origin-canvas-mobile-nav .has-child.open-always > .wp-block-navigation__submenu-container {
	gap: 0;
	min-width: 100%;
}