:root {
	--header-tone-progress: 1;
	--header-tone-duration: 220ms;
	--header-tone-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.bricks-is-frontend > #brx-header,
body.lucratief-builder-preview #brx-header {
	--header-text-color: color-mix(
		in srgb,
		var(--site-color-ink) calc((1 - var(--header-tone-progress)) * 100%),
		var(--site-color-white) calc(var(--header-tone-progress) * 100%)
	);
	--header-tint-color: color-mix(
		in srgb,
		var(--header-surface-light) calc((1 - var(--header-tone-progress)) * 100%),
		var(--header-surface-dark) calc(var(--header-tone-progress) * 100%)
	);
	--header-border-color: color-mix(in srgb, var(--header-text-color) 14%, transparent);
	--header-accent-color: color-mix(
		in srgb,
		var(--primary) calc((1 - var(--header-tone-progress)) * 100%),
		var(--primary-l-7) calc(var(--header-tone-progress) * 100%)
	);
	color: var(--header-text-color);
}

body.bricks-is-frontend > #brx-header {
	z-index: 60;
}

#brx-header [data-glass-surface="header"] {
	--glass-tint-color: var(--header-tint-color);
	border-color: var(--header-border-color);
	color: var(--header-text-color);
	transition:
		border-color var(--header-tone-duration) var(--header-tone-ease),
		box-shadow var(--header-tone-duration) var(--header-tone-ease);
}

/* #brx-header [data-header-navigation="primary"],
#brx-header [data-header-navigation="primary"] > .brxe-text-link,
#brx-header [data-header-navigation="primary"] > .brxe-nav-nested > .brx-nav-nested-items > li > a,
#brx-header [data-header-navigation="primary"] > .brxe-nav-nested > .brx-nav-nested-items > li > .brx-submenu-toggle,
#brx-header [data-header-navigation="primary"] > .brxe-nav-nested > .brx-nav-nested-items > li > .brx-submenu-toggle > :where(span, button, svg) {
	color: var(--header-text-color);
} */

@media (max-width:991px) {
	#brx-header [data-header-navigation="primary"] > .brxe-nav-nested > .brx-nav-nested-items > li > .brx-submenu-toggle > :where(span, button, svg) {
		font-size: var(--text-p2);
		padding-left: 0;
	}
}
#brx-header [data-glass-surface="header"] .brxe-logo img,
#brx-header [data-glass-surface="header"] img[src*="Lucratief_logo-white"] {
	filter: brightness(var(--header-tone-progress));
}

@media (min-width: 1101px) {
	[data-mega-menu-boundary="desktop"] {
		inline-size: min(
			calc(100% - var(--service-menu-shell-viewport-inset)),
			var(--service-menu-shell-max-width)
		);
		margin-inline: auto;
	}

	[data-header-navigation="primary"] > .brxe-nav-nested > .brx-nav-nested-items {
		column-gap: var(--site-space-navigation) !important;
	}

	[data-service-menu-dropdown="true"] > .brx-dropdown-content {
		background: transparent !important;
		margin-block-start: var(--service-menu-shell-offset);
	}
}

/*
 * Bricks offsets its header for the WordPress admin bar, but the responsive
 * glass surface is positioned independently.
 */
body.bricks-is-frontend.admin-bar #brx-header [data-glass-surface="header"] {
	top: var(--wp-admin--admin-bar--height);
}

@media (max-width: 767px) {
	#brx-header [data-header-navigation="primary"] .brxe-nav-nested.brx-open > .brx-nav-nested-items {
		align-items: stretch;
		background: var(--header-tint-color);
		backdrop-filter: blur(28px) saturate(1.35);
		-webkit-backdrop-filter: blur(28px) saturate(1.35);
		color: var(--header-text-color);
		gap: 0;
		height: 100dvh;
		justify-content: flex-start;
		overscroll-behavior: contain;
		padding:
			clamp(104px, 17dvh, 132px)
			clamp(20px, 6vw, 32px)
			max(24px, env(safe-area-inset-bottom));
		scrollbar-gutter: stable;
		animation: lucratief-mobile-nav-surface-in 280ms var(--header-tone-ease) both;
	}

	#brx-header [data-header-navigation="primary"] .brxe-nav-nested.brx-open > .brx-nav-nested-items > li {
		inline-size: 100%;
	}

	#brx-header [data-header-navigation="primary"] .brxe-nav-nested.brx-open > .brx-nav-nested-items > li > a,
	#brx-header [data-header-navigation="primary"] .brxe-nav-nested.brx-open > .brx-nav-nested-items > li > .brx-submenu-toggle {
		align-items: center;
		border-block-end: 1px solid var(--header-border-color);
		color: inherit;
		display: flex;
		font-family: var(--site-font-heading);
		font-size: var(--text-p2);
		font-weight: 600;
		justify-content: space-between;
		line-height: 1.15;
		min-block-size: 64px;
		padding: 15px 2px;
	}

	#brx-header [data-header-navigation="primary"] .brxe-nav-nested.brx-open > .brx-nav-nested-items > li:not(.brx-toggle-div) {
		animation: lucratief-mobile-nav-item-in 320ms var(--header-tone-ease) both;
		animation-delay: var(--lucratief-mobile-nav-item-delay, 70ms);
	}

	#brx-header [data-header-navigation="primary"] .brxe-nav-nested.brx-open #brxe-wuzsnr {
		color: var(--header-text-color);
		opacity: 0.56;
		transition: color var(--header-tone-duration) var(--header-tone-ease);
	}

	#brx-header [data-header-navigation="primary"] .brxe-nav-nested.brx-open #brxe-hjecjm .icon {
		color: var(--header-text-color);
		transition: color var(--header-tone-duration) var(--header-tone-ease);
	}

	#brx-header [data-header-navigation="primary"] .brxe-nav-nested.brx-open #brxe-hjecjm .icon:hover {
		color: var(--header-accent-color);
	}

	#brx-header [data-header-navigation="primary"] .brxe-nav-nested.brx-open .brxe-dropdown.open > .brx-dropdown-content {
		inline-size: 100%;
		margin-block: 8px 14px;
		overflow: visible;
	}

	#brx-header [data-header-navigation="primary"] .brxe-nav-nested > .brxe-toggle {
		/* border: 1px solid var(--header-border-color); */
		border-radius: 999px;
		color: var(--header-text-color);
		/* min-block-size: 48px;
		min-inline-size: 48px; */
		transition:
			background-color 160ms ease,
			border-color var(--header-tone-duration) var(--header-tone-ease),
			color var(--header-tone-duration) var(--header-tone-ease),
			transform 160ms ease;
	}

	#brx-header [data-header-navigation="primary"] .brxe-nav-nested > .brxe-toggle:hover {
		/* background: color-mix(in srgb, var(--header-text-color) 8%, transparent); */
	}

	#brx-header [data-header-navigation="primary"] .brxe-nav-nested > .brxe-toggle:active {
		transform: scale(0.96);
	}
}

@keyframes lucratief-mobile-nav-surface-in {
	from {
		opacity: 0;
		transform: translate3d(18px, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes lucratief-mobile-nav-item-in {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	#brx-header [data-glass-surface="header"] {
		transition: none;
	}

	#brx-header [data-header-navigation="primary"] .brxe-nav-nested.brx-open > .brx-nav-nested-items,
	#brx-header [data-header-navigation="primary"] .brxe-nav-nested.brx-open > .brx-nav-nested-items > li:not(.brx-toggle-div) {
		animation: none;
	}
}