/*
 * Cascade Menu for Elementor — frontend styles.
 * Colors, typography, borders, shadows, sizing and per-level overrides are
 * all emitted by Elementor itself (via each control's `selectors`), scoped
 * to the widget instance through Elementor's {{WRAPPER}} mechanism. This
 * file only supplies structure, the open/closed states, and animation —
 * things Elementor's control system has no opinion on.
 */

.cmfe-cascade-menu {
	position: relative;
	--cmfe-duration: 200ms;
}

.cmfe-cascade-menu .cmfe-level {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Top level renders as a vertical stack; every nested level cascades
   sideways from its parent item (see .cmfe-panel below). */
.cmfe-cascade-menu > .cmfe-level {
	display: flex;
	flex-direction: column;
}

.cmfe-item {
	position: relative;
}

.cmfe-item-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.cmfe-item-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.cmfe-item-icon svg {
	fill: currentColor;
	display: block;
}

.cmfe-panel {
	position: absolute;
	top: 0;
	left: 100%;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

/* JS is the single source of truth for open state (hover-intent, click,
   keyboard, or touch tap all funnel into the same class toggle), so CSS
   never reacts to raw :hover — that would conflict with click-only mode. */
.cmfe-item.cmfe-open > .cmfe-panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.cmfe-anim-fade .cmfe-panel,
	.cmfe-anim-fade-slide .cmfe-panel {
		transition: opacity var(--cmfe-duration, 200ms) ease, visibility var(--cmfe-duration, 200ms) ease;
	}

	.cmfe-anim-slide .cmfe-panel,
	.cmfe-anim-fade-slide .cmfe-panel {
		transform: translateX(-6px);
		transition: transform var(--cmfe-duration, 200ms) ease, visibility var(--cmfe-duration, 200ms) ease;
	}

	.cmfe-anim-slide .cmfe-panel,
	.cmfe-anim-fade-slide .cmfe-panel {
		transition-property: opacity, transform, visibility;
	}

	.cmfe-anim-slide .cmfe-item.cmfe-open > .cmfe-panel,
	.cmfe-anim-fade-slide .cmfe-item.cmfe-open > .cmfe-panel {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cmfe-panel {
		transition: none !important;
	}
}

.cmfe-anim-none .cmfe-panel {
	transition: none;
}

.cmfe-item-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.cmfe-empty-notice {
	padding: 1em;
	border: 1px dashed #c00;
	color: #c00;
}