/* ==========================================================================
   Frijns theme — sticky header & navigatie
   ========================================================================== */

/* Let op: geen backdrop-filter op .site-header zelf — dat maakt de header
   het containing block voor het position:fixed menu-overlay op mobiel,
   waardoor het menu in de header geklemd raakt. Blur zit op de ::before. */
/* Het meeplakken moet op het template-part gebeuren, niet op .site-header zelf.
   Een sticky element blijft namelijk binnen zijn eigen ouder, en die ouder is
   precies zo hoog als de header — daardoor plakte er niets. */
header.wp-block-template-part:has(.site-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header {
	background: rgba(255, 255, 255, 0.95);
	box-shadow: var(--shadow-header);
}

.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.site-header__inner {
	width: min(1320px, 100%);
	margin-left: auto;
	margin-right: auto;
	padding: clamp(0.6rem, 1vw, 0.9rem) clamp(1rem, 3vw, 2rem);
	align-items: center;
}

.site-header__logo img {
	height: clamp(50px, 5.5vw, 82px);
	width: auto;
	display: block;
}

.site-header__nav {
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
}

/* --------------------------------------------------------------------------
   Announcement-bar (klantenstop) — direct onder de header.
   Weghalen kan in wp-admin via Weergave → Editor → Templateonderdelen → Header.
   -------------------------------------------------------------------------- */

.announcement-bar {
	background: var(--color-deep);
	padding: 0.6rem clamp(1rem, 3vw, 2rem);
}

.announcement-bar__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.95);
	font-size: var(--wp--preset--font-size--small, 0.95rem);
	line-height: 1.5;
}

.announcement-bar__text a {
	color: var(--color-white);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.announcement-bar__text a:hover {
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Navigatie — desktop
   Kleuren expliciet en met hoge specificiteit, zodat blok-presets of
   gegenereerde styles ze nooit onleesbaar kunnen maken.
   -------------------------------------------------------------------------- */

.site-header .wp-block-navigation .wp-block-navigation-item a,
.site-header .wp-block-navigation .wp-block-navigation-item button {
	color: var(--color-navy);
	font-weight: 600;
	font-size: clamp(0.95rem, 0.2vw + 0.9rem, 1.05rem);
}

.site-header .wp-block-navigation .wp-block-navigation-item a:hover {
	color: var(--color-primary);
}

.site-nav .wp-block-navigation__container {
	gap: clamp(0.9rem, 1.6vw, 1.75rem);
}

.site-nav .wp-block-navigation-item > a {
	padding: 0.4rem 0.15rem;
	position: relative;
}

/* --- Waar ben ik? Actieve pagina duidelijk markeren ---
   Alle regels hieronder gelden alleen buiten het mobiele menupaneel: daar is
   de achtergrond blauw en zou een lichte vulling als een vlek ogen. */

/* Desktop: het huidige item blauw met een accentstreepje eronder */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .is-current-page > a,
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .is-current-page > a:hover {
	color: var(--color-primary);
	font-weight: 700;
}

/* Alleen op desktop: in het uitgeklapte paneel staat al een wit streepje */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .is-current-page > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.45rem;
	height: 3px;
	border-radius: 3px;
	background: var(--color-primary);
}

/* Bovenliggend item (bijv. Diensten bij een dienstenpagina): alleen kleur */
.site-header .site-nav .wp-block-navigation__container > .is-current-ancestor > a,
.site-header .site-nav .wp-block-navigation__container > .is-current-ancestor > button {
	color: var(--color-primary);
	font-weight: 700;
}

/* Actief item in het dropdownmenu (desktop) */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .is-current-page > a {
	background: var(--color-tint);
	color: var(--color-primary) !important;
	font-weight: 700;
}

/* Dropdown (Diensten) — witte kaart die net onder het menu-item zweeft */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--color-white) !important;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
	box-shadow: 0 4px 12px rgba(10, 18, 64, 0.06), 0 18px 40px rgba(10, 18, 64, 0.14);
	padding: 0.5rem;
	margin-top: 0.65rem;
}

/* WordPress zet het paneel zelf op 200px; daar breekt "Voor de ondernemer"
   op twee regels af. De items mogen niet afbreken, de kaart groeit mee. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	min-width: 15rem !important;
}

/* WordPress lijnt het paneel rechts uit omdat het menu rechts in de header
   staat. Daardoor zweeft de kaart los naast "Diensten" en wijst het pijltje
   naar niets. Uitlijnen op het menu-item zelf. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container {
	left: 0 !important;
	right: auto !important;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a {
	white-space: nowrap;
}

/* Onzichtbare brug over de tussenruimte. Zonder deze strook verliest de muis
   het hover-contact zodra hij van "Diensten" naar de kaart beweegt en klapt
   het menu dicht voordat je een item kunt aanklikken. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container::after {
	content: '';
	position: absolute;
	top: -0.7rem;
	left: 0;
	right: 0;
	height: 0.7rem;
}

/* Klein pijltje naar het bovenliggende menu-item */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container::before {
	content: '';
	position: absolute;
	top: -0.4rem;
	left: 1.5rem;
	width: 0.8rem;
	height: 0.8rem;
	background: var(--color-white);
	border-left: 1px solid var(--color-border);
	border-top: 1px solid var(--color-border);
	transform: rotate(45deg);
	border-radius: 2px 0 0 0;
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	color: var(--color-navy) !important;
	padding: 0.6rem 0.85rem;
	border-radius: var(--radius-s);
	font-size: 0.98rem;
	line-height: 1.35;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a:hover {
	background: var(--color-tint);
	color: var(--color-primary) !important;
}

/* Het dropdownpaneel verschijnt met een zachte beweging en sluit met een
   korte respijttijd, zodat een schuine muisbeweging het niet meteen wegklapt. */
@media (min-width: 900px) {
	.site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		transform: translateY(-6px);
		transition:
			opacity 0.2s ease 0.14s,
			transform 0.2s ease 0.14s,
			visibility 0s linear 0.34s;
	}

	.site-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.site-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
		transform: translateY(0);
		transition:
			opacity 0.16s ease,
			transform 0.16s ease,
			visibility 0s linear;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container,
	.site-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.site-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
		transition: none;
		transform: none;
	}
}

/* Pijltje bij submenu-item */
.site-header .wp-block-navigation__submenu-icon {
	color: var(--color-navy);
}

/* Header CTA-knoppen */
.site-header__cta {
	gap: 0.6rem;
}

.site-header__cta .wp-block-button__link {
	padding: 0.6rem 1.4rem;
	font-size: clamp(0.9rem, 0.2vw + 0.85rem, 1rem);
}

/* Exact-loginknop: rustige outline met extern pijltje */
.site-header__exact .wp-block-button__link {
	padding: 0.55rem 1.15rem;
}

.site-header__exact .wp-block-button__link::after {
	content: '\2197';
	font-size: 0.8em;
	margin-left: 0.35rem;
	display: inline-block;
}

/* "Inloggen Exact" hoort op desktop niet tussen de menu-items
   (daar staat de knop al); alleen tonen in de mobiele overlay */
.site-nav .nav-exact {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .nav-exact {
	display: block !important;
	margin-top: 0.5rem;
	padding-top: 1.3rem !important;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}


/* Tussen 900 en 1200px wordt het krap in de balk: daar valt de Exact-knop weg
   (die staat ook in het menu) en worden de tussenruimtes kleiner, zodat het
   volledige menu zo lang mogelijk zichtbaar blijft. */
@media (max-width: 1199px) and (min-width: 900px) {
	.site-header .site-header__cta .site-header__exact {
		display: none;
	}

	/* De knop verdwijnt hier, dus tonen we Inloggen Exact als menu-item.
	   Op een iPad in liggende stand viel hij anders helemaal weg. */
	.site-header .site-nav .nav-exact {
		display: block;
	}

	.site-header .site-nav .nav-exact > a::after {
		content: '\2197';
		font-size: 0.8em;
		margin-left: 0.25rem;
	}

	.site-header__inner {
		padding-inline: clamp(0.75rem, 2vw, 1.25rem);
	}

	.site-header__nav {
		gap: 0.9rem;
	}

	.site-nav .wp-block-navigation__container {
		gap: 0.9rem;
	}

	.site-header .site-nav .wp-block-navigation-item a {
		font-size: 0.95rem;
	}

	.site-header__logo img {
		height: 52px;
	}
}

/* Onder 900px: hamburger-menu. WordPress schakelt standaard pas bij 600px om;
   daarboven vallen de menu-items en knoppen uit de balk (o.a. zichtbaar bij
   sterk inzoomen). */
@media (max-width: 899px) {
	.site-header .site-header__cta.wp-block-buttons {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container-open,
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   Navigatie — mobiel menupaneel

   De header blijft staan; het paneel schuift van rechts onder de header
   vandaan naar binnen. Het hamburger-icoon verdwijnt en op exact dezelfde
   plek verschijnt het kruisje, zodat het lijkt alsof het icoon omklapt.
   -------------------------------------------------------------------------- */

/* De hamburgerknop is tevens de sluitknop: het icoon klapt om naar een kruis.
   Zo staat het kruisje per definitie op exact dezelfde plek. */
/* Let op: hier géén display-waarde zetten — dat zou de regel van WordPress
   overschrijven die de knop op ruimere schermen verbergt. De media query
   onderaan regelt wanneer hij verschijnt. */
.site-header .wp-block-navigation__responsive-container-open {
	position: relative;
	z-index: 100002;
	width: 2.5rem;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	color: var(--color-navy);
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

.site-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--color-tint);
}

/* Standaard-icoon van WordPress verbergen; wij tekenen zelf de streepjes */
.site-header .wp-block-navigation__responsive-container-open > svg {
	display: none;
}

.frijns-burger {
	position: relative;
	display: block;
	width: 1.375rem;
	height: 1rem;
}

.frijns-burger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.16s ease;
}

.frijns-burger span:nth-child(1) { top: 0; }
.frijns-burger span:nth-child(2) { top: calc(50% - 1px); }
.frijns-burger span:nth-child(3) { bottom: 0; }

/* Open: bovenste en onderste streep draaien naar een kruis, midden vervaagt */
.wp-block-navigation__responsive-container-open.is-open .frijns-burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.wp-block-navigation__responsive-container-open.is-open .frijns-burger span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.4);
}

.wp-block-navigation__responsive-container-open.is-open .frijns-burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.frijns-burger span {
		transition: none;
	}
}

/* De aparte sluitknop van WordPress is niet meer nodig */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: none !important;
}

/* De headerbalk blijft zichtbaar: het paneel begint eronder. De variabele
   --header-bottom wordt door menu-toggle.js gezet op de werkelijke onderkant
   van de balk (in CSS berekenen gaat mis zodra er bijvoorbeeld een adminbalk
   boven staat); de calc() eronder is de terugval als JS niet draait. */
.site-header__inner {
	position: relative;
	z-index: 2;
}

/* Het menupaneel valt over de volle breedte uit, direct onder de headerbalk.
   De header blijft dus zichtbaar en de hamburger erin wordt het kruisje. */
.wp-block-navigation__responsive-container.is-menu-open {
	display: block !important;
	position: fixed !important;
	top: var(--header-bottom, var(--header-h)) !important;
	left: 0 !important;
	right: 0 !important;
	bottom: auto !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100%;
	height: auto;
	max-height: calc(100dvh - var(--header-bottom, var(--header-h)));
	z-index: 99998 !important;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: linear-gradient(170deg, var(--color-deep) 0%, var(--color-primary-dark) 100%) !important;
	color: var(--color-white);
	padding: clamp(1.5rem, 5vw, 2.25rem) clamp(1.5rem, 6vw, 2.5rem) clamp(2rem, 6vw, 2.75rem) !important;
	box-shadow: 0 24px 48px rgba(4, 8, 36, 0.3);
	animation: frijns-panel-in 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes frijns-panel-in {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

/* Menu-inhoud netjes uitlijnen met de rest van de site */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: min(1320px, 100%);
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}

/* Blok-layout in de overlay: immuun voor de justify/flex-instellingen
   van het desktopmenu, en kan nooit buiten het scherm vallen */
/* De dialog-wrapper niet als positioneringsanker gebruiken, anders belandt de
   sluitknop onder de paneelpadding in plaats van op de hamburgerplek. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: static !important;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	margin: 0 0 1.3rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
	display: inline-block;
}

/* Submenu-toggle (pijltje) naast het item i.p.v. eronder */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: inline-block !important;
	width: auto !important;
	vertical-align: middle;
}

/* Actieve pagina in het mobiele paneel: wit streepje ervoor, geen vulling.
   Een lichte achtergrond zou op het blauw als een vage vlek ogen. */
.wp-block-navigation__responsive-container.is-menu-open .is-current-page > a {
	position: relative;
	padding-left: 1rem !important;
	background: none !important;
	color: var(--color-white) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .is-current-page > a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.3em;
	bottom: 0.3em;
	width: 3px;
	border-radius: 3px;
	background: var(--color-white);
}

/* Bovenliggend item in het paneel iets lichter accentueren */
.wp-block-navigation__responsive-container.is-menu-open .is-current-ancestor > a,
.wp-block-navigation__responsive-container.is-menu-open .is-current-ancestor > button {
	color: var(--color-white) !important;
}

/* Geen vulling of gloed op links in het paneel — ook niet bij hover/focus */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:active {
	background: none !important;
	box-shadow: none;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Submenu in het paneel: dichtgeklapt tenzij de bezoeker het openzet (of er
   staat een pagina uit dat submenu open). menu-toggle.js zet de class. */
/* Submenu in het paneel staat altijd open — zo werkt het overlay-menu van
   WordPress. Het pijltje zou dus een knop zijn die niets doet; die verbergen
   we, en de dienstenpagina's staan er ingesprongen onder. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	width: 100% !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation-item__content {
	display: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.4rem;
	align-items: flex-start;
}

/* Alle links en knoppen in het paneel: wit */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item button,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	color: var(--color-white) !important;
	font-size: clamp(1.1rem, 0.5vw + 1rem, 1.28rem);
	font-weight: 700;
}

/* Submenu in de overlay: geen witte kaart maar ingesprongen lijst */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0.4rem 0 0 1.1rem !important;
	min-width: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	color: rgba(255, 255, 255, 0.88) !important;
	font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.2rem) !important;
	font-weight: 600;
	padding: 0.35rem 0 !important;
}

/* Actief submenu-item: het streepje moet vóór de tekst staan, niet erdoorheen */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .is-current-page > a {
	padding-left: 1rem !important;
	color: var(--color-white) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a:hover {
	color: var(--color-white) !important;
	background: transparent !important;
}