/* Global */
body { 
    font-family: 'Open Sans', sans-serif;
    /* background-color: var(--secondary);  */
}
figure { 
	margin: 0;
}
/* 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.1rem, -0.039vw + 1.135rem, 1.125rem);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin: 0.3em 0;
  @media (width < 30em){
	text-wrap: balance;
	word-break: break-word;	
  }
  
}

header,
footer,
section {
	> div:not(.fullwidth){
		max-width: 1440px;
		width: 100%;
		margin-inline: auto;
		padding-inline: var(--size-fluid-500, 2rem);
		padding-block: var(--size-fluid-500, 2rem);

	}
}

section > div:not(.fullwidth) {
	padding-block: var(--size-fluid-900, 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;
	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);

		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);

		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;
			}
			.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;
	}
}

.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: 3px solid var(--primary);
    border-bottom: 3px solid var(--primary);
    border-left: 3px solid var(--primary);
    border-right: 3px solid var(--primary);
    font-weight: 700;
    text-decoration: none;
    padding-top: var(--size-fluid-300);
    padding-right: var(--size-fluid-400);
    padding-bottom: var(--size-fluid-300);
    padding-left: var(--size-fluid-400);
    border-radius: var(--size-fluid-100);
    box-shadow: 2px 2px 4px 2px #0000004D;
}
.gform_button:hover { color: var(--primary); background-color: transparent; }