/**
 * PH7-style hamburger → X for Core Navigation.
 * One control only: open button becomes X and closes the overlay.
 *
 * Position: relative (closed) / fixed (open) without !important —
 * the :has() rule wins by specificity, so we never override ourselves.
 */

.wp-block-navigation .wp-block-navigation__responsive-container-open {
	--phsieben-nav-bar-w: 38px;
	--phsieben-nav-bar-h: 5px;
	--phsieben-nav-bar-gap: 6px;
	--phsieben-nav-bar-color: #ffffff;

	/* Non-static so z-index applies; no !important (open state sets fixed). */
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--phsieben-nav-bar-w);
	height: calc(
		var(--phsieben-nav-bar-h) * 3 + var(--phsieben-nav-bar-gap) * 2
	);
	min-width: var(--phsieben-nav-bar-w);
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--phsieben-nav-bar-color);
	cursor: pointer;
	z-index: 199;
}

.wp-block-navigation .wp-block-navigation__responsive-container-open svg {
	display: none !important;
}

.wp-block-navigation .wp-block-navigation__responsive-container-open::before,
.wp-block-navigation .wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	left: 0;
	width: var(--phsieben-nav-bar-w);
	height: var(--phsieben-nav-bar-h);
	background-color: var(--phsieben-nav-bar-color);
	transition: transform 0.4s ease, opacity 0.4s ease, top 0.4s ease,
		box-shadow 0.4s ease;
}

/* Three bars: ::before = top + middle (box-shadow), ::after = bottom */
.wp-block-navigation .wp-block-navigation__responsive-container-open::before {
	top: 0;
	box-shadow: 0
		calc(var(--phsieben-nav-bar-h) + var(--phsieben-nav-bar-gap)) 0
		var(--phsieben-nav-bar-color);
}

.wp-block-navigation .wp-block-navigation__responsive-container-open::after {
	top: calc(
		(var(--phsieben-nav-bar-h) + var(--phsieben-nav-bar-gap)) * 2
	);
	box-shadow: none;
}

/*
 * Open → X in the PH7 corner, above Core’s modal (z-index 100000).
 * Higher specificity than the base rule — no !important on position.
 */
.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open)
	.wp-block-navigation__responsive-container-open {
	position: fixed;
	top: 1em;
	right: 3em;
	z-index: 100001;
}

/* Keep the X below the WP admin bar (fixed ignores html margin). */
.admin-bar
	.wp-block-navigation:has(
		.wp-block-navigation__responsive-container.is-menu-open
	)
	.wp-block-navigation__responsive-container-open {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + 1em);
}

.admin-bar
	.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open)
	.wp-block-navigation__responsive-container-open::before {
	top: calc(var(--phsieben-nav-bar-h) + var(--phsieben-nav-bar-gap));
	box-shadow: none;
	transform: rotate(-45deg);
}

.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open)
	.wp-block-navigation__responsive-container-open::after {
	top: calc(var(--phsieben-nav-bar-h) + var(--phsieben-nav-bar-gap));
	transform: rotate(45deg);
}

/*
 * Core close stays in the DOM for programmatic click, but must never show.
 * Match open-state specificity so theme/Core cannot re-show it.
 */
.wp-block-navigation .wp-block-navigation__responsive-container-close,
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close,
.has-modal-open .wp-block-navigation__responsive-container-close {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
}

/*
 * Overlay inset (all viewports). Desktop also becomes a side drawer.
 * Align min-width with WE Navigation Breakpoint if that plugin raises
 * the hamburger threshold.
 */
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open {
	--phsieben-nav-overlay-padding: 25px;

	padding: var(--phsieben-nav-overlay-padding);
	box-sizing: border-box;
}

@media (min-width: 600px) {
	.wp-block-navigation
		.wp-block-navigation__responsive-container.is-menu-open {
		--phsieben-nav-overlay-width: 350px;

		left: auto;
		width: var(--phsieben-nav-overlay-width);
		max-width: 100%;
	}
}

/* Slide in from the right (replaces Core’s short fade). */
@keyframes phsieben-nav-overlay-slide-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

@keyframes phsieben-nav-overlay-slide-out {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(100%);
	}
}

.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open {
	animation: phsieben-nav-overlay-slide-in 0.45s ease;
	animation-fill-mode: forwards;
}

/* Desktop exit: JS adds --closing, then clicks Core close after animationend. */
@media (min-width: 600px) {
	.wp-block-navigation
		.wp-block-navigation__responsive-container.is-menu-open.phsieben-nav-overlay--closing {
		animation: phsieben-nav-overlay-slide-out 0.45s ease;
		animation-fill-mode: forwards;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation__responsive-container-open::before,
	.wp-block-navigation .wp-block-navigation__responsive-container-open::after {
		transition: none;
	}

	.wp-block-navigation
		.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation
		.wp-block-navigation__responsive-container.is-menu-open.phsieben-nav-overlay--closing {
		animation: none;
	}
}