/**
 * [rodun_quicknav] — chip-bar voor snelle navigatie naar id-anchors.
 *
 * Volledig genamespaced onder .rodun-quicknav.
 */

.rodun-quicknav {
	--rq-bg: #f8fafc;
	--rq-border: #e2e8f0;
	--rq-text: #0f172a;
	--rq-accent: #ffbe00;
	--rq-primary: #0a2540;
	--rq-sticky-top: 80px;

	background: var(--rq-bg);
	border-top: 1px solid var(--rq-border);
	border-bottom: 1px solid var(--rq-border);
	padding: 16px 0;
	width: 100%;
}

.rodun-quicknav--sticky {
	position: sticky;
	top: var(--rq-sticky-top);
	z-index: 40;
}

.rodun-quicknav__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rodun-quicknav--center .rodun-quicknav__inner {
	justify-content: center;
}

.rodun-quicknav__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	background: #ffffff;
	border: 1px solid var(--rq-border);
	border-radius: 2px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--rq-text);
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
	flex: 1 1 auto;
}

.rodun-quicknav__chip:hover,
.rodun-quicknav__chip:focus-visible,
.rodun-quicknav__chip.is-active {
	border-color: var(--rq-accent);
	color: var(--rq-primary);
}

.rodun-quicknav__chip:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(255, 190, 0, .35);
}

.rodun-quicknav__icon {
	flex-shrink: 0;
	display: block;
}

.rodun-quicknav__label {
	white-space: nowrap;
}

@media (min-width: 768px) {
	.rodun-quicknav__chip {
		flex: 0 0 auto;
	}
}

html {
	scroll-behavior: smooth;
}

:target {
	scroll-margin-top: 120px;
}