/**
 * CreatoMark Kit — Mobile Menu.
 *
 * Restyles WordPress's own Navigation overlay (the menu that opens from the
 * hamburger below 600px) into a side flyout. Every rule is scoped under the
 * `cmk-mobile-menu` body class and the overlay's `.is-menu-open`, so nothing
 * here touches the desktop menu. Settings arrive as custom properties
 * (--cmk-mm-width, --cmk-mm-duration, --cmk-mm-icon-size) and body classes
 * (cmk-mm-dir-left|right, cmk-mm-has-backdrop) from frontend.php.
 *
 * Selectors carry extra classes on purpose: core's overlay rules and the
 * Mega Menu module's mobile rules are already fairly specific, and these
 * must win regardless of stylesheet order.
 */

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

.cmk-mobile-menu .wp-block-navigation__responsive-container-open {
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.cmk-mobile-menu .wp-block-navigation__responsive-container-open:active {
	transform: scale(0.9);
}

.cmk-mobile-menu .wp-block-navigation__responsive-container-open svg {
	width: var(--cmk-mm-icon-size, 24px);
	height: var(--cmk-mm-icon-size, 24px);
}

/* ---- Flyout panel: the overlay container itself becomes the panel ---- */

.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open {
	top: 0;
	bottom: 0;
	height: 100%;
	width: var(--cmk-mm-width, 85vw);
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: 0 0 48px rgba(0, 0, 0, 0.28);
	animation: cmk-mm-in var(--cmk-mm-duration, 350ms) cubic-bezier(0.22, 0.8, 0.25, 1) both;
}

.cmk-mm-dir-left .wp-block-navigation__responsive-container.is-menu-open {
	--cmk-mm-from: -100%;
	left: 0;
	right: auto;
}

.cmk-mm-dir-right .wp-block-navigation__responsive-container.is-menu-open {
	--cmk-mm-from: 100%;
	left: auto;
	right: 0;
}

/* Closing plays the same motion in reverse; mobile-menu.js then lets core close. */
.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open.cmk-mm-closing {
	animation: cmk-mm-out var(--cmk-mm-duration, 350ms) cubic-bezier(0.55, 0, 0.7, 0.2) both;
}

@keyframes cmk-mm-in {
	from {
		transform: translateX(var(--cmk-mm-from, -100%));
	}
	to {
		transform: translateX(0);
	}
}

@keyframes cmk-mm-out {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(var(--cmk-mm-from, -100%));
	}
}

/* ---- Backdrop (element created by mobile-menu.js) ---- */

.cmk-mm-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--cmk-mm-duration, 350ms) ease, visibility 0s linear var(--cmk-mm-duration, 350ms);
}

.cmk-mm-backdrop.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* ---- Menu content ---- */

.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding-top: 1.25rem;
}

.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
}

/* Each top-level row: link (+ arrow button) on one line, submenu beneath. */
.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.wp-block-navigation-item {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	margin: 0;
	text-align: left;
	border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
	flex: 1 1 0;
	min-width: 0;
	padding: 0.95rem 0;
	font-size: 1.1rem;
	line-height: 1.3;
	text-align: left;
	justify-content: flex-start;
}

/* Arrow button beside items that have a submenu. */
.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.75rem;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-submenu__toggle svg {
	width: 1rem;
	height: 1rem;
	/* Core flips the arrow on aria-expanded, which it sets on its own; ours follows the click state. */
	transform: none;
	transition: transform 0.3s ease;
}

.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.cmk-mm-sub-open > .wp-block-navigation-submenu__toggle svg {
	transform: rotate(180deg);
}

/* ---- Submenus: closed until the item is clicked, then an animated dropdown ---- */

.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	position: static;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	height: auto;
	max-height: 0;
	margin: 0;
	padding: 0 0 0 1rem;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	border: 0;
	background: transparent;
	color: inherit;
	transform: none;
	transition:
		max-height 0.35s ease,
		opacity 0.25s ease,
		visibility 0s linear 0.35s;
}

.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.cmk-mm-sub-open > .wp-block-navigation__submenu-container {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

/* Rows inside a submenu: lighter, no divider lines between them. */
.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li.wp-block-navigation-item.wp-block-navigation-item {
	border-bottom: 0;
}

.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0.65rem 0;
	font-size: 1rem;
	opacity: 0.85;
}

.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
	margin-bottom: 0.5rem;
}

/* ---- Items ease in one after another when the flyout opens ---- */

.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open:not(.cmk-mm-closing) .wp-block-navigation__container > .wp-block-navigation-item {
	animation: cmk-mm-item 0.45s cubic-bezier(0.22, 0.8, 0.25, 1) both;
}

@keyframes cmk-mm-item {
	from {
		opacity: 0;
		transform: translateX(calc(var(--cmk-mm-from, -100%) / -12));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.cmk-mobile-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.10s; }
.cmk-mobile-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.15s; }
.cmk-mobile-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.20s; }
.cmk-mobile-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.25s; }
.cmk-mobile-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.30s; }
.cmk-mobile-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.35s; }
.cmk-mobile-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+7) { animation-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
	.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open,
	.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open.cmk-mm-closing,
	.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		animation-duration: 1ms;
		animation-delay: 0s;
	}

	.cmk-mobile-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container,
	.cmk-mm-backdrop {
		transition-duration: 1ms;
		transition-delay: 0s;
	}
}