/* Vian Elements — Horizontal Scrollspy Nav */

.vian-scrollspy-nav {
	width: 100%;
}

.vian-scrollspy-menu {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.vian-scrollspy-menu li {
	margin: 0;
}

.vian-scrollspy-menu a {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition-property: background-color, color;
	transition-timing-function: ease;
}

/* Sensible fallback highlight if the widget's own color controls
   haven't been customized yet. */
.vian-scrollspy-menu a.is-active {
	background-color: var(--vian-primary, #0a2342);
	color: #ffffff;
	padding: 10px !important;
}

.vian-scrollspy-nav--sticky {
	position: sticky;
	top: 0;
	z-index: 900;
}

/* ---------- Mobile hamburger toggle ---------- */
.vian-scrollspy-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.vian-scrollspy-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background-color: var( --vian-toggle-color, #0a2342 );
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.vian-scrollspy-nav.is-menu-open .vian-scrollspy-toggle span:nth-child( 1 ) {
	transform: translateY( 7px ) rotate( 45deg );
}
.vian-scrollspy-nav.is-menu-open .vian-scrollspy-toggle span:nth-child( 2 ) {
	opacity: 0;
}
.vian-scrollspy-nav.is-menu-open .vian-scrollspy-toggle span:nth-child( 3 ) {
	transform: translateY( -7px ) rotate( -45deg );
}

/* ---------- Mobile offcanvas overlay ---------- */
.vian-scrollspy-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 10, 15, 25, 0.45 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 898;
}

.vian-scrollspy-nav.is-menu-open .vian-scrollspy-overlay {
	opacity: 1;
	visibility: visible;
}

body.vian-scrollspy-lock {
	overflow: hidden;
}

@media (max-width: 767px) {
	.vian-scrollspy-toggle {
		display: flex;
	}

	/* Sticky Nav (Style > Sticky) is desktop/tablet only — not needed on mobile,
	   where the collapsed hamburger bar takes up little space anyway. */
	.vian-scrollspy-nav--sticky {
		position: static !important;
	}

	.vian-scrollspy-menu {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		z-index: 100000 !important;
		width: var( --vian-mobile-width, 280px ) !important;
		max-width: 85vw !important;
		height: 100vh !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		flex-wrap: nowrap !important;
		gap: 6px !important;
		padding: 84px 24px 24px !important;
		margin: 0 !important;
		overflow-y: auto !important;
		background: var( --vian-mobile-bg, #ffffff ) !important;
		box-shadow: 2px 0 24px rgba( 0, 0, 0, 0.15 );
		transform: translateX( -100% );
		transition: transform 0.3s ease;
	}

	.vian-scrollspy-nav--mobile-right .vian-scrollspy-menu {
		left: auto !important;
		right: 0 !important;
		transform: translateX( 100% );
		box-shadow: -2px 0 24px rgba( 0, 0, 0, 0.15 );
	}

	.vian-scrollspy-nav.is-menu-open .vian-scrollspy-menu {
		transform: translateX( 0 );
	}

	.vian-scrollspy-menu li {
		width: 100% !important;
		margin: 0 !important;
	}

	/* Forced with !important and pulled from the dedicated mobile color variable —
	   NOT the desktop "Normal > Text Color" control — so a white desktop menu color
	   (common on a navy header) can never end up as invisible white-on-white text
	   on the (default white) mobile panel. */
	.vian-scrollspy-menu a {
		width: 100% !important;
		color: var( --vian-mobile-item-color, #1c2733 ) !important;
		background-color: transparent !important;
	}

	.vian-scrollspy-menu a.is-active {
		background-color: var( --vian-primary, #0a2342 ) !important;
		color: #ffffff !important;
	}

	.vian-scrollspy-overlay {
		z-index: 99999 !important;
	}

	.vian-scrollspy-toggle {
		display: flex !important;
	}
}