/*
 * Alleen op de site (niet in de editor): mobiel menu en kleine extra's.
 */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	overflow-x: clip; /* clip i.p.v. hidden: anders werkt position: sticky niet */
}

/* ---------- Sticky header: weg bij naar beneden scrollen, terug bij omhoog ---------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	transition: transform .3s ease;
}

/* Achtergrond op een pseudo-element: backdrop-filter/transform op de header
   zelf zou het vaste mobiele menu (position: fixed) erin opsluiten. */
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, #161826 86%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.wp-site-blocks > header.wp-block-template-part.is-scrolled::before {
	opacity: 1;
}

.wp-site-blocks > header.wp-block-template-part::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--jf-fade);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.wp-site-blocks > header.wp-block-template-part.is-scrolled::after {
	opacity: 1;
}

.wp-site-blocks > header.wp-block-template-part.is-hidden {
	transform: translateY(-100%);
}

/* Ingelogd: onder de admin-balk (die is onder 600px niet vast, dus dan niet). */
body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part.is-hidden {
	transform: translateY(calc(-100% - 32px));
}

@media (max-width: 782px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}

	body.admin-bar .wp-site-blocks > header.wp-block-template-part.is-hidden {
		transform: translateY(calc(-100% - 46px));
	}
}

@media (max-width: 600px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}

	body.admin-bar .wp-site-blocks > header.wp-block-template-part.is-hidden {
		transform: translateY(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header.wp-block-template-part {
		transition: none;
	}
}

/* Ankers (FAQ, studio's, gear) niet onder de header laten vallen. */
[id] {
	scroll-margin-top: 96px;
}

/* De achtergrond loopt door achter de 1280px-container. */
.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > .jf-main,
.wp-site-blocks > main {
	flex: 1;
}

/* ---------- Mobiel menu ---------- */

@media (max-width: 960px) {
	.jf-header {
		gap: 16px;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.jf-menu-toggle {
		position: relative;
		z-index: 2;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		width: 40px;
		height: 36px;
		padding: 0 9px;
		border: 1px solid var(--jf-divider);
		border-radius: 8px;
		background: transparent;
		cursor: pointer;
	}

	.jf-menu-toggle span {
		display: block;
		height: 1.5px;
		background: var(--jf-text);
		transition: transform .25s ease;
	}

	.jf-header.is-open .jf-menu-toggle span:first-child {
		transform: translateY(3.75px) rotate(45deg);
	}

	.jf-header.is-open .jf-menu-toggle span:last-child {
		transform: translateY(-3.75px) rotate(-45deg);
	}

	.jf-brand,
	.jf-lang,
	.jf-menu-cta {
		position: relative;
		z-index: 2;
	}

	.jf-primary-nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		box-sizing: border-box;
		padding: 104px var(--jf-gutter) 40px;
		background: var(--jf-bg);
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		transition: opacity .25s ease, visibility 0s linear .25s;
	}

	body.admin-bar .jf-primary-nav {
		padding-top: 150px;
	}

	.jf-header.is-open .jf-primary-nav {
		visibility: visible;
		opacity: 1;
		transition: opacity .25s ease;
	}

	.jf-primary-nav ul {
		flex-direction: column;
		gap: 4px;
	}

	.jf-primary-nav li {
		background: var(--jf-fade) no-repeat bottom / 100% 1px;
	}

	.jf-primary-nav a {
		display: block;
		padding: 14px 0;
		font-size: 28px;
		font-weight: 500;
		letter-spacing: -.02em;
	}

	body.jf-menu-open {
		overflow: hidden;
	}
}

@media (max-width: 420px) {
	.jf-menu-cta a {
		padding: 5px 8px;
		font-size: 13px;
	}
}