/* Global */
body { 
    font-family: 'Open Sans', sans-serif;
    /* background-color: var(--secondary);  */
}
figure { 
	margin: 0;
}

h1 { 
	font-size: clamp(2.75rem, 2.924vw + 1.993rem, 4.625rem); 
	line-height: clamp(4.125rem, 1.501vw + 3.737rem, 5.088rem);
}
h2 { 
	font-size: clamp(1.875rem, 1.949vw + 1.371rem, 3.125rem);
	line-height: clamp(2.813rem, 0.975vw + 2.56rem, 3.438rem); 
}
h3 { 
	font-size: clamp(1.375rem, 1.365vw + 1.022rem, 2.25rem);
	line-height: clamp(2.063rem, 0.643vw + 1.896rem, 2.475rem);
}
h4 { 
	font-size: clamp(1rem, 1.17vw + 0.697rem, 1.75rem);
	line-height: clamp(1.5rem, 0.663vw + 1.329rem, 1.925rem);
}
h5 { 
	font-size: clamp(0.875rem, 0.585vw + 0.724rem, 1.25rem);
	line-height: clamp(1.313rem, 0.097vw + 1.287rem, 1.375rem);
}
h6 { 
	font-size: clamp(0.75rem, 0.39vw + 0.649rem, 1rem);
	line-height: clamp(1.1rem, -0.039vw + 1.135rem, 1.125rem);
}

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 {
	display: flex;
	list-style: none;
	padding: 0;
	margin:0;
	gap:var(--size-fluid-300, 1rem);
	a {
		text-decoration: none;
		color: inherit;
		padding: var(--size-fluid-300, 1rem) var(--size-fluid-500, 1rem);
		display: block;
		&:hover {
			text-decoration: underline;
		}
	}
	li {
		position: relative;
	}
	.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: hidden;
		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 < 35em){
		position: fixed;
		z-index: 1000;
		inset: 0 0 0 30%;
		
		flex-direction: column;
		padding: min(30vh, 10rem) 2em;
		background: var(--purple);

		transform: translateX(100%);
		transition: transform 350ms ease-out;

		&[data-visible="true"]{
			transform:translateX(0%);
		}
		.sub-menu {
			position: static;
			max-height: none;
			opacity: 1;
			visibility: visible;
			transform: none;
			overflow: visible;
			box-shadow: none;
			background: transparent;
			padding: 0; /* sluit aan bij je mobile styling */
		}
	}
}
.mobile-nav-toggle {
	--width:2rem;

	display: none;
	color:inherit;
	
	@media (width < 35em){
		display: block;
		position: absolute;
		z-index: 999999;
		/* background:red; */
		width: var(--width);
		aspect-ratio: 1;
		/* top: 2rem; */
		right: 2rem;

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