/* Navigation Mega Menu — shared panel container.
   One container per navigation holds every mega menu's content as stacked children.
   view.js drives the active child, position and FLIP slide; this file owns the
   hidden/open states, reveals, crossfade and mobile flattening. */

/* Container is a transparent shell; surface styling lives on the __item wrappers (crossfades on switch). */

/* Core's `.wp-block-navigation{position:relative}` is the containing block for absolute presets; fixed presets use inline coords. */

.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 over a taller hidden sibling must never catch the cursor. */
	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 ──
   visibility (not aria-hidden/inert) keeps inactive panels out of the a11y tree and tab
   order automatically. overflow:hidden clips full-bleed content to the rounded corners
   (box-shadow renders outside the box, so it still shows). */

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

	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 ──
   visibility flips at 0s so the panel stays interactive through the fade.
   While open the reveal transform rests at identity, so view.js's FLIP composes instead of fighting. */

: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 ──
   Chevron mirrors core's rotation; our script owns aria-expanded now (core no longer manages 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 ──
   When the hamburger overlay is open every panel drops back into normal flow.
   !important is required to beat the inline position styles view.js sets for fixed presets. */

.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;
}