/**
 * Mobile Collapsible Submenus
 * Frontend styles.
 *
 * Every rule is scoped to the plugin's marker class
 * `.wp-block-navigation.mobile-collapsible-submenus`, so unrelated menus,
 * lists and links are never affected.
 *
 * The mobile state class `.mcs-active` is added/removed by the plugin script
 * using `matchMedia()` with the `--mcs-breakpoint` custom property below.
 * None of the mobile rules below apply without `.mcs-active`, so desktop
 * navigation keeps the theme's default behavior and appearance.
 */

:root {
	/* Override this custom property in your theme to change the breakpoint. */
	--mcs-breakpoint: 782px;
}

/**
 * 1. Collapse every submenu by default on mobile.
 *
 * Hidden submenus use `display: none`, so their links are removed from the
 * tab order and screen-reader output until the submenu is expanded.
 * Submenus explicitly set to "always open" (`open-always`) are left alone.
 */
.wp-block-navigation.mobile-collapsible-submenus.mcs-active li.has-child:not(.open-always) > ul.wp-block-navigation__submenu-container {
	display: none;
}

/**
 * 2. Show a submenu only while its own toggle button is expanded, rendered
 * like the desktop dropdown (floating panel, theme background, no indent).
 *
 * Core forces `background: transparent` on submenus inside the open overlay,
 * so the panel background is restored from the theme's "base" preset, which
 * is what Twenty Twenty-Four / Twenty Twenty-Five use for submenu panels.
 */
.wp-block-navigation.mobile-collapsible-submenus.mcs-active li.has-child > button.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ ul.wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	visibility: visible;
	opacity: 1;
	width: auto;
	height: auto;
	min-width: 200px;
	position: absolute;
	left: -1px;
	top: 100%;
	z-index: 2;
	padding: 0;
	background-color: var( --wp--preset--color--base, #fff ) !important;
}

/* Nested dropdowns open to the right, matching the desktop layout. */
.wp-block-navigation.mobile-collapsible-submenus.mcs-active li.has-child > button.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ ul.wp-block-navigation__submenu-container .has-child > button.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ ul.wp-block-navigation__submenu-container {
	left: 100%;
	top: -1px;
}

/* Right-justified navigation menus align the dropdown with the item's right
   edge, matching core's desktop behavior and keeping it on-screen. */
.wp-block-navigation.mobile-collapsible-submenus.mcs-active.items-justified-right li.has-child > button.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ ul.wp-block-navigation__submenu-container {
	left: auto;
	right: 0;
}

/* Give dropdown links the same padding as on desktop. */
.wp-block-navigation.mobile-collapsible-submenus.mcs-active li.has-child > button.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5em 1em;
}

/**
 * 3. Toggle buttons created by the plugin are hidden on desktop so the
 * theme's original markup and appearance are preserved. Toggle buttons that
 * core already provides keep their normal desktop behavior.
 */
.wp-block-navigation.mobile-collapsible-submenus:not(.mcs-active) li.has-child > button.mcs-created {
	display: none;
}

/**
 * 4. On mobile the overlay lays each item out as a column, which would push
 * the toggle button below the link. Keep the link and its toggle side by side,
 * like on desktop.
 */
.wp-block-navigation.mobile-collapsible-submenus.mcs-active li.has-child {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
}

/**
 * 5. Small, unobtrusive toggle button beside the parent link (mobile only).
 */
.wp-block-navigation.mobile-collapsible-submenus.mcs-active li.has-child > button.wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 0.25em;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

/* Keep the chevron icon itself small and theme-colored. */
.wp-block-navigation.mobile-collapsible-submenus.mcs-active li.has-child > button.wp-block-navigation-submenu__toggle svg {
	width: 0.6em;
	height: 0.6em;
	margin: 0;
	stroke: currentColor;
}

/* Rotate the chevron while the submenu is expanded. */
.wp-block-navigation.mobile-collapsible-submenus.mcs-active li.has-child > button.wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/**
 * 6. Re-show the chevron inside core toggle buttons (core hides submenu
 * icons in the overlay menu, where submenus used to always be expanded).
 */
.wp-block-navigation.mobile-collapsible-submenus.mcs-active li.has-child > button.wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon {
	display: inline-block;
}

/**
 * 7. Hide decorative (non-button) submenu icons on mobile so the real
 * toggle button is not duplicated visually.
 */
.wp-block-navigation.mobile-collapsible-submenus.mcs-active li.has-child > span.wp-block-navigation__submenu-icon {
	display: none;
}