/*
 * ILM Components -- Menu.
 *
 * The list inside is WordPress's, from `Walker_Nav_Menu`, so the classes
 * styled here are WordPress's names -- `menu-item`, `sub-menu`,
 * `current-menu-item` -- scoped to this component's boundary. Renaming them
 * would mean writing a custom walker that produced its own markup, which would
 * mean reimplementing the escaping and the current-page state that walker
 * already gets right.
 *
 * ## Two presentations, chosen by a media query and by nothing else
 *
 * Expanded is the default and is everything above the collapsed blocks at the
 * bottom of this file: a row (or a column) of links, submenus on `:hover` and
 * `:focus-within`, no trigger, no toggles. A Menu with no collapse threshold
 * is only ever this, at every width, which is what every document written
 * before 1.12.0 gets.
 *
 * Collapsed is a `max-width` query per threshold. The class on the root says
 * which query applies -- `ilm-collapse-lg` means "below lg" -- so the
 * presentation is CSS's decision from first paint, with no script involved and
 * nothing to recalculate on resize. The behaviour script never reads the
 * viewport; see `assets/js/behaviour-menu.js`.
 *
 * ## `is-enhanced` is what makes the no-JS fallback work
 *
 * Below the threshold *without* the class -- which is the state the server
 * rendered and the state a visitor stays in if the script never arrives -- the
 * trigger and the toggles are hidden and the panel and every submenu are
 * shown. The navigation is a plain expanded vertical list: complete, keyboard
 * reachable, and with no control that does nothing.
 *
 * The runtime adds `is-enhanced` after it has bound the listeners, and only
 * then does the panel close and the trigger appear. Every rule below that
 * reveals a control is qualified by it, deliberately, and that is not
 * decoration -- removing one of those qualifiers is how a menu becomes
 * unopenable on a slow connection.
 *
 * ## The widths are written twice
 *
 * Here, and in `ILM\Core\Responsive\Breakpoint`, which the renderer emits as
 * `data-ilm-menu-collapse` for `matchMedia`. A media query cannot read a value
 * from a custom property or from anywhere else, so there is no way to derive
 * one from the other. That the two agree is asserted in the browser at each
 * threshold rather than asserted in this comment.
 *
 * The `-0.02px` is Bootstrap's own convention for the width just below a
 * breakpoint, and is used so that `max-width: 991.98px` and `min-width: 992px`
 * partition every width between them with no gap and no overlap.
 */

.ilm-component--wordpress-menu {
	display: block;
}

.ilm-menu__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ilm-c-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: var(--ilm-c-text);
}

.ilm-component--wordpress-menu.ilm-layout-vertical .ilm-menu__list {
	flex-direction: column;
	gap: var(--ilm-c-space-xs);
	align-items: var(--ilm-c-text);
}

.ilm-component--wordpress-menu .menu-item {
	position: relative;
	margin: 0;
}

.ilm-component--wordpress-menu a {
	color: inherit;
	text-decoration: none;
	transition: color var(--ilm-transition-fast, 120ms) ease;
}

.ilm-component--wordpress-menu a:hover,
.ilm-component--wordpress-menu a:focus-visible {
	text-decoration: underline;
}

/*
 * `linkUnderline: none` (1.24.0), for a menu whose states are a colour. Only
 * the decoration goes: the focus ring is the theme's `outline`, which nothing
 * here or in the design compiler can remove.
 */
.ilm-component--wordpress-menu.ilm-menu--no-underline a:hover,
.ilm-component--wordpress-menu.ilm-menu--no-underline a:focus-visible {
	text-decoration: none;
}

/*
 * The current page is marked by WordPress with a class rather than by us with
 * an attribute, so this is the only way to reflect it -- and it is reflected
 * visually only. The accessible signal is `aria-current="page"`, which
 * `Walker_Nav_Menu` puts on the anchor itself.
 */
.ilm-component--wordpress-menu .current-menu-item > a,
.ilm-component--wordpress-menu .current-menu-ancestor > a {
	font-weight: 600;
}

/*
 * The flyout (refined in 1.24.0).
 *
 * Its text starts at the start edge whatever the bar's alignment. Alignment is
 * inherited, and through 1.23.0 a bar aligned to the end -- the usual menu
 * beside a logo -- handed `text-align: end` to its dropdown, which drew a
 * column of labels hanging off the right edge of the box. Where the bar sits
 * is not how a list inside a box reads.
 *
 * Each link is a block with its own padding, so the whole row is the target
 * and the labels have room; `nowrap` because a two-word label broken over two
 * lines in a box that could have grown is the compression this replaces.
 *
 * The box opens a little below its parent and is pulled back by its own
 * inline padding, so the first letters line up with the parent's. The gap is
 * bridged by `::before`, so a pointer travelling down to it never leaves the
 * item and never closes it.
 */
.ilm-component--wordpress-menu .sub-menu {
	display: none;
	position: absolute;
	inset-inline-start: calc(-1 * var(--ilm-c-space-sm));
	top: calc(100% + var(--ilm-c-space-xs));
	z-index: 2;
	min-width: 12rem;
	margin: 0;
	padding: var(--ilm-c-space-xs) 0;
	list-style: none;
	text-align: start;
	background: var(--ilm-color-surface, #fff);
	border: 1px solid var(--ilm-color-border, #d9dde3);
	border-radius: 0.25rem;
}

.ilm-component--wordpress-menu .sub-menu::before {
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	block-size: calc(var(--ilm-c-space-xs) + 1px);
	content: "";
}

.ilm-component--wordpress-menu .sub-menu a {
	display: block;
	padding: var(--ilm-c-space-xs) var(--ilm-c-space-sm);
	white-space: nowrap;
}

.ilm-component--wordpress-menu .menu-item:hover > .sub-menu,
.ilm-component--wordpress-menu .menu-item:focus-within > .sub-menu {
	display: block;
}

/*
 * The third level, rendered since 1.12.0. It cannot sit under its parent the
 * way the second level does, because its parent is already a row in a panel --
 * so it goes beside it, which is what every desktop menu with three levels
 * does.
 */
.ilm-component--wordpress-menu .sub-menu .sub-menu {
	top: calc(-1 * var(--ilm-c-space-xs) - 1px);
	inset-inline-start: 100%;
}

.ilm-component--wordpress-menu .sub-menu .sub-menu::before {
	display: none;
}

/*
 * A last item's submenu opens inward. A heuristic and not a measurement: a
 * flyout hanging off the final item of a menu that sits at the end of a header
 * is the one that reliably leaves the viewport, and no amount of CSS can know
 * where the component actually is. Anything better needs to measure at
 * runtime, which is a scroll-and-resize listener for a cosmetic case.
 */
.ilm-component--wordpress-menu .ilm-menu__list > .menu-item:last-child > .sub-menu {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/*
 * Stacked, a submenu has nowhere to pop out to, so it indents in place. This
 * also means a vertical menu needs no hover at all to be fully usable.
 */
.ilm-component--wordpress-menu.ilm-layout-vertical .sub-menu {
	display: block;
	position: static;
	min-width: 0;
	margin-inline-start: var(--ilm-c-space-sm);
	padding: 0;
	text-align: inherit;
	background: none;
	border: 0;
}

.ilm-component--wordpress-menu.ilm-layout-vertical .sub-menu::before {
	display: none;
}

.ilm-component--wordpress-menu.ilm-layout-vertical .sub-menu a {
	display: inline;
	padding: 0;
	white-space: normal;
}

/*
 * Both controls are hidden at every width by default and revealed only inside
 * a collapsed block. A Menu that never collapses renders neither of them at
 * all; these rules are what stop one appearing at a width where pressing it
 * would do nothing visible.
 */
.ilm-menu__trigger,
.ilm-menu__toggle {
	display: none;
}

.ilm-menu__trigger {
	align-items: center;
	gap: var(--ilm-c-space-xs);
	margin: 0;
	padding: var(--ilm-c-space-xs) var(--ilm-c-space-sm);
	font: inherit;
	color: inherit;
	background: none;
	border: 1px solid currentcolor;
	border-radius: 0.25rem;
	cursor: pointer;
}

.ilm-menu__trigger-icon {
	display: inline-flex;
	align-items: center;
}

/*
 * The drawings themselves (1.16.0). An inline SVG with no size of its own,
 * inside a box that shrinks to fit its content, has nothing to take a size
 * from and collapsed to 0x0 -- from 1.12.0 the trigger's menu and close icons
 * and every submenu chevron were in the markup and never visible. Sized in
 * `em`, so they follow the menu's own type size.
 */
.ilm-menu__icon,
.ilm-menu__toggle-icon {
	flex: none;
	inline-size: 1.25em;
	block-size: 1.25em;
}

/*
 * Two drawings, one shown. The state is read from `aria-expanded` -- the
 * attribute assistive technology reads -- rather than from a class the script
 * also has to maintain, so there is only one place for it to be wrong.
 */
.ilm-menu__icon--close,
.ilm-menu__trigger[aria-expanded="true"] .ilm-menu__icon--open {
	display: none;
}

.ilm-menu__trigger[aria-expanded="true"] .ilm-menu__icon--close {
	display: inline;
}

.ilm-menu__toggle {
	align-items: center;
	justify-content: center;
	padding: var(--ilm-c-space-xs);
	font: inherit;
	line-height: 0;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.ilm-menu__toggle-icon {
	transition: transform 0.15s ease;
}

.ilm-menu__toggle[aria-expanded="true"] .ilm-menu__toggle-icon {
	transform: rotate(180deg);
}

/*
 * A quarter-second rotation is decorative and nothing depends on it finishing.
 * Turning it off leaves the chevron pointing the right way immediately.
 */
@media (prefers-reduced-motion: reduce) {
	.ilm-component--wordpress-menu a,
	.ilm-menu__toggle-icon {
		transition: none;
	}
}

/* ---- collapsed below sm ---- */

@media (max-width: 575.98px) {
	.ilm-collapse-sm .ilm-menu__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: var(--ilm-c-space-xs);
		align-items: var(--ilm-c-text);
	}

	/*
	 * Static, so an open submenu pushes the items below it down instead of
	 * covering them. Inside a panel that is already a column, a flyout would
	 * have to escape the panel to be visible.
	 */
	.ilm-collapse-sm .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		margin-inline-start: var(--ilm-c-space-sm);
		padding: 0;
		text-align: inherit;
		background: none;
		border: 0;
	}

	.ilm-collapse-sm .sub-menu::before {
		display: none;
	}

	.ilm-collapse-sm .sub-menu a {
		display: inline;
		padding: 0;
		white-space: normal;
	}

	.ilm-collapse-sm .menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ilm-c-space-xs);
	}

	.ilm-collapse-sm .sub-menu {
		flex-basis: 100%;
	}

	.ilm-collapse-sm.is-enhanced .ilm-menu__trigger,
	.ilm-collapse-sm.is-enhanced .ilm-menu__toggle {
		display: inline-flex;
	}

	.ilm-collapse-sm.is-enhanced .ilm-menu__panel,
	.ilm-collapse-sm.is-enhanced .menu-item-has-children > .sub-menu {
		display: none;
	}

	.ilm-collapse-sm.is-enhanced.is-open .ilm-menu__panel,
	.ilm-collapse-sm.is-enhanced .menu-item.is-open > .sub-menu {
		display: block;
	}

	/*
	 * The panel is in the flow, so an over-long menu scrolls the page and is
	 * reachable without this. It is here for the header that has been given
	 * `position: sticky` through the generic Position capability, where in-flow
	 * growth would otherwise push the close control off the screen with no way
	 * back to it.
	 */
	.ilm-collapse-sm .ilm-menu__panel {
		max-height: 80vh;
		overflow-y: auto;
	}

	/* Overlay (1.16.0): out of the flow, under the trigger, full width. */
	.ilm-collapse-sm.ilm-menu--overlay .ilm-menu__panel {
		position: absolute;
		inset-inline: 0;
		z-index: var(--ilm-z-dropdown, 1000);
		padding: var(--ilm-c-space-xs) var(--ilm-c-space-md);
		background: var(--ilm-color-bg, #fff);
		border-block: 1px solid var(--ilm-color-border, #d9dde3);
		box-shadow: var(--ilm-shadow-lg, 0 1rem 2rem rgba(0, 0, 0, 0.25));
	}

	.ilm-collapse-sm.ilm-menu--overlay .ilm-menu__list {
		gap: 0;
		align-items: stretch;
	}

	.ilm-collapse-sm.ilm-menu--overlay .ilm-menu__list > .menu-item + .menu-item {
		border-block-start: 1px solid var(--ilm-color-border, #d9dde3);
	}

	.ilm-collapse-sm.ilm-menu--overlay .ilm-menu__trigger {
		min-block-size: 2.75rem;
	}

	.ilm-collapse-sm.ilm-menu--overlay .menu-item > a {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-block-size: 2.75rem;
	}
}

/* ---- collapsed below md ---- */

@media (max-width: 767.98px) {
	.ilm-collapse-md .ilm-menu__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: var(--ilm-c-space-xs);
		align-items: var(--ilm-c-text);
	}

	/*
	 * Static, so an open submenu pushes the items below it down instead of
	 * covering them. Inside a panel that is already a column, a flyout would
	 * have to escape the panel to be visible.
	 */
	.ilm-collapse-md .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		margin-inline-start: var(--ilm-c-space-sm);
		padding: 0;
		text-align: inherit;
		background: none;
		border: 0;
	}

	.ilm-collapse-md .sub-menu::before {
		display: none;
	}

	.ilm-collapse-md .sub-menu a {
		display: inline;
		padding: 0;
		white-space: normal;
	}

	.ilm-collapse-md .menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ilm-c-space-xs);
	}

	.ilm-collapse-md .sub-menu {
		flex-basis: 100%;
	}

	.ilm-collapse-md.is-enhanced .ilm-menu__trigger,
	.ilm-collapse-md.is-enhanced .ilm-menu__toggle {
		display: inline-flex;
	}

	.ilm-collapse-md.is-enhanced .ilm-menu__panel,
	.ilm-collapse-md.is-enhanced .menu-item-has-children > .sub-menu {
		display: none;
	}

	.ilm-collapse-md.is-enhanced.is-open .ilm-menu__panel,
	.ilm-collapse-md.is-enhanced .menu-item.is-open > .sub-menu {
		display: block;
	}

	/*
	 * The panel is in the flow, so an over-long menu scrolls the page and is
	 * reachable without this. It is here for the header that has been given
	 * `position: sticky` through the generic Position capability, where in-flow
	 * growth would otherwise push the close control off the screen with no way
	 * back to it.
	 */
	.ilm-collapse-md .ilm-menu__panel {
		max-height: 80vh;
		overflow-y: auto;
	}

	/* Overlay (1.16.0): out of the flow, under the trigger, full width. */
	.ilm-collapse-md.ilm-menu--overlay .ilm-menu__panel {
		position: absolute;
		inset-inline: 0;
		z-index: var(--ilm-z-dropdown, 1000);
		padding: var(--ilm-c-space-xs) var(--ilm-c-space-md);
		background: var(--ilm-color-bg, #fff);
		border-block: 1px solid var(--ilm-color-border, #d9dde3);
		box-shadow: var(--ilm-shadow-lg, 0 1rem 2rem rgba(0, 0, 0, 0.25));
	}

	.ilm-collapse-md.ilm-menu--overlay .ilm-menu__list {
		gap: 0;
		align-items: stretch;
	}

	.ilm-collapse-md.ilm-menu--overlay .ilm-menu__list > .menu-item + .menu-item {
		border-block-start: 1px solid var(--ilm-color-border, #d9dde3);
	}

	.ilm-collapse-md.ilm-menu--overlay .ilm-menu__trigger {
		min-block-size: 2.75rem;
	}

	.ilm-collapse-md.ilm-menu--overlay .menu-item > a {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-block-size: 2.75rem;
	}
}

/* ---- collapsed below lg ---- */

@media (max-width: 991.98px) {
	.ilm-collapse-lg .ilm-menu__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: var(--ilm-c-space-xs);
		align-items: var(--ilm-c-text);
	}

	/*
	 * Static, so an open submenu pushes the items below it down instead of
	 * covering them. Inside a panel that is already a column, a flyout would
	 * have to escape the panel to be visible.
	 */
	.ilm-collapse-lg .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		margin-inline-start: var(--ilm-c-space-sm);
		padding: 0;
		text-align: inherit;
		background: none;
		border: 0;
	}

	.ilm-collapse-lg .sub-menu::before {
		display: none;
	}

	.ilm-collapse-lg .sub-menu a {
		display: inline;
		padding: 0;
		white-space: normal;
	}

	.ilm-collapse-lg .menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ilm-c-space-xs);
	}

	.ilm-collapse-lg .sub-menu {
		flex-basis: 100%;
	}

	.ilm-collapse-lg.is-enhanced .ilm-menu__trigger,
	.ilm-collapse-lg.is-enhanced .ilm-menu__toggle {
		display: inline-flex;
	}

	.ilm-collapse-lg.is-enhanced .ilm-menu__panel,
	.ilm-collapse-lg.is-enhanced .menu-item-has-children > .sub-menu {
		display: none;
	}

	.ilm-collapse-lg.is-enhanced.is-open .ilm-menu__panel,
	.ilm-collapse-lg.is-enhanced .menu-item.is-open > .sub-menu {
		display: block;
	}

	/*
	 * The panel is in the flow, so an over-long menu scrolls the page and is
	 * reachable without this. It is here for the header that has been given
	 * `position: sticky` through the generic Position capability, where in-flow
	 * growth would otherwise push the close control off the screen with no way
	 * back to it.
	 */
	.ilm-collapse-lg .ilm-menu__panel {
		max-height: 80vh;
		overflow-y: auto;
	}

	/* Overlay (1.16.0): out of the flow, under the trigger, full width. */
	.ilm-collapse-lg.ilm-menu--overlay .ilm-menu__panel {
		position: absolute;
		inset-inline: 0;
		z-index: var(--ilm-z-dropdown, 1000);
		padding: var(--ilm-c-space-xs) var(--ilm-c-space-md);
		background: var(--ilm-color-bg, #fff);
		border-block: 1px solid var(--ilm-color-border, #d9dde3);
		box-shadow: var(--ilm-shadow-lg, 0 1rem 2rem rgba(0, 0, 0, 0.25));
	}

	.ilm-collapse-lg.ilm-menu--overlay .ilm-menu__list {
		gap: 0;
		align-items: stretch;
	}

	.ilm-collapse-lg.ilm-menu--overlay .ilm-menu__list > .menu-item + .menu-item {
		border-block-start: 1px solid var(--ilm-color-border, #d9dde3);
	}

	.ilm-collapse-lg.ilm-menu--overlay .ilm-menu__trigger {
		min-block-size: 2.75rem;
	}

	.ilm-collapse-lg.ilm-menu--overlay .menu-item > a {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-block-size: 2.75rem;
	}
}

/* ---- collapsed below xl ---- */

@media (max-width: 1199.98px) {
	.ilm-collapse-xl .ilm-menu__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: var(--ilm-c-space-xs);
		align-items: var(--ilm-c-text);
	}

	/*
	 * Static, so an open submenu pushes the items below it down instead of
	 * covering them. Inside a panel that is already a column, a flyout would
	 * have to escape the panel to be visible.
	 */
	.ilm-collapse-xl .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		margin-inline-start: var(--ilm-c-space-sm);
		padding: 0;
		text-align: inherit;
		background: none;
		border: 0;
	}

	.ilm-collapse-xl .sub-menu::before {
		display: none;
	}

	.ilm-collapse-xl .sub-menu a {
		display: inline;
		padding: 0;
		white-space: normal;
	}

	.ilm-collapse-xl .menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ilm-c-space-xs);
	}

	.ilm-collapse-xl .sub-menu {
		flex-basis: 100%;
	}

	.ilm-collapse-xl.is-enhanced .ilm-menu__trigger,
	.ilm-collapse-xl.is-enhanced .ilm-menu__toggle {
		display: inline-flex;
	}

	.ilm-collapse-xl.is-enhanced .ilm-menu__panel,
	.ilm-collapse-xl.is-enhanced .menu-item-has-children > .sub-menu {
		display: none;
	}

	.ilm-collapse-xl.is-enhanced.is-open .ilm-menu__panel,
	.ilm-collapse-xl.is-enhanced .menu-item.is-open > .sub-menu {
		display: block;
	}

	/*
	 * The panel is in the flow, so an over-long menu scrolls the page and is
	 * reachable without this. It is here for the header that has been given
	 * `position: sticky` through the generic Position capability, where in-flow
	 * growth would otherwise push the close control off the screen with no way
	 * back to it.
	 */
	.ilm-collapse-xl .ilm-menu__panel {
		max-height: 80vh;
		overflow-y: auto;
	}

	/* Overlay (1.16.0): out of the flow, under the trigger, full width. */
	.ilm-collapse-xl.ilm-menu--overlay .ilm-menu__panel {
		position: absolute;
		inset-inline: 0;
		z-index: var(--ilm-z-dropdown, 1000);
		padding: var(--ilm-c-space-xs) var(--ilm-c-space-md);
		background: var(--ilm-color-bg, #fff);
		border-block: 1px solid var(--ilm-color-border, #d9dde3);
		box-shadow: var(--ilm-shadow-lg, 0 1rem 2rem rgba(0, 0, 0, 0.25));
	}

	.ilm-collapse-xl.ilm-menu--overlay .ilm-menu__list {
		gap: 0;
		align-items: stretch;
	}

	.ilm-collapse-xl.ilm-menu--overlay .ilm-menu__list > .menu-item + .menu-item {
		border-block-start: 1px solid var(--ilm-color-border, #d9dde3);
	}

	.ilm-collapse-xl.ilm-menu--overlay .ilm-menu__trigger {
		min-block-size: 2.75rem;
	}

	.ilm-collapse-xl.ilm-menu--overlay .menu-item > a {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-block-size: 2.75rem;
	}
}

/* ---- collapsed below xxl ---- */

@media (max-width: 1399.98px) {
	.ilm-collapse-xxl .ilm-menu__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: var(--ilm-c-space-xs);
		align-items: var(--ilm-c-text);
	}

	/*
	 * Static, so an open submenu pushes the items below it down instead of
	 * covering them. Inside a panel that is already a column, a flyout would
	 * have to escape the panel to be visible.
	 */
	.ilm-collapse-xxl .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		margin-inline-start: var(--ilm-c-space-sm);
		padding: 0;
		text-align: inherit;
		background: none;
		border: 0;
	}

	.ilm-collapse-xxl .sub-menu::before {
		display: none;
	}

	.ilm-collapse-xxl .sub-menu a {
		display: inline;
		padding: 0;
		white-space: normal;
	}

	.ilm-collapse-xxl .menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ilm-c-space-xs);
	}

	.ilm-collapse-xxl .sub-menu {
		flex-basis: 100%;
	}

	.ilm-collapse-xxl.is-enhanced .ilm-menu__trigger,
	.ilm-collapse-xxl.is-enhanced .ilm-menu__toggle {
		display: inline-flex;
	}

	.ilm-collapse-xxl.is-enhanced .ilm-menu__panel,
	.ilm-collapse-xxl.is-enhanced .menu-item-has-children > .sub-menu {
		display: none;
	}

	.ilm-collapse-xxl.is-enhanced.is-open .ilm-menu__panel,
	.ilm-collapse-xxl.is-enhanced .menu-item.is-open > .sub-menu {
		display: block;
	}

	/*
	 * The panel is in the flow, so an over-long menu scrolls the page and is
	 * reachable without this. It is here for the header that has been given
	 * `position: sticky` through the generic Position capability, where in-flow
	 * growth would otherwise push the close control off the screen with no way
	 * back to it.
	 */
	.ilm-collapse-xxl .ilm-menu__panel {
		max-height: 80vh;
		overflow-y: auto;
	}

	/* Overlay (1.16.0): out of the flow, under the trigger, full width. */
	.ilm-collapse-xxl.ilm-menu--overlay .ilm-menu__panel {
		position: absolute;
		inset-inline: 0;
		z-index: var(--ilm-z-dropdown, 1000);
		padding: var(--ilm-c-space-xs) var(--ilm-c-space-md);
		background: var(--ilm-color-bg, #fff);
		border-block: 1px solid var(--ilm-color-border, #d9dde3);
		box-shadow: var(--ilm-shadow-lg, 0 1rem 2rem rgba(0, 0, 0, 0.25));
	}

	.ilm-collapse-xxl.ilm-menu--overlay .ilm-menu__list {
		gap: 0;
		align-items: stretch;
	}

	.ilm-collapse-xxl.ilm-menu--overlay .ilm-menu__list > .menu-item + .menu-item {
		border-block-start: 1px solid var(--ilm-color-border, #d9dde3);
	}

	.ilm-collapse-xxl.ilm-menu--overlay .ilm-menu__trigger {
		min-block-size: 2.75rem;
	}

	.ilm-collapse-xxl.ilm-menu--overlay .menu-item > a {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-block-size: 2.75rem;
	}
}