:root {
	--pageTransitionColor: #fff;
}

.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--pageTransitionColor);
    z-index: 2147483647 !important; /* Maximum possible z-index */
    /* Starts visible */
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out, visibility 0.25s;

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

.page-transition-overlay > img {
	max-width: 25vw;
    margin-top: 20vh;
}

/* This class handles the fade-out */
.page-transition-overlay.overlay-hidden {
    opacity: 0;
    visibility: hidden;
}
.page-transition-overlay.instant {
	transition: unset !important;
}

.wrapper {
	&.full-width {
		.inner-wrapper {
			.glide {
				.glide__track {
					overflow: visible;
				}
			}
		}
	}

	.glide {
		.glide__track {

			> div {
				margin-top: 0;
			}

			.grid {
				grid-template-columns: 100%;
			}

			.glide__slides {
				white-space: wrap !important;
			}
		}

		.glide__arrows {
			top: 0;
			right: 0;
			position: absolute;
			transform: none;
			display: flex;

			.glide__arrow {
				margin: 0;
				padding: 0;
				border: 0;
				border-radius: 0;
				box-shadow: none;
				transform: none;
				position: relative;

				&.glide__arrow--left {
					left: unset;
				}

				&.glide__arrow--right {
					right: unset;
				}
			}
		}
	}
}

.form {
	margin: 32px 0 0 0;

	.umbraco-forms-form {
		form {
			.umbraco-forms-page {
				fieldset,
				.umbraco-forms-fieldset {
					margin: 0;
					padding: 0;
					border: 0;

					.row-fluid {
						.umbraco-forms-container {
							display: flex;
							flex-direction: column;
							gap: 16px;

							.umbraco-forms-field {
								padding-top: 12px;

								&:not(.dataconsent, .checkbox, .multiplechoice, .singlechoice, .titleanddescription, .richtext) {
									display: flex;
									flex-direction: column;
									position: relative;

									label {
										top: 0;
										left: 16px;
										line-height: 24px;
										padding: 0 16px;
										font-family: inherit;
										font-size: 12px;
										font-weight: inherit;
										background-color: #FFFFFF;
										border-radius: 3px;
										position: absolute;
									}

									.umbraco-forms-tooltip {
										display: inline-block;
										order: 2;

										&.help-block {
											font-size: 12px;
											font-style: italic;
											/*
											&::before {
												content: "(";
											}

											&::after {
												content: ")";
											}
											*/
										}
									}

									.umbraco-forms-field-wrapper {
										order: 1;
									}
								}

								&:is(.dataconsent, .checkbox, .multiplechoice, .singlechoice, .titleanddescription, .richtext) {
									margin: 0;

									> label {
										margin: 0 8px 0 0;
										font-weight: 900;
										float: left;
									}

									> legend {
										margin: 0 8px 0 0;
										padding: 0;
										font-weight: 900;
										float: left;
									}

									.umbraco-forms-tooltip {

										&.help-block {
											font-size: 12px;
											font-style: italic;

											&::before {
												content: "(";
											}

											&::after {
												content: ")";
											}
										}
									}
								}

								&.fileupload {
									margin-top: 12px;
									margin-bottom: 32px;
									padding: 0;
									border: 1px solid #000000;
									border-radius: 6px;
									position: relative;

									label {
										top: -12px;
									}

									input {
										width: 100%;
										height: 56px;
										line-height: inherit;
										margin: 0;
										padding: 0;
										border: 0;
										border-radius: 6px;
										box-sizing: border-box;
										font-family: inherit;
										font-size: inherit;
										font-weight: inherit;
										text-indent: 0;

										&::file-selector-button {
											border: 0px;
											border-right: 1px solid #000000;
											padding: 19px 32px;
											margin-right: 20px;
											font-family: inherit;
											font-size: inherit;
											font-weight: inherit;
											transition: .5s;
										}

											&::file-selector-button:hover {
												background-color: #000000;
												color: #FFFFFF;
											}
									}

									.umbraco-forms-tooltip {
										&.help-block {
											bottom: -32px;
											font-size: 12px;
											font-style: italic;
											position: absolute;
										}
									}
								}

								.umbraco-forms-field-wrapper {
									input {
										&:not([type=checkbox], [type=radio]) {
											-webkit-appearance: none;
											-moz-appearance: none;
											appearance: none;
										}

										&[type=text],
										&[type=email],
										&[type=password] {
											width: 100%;
											height: 56px;
											line-height: inherit;
											margin: 0;
											padding: 0;
											border: 1px solid #000000;
											border-radius: 6px;
											box-sizing: border-box;
											font-family: inherit;
											font-size: inherit;
											font-weight: inherit;
											text-indent: 32px;
										}
									}

									textarea {
										width: 100%;
										line-height: inherit;
										margin: 0;
										padding: 12px 32px;
										border: 1px solid #000000;
										border-radius: 6px;
										font-family: inherit;
										font-size: inherit;
										font-weight: inherit;
										box-sizing: border-box;
									}

									select {
										width: 100%;
										height: 56px;
										line-height: inherit;
										margin: 0;
										padding: 0;
										border: 1px solid #000000;
										border-radius: 6px;
										box-sizing: border-box;
										font-family: inherit;
										font-size: inherit;
										font-weight: inherit;
										text-indent: 32px;
										-webkit-appearance: none;
										-moz-appearance: none;
										appearance: none;

										&::-ms-expand {
											display: none;
										}
									}
								}
							}
						}
					}
				}

				.umbraco-forms-hidden {
					+ .umbraco-forms-tooltip {
						display: none;
						visibility: hidden;
					}

					display: none;
					visibility: hidden;
				}

				.umbraco-forms-navigation {
					margin: 32px 0 0 0;
					button,
					input {
						line-height: inherit;
						padding: 12px 24px 12px 24px;
						background-color: #000000;
						border: 1px solid #000000;
						border-radius: 50px;
						font-family: inherit;
						font-size: inherit;
						font-weight: 600;
						color: #fff;
						transition: all .3s;
						display: inline-block;
						cursor: pointer;
						position: relative;
						transition: .25s;
						align-items: center;

						&::before {
							top: 16px;
							left: 0;
							font-family: "Font Awesome 7 Pro";
							font-size: 14px;
							font-weight: 900;
							content: "";
							position: absolute;
							opacity: 0;
							transition: .25s;
						}
					}
				}
			}
		}
	}
}

.hamburger {
	position: fixed;
	top: 15px;
	left: 15px;
	z-index: 998;
	color: #000000;
	background-color: #FFFFFF;
	border: none;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;

	span {
		width: 22px;
		height: 3px;
		background-color: #000000;
		border-radius: 3px;
		transition: 0.3s;
	}
}

	.hamburger.active span:nth-child(1) {
		transform-origin: center;
		transform: rotate(45deg) translate(6px, 5px);
	}

	.hamburger.active span:nth-child(2) {
		opacity: 0;
	}

	.hamburger.active span:nth-child(3) {
		transform-origin: center;
		transform: rotate(-45deg) translate(6px, -6px);
	}

.overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	visibility: hidden;
	transition: 0.3s;
	z-index: 999;

	&.active {
		opacity: 1;
		visibility: visible;
	}
}

.nav-menu {
	position: fixed;
	top: 0;
	left: -100%;
	width: 320px;
	max-width: 85vw;
	height: 100%;
	background: #FFFFFF;
	box-shadow: 4px 0 25px rgba(0,0,0,0.3);
	transition: left 0.4s cubic-bezier(0.25,0.8,0.25,1);
	z-index: 1000;
	overflow: hidden;

	&.open {
		left: 0;
	}

	.menu-panel {
		position: absolute;
		top: 0;
		left: 100%;
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		transition: left 0.4s cubic-bezier(0.25,0.8,0.25,1);
		display: flex;
		flex-direction: column;

		.panel-header {
			background: #000000;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			flex-shrink: 0;

			.back-btn {
				width: 48px;
				height: 48px;
				background-color: transparent;
				border: 0;
				border-right: 1px solid #FFFFFF;
				font-size: 0;
				position: relative;
				content: "";
				display: block;
				cursor: pointer;

				&::after {
					top: 50%;
					left: 50%;
					font-family: "Font Awesome 7 Pro";
					font-weight: 900;
					font-size: 16px;
					content: "\f053";
					color: #FFFFFF;
					position: absolute;
					transform: translate(-50%, -50%);
				}

				&:hover {
					background-color: rgba(255,255,255,0.15);
				}
			}

			.panel-title {
				padding: 8px 32px;
				font-size: 18px;
				font-weight: 600;
			}
		}

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			li {
				&.menu-item {
					&.has-children {
						display: grid;
						grid-template-columns: auto minmax(auto, 48px);
					}

					border-bottom: 1px solid rgba(0,0,0,0.15);
					box-sizing: border-box;

					a {
						&.menu-link {
							width: 100%;
							padding: 8px 32px;
							text-decoration: none;
							cursor: pointer;
							box-sizing: border-box;
							display: block;

							&:hover {
								background-color: rgba(0,0,0,0.05);
							}
						}
					}

					.submenu-arrow {
						width: 48px;
						height: 48px;
						border-left: 1px solid rgba(0,0,0,0.15);
						position: relative;
						content: "";
						display: block;
						cursor: pointer;
						box-sizing: border-box;

						&::after {
							top: 50%;
							left: 50%;
							font-family: "Font Awesome 7 Pro";
							font-weight: 900;
							font-size: 16px;
							content: "\f054";
							color: #000000;
							position: absolute;
							transform: translate(-50%, -50%);
						}

						&:hover {
							background-color: rgba(0,0,0,0.05);
						}
					}
				}
			}
		}

		&.active {
			left: 0;
		}
	}
}

iframe {
	width: 100%;
	margin: 16px 0 0 0;

	&[src^="https://www.google.com/maps"] {
		border-radius: 25px;
	}
}

#scrollTopBtn {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 50;
	width: 3.5rem;
	height: 3.5rem;
	background: #6366f1;
	color: #fff;
	border: none;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(99,102,241,.3);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .2s ease;
	opacity: 0;
	visibility: hidden;

	&:hover {
		background: #4f46e5;
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(99,102,241,.4);
	}

	&:active {
		transform: translateY(0);
	}

	&.show {
		opacity: 1;
		visibility: visible;
	}
}

.timeline {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 2px 1fr;
	grid-auto-columns: max-content;
	column-gap: 120px;
	row-gap: 180px;
	position: relative;
	margin: 32px 0 16px 0;

	.grid--item {
		background-color: #FFFFFF;
		box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .15);
		border-radius: 16px;
		grid-row: span 2;
		display: grid;
		grid-template-rows: min-content min-content min-content;
		position: relative;
		display: block;
		z-index: 2;

		&:not(:first-child) {
			&:before {
				position: absolute;
				top: 0;
				bottom: calc(50% + 30px);
				width: 2px;
				background-color: #000000;
				content: '';
			}
		}

		&:not(:last-child) {
			&:after {
				position: absolute;
				top: calc(50% + 27px);
				bottom: 0;
				width: 2px;
				background-color: #000000;
				content: '';
			}
		}

		.item--year {
			&::before {
				top: -20px;
				left: 30px;
				width: 20px;
				height: 20px;
				background-color: #000000;
				border-radius: 9999px;
				content: "";
				position: absolute;
			}

			top: 50%;
			width: 80px;
			position: absolute;
			transform: translateY(-50%);

			p {
				line-height: 24px;
				margin: 10px 0 0 0;
				text-align: center;
			}
		}

		.item--placeholder {
			.placeholder--image {
				padding-top: 56.25%;
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;

				img {
					height: 100%;
				}
			}

			.placeholder--content {
				padding: 40px;

				p {
					margin-top: 10px;
					color: var(--text-zwart);

					&.heading-5 {
						margin-top: 0;
						color: var(--text-donkerblauw)
					}

					&.text {
						/*
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						overflow: hidden;
						*/
					}
				}
			}
		}

		@media (min-width: 821px) {
			&:nth-child(odd) {
				grid-column: 1;

				&:before,
				&:after {
					left: calc(100% + 119px);
				}

				.item--year {
					left: calc(100% + 80px);
				}
			}

			&:nth-child(even) {
				grid-column: 3;

				&:before,
				&:after {
					right: calc(100% + 121px);
				}

				.item--year {
					right: calc(100% + 81px);
				}
			}

			&:nth-child(2) {
				grid-row: 2/4;
			}
		}
	}

	&:hover {
		.grid--item {
			opacity: 1 !important;
		}
	}
}

.sitemap {
	ul {
		margin: 16px 0 0 0;
		padding: 0;

		li {
			margin: 0;
			padding: 0;
			list-style: none;

			&.level-3 {
				margin: 16px 0 0 0;
				> a {
					font-weight: bold;
				}
			}

			a {
				color: #000000;
			}

			ul {
				margin-top: 0;
			}
		}
	}
}

.chat-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 100%;
	max-width: 480px;
	max-height: 80vh;
	background: #FFFFFF;
	border-radius: 32px;
	box-shadow: 0 32px 48px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 9999;

	.chat-header {
		background: #000000;
		color: #FFFFFF;
		padding: 16px 32px;
		text-align: center;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;

		.chat-title {
			line-height: 40px;
			font-size: 20px;
			font-weight: bold;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			gap: 16px;

			img {
				width: auto;
				height: 40px;
			}
		}

		.chat-buttons {
			margin: 4px 0;

			button {
				border: 1px solid #FFFFFF;
				color: #FFFFFF;

				&:hover {
					background: #FFFFFF;
					color: #000000;
				}
			}
		}
	}

	.chat-messages {
		flex: 1;
		padding: 16px 32px;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
		max-height: calc(80vh - 120px);

		.message {
			max-width: 80%;
			padding: 8px 16px;
			border-radius: 24px;
			line-height: 32px;
			word-wrap: break-word;
			animation: fadeIn 0.3s ease;

			&.user {
				align-self: flex-end;
				background: transparent;
				border: 1px solid #DEDEDE;
				color: #333333;
				border-bottom-right-radius: 4px;
			}

			&.ai {
				align-self: flex-start;
				background: #ECECEC;
				color: #333333;
				border-bottom-left-radius: 4px;
			}
		}

		.typing-indicator {
			display: flex;
			gap: 6px;
			padding: 20px 16px;
			background: #ECECEC;
			border-radius: 24px;
			border-bottom-left-radius: 4px;
			width: fit-content;

			span {
				width: 8px;
				height: 8px;
				background: #333333;
				border-radius: 50%;
				animation: typing 1.4s infinite;

				&:nth-child(1) {
					animation-delay: 0s;
				}

				&:nth-child(2) {
					animation-delay: 0.2s;
				}

				&:nth-child(3) {
					animation-delay: 0.4s;
				}
			}
		}
	}

	.chat-input {
		display: flex;
		padding: 16px 32px;
		background: #ECECEC;
		border-top: 1px solid #DEDEDE;
		gap: 16px;

		#messageInput {
			line-height: 32px;
			flex: 1;
			padding: 8px 16px;
			border: 1px solid #DEDEDE;
			border-radius: 24px;
			font-size: 18px;
			outline: none;
			transition: border 0.2s;

			&:focus {
				border-color: #333333;
			}
		}
	}

	.chat-copyright {
		padding: 8px 32px;
		background: #ECECEC;
		border-top: 1px solid #DEDEDE;
		font-size: 12px;
		text-align: center;

		a {
			text-decoration: underline;
			color: #000000;

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

	&.minimized {
		transition: all 0.4s ease;

		.chat-header {
			.chat-buttons {
				button {
					&#minimizeButton {
						&::after {
							content: "\f2d0";
						}
					}
				}
			}
		}

		.chat-messages,
		.chat-input,
		.chat-copyright {
			display: none !important;
		}
	}
}	

.chat-container.closed {
	display: none !important;
}

@keyframes typing {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 600px) {
	.chat-container {
		width: 90%;
		bottom: 10px;
		right: 10px;
	}

	.chat-header {
		font-size: 1.1rem;
	}
}

@media (max-width: 820px) {
	.timeline {
		display: block;

		.grid--item {
			margin-top: 104px;

			&:before {
				left: calc(50% - 1px);
				position: absolute;
				top: -10px !important;
				height: 10px;
				bottom: calc(50% + 30px);
				width: 2px;
				background-color: #000000;
				content: '';
			}

			&:not(:last-child) {
				&:after {
					left: calc(50% - 1px);
					position: absolute;
					top: 100% !important;
					bottom: -30px;
					height: 30px;
					width: 2px;
					background-color: #000000;
					content: '';
				}
			}

			.item--year {
				top: -54px;
				left: 50%;
				transform: translate(-50%, 0);

				p {
					margin-bottom: 10px;
				}
			}
		}
	}
}

.buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 8px;
}

button {
	height: 48px;
	line-height: 48px;
	padding: 0 24px;
	background: transparent;
	border: 1px solid #000000;
	font-size: 18px;
	color: #000000;
	transition: all linear 125ms;
	cursor: pointer;

	&.filled {
		background-color: #FFBF00;
		border-color: #FFBF00;
		color: #000000;
	}

	&.rounded {
		border-radius: 24px;
	}

	&.icon {
		width: 48px;
		padding: 0;
		position: relative;

		&::after {
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			font-family: "Font Awesome 7 Pro";
			position: absolute;
			z-index: 1;
		}

		&.voice {
			background-color: #000000;
			border-color: #000000;
			color: #FFFFFF;

			&::after {
				font-weight: 900;
				content: "\f130";
			}

			&:hover:not(.listening):not(.speaking) {
				background: #FFBF00;
				border-color: #FFBF00;
				color: #000000;
			}

			&.listening {
				background: #ef4444;
				border-color: #ef4444;

				&::after {
					content: "\f04d";
				}
			}

			&.speaking {
				background: #10b981;
				border-color: #10b981;

				&::after {
					font-weight: 900;
					content: "\f544";
				}
			}
		}

		&.send {
			&::after {
				font-weight: 900;
				content: "\e20a";
			}
		}

		@keyframes pulse {
			0% {
				box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
			}

			70% {
				box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
			}

			100% {
				box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
			}
		}

		@keyframes ripple {
			0% {
				transform: scale(0.8);
				opacity: 1;
			}

			100% {
				transform: scale(2.4);
				opacity: 0;
			}
		}
	}

	&.small {
		height: 32px;
		line-height: 32px;
		font-size: 12px;
		padding: 0 16px;

		&.rounded {
			border-radius: 16px;
		}

		&.icon {
			&.small {
				width: 32px;
			}
		}
	}

	&.minimize {
		&::after {
			content: "\f2d1";
		}
	}

	&.close {
		&::after {
			content: "\f00d";
		}
	}

	&:hover {
		background-color: #000000;
		border-color: #000000;
		color: #FFFFFF;
	}
}