/*!
 * WPCompass off-canvas / mobile module. The breakpoint-dependent transform
 * base state is set by the per-instance inline <style> block; this file
 * only styles the panel's appearance and the drilldown/accordion behavior
 * once it is open (both viewport-independent, safe to keep static).
 */

.wpc-menu {
	overflow-y: auto;
	background: var(--wpc-color-bg);
}

html.wpc-scroll-lock {
	overflow: hidden;
}

.wpc-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 90;
}

.wpcompass-nav.wpc-is-open .wpc-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* Accordion: nested submenu expands in place. */
.wpc-menu[data-mobile-submenu="accordion"] .wpc-dropdown,
.wpc-menu[data-mobile-submenu="accordion"] .wpc-megamenu {
	position: static;
	display: none;
	box-shadow: none;
	opacity: 1;
	transform: none;
	padding-left: 1em;
	width: 100%;
}

.wpc-menu[data-mobile-submenu="accordion"] .wpc-has-children.wpc-open > .wpc-dropdown,
.wpc-menu[data-mobile-submenu="accordion"] .wpc-has-children.wpc-open > .wpc-megamenu {
	display: block;
}

.wpc-menu[data-mobile-submenu="accordion"] .wpc-megamenu__grid {
	display: flex;
	flex-direction: column;
}

/* Drilldown: one pane visible at a time, siblings hidden, back button. */
.wpc-menu[data-mobile-submenu="drilldown"] .wpc-dropdown,
.wpc-menu[data-mobile-submenu="drilldown"] .wpc-megamenu {
	position: static;
	display: none;
	box-shadow: none;
	opacity: 1;
	transform: none;
	width: 100%;
}

.wpc-menu[data-mobile-submenu="drilldown"] li.wpc-drilldown-open > .wpc-dropdown,
.wpc-menu[data-mobile-submenu="drilldown"] li.wpc-drilldown-open > .wpc-megamenu {
	display: block;
}

.wpc-menu[data-mobile-submenu="drilldown"] li.wpc-drilldown-hide-sibling {
	display: none;
}

.wpc-menu[data-mobile-submenu="drilldown"] .wpc-megamenu__grid {
	display: flex;
	flex-direction: column;
}

.wpc-drilldown-back {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: 100%;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding: 0.6em 0.5em;
	margin-bottom: 0.4em;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	color: var(--wpc-color-text);
}

.wpc-drilldown-back svg {
	transform: rotate(180deg);
}