@layer partials {

	#page.site {
		display: grid;
		grid-template-rows: auto 1fr auto;
		min-height: calc(100dvh);

		.site-content {
			min-width: 0;
		}
	}

	/* HEADER */
	body {
		overflow-y: scroll;

		&.scrolled {
			.site-header {
				transform: translateY(-101%);
			}

			#cta-menu {
				top: 0px;
			}
		}

		&.scrolled.scrolling-up {
			.site-header {
				transform: translateY(0%);
			}

			#cta-menu {
				top: 117px;

				@media screen and (max-width: 1199px) {
					top: 100px;
				}
			}
		}
	}

	#cta-menu {
		display: flex;
		position: fixed;
		right: 0;
		gap: var(--space-1);
		flex-direction: column;
		max-width: 215px;
		transition: top 0.3s ease;
		z-index: 999;

		@media screen and (max-width: 1199px) {
			display: flex;
			max-width: 166px;

			svg {
				width: 42px;
				height: auto;
			}
		}
	}

	#mobile-cta-menu {
		display: none;

		@media screen and (max-width: 1199px) {
			display: flex;

			li {
				flex: 1;
			}
		}
	}

	.cta-menu {
		li>a {
			display: flex;
			padding: 14px 28px;
			justify-content: center;
			align-items: center;
			gap: 20px;
			background-color: var(--color-red);
			color: var(--color-white);
			border: 3px solid transparent;
			transition: background-color 0.3s ease, border-color 0.3s ease;
			font-size: var(--font-size-2xl);
			line-height: 110%;

			svg {
				flex-shrink: 0;
			}

			&:hover,
			&:focus {
				background-color: var(--color-white);
				color: var(--color-red);
				border-color: var(--color-red);
			}

			@media screen and (max-width: 1199px) {
				font-size: var(--font-size-base);
				font-weight: var(--font-weight-extra-bold);
				padding: 10px 15px;
			}
		}
	}

	.site-header {
		position: sticky;
		top: 0;
		z-index: 1000;
		background: #fff;
		transition: transform 0.3s ease;
		padding: 0 0 var(--space-5);
		border-bottom: 1px solid rgba(var(--color-dark-blue-rgb), 0.1);

		@media screen and (max-width: 1199px) {
			padding: var(--space-5) var(--space-0);
		}

		.top-bar {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 100%;
			padding: 0 var(--space-9) 0 0;

			@media screen and (max-width: 1399px) {
				padding: 0;
			}

			@media screen and (max-width: 1199px) {
				display: none;
			}

			#top-menu,
			#mobile-top-menu {
				display: flex;
				gap: 0;
				list-style: none;
				margin: 0;
				padding: 0;

				.menu-item {

					&.current-menu-item>a,
					&.current-menu-ancestor>a,
					&.current-page-ancestor>a {
						color: var(--color-red);
					}

					a {
						color: var(--color-dark-blue);
						transition: color 0.3s ease;
						font-size: var(--font-size-sm);
						display: inline-flex;
						align-items: center;
						padding: var(--space-2) var(--space-2);
						gap: var(--space-1);

						&:hover,
						&:focus {
							color: var(--color-red);
						}
					}
				}
			}
		}

		.bottom-bar {

			.row {
				display: flex;
				align-items: center;
				width: 100%;
				justify-content: space-between;

				@media screen and (max-width: 1199px) {
					padding-right: var(--space-2);
					margin: 0;
					max-width: none;
				}
			}

			.logo {
				position: relative;
				z-index: 1000;
				width: auto;
			}

			.menu-toggle {
				--menu-toggle-button-padding-x: var(--space-3);
				--menu-toggle-button-padding-y: var(--space-3);
				--menu-toggle-button-line-w: 32px;
				--menu-toggle-button-line-h: 2px;
				--menu-toggle-button-line-spacing: 10px;
				--menu-toggle-button-line-color: var(--color-dark-blue);
				--menu-toggle-button-line-color-x: var(--color-dark-blue);

				position: relative;
				z-index: 999;
				margin-right: max(var(--snap),
						calc(-1 * var(--menu-toggle-button-padding-x))) !important;
				padding: var(--menu-toggle-button-padding-y) var(--menu-toggle-button-padding-x) !important;
				border: none !important;
				display: none;

				@media screen and (max-width: 1199px) {
					display: block;
				}

				&:focus {
					box-shadow: none;
				}

				span,
				&:before,
				&:after {
					width: var(--menu-toggle-button-line-w);
					height: var(--menu-toggle-button-line-h);
					border-radius: 0;
				}

				span {
					display: block;
					margin: calc(var(--menu-toggle-button-line-h) + var(--menu-toggle-button-line-spacing)) 0;
					background-color: var(--menu-toggle-button-line-color);
					opacity: 0;
					transition-delay: 300ms;
					transition: opacity 300ms ease 0ms;
				}

				&:before,
				&:after {
					content: "";
					position: absolute;
					left: var(--menu-toggle-button-padding-x);
					background-color: var(--menu-toggle-button-line-color-x);
					transition: top 300ms ease 0s, bottom 300ms ease 0s,
						transform 300ms ease 350ms, background-color 300ms ease 350ms;
					transform-origin: center;
				}

				&:before {
					top: calc(var(--menu-toggle-button-padding-y) + var(--menu-toggle-button-line-spacing) + var(--menu-toggle-button-line-h));
					transform: rotate(45deg);
				}

				&:after {
					bottom: calc(var(--menu-toggle-button-padding-y) + var(--menu-toggle-button-line-spacing) + var(--menu-toggle-button-line-h));
					transform: rotate(-45deg);
				}

				&[aria-expanded="false"] span {
					opacity: 1;
				}

				&[aria-expanded="false"]:before,
				&[aria-expanded="false"]:after {
					background-color: var(--menu-toggle-button-line-color);
					transition: top 300ms ease 350ms, bottom 300ms ease 350ms,
						transform 300ms ease 0ms, background-color 300ms ease 0ms;
				}

				&[aria-expanded="false"]:before {
					top: var(--menu-toggle-button-padding-y);
					transform: rotate(0deg);
				}

				&[aria-expanded="false"]:after {
					bottom: var(--menu-toggle-button-padding-y);
					transform: rotate(0deg);
				}
			}

			.main-navigation {
				width: auto;
				display: flex;
				justify-content: flex-end;
			}

			.menu-wrapper {
				@media screen and (max-width: 1199px) {
					opacity: 0;
					display: none;
					transition: opacity 0.3s ease;
					padding: 0;
					margin: 0;
					background: var(--color-dark-blue);
					border: none;

					&.open {
						position: fixed;
						z-index: 99;
						top: 100px;
						left: 0;
						width: 100%;
						height: calc(100dvh - 100px);
						opacity: 1;
						overflow-y: auto;
						display: flex;
						justify-content: space-between;
						flex-direction: column;
					}

					&.opening {
						position: fixed;
						z-index: 99;
						top: 100px;
						left: 0;
						width: 100%;
						height: 100vh;
						margin: 0;
						background: var(--color-dark-blue);
						border: none;
						display: block;
						opacity: 0;
					}

					&.closing {
						position: fixed;
						z-index: 99;
						top: 100px;
						left: 0;
						width: 100%;
						height: 100vh;
						margin: 0;
						background: var(--color-dark-blue);
						border: none;
						display: block;
						opacity: 0;
					}

					.mobile-container {
						padding: 0 var(--space-8);
						gap: var(--space-6);
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						overflow-y: auto;

						&::-webkit-scrollbar {
							width: 5px;
							height: 8px;
							background-color: var(--color-white);
						}

						&::-webkit-scrollbar-thumb {
							background: rgba(var(--color-light-blue-rgb), 0.4);
						}
					}

					#primary-menu {
						flex-direction: column;
						gap: var(--space-6);
						padding: var(--space-6) 0 0;

						.menu-item a {
							color: var(--color-white);
							font-size: var(--font-size-xl);
							padding: var(--space-3) var(--space-0);

							&:hover,
							&:focus {
								color: var(--color-red);
							}
						}

						.menu-item.current-menu-item>a,
						.menu-item.current-menu-ancestor>a,
						.menu-item.current-page-ancestor>a {
							color: var(--color-red);
						}

						.sub-menu {
							position: relative;
							top: auto;
							left: auto;
							z-index: 0;
							padding: 0;
							width: auto;
							visibility: visible;
							opacity: 1;
							pointer-events: auto;
							transition: none;
							background-color: unset;

							.menu-item a {
								font-size: var(--font-size-sm);
								padding: var(--space-3) var(--space-0) var(--space-1);

								&:hover,
								&:focus {
									background-color: unset;
									color: var(--color-red);
								}
							}
						}
					}

					.mobile-menu-bottom {
						display: flex;
						padding: 0 0 var(--space-6);

						#mobile-top-menu {
							display: block;

							a {
								color: var(--color-white);
								transition: color 0.3s ease;
								font-size: var(--font-size-sm);
								display: inline-flex;
								align-items: center;
								padding: var(--space-2) var(--space-2) var(--space-2) var(--space-0);
								gap: var(--space-1);
								line-height: 160%;
								font-weight: var(--font-weight-medium);

								&:hover,
								&:focus {
									color: var(--color-red);
								}
							}
						}

						.lang-select {
							display: block;
							color: var(--color-white);

							&:hover,
							&:focus {
								color: var(--color-red);
							}
						}
					}
				}
			}

			.menu {
				display: flex;
				gap: 2.75rem;
				list-style: none;
				margin: 0;
				padding: 0;
				justify-content: flex-end;

				.menu-item.menu-item-has-children {
					position: relative;
				}

				.menu-item {
					a {
						color: var(--color-dark-blue);
						font-weight: var(--font-weight-extra-bold);
						padding: var(--space-3) var(--space-0);
						line-height: 122%;
						font-size: var(--font-size-base);
						transition: color 0.3s ease;

						&:hover,
						&:focus {
							color: var(--color-red);
						}
					}

					&.current-menu-item>a,
					&.current-menu-ancestor>a,
					&.current-page-ancestor>a {
						color: var(--color-red);
					}

					&:focus-within>a {
						color: var(--color-red);
					}

					/* Keep parent menu item red when hovering over submenu */
					&:has(> .sub-menu:hover)>a {
						color: var(--color-red);
					}

					.sub-menu {
						position: absolute;
						top: 130%;
						left: 0;
						z-index: 999;
						margin: 0;
						padding: var(--space-1) 0 0;
						list-style: none;
						width: 240px;
						display: block;
						visibility: hidden;
						opacity: 0;
						pointer-events: none;
						transition: opacity 120ms ease, visibility 0s linear 120ms;
						background-color: var(--color-white);

						.menu-item {
							width: 100%;

							a {
								display: block;
								padding: var(--space-2) var(--space-4);
								background-color: var(--color-dark-blue);
								color: var(--color-white);
								text-decoration: none;
								font-size: var(--font-size-base);
								font-weight: var(--font-weight-normal);

								&:hover,
								&:focus {
									background-color: rgba(var(--color-light-blue-rgb), 0.4);
									color: var(--color-dark-blue);
								}
							}
						}
					}
				}

				.menu-item.menu-item-has-children:hover>.sub-menu,
				.menu-item.menu-item-has-children:focus-within>.sub-menu {
					visibility: visible;
					opacity: 1;
					pointer-events: auto;
					transition-delay: 0s;
				}

				.menu-item.menu-item-has-children:has(> .sub-menu:hover)>.sub-menu {
					visibility: visible;
					opacity: 1;
					pointer-events: auto;
				}
			}

			#mobile-top-menu,
			.lang-select {
				display: none;
			}
		}

		.lang-select {
			position: relative;
			display: inline-block;
			color: var(--color-dark-blue);

			&>select {
				appearance: none;
				padding: var(--space-2) var(--space-4) var(--space-2) 2.25rem;
				border: 0;
				font-size: var(--font-size-sm);
				background: none;
				color: inherit;
				cursor: pointer;
				transition: color 0.3s ease;

				&:focus-visible {
					outline: none;
				}
			}

			&::before {
				content: "";
				position: absolute;
				left: var(--space-4);
				top: 50%;
				transform: translateY(-50%);
				width: 15px;
				height: 14px;
				background-color: currentColor;
				-webkit-mask: var(--globe-mask) no-repeat center / contain;
				mask: var(--globe-mask) no-repeat center / contain;
				pointer-events: none;
				transition: color 0.3s ease;
			}

			&:is(:hover, :focus-within) {
				color: var(--color-red);
			}
		}
	}

	/* FOOTER */
	.site-footer {
		background-color: var(--color-dark-blue);
		color: var(--color-white);
		padding: var(--space-10) 0;
		font-size: var(--font-size-md);

		@media screen and (max-width: 1199px) {
			font-size: var(--font-size-sm);
		}

		a {
			color: var(--color-white);
			transition: color 0.3s ease;
			text-decoration: none;

			&:hover,
			&:focus {
				color: var(--color-red);
			}
		}

		.container .row {
			gap: var(--space-8) 0;
		}

		.footer-info {
			display: flex;
			gap: var(--space-8);

			svg {
				flex-shrink: 0;
			}

			.site-name {
				font-weight: var(--font-weight-extra-bold);
				font-size: var(--font-size-xl);

				@media screen and (max-width: 1199px) {
					font-size: var(--font-size-sm);
				}
			}

			address {
				font-style: normal;
				margin: var(--space-2) 0 0;
			}
		}

		.menu {
			display: flex;
			flex-direction: column;
			gap: var(--space-1);

			@media screen and (max-width: 767px) {
				&#footer-details-menu {
					flex-direction: row;
					justify-content: space-between;
				}
			}
		}
	}

	/* SEARCH PAGE */
	body.search {
		.site-content {
			position: relative;

			.blob-5 {
				position: absolute;
				top: 160px;
				right: 0;
				width: 200px;
				height: auto;
				user-select: none;

				@media screen and (max-width: 1199px) {
					width: 180px;
				}

				@media screen and (max-width: 992px) {
					display: none;
				}
			}

			.blob-3 {
				position: absolute;
				bottom: -20px;
				left: 0;
				width: 280px;
				height: auto;
				user-select: none;

				@media screen and (max-width: 1399px) {
					width: 260px;
				}

				@media screen and (max-width: 1199px) {
					width: 180px;
				}

				@media screen and (max-width: 992px) {
					display: none;
				}
			}
		}

		.site-main {
			padding-top: 160px;
			padding-bottom: 450px;
			position: relative;

			@media screen and (max-width: 1199px) {
				padding-top: 60px;
				padding-bottom: 500px;
			}

			@media screen and (max-width: 767px) {
				padding-top: 67px;
				padding-bottom: 200px;
			}

			&.search-empty {
				padding-top: 200px;

				@media screen and (max-width: 1199px) {
					padding-top: 100px;
				}

				@media screen and (max-width: 767px) {
					padding-top: 100px;
				}
			}
		}

		.search-results {
			display: flex;
			flex-direction: column;
			margin: var(--space-9) auto 0;

			article {
				padding: var(--space-4) 0;
				border-bottom: 1px solid var(--color-light-gray);
				color: var(--color-dark-blue);

				a {
					display: flex;
					flex-direction: column;
					gap: var(--space-2);
				}

				&:first-child {
					border-top: 1px solid var(--color-light-gray);
				}

				.entry-header h2 {
					font-size: var(--font-size-2xl);
					font-weight: var(--font-weight-extra-bold);
					line-height: 130%;
				}
			}
		}

		.no-results {
			margin: var(--space-9) auto 0;
		}

		.page-title {
			font-size: var(--font-size-base);
			font-weight: var(--font-weight-extra-bold);
			line-height: 122%;
			color: var(--color-dark-blue);
			margin-bottom: var(--space-5);

			@media screen and (max-width: 767px) {
				margin-bottom: var(--space-3);
			}
		}

		form.searchform {
			max-width: 846px;
			margin: 0 auto;

			&>div {
				display: flex;
				align-items: center;
				gap: 0;
				border-style: solid;
				border: 3px solid var(--color-red);
				transition: border-color 0.3s ease;
				padding: var(--space-4) var(--space-9);
				background-color: var(--color-white);

				&:focus-within {
					border-color: var(--color-dark-blue);
					outline: none;
				}

				@media screen and (max-width: 767px) {
					padding: var(--space-3) var(--space-6);
				}
			}

			input#s {
				width: 100%;
				font-size: var(--font-size-2xl);
				padding: 0;
				font-size: var(--font-size-2xl);
				font-weight: var(--font-weight-extra-bold);
				color: var(--color-red);
				transition: color 0.3s ease;

				&:focus {
					outline: none;
					color: var(--color-dark-blue);
				}

				&::placeholder {
					color: var(--color-red);
					transition: color 0.3s ease;
				}

				&:focus::placeholder {
					color: var(--color-dark-blue);
				}
			}

			#searchsubmit {
				background: none;
				border: none;
				padding: 0;
				margin: 0;
				cursor: pointer;
				flex-shrink: 0;

				svg {
					color: var(--color-red);
					transition: color 0.3s ease;
				}

				&:hover svg,
				&:focus svg {
					color: var(--color-dark-blue);
				}
			}
		}
	}

	.page-template-default,
	.page-template-text-page,
	.error404 {
		.site-main {
			padding-top: var(--space-10);

			@media screen and (max-width: 767px) {
				padding-top: var(--space-6);
				font-size: var(--font-size-md);
			}

			:where(p, ul, ol):not(:last-child) {
				margin-top: var(--space-4);
			}

			ul {
				padding-left: var(--space-3);
				list-style: disc;
			}

			ol {
				padding-left: var(--space-3);
				list-style: decimal;
			}

			a {
				color: var(--color-red);

				&:hover,
				&:focus {
					text-underline-offset: 3px;
					text-decoration: underline;
					text-decoration-thickness: 1px;
				}
			}

			h1.entry-title {
				font-family: var(--font-family-serif);
				font-size: var(--font-size-5xl);
				font-weight: var(--font-weight-heavy);
				line-height: 110%;
				color: var(--color-dark-blue);
				hyphens: auto;

				@media screen and (max-width: 1199px) {
					font-size: var(--font-size-4xl);
				}

				@media screen and (max-width: 767px) {
					font-size: var(--font-size-3xl);
				}
			}

			.entry-content {
				margin-top: var(--space-10);

				@media screen and (max-width: 1199px) {
					margin-top: var(--space-8);
				}

				@media screen and (max-width: 767px) {
					margin-top: var(--space-6);
				}
			}
		}
	}

	.error404 .site-main .error-404-links {
		list-style: none;
		padding: 0;
		margin: var(--space-10) 0;

		li {
			margin-bottom: var(--space-4);

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.page-template-text-page,
	.error404 {
		.site-main {
			padding-top: var(--space-10);
			padding-bottom: 150px;

			@media screen and (max-width: 767px) {
				padding-top: var(--space-6);
				padding-bottom: 100px;
				font-size: var(--font-size-md);
			}
		}
	}

	.home {
		.site-main {
			padding-top: 0;
			padding-bottom: 100px;

			@media screen and (max-width: 767px) {
				padding-top: 0;
				padding-bottom: 40px;
				font-size: var(--font-size-md);
			}

			@media screen and (max-width: 575px) {
				padding-bottom: 0;
			}

			.entry-content {
				margin: 0;
			}
		}
	}
}