/* Natige — split navigation: centred brand with menu clusters on both sides */

.nav-split {
	position: relative;
	width: 100%;
	min-height: 45px;
	/* Central gap held for the logo. Both clusters split whatever is left evenly,
	   so this must stay wider than the logo to keep clear space around it. */
	--nav-brand-space: 230px;
	--nav-item-gap: 18px;
}

.nav-split__brand {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 2;
}

.nav-split__spacer {
	display: none;
}

.nav-split__search {
	color: var(--dark);
}

/* Bulge riding the header's bottom edge; js/header.js drives --nav-bump-x.
   The overshooting easing is what gives it the springy settle. */
.nav-bump {
	position: absolute;
	top: 100%;
	left: 0;
	width: 400px;
	height: 20px;
	z-index: 50;
	pointer-events: none;
	transform: translateX(calc(var(--nav-bump-x, 50%) - 200px));
	transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-bump path {
	fill: var(--white);
}

@media (max-width: 1199.98px) {
	.nav-bump {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nav-bump {
		transition: none;
	}
}

.nav-split .nav-link:focus-visible,
.nav-split__search:focus-visible,
.nav-split__brand:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 6px;
}

/* Mobile / tablet: burger left, brand centred, search right, menu stacked below.
   The lists keep Bootstrap's flex-column display on purpose — switching them to
   block lets the theme's collapsed dropdown (max-height:0, overflow:visible)
   push its items back into the flow. */
@media (max-width: 1199.98px) {
	.nav-split {
		min-height: 48px;
	}
	/* Pinned to the first row so the brand stays put when the menu expands below it */
	.nav-split__brand {
		top: 0;
		height: 48px;
		display: flex;
		align-items: center;
		transform: translateX(-50%);
	}
	.nav-split__brand img {
		height: 45px;
	}
	.nav-split__collapse {
		flex-basis: 100%;
	}
	.nav-split__side {
		width: 100%;
		margin: 0;
	}
	.nav-split__side--left {
		padding-top: 14px;
	}
	.nav-split__side--right {
		padding-bottom: 14px;
	}
}

/* Desktop: three zones — left cluster | brand | right cluster */
@media (min-width: 1200px) {
	.nav-split {
		flex-wrap: nowrap;
	}
	.nav-split__collapse {
		flex: 1 1 auto;
		align-items: center;
	}
	.nav-split__side {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.nav-split__side--left {
		justify-content: flex-end;
	}
	.nav-split__side--right {
		justify-content: flex-start;
	}

	/* Reserves the brand's footprint so the clusters never slide under the logo,
	   and carries the header height the absolutely positioned brand no longer can. */
	.nav-split__spacer {
		display: block;
		flex: 0 0 auto;
		width: var(--nav-brand-space);
		height: 80px;
		transition: all 0.3s ease-out;
	}
	.cbp-af-header.cbp-af-header-shrink .nav-split__spacer {
		height: 60px;
	}

	/* Taken out of the flow so the brand sits on the row's true centre line,
	   independent of how wide either menu cluster ends up. */
	.nav-split__search {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
	}

	.nav-split .nav-item {
		margin: 20px var(--nav-item-gap);
	}
	.cbp-af-header.cbp-af-header-shrink .nav-split .nav-item {
		margin: 15px var(--nav-item-gap);
	}

	.nav-split .nav-link {
		font-size: 15px;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	/* Underline grows outward from the centre, echoing the centred composition */
	.nav-split .nav-link::before {
		left: 50%;
		bottom: -8px;
		width: 0;
		height: 2px;
		transform: translateX(-50%);
		background-color: var(--primary);
		opacity: 1;
		transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	.nav-split .nav-link:hover::before,
	.nav-split .nav-link.active::before {
		width: 100%;
	}
	.nav-split .nav-link.active {
		color: var(--dark) !important;
	}

	/* Centred under its link. The centring lives in the same transform the theme
	   animates, and the open state is restated here — otherwise the theme's
	   `.nav-item.show .dropdown-menu { transform: translate3d(0,0,0) }` wins on
	   specificity, drops the -50% and the menu slides sideways as it opens.
	   Y goes from above to zero so the panel descends into place. */
	.nav-split .dropdown-menu {
		left: 50%;
		transform: translate(-50%, -12px);
	}
	.nav-split .nav-item.show > .dropdown-menu {
		transform: translate(-50%, 0);
	}

	/* Eleven categories outgrow a laptop screen, so the list scrolls on its own.
	   The cap sits on the inner list to keep the menu's ::before hover bridge
	   (which reaches up into the gap below the link) unclipped. */
	.nav-split .dropdown-menu > ul {
		max-height: calc(100vh - 130px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: rgba(0, 100, 176, 0.35) transparent;
	}
	.nav-split .dropdown-menu > ul::-webkit-scrollbar {
		width: 4px;
	}
	.nav-split .dropdown-menu > ul::-webkit-scrollbar-thumb {
		border-radius: 999px;
		background-color: rgba(0, 100, 176, 0.35);
	}
}

/* Below 1400px the wider cluster outgrows its half and drags the logo off centre,
   so tighten the rhythm until both clusters fit their share again. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.nav-split {
		--nav-brand-space: 170px;
		--nav-item-gap: 10px;
	}
	.nav-split .nav-link {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nav-split .nav-link::before,
	.nav-split__spacer {
		transition: none;
	}
}