/* MW Menu Enhancements - Frontend */

/* Base layout for submenu items with icon/description */
.sub-menu a {
	border-inline-start: unset !important;
}

/* Target only submenu ULs tagged by the plugin */
ul.sub-menu.mw-submenu{
	padding: var(--mwme-ul-pad) !important;
	border-radius: var(--mwme-ul-radius) !important;
	background: var(--mwme-ul-bg) !important;
	box-shadow: var(--mwme-ul-shadow, none) !important;
}
ul.sub-menu.mw-submenu > li{
	padding: var(--mwme-li-pad) !important;
	border-radius: var(--mwme-li-radius) !important;
	background: var(--mwme-li-bg) !important;
	transition: background-color .2s ease;
}

/* Link padding (click target) */
ul.sub-menu.mw-submenu > li > a{
	padding: var(--mwme-a-pad) !important;
	display:block;
}
ul.sub-menu.mw-submenu > li:hover{
	background: var(--mwme-li-bg-hover) !important;
}

.mw-subnav-item{
	display:flex;
	align-items:flex-start;
	gap: var(--mwme-gap);
}

.mw-subnav-icon{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;

	/* Box sizing is controlled globally via CSS variables */
	width: calc(var(--mwme-icon-size) + (var(--mwme-icon-pad) * 2));
	height: calc(var(--mwme-icon-size) + (var(--mwme-icon-pad) * 2));
	padding: var(--mwme-icon-pad);
	border-radius: var(--mwme-icon-radius);
}

.mw-subnav-icon i{
	font-size: var(--mwme-icon-size);
	line-height: 1;
}

.mw-subnav-text{
	display:flex;
	flex-direction:column;
	gap: var(--mwme-text-gap);
}

.mw-subnav-title{
	display:block;
	font-weight: var(--mwme-title-weight);
	font-size: var(--mwme-title-size, inherit);
	line-height: var(--mwme-title-line-height);
}

.mw-subnav-desc{
	display:block;
	font-size: var(--mwme-desc-size);
	opacity: var(--mwme-desc-opacity);
	line-height: var(--mwme-desc-line-height);
}

/* If there's no description, vertically center the title relative to the icon box */
.mw-subnav-nodesc .mw-subnav-item{
	align-items:center;
}
.mw-subnav-nodesc .mw-subnav-text{
	justify-content:center;
}

/* SVG icon support */
.mw-subnav-icon--svg{line-height:0;}
.mw-subnav-icon--svg svg{display:block;width:100%;height:100%;fill:currentColor;}