/* Custom Dropdown Menu - simple, reliable, unlimited-depth dropdown.
   Uses !important on the core show/hide + positioning rules so theme CSS
   is less likely to break it. Override colors via the variables below. */

:root {
	--cdm-text: #1a1a1a;
	--cdm-accent: #d1442f;
	--cdm-border: #e5e5e5;
	--cdm-bg: #ffffff;
	--cdm-hover-bg: rgba(0, 0, 0, 0.05);
	--cdm-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	--cdm-z: 9999;
}

.cdm-wrapper,
.cdm-wrapper * {
	box-sizing: border-box;
}

.cdm-wrapper {
	position: relative !important;
}

.cdm-nav {
	width: 100%;
}

.cdm-menu,
.cdm-menu ul.cdm-sub-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cdm-menu {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
}

.cdm-menu li {
	position: relative !important;
}

.cdm-menu a.cdm-link {
	display: flex !important;
	align-items: center;
	gap: 8px;
	padding: 16px 18px;
	color: var(--cdm-text);
	text-decoration: none !important;
	font-weight: 500;
	white-space: nowrap;
}

.cdm-menu .cdm-sub-menu a.cdm-link {
	padding: 10px 18px;
	white-space: normal;
}

.cdm-arrow {
	width: 0;
	height: 0;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

/* Top-level arrow points down */
.cdm-menu > li > a .cdm-arrow {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	margin-left: 2px;
}

/* Nested-level arrow points right (flyout) */
.cdm-sub-menu a .cdm-arrow {
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid currentColor;
	margin-left: auto;
}

.cdm-menu > li:hover > a .cdm-arrow,
.cdm-menu > li.cdm-open > a .cdm-arrow {
	transform: rotate(180deg);
}

/* --- The actual dropdown behaviour --- */

.cdm-sub-menu {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	min-width: 220px;
	background: var(--cdm-bg) !important;
	border: 1px solid var(--cdm-border);
	box-shadow: var(--cdm-shadow);
	z-index: var(--cdm-z) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

/* Level 3+ (a sub-menu inside a sub-menu) flies out sideways instead of stacking */
.cdm-sub-menu .cdm-sub-menu {
	top: -1px !important;
	left: 100% !important;
	margin-left: 2px;
}

.cdm-menu li:hover > .cdm-sub-menu,
.cdm-menu li.cdm-open > .cdm-sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0);
}

.cdm-sub-menu li a:hover {
	background: var(--cdm-hover-bg);
}

.cdm-sub-menu li a:hover,
.cdm-sub-menu li.cdm-open > a {
	color: var(--cdm-accent);
}

/* --- Mobile toggle button --- */

.cdm-toggle {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 26px;
	height: 18px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.cdm-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--cdm-text);
}

@media (max-width: 991px) {
	.cdm-toggle {
		display: flex;
	}

	.cdm-nav {
		display: none;
		width: 100%;
	}

	.cdm-wrapper.cdm-mobile-open .cdm-nav {
		display: block;
	}

	.cdm-menu {
		flex-direction: column;
		align-items: stretch;
	}

	.cdm-menu > li {
		width: 100%;
	}

	.cdm-sub-menu,
	.cdm-sub-menu .cdm-sub-menu {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		box-shadow: none;
		border: 0;
		margin-left: 0 !important;
		width: 100%;
		display: none;
		padding-left: 16px;
	}

	.cdm-menu li.cdm-open > .cdm-sub-menu {
		display: block !important;
	}

	.cdm-sub-menu a .cdm-arrow {
		transform: rotate(90deg);
	}

	.cdm-menu li.cdm-open > a > .cdm-arrow {
		transform: rotate(90deg);
	}
}