/**
 * Microassist: accessible desktop primary navigation.
 *
 * Styles for the menu rendered by inc/microassist-desktop-nav.php.
 *
 * The !important flags below are deliberate. They mark open and closed
 * states that must win over Astra's theme CSS for submenus, whatever
 * specificity Astra uses in a given version.
 */

/* Astra stacks each top-level item vertically. Lay the link and its button side by side. */
.ma-disclosure-nav > li.menu-item-has-children {
	flex-direction: row;
	align-items: center;
}

/* Tighten the link's right padding so link plus button take about the space Astra's arrow did. */
.ma-disclosure-nav > li.menu-item-has-children > .menu-link {
	padding-right: 2px;
}

/* The disclosure button. 24px minimum meets WCAG 2.2 target size (2.5.8). */
.ma-disclosure-nav .ma-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	margin: 0 8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: none;
	color: inherit;
	line-height: 1;
	cursor: pointer;
}

.ma-disclosure-nav .ma-submenu-toggle:hover,
.ma-disclosure-nav .ma-submenu-toggle:focus {
	background: none;
	color: inherit;
}

/* Microassist focus standard. */
.ma-disclosure-nav .ma-submenu-toggle:focus-visible {
	outline: 3px solid #26221c;
	outline-offset: 2px;
}

.ma-disclosure-nav .ma-submenu-toggle__icon,
.ma-disclosure-nav .ma-submenu-toggle__icon .ast-icon {
	display: inline-flex;
	pointer-events: none;
}

.ma-disclosure-nav .ma-submenu-toggle svg {
	width: 0.625em;
	height: auto;
	fill: currentColor;
	transition: transform 0.2s ease;
}

.ma-disclosure-nav .ma-submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.ma-disclosure-nav .ma-submenu-toggle svg {
		transition: none;
	}
}

/*
 * Closed state, once the script is running (ma-nav-ready). Overrides Astra's
 * :hover and .focus rules so a submenu shows only when the script has opened
 * it, and aria-expanded always matches what is on screen. Without JavaScript
 * this rule does not apply and Astra's hover behavior is unchanged.
 */
.ma-disclosure-nav.ma-nav-ready > li:not(.ma-submenu-open) > .sub-menu {
	visibility: hidden !important;
	left: -999em !important;
	right: auto !important;
}

/*
 * Open state. Astra hides closed submenus off-screen (left: -999em), not just
 * with visibility, so position must be reset or focus lands on links nobody
 * can see. Astra flags items near the right edge with ast-left-align-sub-menu.
 */
.ma-disclosure-nav > li.ma-submenu-open > .sub-menu {
	visibility: visible !important;
	opacity: 1 !important;
	left: 0 !important;
	right: auto !important;
}

.ma-disclosure-nav > li.ast-left-align-sub-menu.ma-submenu-open > .sub-menu {
	left: auto !important;
	right: 0 !important;
}

/* Windows High Contrast / forced colors: keep the focus ring visible. */
@media (forced-colors: active) {
	.ma-disclosure-nav .ma-submenu-toggle:focus-visible {
		outline-color: Highlight;
	}
}