/*
 * Mobile overlay: show the Ollie mega menus as inline accordions instead of
 * Ollie's full-screen fixed panel (transparent overlay, inherited right
 * alignment and xl font size, close button placed with a missing spacing preset).
 *
 * Tested with Ollie Menu Designer 0.3.4: recheck on every plugin update, the
 * selectors rely on its internal class names.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container:has(> .wp-block-ollie-mega-menu) {
	align-self: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-ollie-mega-menu {
	flex-wrap: wrap;
	align-self: stretch;
}

/* Unlinked item: the whole row is the toggle, chevron on the right. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-ollie-mega-menu__toggle.wp-block-navigation-item__content {
	flex-grow: 1;
	text-align: start;
}

/* Linked item: center the chevron on the label line. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-ollie-mega-menu__submenu-toggle {
	top: 0;
	height: 1lh;
	padding-block: 0;
}

/*
 * !important: Ollie's index.css locks width, height and overflow with
 * !important, and its view.js sets an inline background-color on mobile.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-ollie-mega-menu__menu-container {
	position: static;
	flex-basis: 100%;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	background: none !important;
	text-align: start;
	font-size: var(--wp--preset--font-size--md);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-ollie-mega-menu__menu-container > * {
	margin-block-start: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--sm);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-ollie-mega-menu__toggle[aria-expanded="false"] ~ .wp-block-ollie-mega-menu__menu-container,
.wp-block-navigation__responsive-container.is-menu-open .menu-container__close-button {
	display: none;
}