/* Global */
html{
	font-size: 14px;
}
body {
	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-family: var(--lato);

	font-size: clamp(0.75rem, 0.39vw + 0.649rem, 1rem);
	line-height: clamp(1.125rem, 0.585vw + 0.974rem, 1.5rem);

	color: var(--charcoal-brown);
}

figure {
	margin: 0;
}
img {
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

a:active,
a:hover {
	text-decoration: underline;
}

b,
strong {
	font-weight: 700;
}

/* https://fluidtypography.com viewport start 414 end 1440 */

/*font-size start 44 end 74*/
/*line-height start 1,5 end 1,1*/
h1 {
	font-size: clamp(2.75rem, 2.924vw + 1.993rem, 4.625rem);
	line-height: clamp(4.125rem, 1.501vw + 3.737rem, 5.088rem);
}

/*font-size min 30 max 50*/
/*line-height start 1,5 end 1,1*/
h2 {
	font-size: clamp(1.875rem, 1.949vw + 1.371rem, 3.125rem);
	line-height: clamp(2.813rem, 0.975vw + 2.56rem, 3.438rem);
}

/*font-size min 22 max 36*/
/*line-height start 1,5 end 1,1*/
h3 {
	font-size: clamp(1.375rem, 1.365vw + 1.022rem, 2.25rem);
	line-height: clamp(2.063rem, 0.643vw + 1.896rem, 2.475rem);
}

/*font-size min 16 max 28*/
/*line-height start 1,5 end 1,1*/
h4 {
	font-size: clamp(1rem, 1.17vw + 0.697rem, 1.75rem);
	line-height: clamp(1.5rem, 0.663vw + 1.329rem, 1.925rem);
}

/*font-size min 14 max 20*/
/*line-height start 1,5 end 1,1*/
h5 {
	font-size: clamp(0.875rem, 0.585vw + 0.724rem, 1.25rem);
	line-height: clamp(1.313rem, 0.097vw + 1.287rem, 1.375rem);
}

/*font-size min 12 max 16*/
/*line-height start 1,5 end 1,1*/
h6 {
	font-size: clamp(0.75rem, 0.39vw + 0.649rem, 1rem);
	line-height: clamp(1.1rem, -0.039vw + 1.135rem, 1.125rem);
}

/*font-size min 12 max 16*/
/*line-height start 1,5 end 1,1*/
p {
	/* font-size: clamp(0.75rem, 0.39vw + 0.649rem, 1rem);
	line-height: clamp(1.125rem, 0.585vw + 0.974rem, 1.5rem); */
	margin-block-start:0;
	margin-block-end: 0.8em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	margin-block-start: 0;
	margin-block-end: 0.3em;

	@media (width < 30em) {
		text-wrap: balance;
		word-break: break-word;
	}

}

ul {
	padding-inline-start: var(--size-fluid-500);
}

header{
	z-index: 999;
}

header,
footer,
section {
	> * {
		&:not(.fullwidth),
		.sitewidth {
			max-width: 1440px;
			width: 100%;
			margin-inline: auto;
			padding-inline: var(--size-fluid-700, 2rem);
			
			&:not(.npbs){
				padding-block-start: var(--size-fluid-900, 2rem);
				padding-block-start: 200px;
			}
			&:not(.npbe){
				padding-block-end: var(--size-fluid-900, 2rem);
				padding-block-end: 200px;
			}
			
			@media (width < 768px) {
				padding-inline: var(--size-fluid-900, 2rem);
				
				&:not(.npbs){ padding-block-start: var(--size-fluid-1000, 2rem); }
				&:not(.npbe){ padding-block-end: var(--size-fluid-1000, 2rem); }
			}
		}
	}
}

/* Hiding class, making content visible only to screen readers but not visually */
/* "sr" meaning "screen-reader" */
button {
	background: none;
	border: none;
}

.sr-only:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}


/* Primary Navigation */
.primary-navigation {
	--menu-duration: 300ms;

	display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
	gap: var(--size-fluid-300, 0);

	list-style: none;
	z-index: 999;

	
	ul { list-style: none; }

	li {
		position: relative;

		&:after {
			transform: scaleY(0);
			transform-origin: bottom;
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 3px;
			display: block;
			background-color: var(--mobile-menu-bg);
			transition: var(--menu-duration) transform ease,
				var(--menu-duration) opacity ease,
				var(--menu-duration) background-color ease;
			pointer-events: none;
			backface-visibility: hidden;
			opacity: 0;
		}

		&:hover:after,
		&.current-menu-item:after {
			transition: var(--menu-duration) transform ease,
				var(--menu-duration) opacity ease,
				var(--menu-duration) background-color ease;
			transform: none;
			opacity: 1;
			will-change: transform, opacity;
		}

		&:not(.btn) a {
			text-transform: uppercase;
			text-decoration: none;
			color: inherit;
			padding: var(--size-fluid-300, 1rem) var(--size-fluid-500, 1rem);
			display: block;
		}
	}

	.sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		background: var(--mobile-menu-bg);

		list-style: none;
		padding: 0.5rem 0;
		margin: 0;

		z-index: 999;

		box-shadow: 2px 2px 4px 2px color-mix(in oklab, var(--black) 25%, transparent);
		border-bottom-left-radius: var(--size-fluid-300);
		border-bottom-right-radius: var(--size-fluid-300);

		transform: translateY(-10px);
		max-height: 0;
		overflow: auto;
		opacity: 0;
		visibility: hidden;

		/* animatie */
		/* transition: max-height 0.3s ease, opacity 0.3s ease; */
		/* transition: transform 0.3s ease, opacity 0.3s ease; */
		transition:
			max-height 300ms ease,
			opacity 250ms ease,
			transform 300ms ease,
			visibility 0s linear 300ms;
		/* verberg na animatie */
		will-change: max-height, opacity, transform;

		li {
			white-space: nowrap;
		}
	}

	li:hover>.sub-menu,
	li:focus-within>.sub-menu {
		max-height: 40rem;
		/* ruim genoeg voor meerdere items */
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition:
			max-height 350ms ease,
			opacity 300ms ease,
			transform 350ms ease,
			visibility 0s;
		/* direct zichtbaar */
	}
	.menu-item-has-children {
		> a {
				position: relative;
				margin-right: 1rem;
				pointer-events: auto;
			}
		.chevron-toggle {
			position: absolute;
			right: -1rem;
			top: 50%;
			width: 1.5rem;
			height: 1.5rem;
			cursor: pointer;
			transform: translateY(-50%);

			display: flex;
			justify-content: center;
			align-items: center;
			align-content: center;

			&::after {
				content: "▸";
				font-size: 1rem;
				transform-origin: center;
				transition: transform 0.3s ease;
				transform: rotate(-90deg);
			}
		}
		&:hover {
			> a .chevron-toggle {
				&::after {
					transform-origin: center;
					transform: rotate(90deg);
				}
			}
		}
	}


	@media (width < 50em) {
		color: var(--white);
		position: fixed;
		z-index: 1000;
		inset: 0 0 0 30%;

		flex-direction: column;
		padding: min(30vh, 6rem) 2em;
		background: var(--primary);

		transform: translateX(100%);
		transition: transform 350ms ease-out;
		box-shadow: -1px 0px 4px 2px color-mix(in oklab, var(--black) 25%, transparent);

		&[data-visible="true"] {
			transform: translateX(0%);
			overflow: scroll;
		}

		.menu-item-has-children {
			> a {
				position: relative;
				margin-right: 2rem;
				pointer-events: auto;
			}

			.sub-menu {
				background: unset;
				position: unset;
				box-shadow: unset;
				transition-behavior: allow-discrete;
				transition: max-height 0.3s ease, opacity 0.3s ease;
				will-change: max-height, opacity;
				padding-inline-start: 1rem;

				li {
					white-space: break-spaces;
				}
			}

			.chevron-toggle {
				position: absolute;
				right: -2rem;
				top: 50%;
				width: 1.5rem;
				height: 1.5rem;
				cursor: pointer;
				transform: translateY(-50%);

				display: flex;
				justify-content: center;
				align-items: center;
				align-content: center;

				&::after {
					content: "▸";
					font-size: 1rem;
					transform-origin: center;
					transition: transform 0.3s ease;
					transform: rotate(-90deg);
				}
			}

			&.closed {
				.sub-menu {
					max-height: 0;
					overflow: hidden;
					opacity: 0;
					visibility: hidden;
					transition: max-height 0.3s ease, opacity 0.3s ease;
				}
				> a .chevron-toggle {
					&::after {
						transform-origin: center;
						transition: transform 0.3s ease;
						transform: rotate(-90deg);
					}
				}
			}

			&.open {
				> a .chevron-toggle {
					&::after {
						transform-origin: center;
						transform: rotate(90deg);
					}
				}

				.sub-menu {
					max-height: 300px;
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}
}

.mobile-nav-toggle {
	--width: 2rem;

	display: none;
	color: inherit;

	@media (width < 50em) {
		display: block;
		position: relative;
		z-index: 999999;
		width: var(--width);
		aspect-ratio: 1;
		
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;

		span:not(.sr-only) {
			display: block;
			position: absolute;
			height: calc(var(--width) / 5);
			width: 100%;
			background: currentColor;
			border-radius: 2px;
			opacity: 1;
			left: 0;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			-webkit-transition: .25s ease-in-out;
			-moz-transition: .25s ease-in-out;
			-o-transition: .25s ease-in-out;
			transition: .25s ease-in-out;
		}

		span:nth-child(2) {
			top: calc(var(--width) / 5 * 0);
		}

		span:nth-child(3),
		span:nth-child(4) {
			top: calc(var(--width) / 5 * 2);
		}

		span:nth-child(5) {
			top: calc(var(--width) / 5 * 4);
		}

		&[aria-expanded="true"] span:nth-child(2),
		&[aria-expanded="true"] span:nth-child(5) {
			top: calc(var(--width) / 5 * 2);
			width: 0%;
			left: 50%;
		}

		&[aria-expanded="true"] span {
			color:var(--white);
		}

		&[aria-expanded="true"] span:nth-child(3) {
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		&[aria-expanded="true"] span:nth-child(4) {
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}
	}
}

/* Footer */
footer a {
	text-decoration: none;
	color: inherit;

	&:hover {
		text-decoration: underline;
	}
}

.gform_required_legend {
	display: none !important;
}

.gform_wrapper.gravity-theme .gfield_label {
	font-weight: 500;
}

.gform_button {
	color: var(--white);
	background-color: var(--primary);
	border-top: 2px solid var(--primary);
	border-bottom: 2px solid var(--primary);
	border-left: 2px solid var(--primary);
	border-right: 2px solid var(--primary);
	font-weight: 400;
	text-decoration: none;
	font-size:0.8em;
	padding-top: calc(var(--size-fluid-100)/2);
	padding-right: var(--size-fluid-600);
	padding-bottom: calc(var(--size-fluid-100)/2);
	padding-left: var(--size-fluid-600);
	border-radius: 2px;
	box-shadow: 2px 2px 4px 2px #0000004D;
	line-height: 2em;
}

.gform_button:hover {
	color: var(--primary);
	background-color: transparent;
}