/* Global */
body {
	font-family: 'Open Sans', sans-serif;
	font-family: var(--lato);
	font-weight: 300;
    
    font-size: clamp(0.75rem, 0.39vw + 0.649rem, 1rem);
	/* line-height: clamp(1.1rem, -0.039vw + 1.135rem, 1.125rem); */
	line-height: clamp(0.825rem, 1.053vw + 0.553rem, 1.5rem);
    @media (width < 30em) {
        font-weight: 400;
    }
}

figure {
	margin: 0;
}

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

/*font-size start 26 end 74*/
/*line-height start 1,5 end 1,1*/
h1 {
	font-size: clamp(1.625rem, 4.678vw + 0.414rem, 4.625rem);
	line-height: clamp(2.438rem, 4.133vw + 1.368rem, 5.088rem);
}

/*font-size min 24 max 50*/
/*line-height start 1,1 end 1,5*/
h2 {
	font-size: clamp(1.5rem, 2.534vw + 0.844rem, 3.125rem);
	/* line-height: clamp(2.25rem, 1.852vw + 1.771rem, 3.438rem); */
	line-height: clamp(1.65rem, 4.737vw + 0.424rem, 4.688rem);
}

/*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,1 end 1,5*/
p {
	font-size: clamp(0.75rem, 0.39vw + 0.649rem, 1rem);
	/* line-height: clamp(1.1rem, -0.039vw + 1.135rem, 1.125rem); */
	line-height: clamp(0.825rem, 1.053vw + 0.553rem, 1.5rem);

	margin-block-start: 0;
	margin-block-end: clamp(0.825rem, 0.663vw + 0.654rem, 1.25rem);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--lato);
	font-weight: 100;
	margin-block: 0 0.3em;

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

}

/* header,
footer,
section {
	>*:not(.fullwidth) {
		max-width: 1440px;
		width: 100%;
		margin-inline: auto;
		padding-inline: var(--size-fluid-500, 2rem);
	}
	>*:not(.fullwidth):not([data-visible]) {
		padding-block: var(--size-fluid-900, 2rem);
	}
	>.fullwidth {
		max-width: 1920px;
		width: 100%;
		margin-inline: auto;
	}
}*/



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

			&:not(.npbs){
				padding-block-start: var(--size-fluid-900, 2rem);
			}
			&:not(.npbe){
				padding-block-end: var(--size-fluid-900, 2rem);
			}
		}
		&.fullwidth {
			max-width: 1920px;
			width: 100%;
			margin-inline: auto;
			/* overflow: hidden; */
		}
	}
}

header,
footer {
	position: relative;
	>*:not(.fullwidth):not([data-visible]) {
		padding-block: var(--size-fluid-400, 2rem);
	}
}

.rank-math-breadcrumb {
	p {
		color: var(--black);
		margin-block-end: 0;
	}
	a { 
		text-decoration: none; 
		color:inherit;
	}
}
/* section>*:not(.fullwidth) {
	padding-block: var(--size-fluid-900, 2rem);
} */

[class*="btn"] {
	font-weight: 400;
	text-decoration: none;
	padding-block: var(--size-fluid-300);
	padding-inline: var(--size-fluid-400);
}

video {
	max-width: 100%;
}

/* 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);
	padding-block: var(--size-fluid-700, 1rem);
	font-size: 1em;

	a {
		text-decoration: none;
		color: inherit;
		padding-inline: var(--size-fluid-500, 1rem);
		display: block;
	}

	.sub-menu {
		/* position: relative;
		top: 100%;
		left: 0; */
		/* background: var(--primary); */

		list-style: none;
		/* padding-block: 0.5rem; */
		padding-inline: 0;
		margin: 0;

		font-size: 0.9em;
    	font-style: italic;

		/* 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: 1;
		visibility: visible;

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

	@media (width < 50em) {
		position: fixed;
		z-index: 99999;
		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;
		}

		li {
			position: relative;

			a {
				padding-block: var(--size-fluid-300, 1rem);
			}

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

		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: 2rem;
				pointer-events: auto;
			}

			.sub-menu {
				background: var(--primary);
				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;
				}
			}
		}
	}
}

.nav-wrapper {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-10px);
	transition:
		max-height 300ms ease,
		opacity 250ms ease,
		transform 300ms ease;

	&[data-visible="true"] {
		max-height: 60rem;
		opacity: 1;
		transform: translateY(0);
	}

	@media (width < 50em) {
		max-height: unset;
		overflow: visible;
		opacity: 1;
		transform: none;
	}
}

/* Toggle */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	cursor: pointer;
	color: inherit;
	position: relative;
	z-index: 999999;

	.nav-label {
		display: inline-block;
		font-weight: 300;
	}

	@media (width < 50em) {
		--width: 2rem;

		width: var(--width);
		aspect-ratio: 1;

		.nav-label {
			display: none;
		}

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

		/* Let op: child index is verschoven door <strong> */
		span:nth-child(3) {
			top: calc(var(--width) / 5 * 0);
		}

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

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

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

			span:nth-child(4) {
				transform: rotate(45deg);
			}

			span:nth-child(5) {
				transform: rotate(-45deg);
			}
		}
	}
}

/* 
.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-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)){
	--gf-local-font-family: var(--lato);
	font-family: var(--lato) !important;
} */

.gform-theme--no-framework {
	align-self: stretch;
}
.gform-theme--no-framework .gform_heading .gform_description {
	margin-block-end: 0;
}
.gform_wrapper.gravity-theme .gfield input {
	border: 1px solid var(--primary);
	border-radius: 0;
}
.visuallyhidelabel label,
.gfield--type-consent 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;
}

.gform-button {
	color: var(--primary);
	cursor: pointer;
	background-color: transparent;
	border:none;
	border-radius: 0;
	font-weight: 300;
	text-decoration: none;
	padding-top: var(--size-fluid-300);
	padding-right: var(--size-fluid-800);
	padding-bottom: var(--size-fluid-300);
	padding-left: var(--size-fluid-400);
	border-radius: var(--size-fluid-100);
	box-shadow: none;
	margin-inline-start: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 26'%3E%3Cpath fill='currentColor' d='M21.09,8.25l3.91,1.66v15.09H0v-15.09l3.91-1.66V0h17.19v8.25ZM24.22,24.22v-13.38l-11.72,7.37L.78,10.84v13.38h23.44ZM3.91,9.08l-2.69,1.12,2.69,1.71v-2.83ZM4.69.78v11.62l7.81,4.88,7.81-4.88V.78H4.69ZM15.48,8.98h-6.88v-.78h6.88l-2.44-2.44.59-.59,3.17,3.12v.59l-3.17,3.12-.63-.59,2.49-2.44ZM21.09,9.08v2.83l2.69-1.71-2.69-1.12Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    background-size: 1.5em;
}

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

.v-center {
    align-self: center;
}

#projectsResult{
	.project-card {
		@media (width < 768px ) {
			grid-column: span 6;
		}
	}

	.is-loading {
		opacity: .5;
		pointer-events: none;
	}
}

.project-filters {
	display: grid;
	grid-template-columns: minmax(250px, auto) 1fr;
	@media (width < 1024px) {
		grid-template-columns: 1fr;
		row-gap: 1em;
	}

	.project-filters__tags {
		label {
			border-left: 1px solid var(--primary);
			border-right: 0px solid var(--primary);

			/* &:first-child {
				border-left-width: 1px;
			} */

			&:last-child {
				border-right-width: 1px;
			}

			padding-inline: var(--size-fluid-700);
			padding-block: var(--size-fluid-400);

			[type=checkbox] {
				position: absolute;
				opacity: 0;
				width: 0;
				height: 0;
			}

			&:has([type=checkbox]:checked),
			&:hover {
				cursor: pointer;
				background-color: var(--primary);
				color: var(--white);
			}
		}
	}
}

/* .project-filters__tags {
	display: flex;
	justify-content: space-between;
} */

.projects-pagination {
	display: block !important;
	grid-column: 1 / -1;

	.page-numbers {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		list-style: none;
	}

	li>* {
		line-height: 1em;
		font-size: 0.9em;
		margin-right: 5px;
		padding-inline: 0.9em;
		padding-block: 0.7em;
		background-color: var(--white);
		border: 1px solid var(--primary);
		color: var(--primary);
	}

	li:hover>*,
	li>.current {
		color: var(--white);
		background-color: var(--primary);
	}

	a {
		display: block;
		color: inherit;
		text-decoration: none;
	}
}
.glide--lightbox .glide__slide {
	cursor: zoom-in;
}
/* =========================================
     LIGHTBOX MODAL
     ========================================= */
  .lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 10, 10, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    cursor: zoom-out;
  }
  .lightbox-overlay.is-active {
    opacity: 1;
    visibility: visible;
  }

  .lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 88vh;
    cursor: default;
  }
  .lightbox-content img {
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 6px;
    transform: scale(.92);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22,.61,.36,1),
                opacity .3s ease;
  }
  .lightbox-overlay.is-active .lightbox-content img {
    transform: scale(1);
    opacity: 1;
  }

  .lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s;
    line-height: 1;
  }
  .lightbox-close:hover { opacity: 1; }

  .lightbox-caption {
    color: #ccc;
    text-align: center;
    font-size: .9rem;
    margin-top: .6rem;
  }

  /* Nav buttons inside lightbox */
  .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
  }
  .lightbox-nav:hover { background: rgba(255,255,255,.3); }
  .lightbox-nav--prev { left: -60px; }
  .lightbox-nav--next { right: -60px; }

  @media (max-width: 700px) {
    .lightbox-nav--prev { left: 8px; }
    .lightbox-nav--next { right: 8px; }
  }