/*
 * Sectienavigatie -- opmaak voor de Elementor-widget "Sectienavigatie"
 * (zie inc/widget-section-nav.php).
 *
 * Twee verschijningsvormen van dezelfde opsomming:
 *
 *   vanaf 1025px : verticale rail aan de zijkant. Alleen stippen; het label
 *                  verschijnt zodra je de rail aanwijst of er met het
 *                  toetsenbord in komt.
 *   tot 1024px   : volle balk direct onder de hoofdnavigatie. Labels, geen
 *                  stippen, horizontaal scrollbaar en nooit afbrekend.
 *
 * Op alle breakpoints staat de navigatie vast (position: fixed) en blijft ze
 * zichtbaar. De hoogte van de header komt uit --zuuvr-header-height, die
 * inc/header-scroll-behavior.php bijhoudt; ontbreekt die, dan valt de balk
 * terug op 0 en plakt hij bovenaan.
 *
 * Kleuren, maten en afstanden komen uit de Vormgeving-tab van de widget en
 * landen als custom properties op .zuuvr-nav. De waarden hieronder zijn dus
 * enkel de terugvalwaarden.
 */

.zuuvr-nav {
	--zuuvr-nav-idle: rgba(242, 249, 247, 0.55);
	--zuuvr-nav-active: #FFFFFF;
	--zuuvr-nav-dot-idle: rgba(242, 249, 247, 0.45);
	--zuuvr-nav-dot-active: var(--e-global-color-accent, #78C3A7);
	--zuuvr-nav-plate-bg: rgba(10, 14, 13, 0.96);
	--zuuvr-nav-plate-padding: 0.7rem 1.1rem;
	--zuuvr-nav-gap: 0.9rem;
	--zuuvr-nav-dot-size: 8px;
	--zuuvr-nav-inset: 1.75rem;

	position: fixed;
	/*
	 * Bewust ónder de header (die staat in Elementor op z-index 99). Het
	 * off-canvas- en mega-menupaneel horen bij de header en zitten dus in
	 * diens stapelcontext: hoe hoog hun eigen z-index ook staat, ze komen
	 * nooit boven 99 uit. Zou deze balk daarboven liggen, dan zou hij dwars
	 * door een opengeklapt menu heen te zien zijn -- en de kliks erop
	 * opvangen. 98 houdt hem wel ruim boven de pagina-inhoud.
	 *
	 * Staat de header in Elementor op een andere z-index, pas dan
	 * --zuuvr-nav-z aan zodat die er net onder blijft.
	 */
	z-index: var(--zuuvr-nav-z, 98);
	margin: 0;
}

.zuuvr-nav__list {
	display: flex;
	flex-wrap: nowrap; /* nooit afbreken -- de balk scrolt liever dan dat hij twee regels wordt. */
	gap: var(--zuuvr-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.zuuvr-nav__item {
	margin: 0;
	flex: none;
}

.zuuvr-nav__link {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: inherit;
}

.zuuvr-nav__label {
	color: var(--zuuvr-nav-idle);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.zuuvr-nav__link:hover .zuuvr-nav__label {
	color: var(--zuuvr-nav-active);
}

.zuuvr-nav__link[aria-current] .zuuvr-nav__label {
	color: var(--zuuvr-nav-active);
}

.zuuvr-nav__dot {
	flex: none;
	width: var(--zuuvr-nav-dot-size);
	height: var(--zuuvr-nav-dot-size);
	border: 1.5px solid var(--zuuvr-nav-dot-idle);
	border-radius: 50%;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.zuuvr-nav__link[aria-current] .zuuvr-nav__dot {
	background-color: var(--zuuvr-nav-dot-active);
	border-color: var(--zuuvr-nav-dot-active);
	transform: scale(1.2);
}

.zuuvr-nav__link:focus-visible {
	outline: 2px solid var(--zuuvr-nav-dot-active);
	outline-offset: 3px;
}

/* --------------------------------------------------------------- rail --- */

@media (min-width: 1025px) {

	.zuuvr-nav {
		top: 50%;
		transform: translateY(-50%);
		/*
		 * De rail zweeft over de pagina-inhoud. Zonder dit vangt zijn lege,
		 * onzichtbare kader ook de kliks op alles wat eronder ligt. Alleen de
		 * items zelf hoeven klikbaar te zijn.
		 */
		pointer-events: none;
	}

	.zuuvr-nav--right {
		right: var(--zuuvr-nav-inset);
		left: auto;
	}

	.zuuvr-nav--left {
		left: var(--zuuvr-nav-inset);
		right: auto;
	}

	.zuuvr-nav__list {
		flex-direction: column;
	}

	.zuuvr-nav--right .zuuvr-nav__list {
		align-items: flex-end;
	}

	.zuuvr-nav--left .zuuvr-nav__list {
		align-items: flex-start;
	}

	/* Links hangt de stip vóór het label, zodat de stippen tegen de rand staan. */
	.zuuvr-nav--left .zuuvr-nav__link {
		flex-direction: row-reverse;
	}

	.zuuvr-nav__link {
		pointer-events: auto;
	}

	/*
	 * Labels zijn standaard onzichtbaar maar niet weg: doorzichtig in plaats
	 * van display:none, zodat een schermlezer ze gewoon voorleest en het item
	 * ook met het toetsenbord te vinden blijft.
	 *
	 * Bewust opacity en niet color:transparent -- een doorzichtige letter tekent
	 * zijn schaduw namelijk gewoon door, en dan blijft er een vlek staan waar
	 * het label hoort te zijn. opacity neemt de schaduw mee.
	 */
	.zuuvr-nav__label {
		opacity: 0;
		text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); /* de labels zweven over de pagina-inhoud. */
		transition: opacity 0.2s ease, color 0.2s ease;
	}

	/*
	 * Zichtbaar zodra de muis binnen de rail komt -- niet pas boven een item.
	 * De klasse wordt in JS gezet op basis van de muispositie, want de rail
	 * staat op pointer-events:none (anders vangt hij kliks op de pagina
	 * eronder) en dan werkt :hover op de container zelf niet: die zou alleen
	 * afgaan bóven een item, waardoor de labels in de ruimte ertussen weer
	 * verdwenen.
	 */
	.zuuvr-nav.is-revealed .zuuvr-nav__label,
	.zuuvr-nav:focus-within .zuuvr-nav__label {
		opacity: 1;
	}
}

/* -------------------------------------------------------------- balk --- */

@media (max-width: 1024px) {

	.zuuvr-nav {
		/* --zuuvr-nav-top wordt door het script gezet op de onderkant van de
		   hoofdnavigatie; de themavariabele is de terugval als het script (nog)
		   niet gedraaid heeft. */
		top: var(--zuuvr-nav-top, var(--zuuvr-header-height, 0px));
		left: 0;
		right: 0;
		background-color: var(--zuuvr-nav-plate-bg);
		/*
		 * Horizontaal scrollbaar in plaats van afbreken. overscroll-behavior
		 * houdt de vinger binnen de balk: doorschuiven tot het einde mag de
		 * pagina eronder niet meesleuren.
		 */
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.zuuvr-nav::-webkit-scrollbar {
		display: none;
	}

	.zuuvr-nav__list {
		flex-direction: row;
		align-items: center;
		padding: var(--zuuvr-nav-plate-padding);
		width: max-content; /* laat de rij groeien voorbij het scherm i.p.v. te persen. */
		min-width: 100%;
	}

	/* Op de balk dragen de labels het verhaal; stippen zijn het idioom van de rail. */
	.zuuvr-nav__dot {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zuuvr-nav__label,
	.zuuvr-nav__dot {
		transition: none;
	}
}