/*
 * Section Anchor Dock (Osmo Supply resource), restyled with Stuurmaat's
 * tokens. Structure, data-attributes and the GSAP approach are untouched —
 * only colors/radii/typography were adapted to match the Figma "diensten"
 * dropdown (Property 1=dropdown / sticky) states.
 */

.section-dock {
	z-index: 100;
	width: fit-content;
	position: relative;
}

.section-dock__pill {
	color: var(--sm-navy);
	background-color: var(--sm-nav-bg);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: var(--sm-radius);
	overflow: hidden;
}

.section-dock__toggle {
	white-space: nowrap;
	appearance: none;
	background-color: transparent;
	border: none;
	font: inherit;
	font-family: var(--sm-font-body);
	padding: 0.5em 1em;
	display: block;
	cursor: pointer;
	color: var(--sm-navy);
}

.section-dock__label-wrap {
	height: 1.4em;
	display: block;
	position: relative;
	overflow: hidden;
}

.section-dock__link-num {
	display: none;
}

.section-dock__label {
	line-height: 1.4;
	display: block;
	font-weight: 500;
	font-size: 16px;
}

.section-dock__list {
	opacity: 0;
	visibility: hidden;
	width: max-content;
	padding: 0.5em;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 8px;
}

.section-dock__indicator {
	z-index: 1;
	pointer-events: none;
	background-color: var(--sm-darkblue);
	border-radius: var(--sm-radius-sm);
	width: 2em;
	height: 2em;
	position: absolute;
	top: 0;
	left: 0;
}

.section-dock__items {
	flex-flow: column;
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: flex;
}

.section-dock__link {
	z-index: 2;
	white-space: nowrap;
	color: inherit;
	border-radius: var(--sm-radius-sm);
	padding: 0.5em 1em;
	text-decoration: none;
	font-family: var(--sm-font-body);
	font-weight: 500;
	font-size: 16px;
	transition-property: color;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	display: block;
	position: relative;
}

[data-section-dock-link][data-active] {
	color: var(--sm-white);
}

/* This dock instance lives inline in the nav bar, so its own [data-hidden]
   scroll-out behaviour (built for a floating dock) is not used here. It
   stays `position: relative` (from the base rule above) — the dropdown
   list positions itself against that. */
.site-nav .section-dock__pill {
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.site-nav .section-dock__toggle {
	padding: 0.85em 1em;
}

/* Desktop navigation: this is a normal "diensten" menu, separate from the
   animated in-page scroll dock above. It stays in the nav row and reveals a
   dedicated dropdown on hover, focus or click. */
.site-nav .section-dock--nav { position: relative; z-index: 220; }
.site-nav .section-dock--nav::after {
	/* Keep the hover state alive across the visual gap before the dropdown. */
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: min(300px, calc(100vw - 2 * var(--sm-gutter)));
	height: 24px;
}
.site-nav .section-dock--nav .section-dock__pill { overflow: visible; }
.site-nav .section-dock--nav .section-dock__toggle {
	position: relative;
	overflow: hidden;
	height: 54px;
	border-radius: var(--sm-radius-sm);
	background: transparent;
	/* Matches the dimensions and typography of the adjacent "Over ons" link. */
	padding: 8px 16px;
	font-size: inherit;
	line-height: 1.4;
}
.site-nav .section-dock--nav .section-dock__label-wrap { height: 1.4em; }
.site-nav .section-dock--nav .section-dock__toggle::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #F0EFFF;
	border-radius: inherit;
	opacity: 0;
	scale: 0.94;
	transition: opacity 0.2s ease, scale 0.55s 0.05s cubic-bezier(0.625, 0.05, 0, 1);
}
.site-nav .section-dock--nav:is(:hover, :focus-within, .is-open, .has-selection) .section-dock__toggle::before {
	opacity: 1;
	scale: 1;
}
.site-nav .section-dock--nav .section-dock__label-wrap { position: relative; z-index: 1; }
.site-nav .section-dock--nav .section-dock__label { font-size: inherit; clip-path: inset(0); }
.site-nav .section-dock--nav .section-dock__label > span {
	display: inline-block;
	text-shadow: 0 1.3em currentColor;
	transition: translate 0.6s calc(var(--index) * 0.015s) cubic-bezier(0.625, 0.05, 0, 1);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.site-nav .section-dock--nav:is(:hover, :focus-within) .section-dock__label > span {
		translate: 0 -1.3em;
		transition-delay: calc(var(--index) * 0.015s + 0.05s);
	}
}
.site-nav .section-dock--nav .section-dock__list {
	position: absolute;
	top: calc(100% + 24px);
	left: 0;
	right: auto;
	width: min(300px, calc(100vw - 2 * var(--sm-gutter)));
	margin: 0;
	padding: 24px 28px;
	border: 1px solid var(--sm-nav-border);
	border-radius: var(--sm-radius);
	background: var(--sm-nav-bg);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.site-nav .section-dock--nav:is(:hover, :focus-within, .is-open) .section-dock__list {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.site-nav .section-dock--nav .section-dock__indicator { display: none; }
.site-nav .section-dock--nav .section-dock__items { gap: 16px; }
.site-nav .section-dock--nav .section-dock__link {
	padding: 8px 16px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	white-space: normal;
	color: var(--sm-navy);
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.site-nav .section-dock--nav .section-dock__link[data-active] { color: var(--sm-navy); }
.site-nav .section-dock--nav .section-dock__link:is(:hover, :focus-visible) {
	background: #F0EFFF;
	transform: translateX(4px);
}

/* Page anchors use the complete Osmo dock behaviour: the current section
   appears in the compact purple item, which morphs into its link list on
   hover, focus or click. */
.site-nav .section-dock--anchors {
	position: relative;
	z-index: 220;
	/* Reserve the compact item's column in the navigation. The pill itself is
	   positioned over this column so it can expand without pushing "diensten"
	   on top of it. */
	/* This fixed column is the dropdown's own space in the nav row. It never
	   changes width on hover, so diensten remains in exactly the same place. */
	width: 222px;
	height: 54px;
	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav .section-dock--anchors .section-dock__pill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: visible;
	/* No static fill in the compact state: the active label remains clean. */
	background: transparent;
	border-radius: var(--sm-radius-sm);
}
.site-nav .section-dock--anchors .section-dock__toggle {
	width: 206px;
	height: 54px;
	padding: 8px 16px;
	text-align: center;
}
.site-nav .section-dock--anchors .section-dock__label-wrap {
	height: 1.4em;
}
.site-nav .section-dock--anchors .section-dock__list {
	top: 0;
	left: 0;
	width: 222px;
	margin: 0;
	padding: 8px;
}
.site-nav .section-dock--anchors .section-dock__items { gap: 4px; }
.site-nav .section-dock--anchors .section-dock__link {
	min-height: 38px;
	padding: 8px 16px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.site-nav .section-dock--anchors .section-dock__link:is(:hover, :focus-visible) {
	color: var(--sm-navy);
	background: #F0EFFF;
}

/* Opening the anchor dock grows the white navigation card downward. The
   active link remains in the first-row position; its other links appear
   beneath it, while diensten and contact stay on that same first row. */
.site-nav:has(.section-dock--anchors.is-open) .site-nav__bar {
	/* Five WordPress menu links need room for the same 8px padding beneath
	   the last item as above the first one. */
	min-height: max(238px, calc(16px + var(--sm-dock-items, 5) * 42px));
	align-items: flex-start;
}
.site-nav:has(.section-dock--nav:is(:hover, :focus-within, .is-open)) .site-nav__bar {
	/* The first service label can wrap over several lines. */
	min-height: 330px;
	align-items: flex-start;
}

/* Diensten expands inside the same navigation card, but keeps its own label
   on the first row. Its service anchors always start directly underneath. */
.site-nav .section-dock--nav {
	display: none;
	width: 128px;
	height: 54px;
}
.site-nav .section-dock--nav::after { display: none; }
.site-nav .section-dock--nav .section-dock__pill {
	position: relative;
	overflow: visible;
	background: transparent;
}
.site-nav .section-dock--nav .section-dock__toggle {
	width: 128px;
}
.site-nav .section-dock--nav .section-dock__list {
	top: calc(100% + 4px);
	left: 0;
	width: 222px;
	margin: 0;
	padding: 8px;
	border: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
}
.site-nav .section-dock--nav:is(:hover, :focus-within, .is-open) .section-dock__list {
	transform: none;
}
.site-nav .section-dock--nav .section-dock__items { gap: 4px; }
.site-nav .section-dock--nav .section-dock__link {
	min-height: 38px;
	padding: 8px 16px;
}
.site-nav .section-dock--nav .section-dock__link[data-active] {
	color: var(--sm-white);
	background: var(--sm-darkblue);
}

/* On posts and other regular pages the same WordPress menu leads back to
   homepage anchors. It retains the familiar dropdown, without running the
   homepage scroll-spy animation against full URLs. */
.site-nav .section-dock--anchors.is-external-menu:is(:hover, :focus-within, .is-open) .section-dock__pill {
	width: 222px;
	height: max(238px, calc(16px + var(--sm-dock-items, 5) * 42px));
	/* The expanded links belong directly to the large navigation card — no
	   second white panel or blur layer inside it. */
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: width 0.35s ease, height 0.35s ease, background-color 0.25s ease;
}
.site-nav .section-dock--anchors.is-external-menu .section-dock__indicator {
	/* A regular WordPress page has no current homepage anchor. */
	display: none;
}
.site-nav .section-dock--anchors.is-external-menu .section-dock__link[data-active] {
	color: var(--sm-white);
	background: #201DBE;
}
.site-nav .section-dock--anchors.is-external-menu .section-dock__link[data-active]:is(:hover, :focus-visible) {
	color: var(--sm-white);
	background: #201DBE;
}
.site-nav .section-dock--anchors.is-external-menu:is(:hover, :focus-within, .is-open) .section-dock__toggle {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.site-nav .section-dock--anchors.is-external-menu:is(:hover, :focus-within, .is-open) .section-dock__list {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.2s ease;
}
.site-nav:has(.section-dock--anchors.is-external-menu:is(:hover, :focus-within, .is-open)) .site-nav__bar {
	min-height: max(238px, calc(16px + var(--sm-dock-items, 5) * 42px));
	align-items: flex-start;
}

/* The same docks remain available in the mobile menu, but use the menu's
 * full width instead of the desktop's reserved columns. */
@media (max-width: 1000px) {
	/* Explicitly neutralise the desktop-only dropdown state. Its selectors
	 * are more specific than the general mobile rules below, so without this
	 * reset a hover-capable phone could show a small nested menu card. */
	.site-nav .section-dock--anchors.is-external-menu .section-dock__pill {
		width: 100% !important;
		height: auto !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	.site-nav .section-dock--anchors.is-external-menu .section-dock__list {
		position: static !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 0 8px !important;
		background: transparent !important;
		box-shadow: none !important;
		transform: none !important;
	}
	.site-nav:has(.section-dock--anchors.is-external-menu) .site-nav__bar {
		min-height: 60px !important;
		align-items: center !important;
	}
	.site-nav .section-dock--anchors,
	.site-nav .section-dock--nav {
		width: 100%;
		height: auto;
	}
	.site-nav .section-dock--anchors .section-dock__pill,
	.site-nav .section-dock--nav .section-dock__pill {
		position: relative;
		width: 100%;
	}
	.site-nav .section-dock--anchors .section-dock__toggle,
	.site-nav .section-dock--nav .section-dock__toggle {
		width: 100%;
		text-align: left;
	}
	.site-nav .section-dock--anchors .section-dock__list,
	.site-nav .section-dock--nav .section-dock__list {
		left: 0;
		width: 100%;
	}
	.site-nav .section-dock--anchors .section-dock__link,
	.site-nav .section-dock--nav .section-dock__link {
		font-size: 18px;
	}
	/* On a touch device the burger menu is deliberately simple: all section
	 * and service links are immediately available, without the desktop dock
	 * hover/expand interaction. */
	.site-nav__bar.is-open {
		background: transparent;
		border-color: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.site-nav__bar.is-open .site-nav__logo,
	.site-nav__bar.is-open .site-nav__burger { position: relative; z-index: 3; }
	/* No forced filter here (was `brightness(0) invert(1)`, forcing the
	   logo to solid white for contrast against the old navy panel) — the
	   logo SVG is already drawn in its own native colours (the arrow in
	   --sm-purple, the "stuurmaat" wordmark in --sm-navy), which read
	   correctly as-is against the light-blue panel below. */
	.site-nav__bar.is-open .site-nav__burger span { background: var(--sm-navy); }
	.site-nav__bar.is-open .section-dock__toggle { display: none; }
	.site-nav__bar.is-open .section-dock--nav { display: none; }
	.site-nav__bar.is-open .site-nav__links {
		position: fixed;
		inset: 0;
		z-index: 2;
		width: 100%;
		max-height: none;
		overflow-y: auto;
		padding: 112px 32px 32px;
		justify-content: center;
		align-items: stretch;
		gap: 14px;
		background: var(--sm-lightblue);
		border: 0;
		border-radius: 0;
	}
	/* !important from here down is deliberate, not a habit: this dock also
	   ships several desktop-only "active item" pill states elsewhere in this
	   file (e.g. .section-dock--anchors.is-external-menu .section-dock__link
	   [data-active] — a 5-class-deep selector for the active link on regular,
	   non-homepage pages) that sit at a higher selector specificity than a
	   plain .site-nav__bar.is-open override could ever reach on its own. This
	   breakpoint is meant to flatten the dock into a single static list
	   regardless of which of those desktop states was last active, so it
	   needs to win unconditionally rather than out-specificity every one of
	   them individually. */
	.site-nav__bar.is-open .section-dock__list {
		position: static;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0 0 8px;
		border: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
	}
	.site-nav__bar.is-open .section-dock__indicator { display: none; }
	.site-nav__bar.is-open .section-dock__items { gap: 2px; }
	/* Covers the active link too (no separate [data-active] rule needed):
	   this already applies to every link unconditionally, and !important
	   beats the higher-specificity but non-important [data-active] pill
	   rules regardless. */
	.site-nav__bar.is-open .section-dock__link {
		padding: 5px 16px;
		color: var(--sm-navy) !important;
		background: transparent !important;
		font-family: var(--sm-font-display);
		font-size: clamp(24px, 7vw, 34px);
		font-weight: 600;
		line-height: 1.15;
		text-align: center;
		transform: none !important;
	}
	.site-nav__mobile-services { display: none; }
	.site-nav__bar.is-open .site-nav__mobile-services {
		display: block;
		padding: 5px 16px;
		color: var(--sm-navy);
		font-family: var(--sm-font-display);
		font-size: clamp(24px, 7vw, 34px);
		font-weight: 600;
		line-height: 1.15;
		text-align: center;
		text-decoration: none;
	}
	.site-nav__bar.is-open .site-nav__cta { display: none; }
	.site-nav__mobile-contact { display: none; }
	.site-nav__bar.is-open .site-nav__mobile-contact {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: auto;
		padding-top: 16px;
	}
	.site-nav__mobile-email,
	.site-nav__mobile-phone {
		display: flex;
		min-height: 52px;
		align-items: center;
		justify-content: center;
		padding: 10px 20px;
		border-radius: var(--sm-radius-sm);
		font-size: 18px;
		font-weight: 600;
		text-align: center;
		text-decoration: none;
	}
	.site-nav__mobile-email { background: var(--sm-nav-active); color: var(--sm-navy); }
	.site-nav__mobile-phone { background: var(--sm-green); color: var(--sm-white); }
}