/*
 * Custom Mega Menu — frontend styles.
 * The menu item must have at least one direct submenu item.
 */
.cmm-mega-menu {
	--cmm-columns: 3;
	position: static;
}

.cmm-mega-menu > a {
	position: relative;
}

.cmm-mega-menu > .sub-menu {
	display: grid !important;
	grid-template-columns: repeat(var(--cmm-columns, 3), minmax(0, 1fr));
	gap: 0;
	box-sizing: border-box;
	width: min(900px, 92vw);
	max-width: 92vw;
	padding: 18px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
	z-index: 9999;
}

.cmm-mega-menu.cmm-columns-2 {
	--cmm-columns: 2;
}
.cmm-mega-menu.cmm-columns-3 {
	--cmm-columns: 3;
}
.cmm-mega-menu.cmm-columns-4 {
	--cmm-columns: 4;
}

.cmm-mega-menu > .sub-menu > li {
	float: none;
	display: block;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.cmm-mega-menu > .sub-menu > li > a {
	display: block;
	padding: 10px 12px;
	white-space: normal;
}

.cmm-mega-menu > .sub-menu > li > .sub-menu {
	position: static;
	display: block;
	min-width: 0;
	width: 100%;
	padding: 0 0 8px 10px;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
}

@media (max-width: 959px) {
	/* Keep the dropdown usable on touch/mobile menus; the theme controls opening. */
	.cmm-mega-menu {
		position: relative;
	}
	.cmm-mega-menu > .sub-menu {
		position: static !important;
		display: block !important;
		width: 100%;
		max-width: 100%;
		padding: 8px;
		box-shadow: none;
		grid-template-columns: 1fr;
	}
	.cmm-mega-menu > .sub-menu > li {
		width: 100%;
	}
}