/* ─────────────────────────────────────────────────────────────────────────────
   Navigation overlay — open & close animations.

   Strategy: leave core's display/position behaviour completely intact (so
   the inline desktop layout still works above the breakpoint), and
   animate only via CSS keyframes triggered by class changes.

   Open: core adds .is-menu-open → our @keyframes runs once.
   Close: frontend.js adds .le-nav-closing BEFORE calling core's close, so
          .is-menu-open is still on (container is still display:flex /
          position:fixed) while our reverse keyframe plays. After the
          duration, the JS removes .le-nav-closing and triggers core's
          close — by which point the container is already off-screen at
          the keyframe's end state, so core's display:none flip is invisible.
   ───────────────────────────────────────────────────────────────────────────── */

.wp-block-navigation {
	--le-nav-overlay-duration: 300ms;
	--le-nav-overlay-easing:   ease-out;
	--le-nav-icon-duration:    300ms;
	--le-nav-icon-easing:      ease-out;
}

/* ── Open animations ─────────────────────────────────────────────────────── */

.wp-block-navigation.has-overlay-animation-fade
	.wp-block-navigation__responsive-container.is-menu-open {
	animation: le-nav-fade-in var(--le-nav-overlay-duration) var(--le-nav-overlay-easing) !important;
}
@keyframes le-nav-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.wp-block-navigation.has-overlay-animation-slide-left
	.wp-block-navigation__responsive-container.is-menu-open {
	animation: le-nav-slide-left var(--le-nav-overlay-duration) var(--le-nav-overlay-easing) !important;
}
@keyframes le-nav-slide-left {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0);     }
}

.wp-block-navigation.has-overlay-animation-slide-right
	.wp-block-navigation__responsive-container.is-menu-open {
	animation: le-nav-slide-right var(--le-nav-overlay-duration) var(--le-nav-overlay-easing) !important;
}
@keyframes le-nav-slide-right {
	from { transform: translateX(100%); }
	to   { transform: translateX(0);    }
}

.wp-block-navigation.has-overlay-animation-slide-top
	.wp-block-navigation__responsive-container.is-menu-open {
	animation: le-nav-slide-top var(--le-nav-overlay-duration) var(--le-nav-overlay-easing) !important;
}
@keyframes le-nav-slide-top {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0);     }
}

.wp-block-navigation.has-overlay-animation-slide-bottom
	.wp-block-navigation__responsive-container.is-menu-open {
	animation: le-nav-slide-bottom var(--le-nav-overlay-duration) var(--le-nav-overlay-easing) !important;
}
@keyframes le-nav-slide-bottom {
	from { transform: translateY(100%); }
	to   { transform: translateY(0);    }
}

/* ── Close animations (selector wins via .is-menu-open + .le-nav-closing) ── */

.wp-block-navigation.has-overlay-animation-fade
	.wp-block-navigation__responsive-container.is-menu-open.le-nav-closing {
	animation: le-nav-fade-out var(--le-nav-overlay-duration) var(--le-nav-overlay-easing) forwards !important;
}
@keyframes le-nav-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

.wp-block-navigation.has-overlay-animation-slide-left
	.wp-block-navigation__responsive-container.is-menu-open.le-nav-closing {
	animation: le-nav-slide-left-out var(--le-nav-overlay-duration) var(--le-nav-overlay-easing) forwards !important;
}
@keyframes le-nav-slide-left-out {
	from { transform: translateX(0);     }
	to   { transform: translateX(-100%); }
}

.wp-block-navigation.has-overlay-animation-slide-right
	.wp-block-navigation__responsive-container.is-menu-open.le-nav-closing {
	animation: le-nav-slide-right-out var(--le-nav-overlay-duration) var(--le-nav-overlay-easing) forwards !important;
}
@keyframes le-nav-slide-right-out {
	from { transform: translateX(0);    }
	to   { transform: translateX(100%); }
}

.wp-block-navigation.has-overlay-animation-slide-top
	.wp-block-navigation__responsive-container.is-menu-open.le-nav-closing {
	animation: le-nav-slide-top-out var(--le-nav-overlay-duration) var(--le-nav-overlay-easing) forwards !important;
}
@keyframes le-nav-slide-top-out {
	from { transform: translateY(0);     }
	to   { transform: translateY(-100%); }
}

.wp-block-navigation.has-overlay-animation-slide-bottom
	.wp-block-navigation__responsive-container.is-menu-open.le-nav-closing {
	animation: le-nav-slide-bottom-out var(--le-nav-overlay-duration) var(--le-nav-overlay-easing) forwards !important;
}
@keyframes le-nav-slide-bottom-out {
	from { transform: translateY(0);    }
	to   { transform: translateY(100%); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Hamburger-to-X icon morph.

   Trigger uses :not(.le-nav-closing) so when frontend.js adds the closing
   class, the morph rule stops matching and the rect transforms transition
   back to their default (hamburger) positions in sync with the overlay's
   reverse animation.
   ───────────────────────────────────────────────────────────────────────────── */

.wp-block-navigation__responsive-container-open svg {
	overflow: visible;
	--le-line-dy: 3.75px;
}

.wp-block-navigation__responsive-container-open svg:has(> path:nth-child(3)) {
	--le-line-dy: 6.25px;
}

.wp-block-navigation__responsive-container-open svg path {
	transform-box: fill-box;
	transform-origin: center;
	transition:
		transform var(--le-nav-icon-duration, 300ms) var(--le-nav-icon-easing, ease-out),
		opacity   var(--le-nav-icon-duration, 300ms) var(--le-nav-icon-easing, ease-out);
}

/* .wp-block-navigation:has(.wp-block-navigation__responsive-container.has-modal-open)
	.wp-block-navigation__responsive-container-open,
.wp-block-navigation:has(.wp-block-navigation__responsive-container.le-nav-closing)
	.wp-block-navigation__responsive-container-open {
	position: relative !important;
	z-index: 100001 !important;
	cursor: pointer !important;
} */

.wp-block-navigation:has(.wp-block-navigation__responsive-container.has-modal-open:not(.le-nav-closing))
	.wp-block-navigation__responsive-container-open svg path:first-child {
	transform: translateY(var(--le-line-dy)) rotate(45deg);
}

.wp-block-navigation:has(.wp-block-navigation__responsive-container.has-modal-open:not(.le-nav-closing))
	.wp-block-navigation__responsive-container-open svg path:last-child {
	transform: translateY(calc(var(--le-line-dy) * -1)) rotate(-45deg);
}

.wp-block-navigation:has(.wp-block-navigation__responsive-container.has-modal-open:not(.le-nav-closing))
	.wp-block-navigation__responsive-container-open svg path:nth-child(2):not(:last-child) {
	opacity: 0;
	transform: scaleX(0);
}

/* Hide core's redundant close button — the morphed open button now serves as
   the visible close target. The close button stays in the DOM (still
   keyboard-focusable for assistive tech), but is visually hidden and click
   routing is handled by frontend.js. */
.wp-block-navigation__responsive-container.has-modal-open
	.wp-block-navigation__responsive-container-close {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reduced motion: no overlay animations, no icon transitions.
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		animation: none !important;
	}
	.wp-block-navigation__responsive-container-open svg path {
		transition: none !important;
	}
}