/**
 * CreatoMark Kit — Mega Menu frontend styles.
 *
 * Applies to a Navigation Submenu item that has a pattern selected (see
 * ../frontend.php, which adds `.cmk-has-mega` to the item, `.cmk-mega-menu`
 * to its panel, and `--cmk-mega-width` on the item).
 *
 * Specificity note: core positions and sizes the panel with
 * `.wp-block-navigation .has-child .wp-block-navigation__submenu-container`
 * and, when open, a second rule that resets `width: auto; min-width: 200px`.
 * The selectors below deliberately carry more classes than either so the
 * width wins regardless of stylesheet load order.
 */

.wp-block-navigation .wp-block-navigation-item.cmk-has-mega > .wp-block-navigation__submenu-container.cmk-mega-menu {
	box-sizing: border-box;
	width: var(--cmk-mega-width, 900px);
	min-width: 0;
	max-width: calc(100vw - 2rem);
	padding: 1.5rem;
	white-space: normal;
	align-items: stretch;
	/* A very tall pattern scrolls inside the panel instead of running off-screen. */
	max-height: calc(100vh - 8rem);
	overflow-y: auto;
}

/*
 * Positions. Core right-aligns submenus whenever the menu itself is justified
 * right, so the anchor is always set explicitly.
 *
 * item      Under the menu item, starting at its left edge.
 * left /
 * center /
 * right     Against the page container (see mega-menu.js): the panel starts at
 *           the item's left edge and the script measures the container and
 *           sets --cmk-mega-shift to slide it into place. Without JavaScript
 *           these fall back to the "item" position.
 */
.wp-block-navigation .wp-block-navigation-item.cmk-has-mega > .wp-block-navigation__submenu-container.cmk-mega-menu {
	left: -1px;
	right: auto;
	transform: translateX(var(--cmk-mega-shift, 0px));
}

/* Pattern content should flow normally, not inherit link-row styling. */
.wp-block-navigation .cmk-mega-menu > * {
	width: 100%;
}

/* Inside the mobile overlay menu, the panel is a normal stacked block. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.cmk-has-mega > .wp-block-navigation__submenu-container.cmk-mega-menu {
	width: 100%;
	max-width: 100%;
	left: auto;
	right: auto;
	transform: none;
	padding: 0.5rem 0 0.5rem 1rem;
	overflow-x: hidden;
	max-height: none;
}

/*
 * Wide pattern content must not stretch the menu (or its item) inside the
 * overlay: a flex item's automatic minimum width is its content width, so
 * the list holding a mega item is told it may shrink to the screen.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container:has(> .cmk-has-mega) {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .cmk-mega-menu {
	contain: inline-size;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.cmk-has-mega {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

/*
 * Page backdrop: while a mega panel with "Blur page behind menu" is open,
 * mega-menu.js shows this layer over the page content (below the header)
 * and lifts the header above it, so only the content is blurred/dimmed.
 * pointer-events: none keeps hover/click behavior of the menu unchanged.
 */
.cmk-mega-backdrop-layer {
	position: fixed;
	top: var(--cmk-mega-top, 0);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99998;
	background: rgba(0, 0, 0, 0.3);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cmk-mega-backdrop-layer.is-active {
	opacity: 1;
	visibility: visible;
}

.cmk-mega-lifted {
	z-index: 99999;
}

@media (prefers-reduced-motion: reduce) {
	.cmk-mega-backdrop-layer {
		transition: none;
	}
}