/*
 * AU-20 PROTOTYPE: "Drop panel" block style for core/navigation (mobile, below 68rem).
 *
 * Not active on the site. The header still uses the default overlay (Checkpoint 2
 * baseline). It applies only when the navigation block has .is-style-drop-panel,
 * which needs approval (AU-20).
 *
 * Reproduces the v0.2 mockup's mobile menu with core behaviour only (no JS, no new block):
 * - the panel opens BELOW the header, which stays visible (PoC .nav: top 100%,
 *   height 100dvh minus the header);
 * - sections are listed expanded. Core opens every submenu in the overlay and its
 *   toggles there do not collapse, so a collapsed accordion is NOT achievable with
 *   CSS alone (see CHECKPOINT_3_REPORT, AU-20);
 * - a visible "Menu" / "Close" label sits in the header slot;
 * - core keeps focus trapping, Escape to close, focus restoration and the body scroll lock.
 */

@media (max-width: 68rem) {

	/* Visible text labels; accessible names stay core's "Open menu" / "Close menu",
	   which contain the visible words (WCAG 2.5.3 Label in Name). */
	.oiste-nav.is-style-drop-panel .wp-block-navigation__responsive-container-open,
	.oiste-nav.is-style-drop-panel .wp-block-navigation__responsive-container-close {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		padding: 0.55rem 0.75rem;
		font: 600 var(--fs-sm) / 1 var(--f-sans);
		color: var(--ink);
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
	}

	.oiste-nav.is-style-drop-panel .wp-block-navigation__responsive-container-open::after {
		content: "Menu";
	}

	.oiste-nav.is-style-drop-panel .wp-block-navigation__responsive-container-close::after {
		content: "Close";
	}

	.oiste-nav.is-style-drop-panel .wp-block-navigation__responsive-container-open svg,
	.oiste-nav.is-style-drop-panel .wp-block-navigation__responsive-container-close svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	/* Panel below the header instead of a full-screen overlay. No entry animation:
	   the core fade uses a transform, which would make the panel the containing block
	   for the fixed close button. It also matches the PoC (no animation). */
	.oiste-nav.is-style-drop-panel .wp-block-navigation__responsive-container.is-menu-open {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h) + 1px);
		height: auto;
		bottom: 0;
		padding: var(--s-4) var(--gutter) var(--s-7);
		border-top: 1px solid var(--line);
		animation: none;
		overscroll-behavior: contain;
	}

	/* The close button occupies the menu button's place in the header bar. */
	.oiste-nav.is-style-drop-panel .is-menu-open .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + (var(--header-h) - 2.75rem) / 2);
		right: var(--gutter);
		z-index: 2;
	}

	.oiste-nav.is-style-drop-panel .is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 0;
	}

	/* Sections stay expanded (core state). This rule only keeps the display consistent
	   with aria-expanded if a future core version allows collapsing in the overlay. */
	.oiste-nav.is-style-drop-panel .is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
		display: none !important;
	}

	/* Section rows (PoC row height); no chevron, because the sections do not collapse. */
	.oiste-nav.is-style-drop-panel .is-menu-open .wp-block-navigation-submenu__toggle {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 2.75rem;
	}

	/* Core's chevron would suggest collapsing, which the overlay does not support. */
	.oiste-nav.is-style-drop-panel .is-menu-open .wp-block-navigation__submenu-icon {
		display: none;
	}

	/* Contact as a full-width button at the end (PoC). */
	.oiste-nav.is-style-drop-panel .is-menu-open .nav__cta > .wp-block-navigation-item__content {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}