/**
 * Classic menu: an inline row from 782px up, a drawer below it. The link look
 * itself is the theme's (.anps-header__nav a) — this file only does layout and
 * the toggle, so a demo can restyle the links without touching the plugin.
 */

.anps-menu {
	display: flex;
	align-items: center;
}

.anps-menu__list {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.anps-menu__list li {
	position: relative;
	list-style: none;
}

.anps-menu__list a {
	text-decoration: none;
	color: inherit;
}

/* One level of submenu, on hover and on focus — no JS for a plain dropdown. */
.anps-menu__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: none;
	min-width: 200px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: var( --wp--preset--color--paper, Canvas );
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--border, ButtonBorder ) 35%, transparent );
	border-radius: var( --wp--custom--radius--md, 12px );
	box-shadow: 0 14px 30px color-mix( in srgb, var( --wp--preset--color--contrast, CanvasText ) 12%, transparent );
}

.anps-menu__list li:hover > .sub-menu,
.anps-menu__list li:focus-within > .sub-menu {
	display: block;
}

.anps-menu__list .sub-menu a {
	display: block;
	padding: 7px 18px;
	white-space: nowrap;
}

/**
 * Mega dropdown — a wide multi-column panel instead of a 40-item column that
 * runs off the bottom of the screen. The class is added server-side by
 * Blocks\ClassicMenu (six or more children, or a hand-typed anps-mega).
 *
 * Desktop only, deliberately: in the drawer every submenu is already an open
 * static list, and columns inside a phone-width drawer are unreadable.
 */
@media ( min-width: 782px ) {
	/* The panel spans a whole row rather than the item it hangs off, so a
	   40-service menu is not anchored to (and overflowing from) one 90px word.
	   Only the mega item goes static — every other li keeps its own positioning
	   context, and the drawer is not in this media query at all.

	   WHICH row it spans is the theme's business: the header sets position on
	   .anps-header__bar so the panel gets the full 1200px content width. Nothing
	   is set here on purpose — a `position: relative` on .anps-menu would be the
	   nearer ancestor and would clamp the panel back to the width of the menu
	   text. Outside a header the panel falls back to the nearest positioned
	   ancestor, which is the right answer wherever that is. */
	.anps-menu__list > .anps-menu__item--mega {
		position: static;
	}

	.anps-menu__list > .anps-menu__item--mega > .sub-menu {
		inset-inline: 0;
		min-width: 0;
		padding: 18px 22px;
		/* A column WIDTH, not a count: the browser fits as many as the nav is
		   wide, so the same rule gives two columns in a narrow header and four in
		   a wide one with nothing to configure. */
		columns: 200px;
		column-gap: 28px;
	}

	/* Without this a link splits across the column break mid-word. */
	.anps-menu__list > .anps-menu__item--mega > .sub-menu > li {
		break-inside: avoid;
	}

	.anps-menu__list > .anps-menu__item--mega > .sub-menu a {
		padding-inline: 0;
		/* The plain dropdown never wraps because it sizes to its longest item; a
		   column has a fixed width, so a long service name has to wrap. */
		white-space: normal;
	}
}

.anps-menu__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.anps-menu__empty {
	margin: 0;
	font-size: 0.8125rem;
}

@media ( max-width: 781px ) {
	.anps-menu__toggle {
		display: inline-flex;
	}

	/* The panel is the drawer: full width under the bar, hidden until opened.
	   `display: none` rather than a transform so nothing is tabbable while it
	   is closed — the reason this is not a pure CSS :target trick. */
	.anps-menu__panel {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 30;
		padding: 12px var( --wp--style--root--padding-right, 24px ) 20px;
		background: var( --wp--preset--color--base, Canvas );
		border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--border, ButtonBorder ) 30%, transparent );
	}

	.anps-menu__panel.is-open {
		display: block;
	}

	.anps-menu__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.anps-menu__list > li {
		width: 100%;
	}

	.anps-menu__list a {
		display: block;
		padding: 10px 0;
	}

	/* Submenus are always visible in the drawer — a hover dropdown inside a
	   touch drawer is a trap. */
	.anps-menu__list .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		margin: 0 0 0 14px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.anps-menu__list .sub-menu a {
		padding: 8px 0;
	}
}