/**
 * Menu Navigation Frontend Styles
 */

/* Highlight menu item */
.sb-menu-item-highlight > a,
a.sb-menu-highlight {
	font-weight: 700;
	position: relative;
	z-index: 0;
	isolation: isolate;
	color: #ffffff;
}

/* Highlighted menu item: primary pill background (no bottom border) */
.sb-menu-item-highlight > a::after,
a.sb-menu-highlight::after {
	content: none;
	display: none;
}

.sb-menu-item-highlight > a::before,
a.sb-menu-highlight::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -10px;
	right: -10px;
	height: 34px;
	transform: translateY(-50%);
	border-radius: 999px;
	background: var(--sb-color-primary, #2271b1);
	z-index: -1;
	transition: background 0.3s ease;
}

/* Highlighted item when current/hover: same as other nav items – primary-light pill + primary text (ref: Startseite) */
.sb-menu-item-highlight.current-menu-item > a,
.sb-menu-item-highlight.current_page_item > a,
.sb-menu-item-highlight.current-menu-ancestor > a,
.sb-menu-item-highlight.current_page_ancestor > a,
.sb-menu-item-highlight > a:hover,
a.sb-menu-highlight:hover {
	color: var(--sb-color-primary, #2271b1);
}

.sb-menu-item-highlight.current-menu-item > a::before,
.sb-menu-item-highlight.current_page_item > a::before,
.sb-menu-item-highlight.current-menu-ancestor > a::before,
.sb-menu-item-highlight.current_page_ancestor > a::before,
.sb-menu-item-highlight > a:hover::before,
a.sb-menu-highlight:hover::before {
	background: var(--sb-color-primary-light, color-mix(in srgb, var(--sb-color-primary) 12%, #fff));
}