/* ─────────────────────────────────────────────────────────────────────────────
   Navigation overlay — open & close animations.
   Keyframe-only; core display untouched. Close: frontend.js adds .le-nav-closing while
   .is-menu-open still applies, so the reverse keyframe plays before core's display:none flip.
   ───────────────────────────────────────────────────────────────────────────── */

.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.
   :not(.le-nav-closing) makes the morph reverse in sync with the overlay's close 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: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; kept in DOM (keyboard-focusable for a11y), routed 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;
	}
}