/**
 * Axismundi — core/navigation (the container).
 *
 * core/navigation owns orientation, the (very wide) set of allowed inner blocks,
 * and the shared state affordance for its top-level children:
 * navigation-link, home/custom/page/post/category/tag links, submenu triggers,
 * buttons, search, social icons, site identity blocks, page-list, loginout, etc.
 *
 * Exception: core/page-list renders navigation items as grandchildren when placed
 * inside a navigation block. Those `.wp-block-pages-list__item` nodes are still
 * navigation destinations, so the nav item state intentionally reaches them.
 *
 * blocks.navigation-submenu.css is deliberately narrower: it owns only the popover
 * surface when a submenu opens, mapped to the M3 Menu component.
 *
 * INLINE NAV GATE (load-bearing):
 *   .wp-block-navigation:not(.is-vertical):not(:has(.wp-block-navigation__responsive-container.is-menu-open))
 * Apply the M3 Navigation Bar skin ONLY to the closed, horizontal navigation bar.
 * Limit the gate to the block root tags: <nav> on the front end and <div> in the
 * editor. Core also puts .wp-block-navigation on the responsive overlay's <ul>;
 * treating that list as another block root leaks bar/rail geometry into it.
 * Vertical navigation maps to M3 Navigation Rail (expanded). The open overlay /
 * drawer remains deferred. Do not gate on `.open-always`: a ref-less Navigation
 * block can contain a Page List whose child pages are marked open-always, and the
 * top-level header bar must still receive the navigation-bar skin.
 *
 * Enqueued front + editor canvas.
 */

/* §1 Horizontal navigation bar -------------------------------------------------
 *
 * M3 Navigation Bar, horizontal item. Material's public component site uses a
 * compact trailing disclosure affordance for nav items that reveal a menu; M3's
 * formal Navigation Bar spec does not define a trailing icon slot, so the theme
 * maps WordPress' submenu affordance to Material Symbols arrow_drop_down/up.
 */

:is(nav, div).wp-block-navigation:not(.is-vertical):not(:has(.wp-block-navigation__responsive-container.is-menu-open)) {
	min-block-size: 64px;
	background-color: var(--wp--preset--color--surface-container);
	box-shadow: var(--wp--preset--shadow--elevation-3);

	/* M3 Navigation Bar line metrics. The base item typography / colour lives in
	 * theme.json (styles.blocks.core/navigation, label-large). font-size is set in a
	 * separate element-only (0,0,1) rule after this block: the previous high-
	 * specificity font-size here beat a user block-level fontSize (.has-*-font-size,
	 * 0,1,0), so page-list and items ignored it. page-list is a plain <ul.wp-block-
	 * page-list> that only inherits, so a single nav-level rule is enough. */
	line-height: 1.333;
	letter-spacing: 0.5px;

	/* M3 Navigation Bar item spacing = 0. Kept at this specificity because core
	 * emits the global blockGap default (24px) on the same .wp-container{gap} rule
	 * a user override would use, so a lowered default just lets the 24px leak in.
	 * The M3 bar/rail item spacing is a fixed spec value, so it is hardcoded. */
	& .wp-block-navigation__container {
		gap: 0;
	}
	&.is-style-item-vertical .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--75);
	}

	/* Top-level item = M3 navigation-bar item pill. This intentionally reaches
	 * core/page-list grandchildren when the page-list block is placed inside nav,
	 * but excludes rows inside an opened submenu menu. */
	& .wp-block-navigation__container .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) {
		display: flex;
		align-items: center;
		min-block-size: 40px;
		padding-inline: var(--wp--preset--spacing--200);
		border-radius: 100px;
		gap: var(--wp--preset--spacing--50);
	}

	/* Core gives the submenu trigger li a stray top margin; zero it so a trigger
	 * aligns with plain link siblings in the horizontal bar. */
	& .wp-block-navigation-submenu {
		margin-block-start: 0;
	}

	/* Item row state layer — on-secondary-container mixed over transparent at the shared M3
	 * state opacities. Gated with :not(.is-style-item-vertical): the axismundi-
	 * navigation-icons plugin's vertical-item style moves the state/active indicator
	 * onto its 56x32 icon slot, so the theme yields the item-level background there. */
	&:not(.is-style-item-vertical) .wp-block-navigation__container .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
	}
	&:not(.is-style-item-vertical) .wp-block-navigation__container .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):focus-within {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
	}
	&:not(.is-style-item-vertical) .wp-block-navigation__container .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):active {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
	}

	/* Current page = M3 navigation-bar active indicator. */
	&:not(.is-style-item-vertical) .wp-block-navigation__container .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):has(> a[aria-current="page"], > .ax-nav-item-trigger > .ax-nav-item-body > a[aria-current="page"]) {
		background-color: var(--wp--preset--color--secondary-container);
	}
	&:not(.is-style-item-vertical) .wp-block-navigation__container .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):has(> a[aria-current="page"], > .ax-nav-item-trigger > .ax-nav-item-body > a[aria-current="page"]):hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
	}
	&:not(.is-style-item-vertical) .wp-block-navigation__container .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):has(> a[aria-current="page"], > .ax-nav-item-trigger > .ax-nav-item-body > a[aria-current="page"]):focus-within {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
	}
	&:not(.is-style-item-vertical) .wp-block-navigation__container .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):has(> a[aria-current="page"], > .ax-nav-item-trigger > .ax-nav-item-body > a[aria-current="page"]):active {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
	}
	& .wp-block-navigation__container .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) > a[aria-current="page"] {
		color: var(--wp--preset--color--secondary);
		font-weight: 500;
		font-variation-settings: "GRAD" 125;
	}

	/* Keyboard focus ring — M3 focus indicator (secondary, 3px) offset off the pill. */
	& .wp-block-navigation__container .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) > a.wp-block-navigation-item__content:focus-visible {
		outline: 3px solid var(--wp--preset--color--secondary);
		outline-offset: 2px;
	}

}

/* M3 Navigation Bar font-size default = label-medium, at element-only specificity
 * (0,0,1): it beats theme.json's :where() label-large default but yields to a user
 * block-level fontSize (.has-*-font-size, 0,1,0), which then cascades to page-list
 * and every item. Keep in sync with the horizontal-bar gate above. */
:is(nav, div):where(.wp-block-navigation:not(.is-vertical):not(:has(.wp-block-navigation__responsive-container.is-menu-open))) {
	font-size: var(--wp--preset--font-size--label-medium);
}

/* §2 Vertical navigation -------------------------------------------------------
 *
 * M3 Navigation Rail (expanded), horizontal item: 220–360dp container, 64dp
 * rows, 56dp active indicator, 16dp edge padding, 8dp icon-label gap.
 */

:is(nav, div)/* :not(:has(...is-menu-open)) mirrors §1: when a vertical nav has an OPEN overlay
 * (e.g. an overlayMenu:"always" header nav rendered as a collapsed hamburger), the
 * drawer content — including a NESTED navigation — lives inside this nav's
 * responsive container. Without this gate the outer nav's rail rules reach through
 * the descendant combinator into the overlay's inner nav items and double-paint the
 * state layer that the overlay's own (item-vertical) nav already owns. The inner
 * overlay nav has no responsive container of its own, so it keeps its rules. */
:is(nav, div).wp-block-navigation.is-vertical:not(:has(.wp-block-navigation__responsive-container.is-menu-open)) {
	box-shadow: none;

	&:not(.is-style-item-vertical) {
		font-size: var(--wp--preset--font-size--label-large);
		line-height: 1.429;
		letter-spacing: 0.1px;
	}

	& .wp-block-navigation__container {
		inline-size: min(100%, 360px);
		min-inline-size: min(100%, 220px);
		/* No background-color: the M3 rail sits on `surface`, which equals the page
		 * background, so an opaque fill only erases neighboring blocks' shadows (the
		 * overlay search bar showed a 360px notch). The overlay provides its own
		 * surface via .ax-nav-overlay; a rail on the page inherits the page surface. */
		gap: var(--wp--preset--spacing--75);
	}

	/* Rail item baseline. The exclusion withholds it from popover M3 Menu rows
	 * (rows inside a CLOSED submenu's container). Open-always submenus are inline,
	 * not popovers — the M3 Menu skin (blocks.navigation-submenu.css) already skips
	 * them via :not(:has(.open-always)) — so their inner page links should inherit
	 * this rail item style like any other vertical nav item. */
	& .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always) {
		display: flex;
		align-items: center;
		min-block-size: 64px;
		padding-inline: var(--wp--preset--spacing--200);
		border-radius: 100px;
		gap: var(--wp--preset--spacing--100);
	}

	/* The li owns the 64dp row, state layer and active shape. The anchor should
	 * shrink to its text/span label rather than stretching into a second row box. */
	& .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always) > a.wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		flex-grow: 0;
		min-block-size: auto;
		color: inherit;
		gap: var(--wp--preset--spacing--100);
	}

	&:not(.is-style-item-vertical) .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
	}
	&:not(.is-style-item-vertical) .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):focus-within {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
	}
	&:not(.is-style-item-vertical) .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):active {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
	}

	&:not(.is-style-item-vertical) .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):has(> a[aria-current="page"], > .ax-nav-item-trigger > .ax-nav-item-body > a[aria-current="page"]) {
		background-color: var(--wp--preset--color--secondary-container);
	}
	&:not(.is-style-item-vertical) .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):has(> a[aria-current="page"], > .ax-nav-item-trigger > .ax-nav-item-body > a[aria-current="page"]):hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
	}
	&:not(.is-style-item-vertical) .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):has(> a[aria-current="page"], > .ax-nav-item-trigger > .ax-nav-item-body > a[aria-current="page"]):focus-within {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
	}
	&:not(.is-style-item-vertical) .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):has(> a[aria-current="page"], > .ax-nav-item-trigger > .ax-nav-item-body > a[aria-current="page"]):active {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
	}
	& .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item) > a[aria-current="page"] {
		color: var(--wp--preset--color--secondary);
		font-weight: 500;
		font-variation-settings: "GRAD" 125;
	}

	& .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item) > a.wp-block-navigation-item__content:focus-visible {
		outline: 3px solid var(--wp--preset--color--secondary);
		outline-offset: 2px;
	}

	/* Open-always inline submenu = a continuation of the rail: match the rail's row
	 * gap (not core's block-gap) and the nav's item justification. Keep core's
	 * nested structure, but tune its inline inset to the shallow step measured on
	 * the Material site rather than accumulating core's wider submenu padding. */
	& .wp-block-navigation-item.has-child.open-always > .wp-block-navigation__submenu-container {
		gap: var(--wp--preset--spacing--75);
		align-items: var(--navigation-layout-align, flex-start);
		padding-inline: var(--wp--preset--spacing--125);
	}

	/* An open-always parent is not itself a row: it wraps one trigger row plus an
	 * inline sublist. Remove the normal li-owned row geometry, then put the same
	 * 64dp metrics and state layer on its direct content only. This applies to both
	 * core/navigation-submenu and hierarchical core/page-list parents. Descendant
	 * leaf li elements keep the normal rail row above. */
	& .wp-block-navigation-item.has-child.open-always {
		align-items: var(--navigation-layout-align, flex-start);
		min-block-size: 0;
		padding-inline: 0;
		border-radius: 0;
		gap: 0;
		background-color: transparent;
	}

	& .wp-block-navigation-item.has-child.open-always > .wp-block-navigation-item__content {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-grow: 0;
		min-block-size: 64px;
		padding-inline: var(--wp--preset--spacing--200);
		margin-block-end: var(--wp--preset--spacing--75);
		border-radius: 100px;
		gap: var(--wp--preset--spacing--100);
		color: inherit;
	}

	&:not(.is-style-item-vertical) .wp-block-navigation-item.has-child.open-always > .wp-block-navigation-item__content:hover,
	&:not(.is-style-item-vertical) .wp-block-navigation-item.has-child.open-always:has(> .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover) > .wp-block-navigation-item__content {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
	}

	&:not(.is-style-item-vertical) .wp-block-navigation-item.has-child.open-always > .wp-block-navigation-item__content:focus-visible {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
	}

	&:not(.is-style-item-vertical) .wp-block-navigation-item.has-child.open-always > .wp-block-navigation-item__content:active {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
	}

	&:not(.is-style-item-vertical) .wp-block-navigation-item.has-child.open-always > .wp-block-navigation-item__content[aria-current="page"] {
		background-color: var(--wp--preset--color--secondary-container);
	}

	&:not(.is-style-item-vertical) .wp-block-navigation-item.has-child.open-always > .wp-block-navigation-item__content[aria-current="page"]:hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
	}
}

/* Orientation vertical maps directly to the expanded M3 Navigation Rail.
 * Keep its 44dp top space inside the component contract. Match only the actual
 * block root (<nav> front end / <div> editor), never core's internal <ul>. */
:is(nav, div).wp-block-navigation.is-vertical .wp-block-navigation__container {
	padding-block-start: 44px;
}

/* §2b Vertical justification and no-plugin item-vertical fallback -------------
 *
 * The axismundi-navigation-icons plugin registers `.is-style-item-vertical` and,
 * when active, moves hover/current state to an icon slot. If the plugin is off
 * (or an individual item has no icon), no `.ax-nav-item-trigger` exists, so the
 * theme must paint the normal item state again. Also keep multiline vertical nav
 * labels aligned with the block's "change items justification" control. */

:where(nav, div).wp-block-navigation.is-vertical.items-justified-center .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item) > a.wp-block-navigation-item__content,
:where(nav, div).wp-block-navigation.is-vertical .wp-block-navigation__container.items-justified-center .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item) > a.wp-block-navigation-item__content {
	justify-content: center;
	text-align: center;
}

:where(nav, div).wp-block-navigation.is-vertical.items-justified-right .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item) > a.wp-block-navigation-item__content,
:where(nav, div).wp-block-navigation.is-vertical .wp-block-navigation__container.items-justified-right .wp-block-navigation-item:not(.wp-block-navigation-item.has-child:not(.open-always) .wp-block-navigation__submenu-container .wp-block-navigation-item) > a.wp-block-navigation-item__content {
	justify-content: flex-end;
	text-align: right;
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):not(:has(> .ax-nav-item-trigger)):hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item.has-child.open-always:not(:has(> .ax-nav-item-trigger)) {
	background-color: transparent;
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item.has-child.open-always:not(:has(> .ax-nav-item-trigger)) > .wp-block-navigation-item__content:hover,
:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item.has-child.open-always:not(:has(> .ax-nav-item-trigger)):has(> .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover) > .wp-block-navigation-item__content {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item.has-child.open-always:not(:has(> .ax-nav-item-trigger)) > .wp-block-navigation-item__content:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item.has-child.open-always:not(:has(> .ax-nav-item-trigger)) > .wp-block-navigation-item__content:active {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item.has-child.open-always:not(:has(> .ax-nav-item-trigger)) > .wp-block-navigation-item__content[aria-current="page"] {
	background-color: var(--wp--preset--color--secondary-container);
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item.has-child.open-always:not(:has(> .ax-nav-item-trigger)) > .wp-block-navigation-item__content[aria-current="page"]:hover,
:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item.has-child.open-always:not(:has(> .ax-nav-item-trigger)):has(> .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover) > .wp-block-navigation-item__content[aria-current="page"] {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item.has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.has-child):not(:has(> .ax-nav-item-trigger)):hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item.has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.has-child):not(:has(> .ax-nav-item-trigger)):focus-within {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item.has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.has-child):not(:has(> .ax-nav-item-trigger)):active {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
}

/* Core's flyout hover rule gives child submenu containers min-width: 200px.
 * In an open-always tree those child containers are inline, not flyouts, so that
 * hover width makes long labels unwrap and shifts the vertical rail. */
:where(nav, div).wp-block-navigation .wp-block-navigation-item.has-child.open-always .wp-block-navigation-item.has-child.open-always > .wp-block-navigation__submenu-container,
:where(nav, div).wp-block-navigation .wp-block-navigation-item.has-child.open-always .wp-block-navigation-item.has-child.open-always:hover > .wp-block-navigation__submenu-container,
:where(nav, div).wp-block-navigation .wp-block-navigation-item.has-child.open-always .wp-block-navigation-item.has-child.open-always:focus-within > .wp-block-navigation__submenu-container {
	min-width: 0;
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):not(:has(> .ax-nav-item-trigger)):focus-within {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):not(:has(> .ax-nav-item-trigger)):active {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):not(:has(> .ax-nav-item-trigger)):has(> a[aria-current="page"]) {
	background-color: var(--wp--preset--color--secondary-container);
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):not(:has(> .ax-nav-item-trigger)):has(> a[aria-current="page"]):hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--wp--preset--color--secondary-container));
}

:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always):not(:has(> .ax-nav-item-trigger)) > a[aria-current="page"] {
	color: var(--wp--preset--color--secondary);
	font-weight: 500;
	font-variation-settings: "GRAD" 125;
}

/* §3 Direct submenu disclosure icon -------------------------------------------
 *
 * WordPress renders submenu disclosure as an SVG icon next to the trigger. For
 * direct navigation children, normalize that affordance to Material Symbols
 * arrow_drop_down/up. Applies to horizontal nav-bar and vertical expanded rail;
 * submenu popover rows remain the Menu component's territory.
 */

nav.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	min-inline-size: 24px;
	max-inline-size: 24px;
	block-size: 24px;
	min-block-size: 24px;
	max-block-size: 24px;
	flex: 0 0 24px;
	align-self: center;
	padding: 0;
	aspect-ratio: 1;
	color: var(--wp--preset--color--on-surface-variant);
	overflow: hidden;
}

nav.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon svg {
	display: none;
}

nav.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon::before {
	content: "arrow_drop_down";
	font-family: "Material Symbols Outlined", sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1em;
	block-size: 1em;
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-variation-settings:
		"FILL" var(--md-icon-fill, 0),
		"wght" var(--md-icon-wght, 400),
		"GRAD" var(--md-icon-grad, 0),
		"opsz" var(--md-icon-opsz, 24);
}

nav.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-submenu > button[aria-expanded="true"] ~ .wp-block-navigation__submenu-icon::before,
nav.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon[aria-expanded="true"]::before {
	content: "arrow_drop_up";
}

/* §3b Current page text bridge for icon navigation items ----------------------
 *
 * The axismundi-navigation-icons plugin restructures icon items as
 * `.ax-nav-item-trigger > .ax-nav-item-body > a`. Current item backgrounds are
 * folded into the native §1/§2 :has() rules; this bridge only styles the nested
 * anchor text itself. */

nav.wp-block-navigation:not(.is-style-item-vertical) .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always) > .ax-nav-item-trigger > .ax-nav-item-body > a.wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--secondary);
	font-weight: 500;
	font-variation-settings: "GRAD" 125;
}

/* item-vertical restructured (icon) items carry the M3 active indicator on the icon
 * slot (plugin), but the label still takes the same current colour + grade as every
 * other current nav label. The §3b rule above excludes item-vertical; its no-icon
 * fallback label is handled in §2b. */
:where(nav, div).wp-block-navigation.is-style-item-vertical .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):not(.has-child.open-always) > .ax-nav-item-trigger > .ax-nav-item-body > a.wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--secondary);
	font-weight: 500;
	font-variation-settings: "GRAD" 125;
}

/* §3c User-authored navigation text color ------------------------------------
 *
 * Block-editor color controls place `.has-text-color` / `color` on the
 * navigation block itself. When present, the authored color should flow into the
 * navigation items, direct submenu disclosure icon and responsive overlay text.
 * Keep the M3 defaults above only for navigation blocks without an authored text
 * color. */

nav.wp-block-navigation.has-text-color .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item),
nav.wp-block-navigation.has-text-color .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) > a.wp-block-navigation-item__content,
nav.wp-block-navigation.has-text-color > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
	color: inherit !important;
}

.wp-block-navigation__responsive-container.has-text-color .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item),
.wp-block-navigation__responsive-container.has-text-color a.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.has-text-color .wp-block-navigation__submenu-icon {
	color: inherit !important;
}

/* §4 Responsive overlay trigger -----------------------------------------------
 *
 * `icon:"menu"` renders a three-line core SVG but does not add a distinct class.
 * The stable first path identifies that option. Map only that icon mode to an M3
 * standard icon button; the default two-line "handle" and text Menu variants are
 * left untouched for now.
 */

nav.wp-block-navigation button.wp-block-navigation__responsive-container-open:has(svg path[d="M5 5v1.5h14V5H5z"]) {
	box-sizing: border-box;
	/* No `display` here: core controls the trigger's visibility by viewport/overlay
	 * mode (display:none on desktop for overlayMenu:mobile, shown for :always). An
	 * unconditional display:inline-flex (high specificity) overrode that desktop
	 * hide, so a header nav's icon:menu hamburger leaked onto desktop alongside the
	 * inline items. Core renders the shown trigger as flex, so align/justify still
	 * centre the glyph. */
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	min-inline-size: 40px;
	block-size: 40px;
	min-block-size: 40px;
	padding: var(--wp--preset--spacing--100);
	border: 0;
	border-radius: 9999px;
	background-color: transparent;
	color: var(--wp--preset--color--on-surface-variant);
}

nav.wp-block-navigation button.wp-block-navigation__responsive-container-open:has(svg path[d="M5 5v1.5h14V5H5z"]):hover {
	background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
}

nav.wp-block-navigation button.wp-block-navigation__responsive-container-open:has(svg path[d="M5 5v1.5h14V5H5z"]):focus-visible {
	background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

nav.wp-block-navigation button.wp-block-navigation__responsive-container-open:has(svg path[d="M5 5v1.5h14V5H5z"]):active {
	background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
	border-radius: 8px;
}

nav.wp-block-navigation button.wp-block-navigation__responsive-container-open:has(svg path[d="M5 5v1.5h14V5H5z"]) svg {
	display: none;
}

nav.wp-block-navigation button.wp-block-navigation__responsive-container-open:has(svg path[d="M5 5v1.5h14V5H5z"])::before {
	content: "menu";
	font-family: "Material Symbols Outlined", sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1em;
	block-size: 1em;
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-variation-settings:
		"FILL" var(--md-icon-fill, 0),
		"wght" var(--md-icon-wght, 400),
		"GRAD" var(--md-icon-grad, 0),
		"opsz" var(--md-icon-opsz, 24);
}