/*!
 * WPCompass dropdown module – standard (non-mega) submenus.
 * Desktop positioning only applies above the per-menu breakpoint (see the
 * inline <style> block printed per menu instance).
 */

.wpc-dropdown {
	display: none;
	flex-direction: column;
	min-width: 12rem;
	width: var(--wpc-dropdown-width, auto);
	background: var(--wpc-color-bg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	padding: 0.5em;
	z-index: 100;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.wpc-has-children.wpc-open > .wpc-dropdown {
	display: flex;
	opacity: 1;
	transform: translateY(0);
}

.wpc-dropdown .wpc-link,
.wpc-dropdown .wpc-link--notlink {
	width: 100%;
	padding: 0.5em 0.75em;
	border-radius: 4px;
}

.wpc-dropdown .wpc-link:hover,
.wpc-dropdown .wpc-link:focus-visible {
	background: var(--wpc-color-bg-hover);
}

.wpc-dropdown .wpc-item {
	display: block;
}

.wpc-dropdown .wpc-dropdown {
	top: 0;
}

/*
 * Default positioning context (absolute, anchored under the parent item).
 * The per-instance inline <style> block overrides this back to a static,
 * stacked layout below the configured mobile breakpoint. The flipped edge
 * (auto-flip on viewport overflow) is measured at runtime in dropdown.js.
 */
.wpcompass-nav .wpc-item > .wpc-dropdown {
	position: absolute;
	top: 100%;
}

.wpcompass-nav .wpc-dropdown[data-align="left"] {
	left: 0;
}

.wpcompass-nav .wpc-dropdown[data-align="center"] {
	left: 50%;
	transform: translate(-50%, 4px);
}

.wpc-has-children.wpc-open > .wpc-dropdown[data-align="center"] {
	transform: translate(-50%, 0);
}

.wpcompass-nav .wpc-dropdown[data-align="right"] {
	right: 0;
}

.wpcompass-nav .wpc-dropdown[data-flipped] {
	left: auto;
	right: 0;
}

.wpcompass-nav .wpc-dropdown .wpc-dropdown {
	left: 100%;
	top: 0;
}