/* ── Navigation Mega Menu — shared panel container ───────────────────────────
   One container per navigation (rendered by the panel-host block, see
   extension.php) holds every mega menu's content as stacked children. view.js
   drives which child is active, where the container sits (per the active
   trigger's position preset) and the FLIP slide; this file owns everything
   declarative: the hidden/open states, the reveal effects, the content
   crossfade, and the mobile-overlay flattening.

   The container itself is a transparent positioning shell — surface styling
   (padding, background, border, radius, shadow) lives on the per-menu
   __item wrappers so per-instance style overrides crossfade naturally when
   the active panel switches.

   Positioning contexts: the container is a child of
   .wp-block-navigation__responsive-container-content (a sibling of the menu
   <ul>, injected after it). Core's unconditional
   `.wp-block-navigation { position: relative }` makes the nav the containing
   block for the absolute presets (link / navigation); the fixed presets
   (viewport / custom) get inline viewport coords from view.js. Unlike the old
   per-<li> panels, no positioning-context overrides are needed — the panel is
   never inside a relatively-positioned <li>. */

.wp-block-navigation .le-mega-menu-shared-panel {
	box-sizing: border-box;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 2;

	/* Stack every panel in the same cell; each keeps its natural height. */
	display: grid;
	align-items: start;

	/* Dead space (a shorter active panel over a taller hidden sibling) must
	   never catch the cursor — interactivity belongs to the active item. */
	pointer-events: none;

	opacity: 0;
	visibility: hidden;
}

.wp-block-navigation .le-mega-menu-shared-panel.is-open {
	opacity: 1;
	visibility: visible;
}

/* ── Position presets (container-level; link preset geometry is inline) ────── */

.wp-block-navigation .le-mega-menu-shared-panel.is-position-navigation,
.wp-block-navigation .le-mega-menu-shared-panel.is-position-custom {
	left: 0;
	right: 0;
	width: auto;
}

.wp-block-navigation .le-mega-menu-shared-panel.is-position-viewport {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: auto;
}

/* ── Per-menu panel items — content crossfade ────────────────────────────────
   Default surface mirrors the old per-<li> panel exactly; per-instance /
   nav-level style overrides arrive as inline styles on these wrappers.
   visibility (not aria-hidden/inert) keeps inactive panels out of the
   accessibility tree and tab order automatically, and the mobile-overlay
   reset below flips everything visible again with plain CSS. */

.le-mega-menu-shared-panel__item {
	box-sizing: border-box;
	grid-area: 1 / 1;

	/* Clip full-bleed inner content (backgrounds, borders) to the panel's own
	   rounded corners. The item's box-shadow is unaffected — shadows render
	   outside the border box, so it still shows past the clip. */
	overflow: hidden;

	padding: var( --wp--preset--spacing--50 );
	background-color: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--ink );

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity    200ms ease,
		visibility 0s    linear 200ms;
}

.le-mega-menu-shared-panel__item.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity    200ms ease,
		visibility 0s    linear;
}

.le-mega-menu-shared-panel.is-open .le-mega-menu-shared-panel__item.is-active {
	pointer-events: auto;
}

/* ── Reveal effects — open/close animation on the container ─────────────────
   Same curve family as the old per-panel implementation:
     duration 280ms · cubic-bezier(0.16, 1, 0.3, 1) · 12–28px travel.
   Visibility flips with 0s at the right end of the transition so the panel
   stays interactive for the whole fade-out and is interactive immediately on
   open. While open, the reveal transform rests at identity — the FLIP slide's
   inline transform (view.js) composes on top without a fight. */

:where(
	.le-mega-menu-shared-panel.is-reveal-fade,
	.le-mega-menu-shared-panel.is-reveal-from-top,
	.le-mega-menu-shared-panel.is-reveal-from-bottom,
	.le-mega-menu-shared-panel.is-reveal-from-left,
	.le-mega-menu-shared-panel.is-reveal-from-right
) {
	transition:
		opacity    280ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform  280ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		visibility 0s    linear       280ms;
}

.le-mega-menu-shared-panel.is-reveal-from-top    { transform: translateY( -28px ); }
.le-mega-menu-shared-panel.is-reveal-from-bottom { transform: translateY(  28px ); }
.le-mega-menu-shared-panel.is-reveal-from-left   { transform: translateX( -28px ); }
.le-mega-menu-shared-panel.is-reveal-from-right  { transform: translateX(  28px ); }

.le-mega-menu-shared-panel.is-open.is-reveal-fade,
.le-mega-menu-shared-panel.is-open.is-reveal-from-top,
.le-mega-menu-shared-panel.is-open.is-reveal-from-bottom,
.le-mega-menu-shared-panel.is-open.is-reveal-from-left,
.le-mega-menu-shared-panel.is-open.is-reveal-from-right {
	transform: translate( 0, 0 );
	transition:
		opacity    280ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform  280ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		visibility 0s    linear;
}

/* ── Trigger affordances ─────────────────────────────────────────────────────
   The chevron mirrors core's open-state rotation now that our own script owns
   aria-expanded (core's directives no longer manage these <li>s). */

.wp-block-littleextra-mega-menu > .wp-block-navigation-submenu__toggle svg {
	transition: transform 200ms ease;
}

.wp-block-littleextra-mega-menu > .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate( 180deg );
}

/* ── Reduced motion ──────────────────────────────────────────────────────────
   view.js also skips the FLIP slide under this preference. */

@media (prefers-reduced-motion: reduce) {
	.le-mega-menu-shared-panel,
	.le-mega-menu-shared-panel__item,
	.wp-block-littleextra-mega-menu > .wp-block-navigation-submenu__toggle svg {
		transition: none !important;
		transform: none !important;
	}
}

/* ── Mobile overlay — flatten into the column flow ───────────────────────────
   Same reset the old per-<li> panels used, retargeted at the shared container:
   when the hamburger overlay is open every panel drops back into the document
   flow, stacked after the menu items. !important is required because view.js
   sets inline position/top/left/right/width for the fixed presets — the
   narrow, tightly-scoped case where beating inline JS styles is the right tool. */

.wp-block-navigation__responsive-container.is-menu-open .le-mega-menu-shared-panel {
	display: block;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	transform: none !important;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .le-mega-menu-shared-panel__item {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}