/**
 * Axismundi — core/navigation-submenu (popover = M3 Menu).
 *
 * The navigation block owns the trigger row, state and disclosure affordance.
 * This file owns only the popover surface and rows shown when a submenu opens.
 * That popover maps to the M3 Menu component.
 *
 * Navigation-popover gate: anything except the open responsive overlay. A submenu
 * popover is an M3 Menu in both horizontal nav bars and vertical expanded rails.
 * Do NOT gate the whole nav on :has(.open-always): a nav can MIX an open-always
 * Page List (inline rail rows) with click/hover submenus (real popovers), and the
 * popovers still need the Menu skin. open-always containers opt back out of the
 * popover box below, per-submenu, so only true popovers read as M3 Menus.
 */

:is(nav, div).wp-block-navigation:not(:has(.wp-block-navigation__responsive-container.is-menu-open)) {
	/* Submenu = M3 Menu surface (the dark fix).
	 * Core ships the dropdown as a hardcoded white/black popover that ignores the
	 * scheme; re-skin it as an M3 standard Menu. surface-container-low + the border
	 * reset are !important because the submenu carries core's
	 * has-base-background-color preset. No overflow:hidden — it would clip a nested
	 * flyout. */
	& .wp-block-navigation__submenu-container,
	& .wp-block-navigation-item.has-child:not(.open-always):not(.open-on-click):hover > .wp-block-navigation__submenu-container {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--25);
		padding: var(--wp--preset--spacing--25);
		inline-size: max-content;
		min-inline-size: 112px;
		max-inline-size: min(280px, calc(100vw - var(--wp--preset--spacing--200) - var(--wp--preset--spacing--200)));
		background-color: var(--wp--preset--color--surface-container-low) !important;
		border: 0 !important;
		border-radius: 16px;
		box-shadow: var(--wp--preset--shadow--elevation-3);
		text-align: start;
	}

	/* open-always submenus are inline rail rows, not floating Menus: opt out of
	 * the popover box. navigation.css owns their inline row geometry and state;
	 * every Menu-row rule below is gated to a non-open-always parent. */
	& .wp-block-navigation-item.has-child.open-always > .wp-block-navigation__submenu-container {
		inline-size: auto;
		min-inline-size: 0;
		max-inline-size: none;
		padding-block: 0;
		background-color: transparent !important;
		border-radius: 0;
		box-shadow: none;
	}

	/* Menu row state layer (the li owns the row, so it owns the layer). */
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
	}
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item:focus-within {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-surface) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
	}
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item:active {
		background-color: color-mix(in srgb, var(--wp--preset--color--on-surface) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
	}

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

	/* Menu row = the li (M3 menu item): 44dp minimum, 8dp block padding,
	 * 16dp inline padding, 12dp between slots, 4dp item shape with 12dp outer
	 * corners on the first/last rows. Supporting text may grow the row. */
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		box-sizing: border-box;
		min-block-size: 44px;
		padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--200);
		gap: var(--wp--preset--spacing--150);
		border-radius: 4px;
	}
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child {
		border-start-start-radius: 12px;
		border-start-end-radius: 12px;
	}
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
		border-end-start-radius: 12px;
		border-end-end-radius: 12px;
	}

	/* Content = the label slot. The li owns the row box, so anchors and submenu
	 * toggle buttons have no padding/height; they grow to a full-row hit target
	 * and stack label + optional supporting text. */
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item > :is(a.wp-block-navigation-item__content, button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle) {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		flex-grow: 1;
		min-block-size: auto;
		padding: 0;
		color: var(--wp--preset--color--on-surface);
		text-align: start;
	}
	/* font-size is a deliberate M3 Menu override (label-large) of the parent bar's
	 * label-medium; font-weight (500) inherits from the theme.json core/navigation
	 * base. Scoped to true popovers only: an open-always submenu is an inline rail,
	 * so its rows inherit the (possibly user-set) nav fontSize instead. */
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item > :is(a.wp-block-navigation-item__content, button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle) {
		font-size: var(--wp--preset--font-size--label-large);
		font-weight: 500;
		line-height: 1.429;
		letter-spacing: 0.1px;
	}
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
		white-space: nowrap;
	}
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item > :is(a.wp-block-navigation-item__content, button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle):focus-visible {
		outline: 3px solid var(--wp--preset--color--secondary);
		outline-offset: -3px;
	}

	/* Supporting text (core/navigation-link description) — core hides it; opt in as
	 * M3 supporting text for true popover Menus only. An open-always submenu is an
	 * inline Rail sub-group (M3 Rail rows are label-only), so it stays hidden there
	 * — otherwise the description leaks onto the always-open vertical submenu while
	 * the top-level rail items show none. Same popover gate as the label-large size. */
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__description {
		display: block;
		margin-block-start: var(--wp--preset--spacing--25);
		font-size: var(--wp--preset--font-size--body-small);
		font-weight: 400;
		line-height: 1.333;
		letter-spacing: 0.4px;
		color: var(--wp--preset--color--on-surface-variant);
		text-align: start;
	}

	&.has-text-color .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item > :is(a.wp-block-navigation-item__content, button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle),
	&.has-text-color .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-item .wp-block-navigation-item__description,
	&.has-text-color .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
		color: inherit !important;
	}

	/* Nested submenu affordance = M3 Menu trailing icon. The row already owns the
	 * 8dp label-icon gap, so remove core's tiny SVG margins and replace the glyph
	 * with Material Symbols arrow_right. */
	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-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;
		margin-inline: 0;
		padding: 0;
		aspect-ratio: 1;
		color: var(--wp--preset--color--on-surface-variant);
		overflow: hidden;
	}

	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon svg {
		display: none;
	}

	& .wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon::before {
		content: "arrow_right";
		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);
	}

	/* Current submenu destination = M3 selected Menu item. Cover both core's
	 * direct anchor and the Navigation Icons plugin's restructured row. */
	& .wp-block-navigation-item.has-child:not(.open-always) > .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--tertiary-container);
		color: var(--wp--preset--color--on-tertiary-container);
	}
	& .wp-block-navigation-item.has-child:not(.open-always) > .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-tertiary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--wp--preset--color--tertiary-container));
	}
	& .wp-block-navigation-item.has-child:not(.open-always) > .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-tertiary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--wp--preset--color--tertiary-container));
	}
	& .wp-block-navigation-item.has-child:not(.open-always) > .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-tertiary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--wp--preset--color--tertiary-container));
	}
	& .wp-block-navigation-item.has-child:not(.open-always) > .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"]) :is(.wp-block-navigation-item__content, .wp-block-navigation-item__description, .ax-nav-item-icon, .wp-block-navigation__submenu-icon) {
		color: var(--wp--preset--color--on-tertiary-container) !important;
	}

}

/* User-authored navigation submenu/overlay text color (block-editor Color >
 * "Submenu & overlay text") is applied by core to the submenu/overlay container
 * itself, not to the parent navigation block. Let that container color flow into
 * menu labels, supporting text and nested submenu affordances. */
.wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container.has-text-color > .wp-block-navigation-item > :is(a.wp-block-navigation-item__content, button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle),
.wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container.has-text-color > .wp-block-navigation-item .wp-block-navigation-item__description,
.wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container.has-text-color > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
	color: inherit !important;
}

.wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container.has-text-color > .wp-block-navigation-item:hover {
	background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
}

.wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container.has-text-color > .wp-block-navigation-item:focus-within {
	background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
}

.wp-block-navigation-item.has-child:not(.open-always) > .wp-block-navigation__submenu-container.has-text-color > .wp-block-navigation-item:active {
	background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
}