/*
 * Animated hamburger toggle + close button
 */

:root {
	--cb-menu-origin-x: 100%;
	--cb-menu-origin-y: 2.5rem;
	--cb-menu-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Hamburger toggle button ---------- */

.wp-block-navigation__responsive-container-open.cb-enhanced {
	position: relative;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--contrast);
	transition: background-color 0.4s ease;
}

.wp-block-navigation__responsive-container-open.cb-enhanced svg {
	display: none;
}

.cb-menu-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.5rem;
	height: 2px;
	margin-top: -1px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	transition:
		transform 0.45s var(--cb-menu-ease),
		width 0.3s ease,
		opacity 0.25s ease;
}

.cb-menu-bar:nth-child(2) {
	transform: translate(-50%, -50%) translateY(-0.6rem);
}

.cb-menu-bar:nth-child(3) {
	transform: translate(-50%, -50%);
}

.cb-menu-bar:nth-child(4) {
	transform: translate(-50%, -50%) translateY(0.6rem);
}

.cb-enhanced.cb-open {
	background-color: var(--wp--preset--color--accent-2);
}

.cb-enhanced.cb-open .cb-menu-bar:nth-child(2) {
	transform: translate(-50%, -50%) rotate(45deg);
}

.cb-enhanced.cb-open .cb-menu-bar:nth-child(3) {
	width: 0;
	opacity: 0;
}

.cb-enhanced.cb-open .cb-menu-bar:nth-child(4) {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- Overlay reveal ---------- */

.wp-block-navigation__overlay-container {
	clip-path: circle(0% at var(--cb-menu-origin-x) var(--cb-menu-origin-y));
	transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__overlay-container {
	clip-path: circle(150% at var(--cb-menu-origin-x) var(--cb-menu-origin-y));
}

/* ---------- Overlay submenu: smooth in-flow accordion reveal ---------- */

/*
 * WordPress core makes every submenu container position:absolute
 * unconditionally (wp-includes/blocks/navigation/style.css) — correct
 * for a horizontal top-nav dropdown, but wrong for this overlay's
 * vertical, click-to-expand nav: an open submenu floats over whatever
 * comes after it instead of pushing it down. Confirmed via a vanilla
 * Twenty Twenty-Five install with zero custom code, so this is core's
 * own limitation, not something either theme introduced.
 *
 * The !importants are deliberate: this patches a confirmed core bug
 * rather than a style preference, and core's own rules for this
 * element are specific enough that a normal specificity fight would be
 * fragile against future core CSS changes — including a separate core
 * fallback rule (`:focus-within`) that reveals the submenu whenever
 * anything inside it gets focus, regardless of aria-expanded, and sets
 * overflow:visible when it fires. Since focusing the toggle button is
 * a normal side effect of clicking it, overflow needed the same
 * !important treatment so max-height:0 actually clips instead of
 * letting content spill out the moment it's clicked. max-height itself
 * is set without !important — navigation-menu.js sets the open height
 * as an inline style, which already wins over any external stylesheet
 * regardless of specificity.
 */
/*
 * Lets the submenu-container's flex-basis:100% (below) actually wrap
 * onto its own line instead of overflowing/squeezing into the same row
 * as the item's label + toggle icon.
 */
.wp-block-navigation__overlay-container .wp-block-navigation .wp-block-navigation-item {
	flex-wrap: wrap !important;
}

.wp-block-navigation__overlay-container .has-child .wp-block-navigation__submenu-container {
	/*
	 * relative, not static: layout-wise they're identical (both stay in
	 * normal flow, both still push later siblings down), but top/left/
	 * etc. have no effect at all on a statically-positioned element —
	 * relative is what actually lets the top nudge below take effect.
	 */
	position: relative !important;
	top: 10px !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	min-width: auto !important;
	height: auto !important;
	max-height: 0;
	overflow: hidden !important;
	flex-basis: 100% !important;
	border: none !important;
	transition: max-height 0.35s ease;
}

/*
 * Core rotates this chevron off aria-expanded (wp-includes/blocks/
 * navigation/style.css: `[aria-expanded=true] > svg`) — the same
 * attribute navigation-menu.js deliberately stops trusting for this
 * overlay (see its file-level comment), so the rotation is driven by
 * .cb-submenu-open (set by that same click handler) instead. Written
 * to mirror core's own two selector shapes (icon as a sibling of the
 * toggle, or icon nested directly inside it) so it works regardless of
 * which one core renders for a given nav item.
 *
 * !important here too: core's own rule has the exact same specificity
 * as this one, so without it, load order alone decides the tie — and
 * since aria-expanded rarely reflects reality here, core's rule mostly
 * just sits there doing nothing while still winning that tie and
 * silently blocking this one from ever applying.
 */
.wp-block-navigation__overlay-container .cb-submenu-open + .wp-block-navigation__submenu-icon > svg,
.wp-block-navigation__overlay-container .cb-submenu-open > svg {
	transform: rotate(180deg) !important;
}

.wp-block-navigation__overlay-container .wp-block-navigation__submenu-icon svg {
	transition: transform 0.3s ease;
}

/* ---------- Overlay close button ---------- */

.wp-block-navigation-overlay-close {
	position: relative;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--contrast);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-navigation-overlay-close svg {
	display: none;
}

.wp-block-navigation-overlay-close::before,
.wp-block-navigation-overlay-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.4rem;
	height: 2px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	transition: transform 0.35s var(--cb-menu-ease);
}

.wp-block-navigation-overlay-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.wp-block-navigation-overlay-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.wp-block-navigation-overlay-close:hover::before {
	transform: translate(-50%, -50%) rotate(225deg);
}

.wp-block-navigation-overlay-close:hover::after {
	transform: translate(-50%, -50%) rotate(135deg);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.cb-menu-bar,
	.wp-block-navigation-overlay-close::before,
	.wp-block-navigation-overlay-close::after,
	.wp-block-navigation__overlay-container,
	.wp-block-navigation__overlay-container .has-child .wp-block-navigation__submenu-container,
	.wp-block-navigation__overlay-container .wp-block-navigation__submenu-icon svg {
		transition-duration: 0.01ms !important;
	}
}