/* Global */
body { 
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-family: var(--poppins);
	font-weight: 300;
    /* background-color: var(--secondary);  */
	font-size: clamp(0.75rem, 0.39vw + 0.649rem, 1rem);
	line-height: clamp(1.125rem, 0.585vw + 0.974rem, 1.5rem);
}
figure { 
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}
a:active,
a:hover {
	text-decoration: underline;
}
b, strong {
    font-weight: 600;
}

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

/*font-size start 44 end 74*/
/*line-height start 1,5 end 1,1*/ 
/*font-size min 30 max 50*/
/*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: clamp(1.875rem, 1.949vw + 1.371rem, 3.125rem);
	line-height: clamp(2.813rem, 0.975vw + 2.56rem, 3.438rem); 
}
/*font-size min 30 max 50*/
/*line-height start 1,5 end 1,1*/
/*font-size min 26 max 40*/
/*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: clamp(1.625rem, 1.365vw + 1.272rem, 2.5rem);
	line-height: clamp(2.438rem, 0.487vw + 2.311rem, 2.75rem);
}
/*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: clamp(1.1rem, -0.039vw + 1.135rem, 1.125rem);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--minion-pro);
	font-weight: 400;
	margin-block-start: 0;
	margin-block-end: 0.3em;
	@media (width < 30em){
		text-wrap: balance;
		word-break: break-word;	
	}
}

table {
    width: 100%;
    border-collapse: collapse;
	border: 2px solid #F5F4F0;
}

table td {
    padding: .1em .5em;
}
table tr:nth-child(even) {
	background-color: #F5F4F0;
}

header,
footer,
section {
	> *:not(.fullwidth){
		max-width: 1440px;
		width: 100%;
		margin-inline: auto;
		padding-inline: var(--size-fluid-500, 2rem);
		padding-block: var(--size-fluid-500, 2rem);
		@media (width < 1120px){
			&.wrapper{
			padding-inline: 0;
			}
		}
	}
}

header {
	position: sticky;
	top:0;
	z-index: 10;
}

section > *:not(.fullwidth) {
	padding-block: var(--size-fluid-900, 2rem);
}

.wrapper {
	--container: 1440px;
	--gutter: 24px;
	display: grid;
	grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start]
      minmax(0, calc(var(--container) / 2))
      minmax(0, calc(var(--container) / 2))
    [content-end]
    minmax(var(--gutter), 1fr)
    [full-end];
}

.wrapper > * {
	grid-column: content-start / content-end;
}

.breakout-left {
	grid-column: full-start / content-end;

	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--gutter), 1fr)
		[content-start]
		minmax(0, calc(var(--container) / 2))
		minmax(0, calc(var(--container) / 2))
		[content-end];
	@media (width < 1120px){
		grid-column: full-start / full-end;
	}
	@media (width < 1024px){
		grid-template-columns: 1fr;
	}
}

/* vlak links: full → midden content */
.breakout-left .split-left{
  grid-column: full-start / 3;
}

/* vlak rechts: midden → content-end */
.breakout-left .split-right{
  grid-column: 3 / content-end;
}

.breakout-left .content {
	display: grid;
	grid-column: content-start / content-end;
}

.breakout-right {
	grid-column: content-start / full-end;

	display: grid;
	 grid-template-columns:
    [content-start]
      minmax(0, calc(var(--container) / 2))
      minmax(0, calc(var(--container) / 2))
    [content-end]
    minmax(var(--gutter), 1fr)
    [full-end];
	@media (width < 1120px){
		grid-column: full-start / full-end;
	} 
	@media (width < 1024px){
		grid-template-columns: 1fr;
	}
}
/* vlak links: content-start → midden */
.breakout-right .split-left{
  grid-column: content-start / 2;
}

/* vlak rechts: midden → full-end */
.breakout-right .split-right{
  grid-column: 2 / full-end;
}
.breakout-right .content {
	display: grid;
	grid-column: content-start / content-end;
}

[class*="btn"] {
	font-size: 0.7em;
	letter-spacing: 0.25em;
	font-weight: 700;
	text-decoration: none;
	padding-block: calc(var(--size-fluid-300) / 2);
	padding-inline: var(--size-fluid-500);
	border-top-left-radius: var(--size-fluid-600);
	border-bottom-right-radius: var(--size-fluid-600);
	text-transform: uppercase;
}

/* 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;
	list-style: none;
	padding: 0;
	margin:0;
	gap:var(--size-fluid-300, 0);
	a {
		text-decoration: none;
		color: inherit;
		padding: var(--size-fluid-300, 1rem) var(--size-fluid-500, 1rem);
		display: block;
	}
	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(--white);
			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;
		}
	}
	.sub-menu {
		position: absolute;
		top:100%;
		left: 0;
		background: var(--primary);
		color: var(--white);

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

		box-shadow: 2px 2px 4px 2px #0000004D;
		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 */
	} 

	@media (width < 50em){
		position: fixed;
		z-index: 1000;
		inset: 0 0 0 30%;
		
		flex-direction: column;
		padding: min(30vh, 6rem) 2em;
		background: var(--primary);
		color:var(--white);

		transform: translateX(100%);
		transition: transform 350ms ease-out;
		box-shadow: -1px 0px 4px 2px #0000004D;

		&[data-visible="true"]{
			transform:translateX(0%);
			overflow: scroll;
		}
		.menu-item-has-children {
			> a {
				position: relative;
    			margin-right: 2rem;
				pointer-events: auto;
			}
			.sub-menu { 
				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%) rotate(-90deg);
				transition: transform 0.3s ease;
				&::after {
					content: "▸";
					font-size: 1rem;
				}
			}

			&.closed {
				.sub-menu { 
					max-height: 0;
					overflow: hidden;
					opacity: 0;
					visibility: hidden;
					transition: max-height 0.3s ease, opacity 0.3s ease;
				}
			}
			&.open {
				> a .chevron-toggle{
					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: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;
	}
}

.visuallyhidelabel label,
.gfield--type-consent legend,
.visuallyhidelabel legend {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.gform_required_legend {
	display: none !important;
}

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

.gfield input[type=text],
.gfield input[type=email],
.gfield input[type=tel],
.gfield select,
.gfield textarea {
	box-shadow: 0px 3px 11px 0px rgb(0 0 0 / 16%);
	border: none;
}
/* .gfield select:not(:has(option.gf_placeholder:checked)) {
    color: #F00;
} */

.gfield input[type=text]::placeholder,
.gfield input[type=email]::placeholder,
.gfield input[type=tel]::placeholder,
.gfield select option.gf_placeholder,
.gfield select:has(option.gf_placeholder:checked),
.gfield textarea::placeholder {
	color:color-mix(in oklab, var(--black) 50%, transparent);
}
.gform_wrapper.gravity-theme .gsection {
	border-bottom: none;
	padding-block-end: 1.5em;
	h3 {
		display: none;
	}
}

.gform_button {
	color: var(--white);
	background-color: var(--primary);

	font-size: 0.7em;
	letter-spacing: 0.25em;
	font-weight: 700;
	text-decoration: none;
	padding-block: calc(var(--size-fluid-300) / 2);
	padding-inline: var(--size-fluid-500);
	border-top-left-radius: var(--size-fluid-600);
	border-bottom-right-radius: var(--size-fluid-600);
	text-transform: uppercase;
	border: 3px solid var(--primary);
	/* box-shadow: 0px 3px 11px 2px rgb(0 0 0 / 16%); */
}

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

.gform_wrapper.gravity-theme #field_submit, .gform_wrapper.gravity-theme .gform_footer {
	justify-content: center;
}

@media (max-width: 768px) {
  table.table-flip {
    width: 100%;
    border-collapse: collapse;
	border:none;
  }
  table.table-flip caption {
	display: block;
  }

  table.table-flip thead {
    display: none; /* header verbergen */
  }

  table.table-flip,
  table.table-flip tbody,
  table.table-flip tr,
  table.table-flip td {
    display: block;
    width: 100%;
  }

  table.table-flip tr {
    border: 1px solid #e5e5e5;
    margin: 0 0 12px;
    padding: 8px;
    border-radius: 8px;
  }

  table.table-flip td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    text-align: right; /* value rechts */
    border: 0;
    border-bottom: 1px dashed #eee;
  }

  table.table-flip td:last-child {
    border-bottom: 0;
  }

  table.table-flip td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    flex: 1;
  }
}