/* ==========================================================================
	Reset
	========================================================================== */

/* Global box sizing. */

*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove default margin from body and make fonts render better. */

body {
	margin: 0;
}

/* Reset default spacing on text elements. */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote {
	margin: 0;
}

/* Remove the italic styling from citations. */

cite {
	font-style: normal;
}

/* If a bottom border is being used for styling links in theme.json,
ensure that this isn't applied to links that contain images. */

a:has(img) {
	border-bottom: none !important;
}

/* Remove 1em bottom margin from figure elements. */

figure {
	margin-bottom: 0;
}

/* Prevent images from overflowing their container and distorting. */

img {
	max-width: 100%;
	height: auto;
}

/* Remove the default outline from focus states globally,
and instead apply it to :focus-visible to prevent ugly styles
for non-keyboard users. */

a {
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;

	&:focus {
		outline: none;
	}

	&:focus-visible {
		outline: 2px solid;
		outline-offset: 5px;
	}
}

/* In the details element, add a more appropriate cursor to
summary elements and prevent block level direct descendants,
e.g. headings, from breaking onto a new line. */

details {

	summary {
		cursor: pointer;

		> * {
			display: inline;
		}
	}
}

/* Remove all animations and transitions for people who
prefer not to see them. */

@media (prefers-reduced-motion: reduce) {

	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		-webkit-animation-duration: 0.01ms;
		        animation-duration: 0.01ms;
		-webkit-animation-iteration-count: 1;
		        animation-iteration-count: 1;
		-webkit-transition-duration: 0.01ms;
		        transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   Mixins
   ========================================================================== */

/**
 * Reusable styles for use in the project.
 *
 * Contents
 *
 * 1. Helpers
 * 2. Backgrounds
 * 3. Flex direction
 * 4. Mobile visibility
 * 5. Image manipulation
 */

/* 1. Helpers
	========================================================================== */

/**
 * Inclusively hide
 */

.sr-only:not(:focus, :active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/**
 * Mixin with common FontAwesome pseudo-element styles
 */

.is-fa-pseudo-element {
	font-family: 'Font Awesome 6 Free', monospace;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
}

/**
 * Responsive 16:9 vide embeds.
 */

.flexible-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;

	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/* 2. Backgrounds
	========================================================================== */

.has-branded-bg {
	background-position: right center;
	background-size: 50% 110%;
	background-repeat: no-repeat;

	h1,
	p {
		max-width: 600px;
	}
}

.has-branded-bg--purple {
	background-image: url(../img/bg-banner-purple.svg);
}

.has-branded-bg--purple-dark {
	background-image: url(../img/bg-banner-dark-purple.svg);
}

.has-branded-bg--blue {
	background-image: url(../img/bg-banner-blue.svg);
}

.has-branded-bg--green {
	background-image: url(../img/bg-banner-green.svg);
}

.has-branded-bg--dark-blue {
	background-image: url(../img/bg-banner-dark-blue.svg);
}

.has-branded-bg--grey {
	background-image: url(../img/bg-banner-grey.svg);
}

.has-branded-bg-light-grey {
	background-image: url(../img/bg-banner-light-grey.svg);
}

.has-branded-bg--purple-environmental {
	background-image: url(../img/bg-banner-environmental-purple.svg);
	background-position: right bottom;
}

.has-branded-bg--purple-finance {
	background-image: url(../img/bg-banner-finance-purple.svg);
}

.has-branded-bg--purple-gender {
	background-image: url(../img/bg-banner-gender-purple.svg);
}

.has-branded-bg--purple-accountability {
	background-image: url(../img/bg-banner-accountability-purple.svg);
}

/* 3. Flex direction
	========================================================================== */

.reverse-on-small {

	@media (max-width: 781px) {
		
		& > .wp-block-column:first-of-type {
			-webkit-box-ordinal-group: 3;
			    -ms-flex-order: 2;
			        order: 2;
		}

		& > .wp-block-column:last-of-type {
			-webkit-box-ordinal-group: 2;
			    -ms-flex-order: 1;
			        order: 1;
		}
	}
}

/* 4. Mobile visibility
	========================================================================== */

.hide-on-small {

	@media (max-width: 781px) {
		display: none;
	}
}

/* 5. Image manipulation
	========================================================================== */

.has-object-position-center-top img {
	-o-object-position: center top;
	   object-position: center top;
}

/* ==========================================================================
	Site
	========================================================================== */

/**
 * Styles for top level global components.
 *
 * Contents
 *
 * 1. Skip to main content
 * 2. Site logo
 * 3. Site header
 * 4. Site footer
 * 5. Site main
 * 6. Site overlay
 */

/* 1. Skip to main content
	========================================================================== */

.skip-main {

	&:focus-visible,
	&:active {
		color: var(--wp--preset--color--base);
		background-color: var(--wp--preset--color--contrast);
		left: 50%;
		-webkit-transform: translateX(-50%);
		        transform: translateX(-50%);
		top: 0;
		display: inline-block;
		margin: auto;
		height: auto;
		width: auto;
		clip: auto;
		overflow: auto;
		padding: 15px;
		border-radius: 0 0 15px 15px;
		text-align: center;
		font-size: var(--wp--preset--font-size--medium);
		text-decoration: underline;
		outline: none;
		border: none;
		-webkit-transition: none;
		transition: none;
	}
}

/* 2. Site logo
	========================================================================== */

.site-logo {

	@media (width <= 1180px) {
		max-width: 195px;
	}

	a {
		display: block;
	}
}

/* 3. Site header
	========================================================================== */

.site-head {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: var(--wp--preset--color--base);
	min-height: var(--bw--header-height);
	-webkit-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;

	@media (width <= 1180px) {
		min-height: var(--bw--header-height-mobile);
	}

	&.hidden {
		-webkit-transform: translateY(-100%);
		        transform: translateY(-100%);
	}

	.site-head__top {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 20px;

		@media (width <= 1180px) {
			display: none;
		}
	}

	.site-head__inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: end;
		    -ms-flex-align: end;
		        align-items: flex-end;
		padding-top: 22px;
		padding-bottom: 24px;

		@media (width <= 1180px) {
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
		}
	}

	.site-head__menu-btn {

		@media (width >= 1181px) {
			display: none;
		}

		button {
			background: none;
			border: none;
			cursor: pointer;
		}

		svg {
			width: 30px;
			height: 30px;
		}
	}
}

/* 4. Site footer
	========================================================================== */

.site-foot {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding-top: var(--wp--preset--spacing--large);
	padding-bottom: var(--wp--preset--spacing--large);
	overflow-x: hidden;
	
	.site-foot__inner {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 2fr 2fr 1fr 1fr 1fr;
		grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
		gap: var(--wp--preset--spacing--large);

		@media (width <= 780px) {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			gap: var(--wp--preset--spacing--small);
		}
	}

	h3 {
		font-size: var(--wp--preset--font-size--medium);
		margin-bottom: 15px;
	}

	p,
	ul {
		font-size: var(--wp--preset--font-size--tiny);
		margin-bottom: 15px;
	}

	a:not(.wp-element-button) {
		color: var(--wp--preset--color--base);
		border-bottom: 1px solid var(--wp--preset--color--base);

		&:hover {
			border-bottom-color: transparent;
		}
	}

	.site-foot__menu {

		ul {
			list-style: none;
			padding: 0;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			gap: 10px;

			a {
				border-bottom: 1px solid var(--wp--preset--color--base);

				&:hover {
					border-bottom-color: transparent;
				}
			}
		}
	}

	.site-foot__bottom {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		gap: var(--wp--preset--spacing--large);
		padding-top: var(--wp--preset--spacing--medium);

		@media (width <= 780px) {
			gap: var(--wp--preset--spacing--x-small);
		}
	}
}

/* 5. Site main
	========================================================================== */

.has-global-padding .has-global-padding {
	padding-left: var(--wp--custom--site-padding);
	padding-right: var(--wp--custom--site-padding);
}

/* 6. Site overlay
	========================================================================== */

.site-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(35, 35, 35, 0.3);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 101;
	
	&.is-visible {
		opacity: 1;
		visibility: visible;
	}
}

/* ==========================================================================
	Menus
	========================================================================== */

/**
 * Project-specific non-block component styles.
 *
 * Contents
 *
 * 1. Main menu
 * 2. Off canvas menu
 * 3. Mobile nav
 * 4. Body
 * 5. Overlay
 */

/* 1. Main menu
	========================================================================== */

.site-menu {

	@media (width <=1180px) {
		display: none;
	}

	.site-menu__inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 40px;
		margin: auto;
	}

	ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		list-style: none;
		padding: 20px 0 10px;
		margin: 0;
		left: -25px;

		&>li {
			border-radius: 30px;
			padding: 0 25px 0;
			-webkit-transition: 0.2s ease-in;
			transition: 0.2s ease-in;

			@media (width <=1300px) {
				padding: 0 10px 0;
			}

			&:hover,
			&:has(.is-active) {
				-webkit-transition: 0.2s ease-out;
				transition: 0.2s ease-out;
			}

			&>a {
				font-size: 17px;
				font-weight: 400;
				color: var(--wp--preset--color--contrast);
				text-decoration: none !important;
				white-space: nowrap;
				border-bottom: 4px solid transparent;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				gap: 5px;
				position: relative;

				&:hover {
					color: var(--wp--preset--color--primary-shade);
					border-bottom-color: var(--wp--preset--color--primary-shade);
				}
			}

			&:nth-of-type(1)>a {

				&:hover {
					color: var(--wp--preset--color--secondary-shade);
					border-bottom-color: var(--wp--preset--color--secondary-shade);
				}
			}

			&:nth-of-type(2)>a {

				&:hover {
					color: var(--wp--preset--color--tertiary-shade);
					border-bottom-color: var(--wp--preset--color--tertiary-shade);
				}
			}

			&.menu-item-has-children {

				&>a {

					&:before {
						content: '';
						position: absolute;
						bottom: -38px;
						left: 0;
						right: 0;
						margin: auto;
						height: 0px;
						width: 0px;
						border-right: solid 15px transparent;
						border-left: solid 15px transparent;
						border-bottom: solid 15px var(--wp--preset--color--lighter-grey);
						opacity: 0;
					}

					&:after {
						content: '';
						width: 18px;
						height: 18px;
						background: url(../img/icon-caret.svg) no-repeat center center / contain;
						-webkit-transition: 0.1s -webkit-transform;
						transition: 0.1s -webkit-transform;
						transition: 0.1s transform;
						transition: 0.1s transform, 0.1s -webkit-transform;
					}

					&.active {

						&:before {
							opacity: 1;
						}

						&:after {
							-webkit-transform: rotate(-180deg);
							        transform: rotate(-180deg);
							-webkit-transition: 0.1s -webkit-transform;
							transition: 0.1s -webkit-transform;
							transition: 0.1s transform;
							transition: 0.1s transform, 0.1s -webkit-transform;
						}
					}
				}
			}
		}
	}

	.site-menu__sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 50;
		width: 100%;
		;
		display: none;

		&.is-visible {
			display: block;
		}

		&.site-menu__sub-menu--services {

			&>div {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				gap: var(--wp--preset--spacing--small);
			}
		}
	}

	.site-menu__cols {
		display: -ms-grid;
		display: grid;
		gap: var(--wp--preset--spacing--small);
	}

	.site-menu__sub-inner {
		background: var(--wp--preset--color--lighter-grey);
		padding-top: var(--wp--preset--spacing--large);
		padding-bottom: var(--wp--preset--spacing--large);
		position: relative;
		display: -ms-grid;
		display: grid;
		gap: var(--wp--preset--spacing--medium);

		&.has-two-cols {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: end;
			    -ms-flex-pack: end;
			        justify-content: flex-end;
		}

		&.has-three-cols {
			-ms-grid-columns: 1fr 1fr 1fr;
			grid-template-columns: 1fr 1fr 1fr;
		}

		&.has-four-cols {
			-ms-grid-columns: 1fr 1fr 1fr 1fr;
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}

		&>* {
			-webkit-margin-before: 0;
			        margin-block-start: 0;
		}

		h3 {
			font-size: var(--wp--preset--font-size--x-large);
		}

		p {
			-webkit-margin-before: 15px;
			        margin-block-start: 15px;
		}

		ul:not(.site-menu__about-menu) {
			min-width: 300px;
			padding: 0;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			position: static;

			li {
				padding: 0;

				&:hover {
					background: none;
				}

				a {
					font-size: 18px;
					color: var(--wp--preset--color--contrast);
					font-weight: 400;
					text-decoration: none !important;
					padding: 5px 10px;
					border-radius: 4px;
					display: inline-block;
					border: none !important;

					&:hover {
						background: var(--wp--preset--color--light-blue-light);
					}
				}
			}
		}
	}

	.site-menu__publication-link {
		display: block;
		padding: var(--wp--preset--spacing--small);
		border-radius: 16px;
		color: currentColor;

		h3 {
			display: inline-block;
			border-bottom: 2px solid transparent;
		}

		/* Default hover state - applies to first item */
		&:hover {
			background: var(--wp--preset--color--primary);
			color: var(--wp--preset--color--base);

			h3 {
				border-bottom-color: currentColor;
			}
		}

		/* More specific selectors with higher specificity */
		&:nth-of-type(2) {
			&:hover {
				background: var(--wp--preset--color--quaternary);
				color: var(--wp--preset--color--base);
			}
		}

		&:last-of-type {
			&:hover {
				background: var(--wp--preset--color--dark-grey);
				color: var(--wp--preset--color--base);
			}
		}
	}

	.site-menu__advocacy-link {

		img {
			width: 60px;
			height: 60px;
			-o-object-fit: cover;
			   object-fit: cover;
			-o-object-position: center bottom;
			   object-position: center bottom;
			-webkit-transform: scale(1);
			        transform: scale(1);
			-webkit-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
		}

		h3 {
			font-size: var(--wp--preset--font-size--large);
			padding-right: var(--wp--preset--spacing--medium);
			-webkit-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
			color: var(--wp--preset--color--contrast);
			margin-top: var(--wp--preset--spacing--x-small);
		}

		&:hover {

			img {
				-webkit-transform: scale(1.1);
				        transform: scale(1.1);
			}

			h3 {
				color: var(--wp--preset--color--primary);
			}
		}
	}

	.site-menu__about {
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
		-webkit-margin-before: 0 !important;
		        margin-block-start: 0 !important;
		max-width: 50%;
	}

	.site-menu__about-menu {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: var(--wp--preset--spacing--x-small);
		position: static;
		padding: 0;

		li {
			padding: 0;

			a {
				display: -webkit-inline-box !important;
				display: -ms-inline-flexbox !important;
				display: inline-flex !important;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				border-bottom: none;

				span {
					border-bottom: 2px solid transparent !important;
				}

				&:after {
					content: '';
					position: relative;
					display: inline-block;
					width: 20px;
					height: 20px;
					background: url(../img/icon-arrow-right-contrast.svg) no-repeat center center / contain;
					opacity: 0;
					left: -10px;
					-webkit-transition: 0.1s opacity ease-in-out, 0.3s left ease-in-out;
					transition: 0.1s opacity ease-in-out, 0.3s left ease-in-out;
				}

				&:hover {
					color: var(--wp--preset--color--contrast) !important;

					span {
						border-bottom-color: var(--wp--preset--color--contrast) !important;
					}

					&:after {
						opacity: 1;
						left: 5px;
					}
				}
			}
		}
	}
}

/* 2. Off canvas menu
	========================================================================== */

.off-canvas-menu {
	position: fixed;
	top: 0;
	right: -400px;
	width: 400px;
	max-width: 100%;
	height: 100%;
	background: var(--wp--preset--color--base);
	-webkit-transition: right 0.3s ease;
	transition: right 0.3s ease;
	z-index: 1000;
	overflow-y: auto;

	&.is-open {
		right: 0;
		-webkit-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;
	}

	.off-canvas-menu__inner {
		overflow-y: auto;
	}
}

/* 3. Mobile menu
	========================================================================== */

.mobile-menu {
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--small) var(--wp--preset--spacing--large);

	&.mobile-menu--user-is-logged-in {
		margin-top: 32px !important;

		@media (max-width: 782px) {
			margin-top: 46px !important;
		}
	}

	.mobile-menu__header {
		margin-bottom: var(--wp--preset--spacing--medium);

		&>div {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			    -ms-flex-pack: justify;
			        justify-content: space-between;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			margin-bottom: var(--wp--preset--spacing--small);
		}
	}

	.mobile-menu__close {
		background: none;
		border: none;
		cursor: pointer;

		svg {
			width: 30px;
			height: 30px;
		}
	}

	.mobile-menu__search {
		position: relative;
	}

	.mobile-menu__search-field {
		width: 100%;
		font-size: var(--wp--preset--font-size--small);
		padding: 14px 60px 14px 25px;
		border: none;
		background: var(--wp--preset--color--lighter-grey);
		border-radius: 100px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
	}

	.mobile-menu__search-button {
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		margin: auto;
		padding: 0;
		right: 0;
		background: none;
		border: none;
		height: 100%;
		aspect-ratio: 1;
		width: auto;
		border-radius: 100px;
		font-size: var(--wp--preset--font-size--medium);
		cursor: pointer;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;

		svg {
			stroke: var(--wp--preset--color--primary-shade);
		}
	}

	.mobile-menu__items {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: var(--wp--preset--spacing--small);
	}

	.mobile-menu__toggle {
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--contrast);
		font-weight: 600;
		border: none;
		background: none;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		padding: 10px 0;
		cursor: pointer;

		svg {
			width: 25px;
			height: 25px;
		}

		&.is-open {

			svg {
				-webkit-transform: rotate(180deg);
				        transform: rotate(180deg);
				-webkit-transition: 0.3s ease-in-out;
				transition: 0.3s ease-in-out;
			}
		}
	}

	.mobile-menu__item {

		ul {
			list-style: none;
			padding: 5px;
			display: none;

			li {
				margin-bottom: var(--wp--preset--spacing--x-small);

				a {
					font-size: var(--wp--preset--font-size--medium);
					color: var(--wp--preset--color--contrast);
					border-bottom: none;
				}
			}
		}

		p {
			color: var(--wp--preset--color--dark-grey);
			margin-top: 10px;
		}

		&.mobile-menu__item--is-articles {

			ul {
				padding: 0;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				gap: var(--wp--preset--spacing--small);

				li {

					a {
						font-size: var(--wp--preset--font-size--medium);
						display: -webkit-inline-box;
						display: -ms-inline-flexbox;
						display: inline-flex;
						-webkit-box-align: center;
						    -ms-flex-align: center;
						        align-items: center;
						gap: 10px;
						font-weight: 600;
						border-bottom: none !important;

						span {
							border-bottom: 1px solid;
						}

						svg {
							width: 20px;
							height: 20px;
						}
					}

					&:first-of-type {

						a {
							color: var(--wp--preset--color--secondary-shade);
							border-bottom-color: var(--wp--preset--color--secondary-shade);
						}
					}

					&:nth-of-type(2) {

						a {
							color: var(--wp--preset--color--tertiary-shade);
							border-bottom-color: var(--wp--preset--color--tertiary-shade);
						}
					}
				}
			}
		}

		&.mobile-menu__item--is-publications {

			ul {

				li {

					a {
						font-weight: 600;
					}

					&:not(:last-of-type) {
						margin-bottom: var(--wp--preset--spacing--small);
					}

					&:first-of-type {

						a {
							color: var(--wp--preset--color--primary-shade);
						}
					}

					&:nth-of-type(2) {

						a {
							color: var(--wp--preset--color--quaternary);
						}
					}

					&:nth-of-type(3) {

						a {
							color: var(--wp--preset--color--dark-grey);
						}
					}
				}
			}
		}
	}
}

/* 4. Body
	========================================================================== */

body {

	&.no-scroll {
		overflow: hidden;
		width: 100vw;
		height: 100vh;
	}
}

/* ==========================================================================
	Components
	========================================================================== */

/**
 * Project-specific non-block component styles.
 *
 * Contents
 *
 * 1. External links
 * 2. Image links
 * 3. Share links
 * 4. Social links
 * 5. Progress bar
 * 6. Back to top
 * 7. Language switcher
 * 8. Read more content
 * 9. Breadcrumnbs
 */

/* 1. External links
	========================================================================== */

.is-external-link {
	position: relative;
	top: 1px;
	margin-left: 5px;
	width: 16px;
	height: 16px;
}

h1,
h2,
h3,
h4 {

	.is-external-link {
		width: 22px;
		height: 22px;
		margin-left: 10px;
	}
}

/* 2. Image links
	========================================================================== */

.site-main a:not(.is-download-link):has(img) {
	display: block;
	overflow: hidden;

	img {
		-webkit-transform: scale(1);
		        transform: scale(1);
		-webkit-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	&:hover {

		img {
			-webkit-transform: scale(1.1);
			        transform: scale(1.1);
		}
	}
}

/* 4. Share links
	========================================================================== */

.share-links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 20px;

	h3 {
		font-size: var(--wp--preset--font-size--medium);
		margin: 0;
	}

	ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 20px;
		padding: 0;
		list-style: none;

		li {
			margin: 0;

			a {
				display: block;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background: var(--wp--preset--color--primary-shade);
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;

				&:hover {
					-webkit-filter: brightness(1.1) opacity(0.6);
					        filter: brightness(1.1) opacity(0.6);
				}

				svg {
					fill: var(--wp--preset--color--base);
				}
			}
		}
	}
}

/* 4. Social links
	========================================================================== */

.social-links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 20px;
	margin-top: var(--wp--preset--spacing--medium);

	ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 20px;
		padding: 0;
		list-style: none;

		li {
			margin: 0;

			a {
				display: block;
				width: 40px;
				height: 40px;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center center;
				border-bottom: none !important;

				&:hover {
					-webkit-filter: brightness(1.1) opacity(0.9);
					        filter: brightness(1.1) opacity(0.9);
				}
			}
		}
	}

	.social-links__linkedin {
		background-image: url(../img/icon-linkedin.svg);
	}

	.social-links__facebook {
		background-image: url(../img/icon-facebook.svg);
	}

	.social-links__x {
		background-image: url(../img/icon-x.svg);
	}

	.social-links__bluesky {
		background-image: url(../img/icon-bluesky.svg);
	}

	&.social-links--is-header {
		margin-top: 0;

		ul {
			gap: 5px;
		}
	}
}

/* 5. Progress bar
	========================================================================== */

progress {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1000;
	width: 100%;
	max-width: 100%;
	height: 5px;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	border: none;
	background-color: var(--wp--preset--color--light-grey);
	margin: 5px 0;

	&:before {
		content: '';
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 15px;
		background-color: var(--wp--preset--color--base);
		z-index: -1;
	}

	&::-webkit-progress-bar {
		background-color: transparent;
	}

	&::-webkit-progress-value {
		background-color: var(--wp--preset--color--primary);
	}

	&::-moz-progress-bar {
		background-color: var(--wp--preset--color--primary);
	}
}

/* 6. Back to top
	========================================================================== */

.back-to-top {
	position: fixed;
	bottom: 25px;
	right: 25px;
	display: none;
	width: 40px;
	height: 40px;
	background: url(../img/icon-chevron-down-base.svg) no-repeat center center / 24px 24px var(--wp--preset--color--primary);
	-webkit-transform: rotate(180deg);
	        transform: rotate(180deg);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;

	&:hover {
		background-color: var(--wp--preset--color--primary-shade);
	}
}

/* 7. Language switcher
	========================================================================== */

.language-switcher {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 500;
	background: var(--wp--preset--color--tertiary);
	border-radius: 100px;
	padding: 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;

	&.language-switcher--is-disabled {
		display: none;
	}

	span {
		background: var(--wp--preset--color--base);
		border-radius: 100px;
		padding: 2px 12px;
	}

	a {
		color: var(--wp--preset--color--contrast);
		padding: 0 10px;
	}
}

/* 8. Read more content.
	========================================================================== */

.read-more-content {

	& > * {
		-webkit-margin-before: var(--wp--preset--spacing--small);
		        margin-block-start: var(--wp--preset--spacing--small);
	}
}

/* 9. Breadcrumbs.
	========================================================================== */

.breadcrumb-item {
	font-size: var(--wp--preset--font-size--extra-tiny);
}

/* ==========================================================================
	Blocks
	========================================================================== */

/**
 * Project-specific non-block component styles.
 *
 * Contents
 *
 * 1. Buttons
 * 2. Post titles
 * 3. Posts
 * 4. Excerpts
 * 5. Quote
 */

/* 1. Buttons
	========================================================================== */

.wp-element-button {
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	border-radius: 100px !important;
	line-height: 1.6;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 10px;
	font-size: var(--wp--preset--font-size--small) !important;
	padding: 10px 20px !important;

	&:after {
		content: '';
		width: 24px;
		height: 24px;
		position: relative;
		left: 0;
		background: url(../img/icon-arrow-right-base.svg) no-repeat center center / contain;
		-webkit-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	&.has-contrast-color {

		&:after {
			background: url(../img/icon-arrow-right-contrast.svg) no-repeat center center / contain;
		}
	}

	&:hover {
		-webkit-filter: brightness(1.1) opacity(0.9);
		        filter: brightness(1.1) opacity(0.9);

		&:after {
			left: 5px;
		}
	}
}

.wp-block-button {

	&.is-style-medium-button {

		.wp-element-button {
			font-size: var(--wp--preset--font-size--tiny) !important;
			padding: 8px 16px !important;

			&:after {
				width: 20px;
				height: 20px;
			}
		}
	}

	&.is-style-small-button {

		.wp-element-button {
			font-size: var(--wp--preset--font-size--x-tiny) !important;
			padding: 6px 14px !important;

			&:after {
				width: 20px;
				height: 20px;
			}
		}
	}

	&.is-style-no-arrow-button {

		.wp-element-button {
			font-size: var(--wp--preset--font-size--x-tiny) !important;
			padding: 8px 16px !important;

			&:after {
				content: unset;
			}
		}
	}

	&.is-style-text-only-button {

		.wp-element-button {
			font-weight: 700;
			padding: 0 !important;

			&:after {
				width: 20px;
				height: 20px;
			}

			&.has-primary-color {

				&:after {
					background: url(../img/icon-arrow-right-primary.svg) no-repeat center center / contain;
				}
			}

			&.has-quaternary-color {

				&:after {
					background: url(../img/icon-arrow-right-quaternary.svg) no-repeat center center / contain;
				}
			}
		}
	}


	/* Custom rarely used button variations that can be inserted as patterns. */
	&.is-style-download-button {

		.wp-element-button {

			&:after {
				content: unset;
			}

			&:before {
				content: '';
				width: 24px;
				height: 24px;
				background: url(../img/icon-download.svg) no-repeat center center / contain;
			}

			&.has-contrast-color {

				&:after {
					background: url(../img/icon-download-contrast.svg) no-repeat center center / contain;
				}
			}
		}
	}

	&.is-style-text-view-button {

		.wp-element-button {

			&:after {
				content: unset;
			}

			&:before {
				content: '';
				width: 24px;
				height: 24px;
				background: url(../img/icon-eye.svg) no-repeat center center / contain;
			}

			&.has-contrast-color {

				&:after {
					background: url(../img/icon-download-contrast.svg) no-repeat center center / contain;
				}
			}
		}
	}

	&.is-style-search-button {

		.wp-element-button {
			font-size: var(--wp--preset--font-size--small) !important;
			font-weight: 500 !important;
			padding: 6px 20px !important;

			&:after {
				content: '';
				position: static;
				width: 24px;
				height: 24px;
				margin-bottom: 2px;
				background: url(../img/icon-search-white.svg) no-repeat center center / contain;
			}
		}
	}
}

/* 2. Post title
	========================================================================== */

.wp-block-post-title {

	a {
		display: inline !important;
	}
}

/* 3. Posts
	========================================================================== */

.wp-block-post {
	position: relative;

	img {
		display: block;
	}
}

/* 4. Excerpts
	========================================================================== */

.wp-block-post-excerpt {

	p {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		-webkit-box-orient: vertical;
	}
}

/* 5. Quote
	========================================================================== */

.wp-block-quote {

	p {
		padding-left: var(--wp--preset--spacing--small);
		border-left: 3px solid var(--wp--preset--color--primary);
		color: var(--wp--preset--color--primary-shade);
		font-size: var(--wp--preset--font-size--medium);

		&:before {
			content: open-quote;
		}

		&:after {
			content: close-quote;
		}
	}

	cite {
		font-weight: 700;
		font-style: normal;

	}

}

/* ==========================================================================
	Mixins
	========================================================================== */

/**
 * Reusable styles for use in the project.
 *
 * Contents
 *
 * 1. Link with icon
 * 2. Read more
 * 3. Highisht first post
 * 4. Publication item
 * 5. Download link
 * 6. Article list
 * 7. Featured article
 * 8. Observer top section
 * 9. Dispatch issue card
 */

/* 1. Link with icon
	========================================================================== */

.is-link-with-icon {

	.wp-block-group {
		max-width: 250px;
	}

	h3 {
		display: inline;
		-webkit-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
		border-bottom: 1px solid transparent;
	}

	figure {
		padding: 10px 0 0 5px;
	}

	img {
		-webkit-transform: scale(1);
		        transform: scale(1);
		-webkit-transform-origin: center bottom;
		        transform-origin: center bottom;
		-webkit-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	&:hover {

		h3 {
			color: var(--wp--preset--color--primary-shade);
			border-bottom-color: var(--wp--preset--color--primary-shade);
		}

		img {
			-webkit-transform: scale(1.1);
			        transform: scale(1.1);
		}
	}
}

/* 2. Read more
	========================================================================== */

.is-read-more {
	border: 2px solid var(--wp--preset--color--tertiary-shade);
	color: var(--wp--preset--color--tertiary-shade);
	font-weight: 600;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 5px;
	padding: 3px 13px !important;
	font-size: var(--wp--preset--font-size--tiny) !important;

	&:after {
		content: '';
		width: 16px;
		height: 16px;
		background: url(../img/icon-plus-tertiary.svg) no-repeat center center / contain;
		position: static;
	}

	&.is-active {

		&:after {
			background: url(../img/icon-minus-tertiary.svg) no-repeat center center / contain;
		}
	}
}

/* 3. Highlight first post
	========================================================================== */

.is-latest {

	&:before {
		content: 'Latest';
		position: absolute;
		top: 0;
		right: 0;
		padding: 4px 12px;
		background: var(--wp--preset--color--tertiary);
		color: var(--wp--preset--color--contrast);
		z-index: 2;
		pointer-events: none;
	}

	&:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 4px solid var(--wp--preset--color--tertiary);
		z-index: 1;
		pointer-events: none;
	}
}

/* 4. Columns
	========================================================================== */

.publication-item {
	container-name: post-item;
	container-type: inline-size;
}

@container post-item (width < 400px) {

	.wp-block-columns {
		-ms-flex-wrap: wrap !important;
		    flex-wrap: wrap !important;
	}

	.wp-block-column {
		-ms-flex-preferred-size: 100% !important;
		    flex-basis: 100% !important;
	}
}

/* 5. Download link
	========================================================================== */

.is-download-link {
	position: relative;
	overflow: visible;

	&:after {
		content: '';
		display: block;
		position: absolute;
		top: -10px;
		right: -10px;
		width: 42px;
		height: 42px;
		background: url(../img/icon-download.svg) no-repeat center center / 24px 24px var(--wp--preset--color--primary-shade);
		z-index: 1;
		pointer-events: none;
	}

	&.is-primary-background {

		&:after {
			background-color: var(--wp--preset--color--primary-shade);
		}
	}

	&.is-quaternary-background {

		&:after {
			background-color: var(--wp--preset--color--quaternary);
		}
	}

	&.is-darker-grey-background {

		&:after {
			background-color: var(--wp--preset--color--darker-grey);
		}
	}
}

/* 6. Article list
	========================================================================== */

.article-list {

	.wp-block-post:first-of-type {

		.wp-block-columns {
			margin-top: 0 !important;
		}
	}

	.wp-block-post:last-of-type {

		.wp-block-columns {
			padding-bottom: 0 !important;
			border: none !important;
		}
	}
}

/* 7. Featured article
	========================================================================== */

.featured-article {

	/* Bit hacky - make this better. */
	.wp-block-column a,
	.wp-block-column a>div,
	.wp-block-column a img {
		height: 100%;
	}

	img {
		-o-object-fit: cover;
		   object-fit: cover;
	}
}

/* 8. Observer top section
	========================================================================== */

.observer-top-section {

	@media (width > 1380px) {

		&>.wp-block-column {
			-ms-flex-preferred-size: 50% !important;
			    flex-basis: 50% !important;
		}
	}

	@media (width < 1180px) {
		-ms-flex-wrap: wrap !important;
		    flex-wrap: wrap !important;

		&>.wp-block-column {
			-ms-flex-preferred-size: 100% !important;
			    flex-basis: 100% !important;
		}
	}

	@media (560px <=width <=1180px) {

		&>.wp-block-column:last-of-type .wp-block-query ul {
			display: -ms-grid;
			display: grid;
			-ms-grid-columns: 1fr 1fr 1fr;
			grid-template-columns: 1fr 1fr 1fr;
			gap: var(--wp--preset--spacing--small);

			.wp-block-post {
				margin: 0 !important;

				.wp-block-columns {
					-ms-flex-wrap: wrap !important;
					    flex-wrap: wrap !important;
				}

				.wp-block-column {
					-ms-flex-preferred-size: 100% !important;
					    flex-basis: 100% !important;
				}
			}
		}
	}
}

.single-publications {

	article {

		&>.wp-block-group {

			@media (width < 1180px) {

				.dispatch-all-link {
					display: none;
				}
			}
		}
	}
}

/* 9. Dispatch issue card
	========================================================================== */

.dispatch-issue-card {

	img {
		-o-object-position: center top;
		   object-position: center top;
	}
}

/* 10. Observer all link
	========================================================================== */

.observer-all-link {

	@media (width <=960px) {
		display: none;
	}
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Styles for inputs and other form elements.
 *
 * Contents
 *
 * 1. Fieldsets, labels and legends
 * 2. Input fields
 * 3. Selects
 * 4. Custom radio buttons
 * 5. Custom checkboxes
 * 6. Gravity forms modifiers
 */

.editor-styles-wrapper,
.wp-site-blocks {

	/* 1. Fieldsets, labels and legends
	   ========================================================================== */

	fieldset {
		padding: 0;
		border: none;
	}

	label,
	legend {
		font-size: var(--wp--preset--font-size--tiny);
		display: inline-block;
		margin-bottom: 5px;
	}


	/* 2. Input fields
	   ========================================================================== */

	[type='text'],
	[type='password'],
	[type='email'],
	[type='url'],
	[type='date'],
	[type='month'],
	[type='time'],
	[type='datetime'],
	[type='datetime-local'],
	[type='week'],
	[type='number'],
	[type='search'],
	[type='tel'],
	textarea,
	select {
		width: 100%;
		font-size: var(--wp--preset--font-size--small);
		padding: 14px 25px;
		border: none;
		background: var(--wp--preset--color--base);
		border-radius: 100px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		min-height: 55px;

		&:focus {
			outline: 1px solid var(--wp--preset--color--primary);
			outline-offset: 5px;
		}
	}

	[type="search"] {

		&::-webkit-search-cancel-button {
			position: relative;
			right: 40px;
			cursor: pointer;
		}
	}


	/* 3. Selects
	   ========================================================================== */

	select {
		max-width: 100%;
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;

		&:not([multiple]) {
			background: url(../img/icon-chevron-down.svg) no-repeat right 15px center / 15px 15px var(--wp--preset--color--base);
		}

		&:is([multiple]) {
			padding: 10px 0;

			option {
				padding: 5px 15px;

				&:checked {
					background-image: -webkit-gradient(linear, left bottom, left top, from(var(--wp--preset--color--secondary)), to(var(--wp--preset--color--secondary)));
					background-image: linear-gradient(0deg, var(--wp--preset--color--secondary) 0%, var(--wp--preset--color--secondary) 100%);
				}
			}
		}
	}


	/* 4. Radio buttons
	   ========================================================================== */

	[type='radio'] {

		/* Remove the default radio button. */
		position: absolute;
		opacity: 0;

		& ~ label {
			font-weight: 400;
			position: relative;
			cursor: pointer;
			padding: 0;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
		}

		/* The radio button itself. */

		& ~ label::before {
			content: '';
			margin-right: 10px;
			display: inline-block;
			vertical-align: text-top;
			width: 24px;
			height: 24px;
			background: var(--wp--preset--color--base);
			border: 2px solid var(--wp--preset--color--contrast);
			border-radius: 50%;
		}

		/* Radio button hover state. */

		&:hover ~ label::before {
			border: 2px solid var(--wp--preset--color--primary);
		}

		/* Radio button focus state. */

		&:focus ~ label::before {
			outline: 1px solid var(--wp--preset--color--primary);
			outline-offset: 5px;
		}

		/* Checked radio button style. */

		&:checked ~ label::before {
			border-color: var(--wp--preset--color--primary);
		}

		& ~ label::after {
			content: '';
			width: 16px;
			height: 16px;
			position: absolute;
			top: 6px;
			left: 6px;
			-webkit-transform: scale(0);
			        transform: scale(0);
			background: var(--wp--preset--color--primary);
			border-radius: 50%;
		}

		/* Show the checked state. */

		&:checked ~ label::after {
			-webkit-transform: scale(1);
			        transform: scale(1);
		}
	}


	/* 5. Checkboxes
	   ========================================================================== */

	[type='checkbox'] {

		/* Remove the default checkbox */
		position: absolute;
		opacity: 0;

		& ~ label {
			font-weight: 400;
			position: relative;
			cursor: pointer;
			padding: 0;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
		}

		/* The checkbox itself. */

		& ~ label::before {
			content: '';
			margin-right: 10px;
			display: inline-block;
			vertical-align: text-top;
			width: 24px;
			height: 24px;
			background: var(--wp--preset--color--base);
			border: 2px solid var(--wp--preset--color--contrast);
		}

		/* Checkbox hover state. */

		&:hover ~ label::before {
			border-color: var(--wp--preset--color--primary);
		}

		/* Checkbox focus state. */

		&:focus ~ label::before {
			outline: 1px solid var(--wp--preset--color--primary);
			outline-offset: 5px;
		}

		/* Checked background. */

		&:checked ~ label::before {
			background: var(--wp--preset--color--primary);
			border-color: var(--wp--preset--color--primary);
		}

		/* The checkmark. */

		& ~ label::after {
			content: '';
			width: 14px;
			height: 14px;
			position: absolute;
			top: 7px;
			left: 7px;
			-webkit-transform: scale(0);
			        transform: scale(0);
			-webkit-box-shadow: inset 1em 1em var(--wp--preset--color--base);
			        box-shadow: inset 1em 1em var(--wp--preset--color--base);
			-webkit-transform-origin: bottom left;
			        transform-origin: bottom left;
			clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
		}

		/* Show the checkmark. */

		&:checked ~ label::after {
			-webkit-transform: scale(1);
			        transform: scale(1);
		}
	}


	/* 6. GravityForms modifiers
	   ========================================================================== */

	.gform_fields,
	.gform_footer {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 15px;
	}

	.gform_footer {
		margin-top: var(--wp--preset--spacing--small);
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
}

/* ==========================================================================
	Search
	========================================================================== */

/**
 * Styles for search components.
 *
 * Contents
 *
 * 1. Search overlay
 * 2. Search results
 * 3. Search result
 * 4. Site search
 */

/* 1. Search overlay
	========================================================================== */

.search-overlay {
	position: fixed;
	bottom: calc(100% - (var(--wp--preset--spacing--large) * 2) * -1);
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1000;
	background: var(--wp--preset--color--primary);
	padding-top: var(--wp--preset--spacing--large);
	padding-bottom: var(--wp--preset--spacing--large);
	-webkit-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;

	&.is-visible {
		bottom: 0;
	}

	h2 {
		color: var(--wp--preset--color--base);
	}

	.search-overlay__inner {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: var(--wp--preset--spacing--medium);
		padding-top: var(--wp--preset--spacing--large);
		padding-bottom: var(--wp--preset--spacing--large);
	}

	.search-overlay__close {
		position: absolute;
		top: 0;
		right: 0;
		width: 40px;
		height: 40px;
		background: url(../img/icon-close-base.svg) no-repeat center center / contain;
		border: none;
		cursor: pointer;
	}

	.search-overlay__fields {
		position: relative;
	}

	[type="search"] {
		width: 500px;
		max-width: 100%;
		font-size: var(--wp--preset--font-size--small);
		padding: 14px 25px;
		border: none;
		background: var(--wp--preset--color--base);
		border-radius: 100px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		min-height: 55px;

		&:focus {
			outline: 1px solid var(--wp--preset--color--primary);
			outline-offset: 5px;
		}

		&::-webkit-search-cancel-button {
			position: relative;
			right: 40px;
		}
	}

	.search-overlay__button {
		position: absolute;
		right: 15px;
		top: 0;
		width: 40px;
		height: 100%;
		border: none;
		background: url(../img/icon-search-primary.svg) no-repeat left center / 30px 30px;
		cursor: pointer;
	}

	.search-overlay__recommended {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 10px;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		list-style: none;
		padding: 0;
		max-width: 500px;

		a {
			display: block;
			background: var(--wp--preset--color--tertiary);
			color: var(--wp--preset--color--contrast);
			border-radius: 100px;
			padding: 8px 14px;
			-webkit-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;

			&:hover {
				-webkit-filter: brightness(1.1) opacity(0.9);
				        filter: brightness(1.1) opacity(0.9);
			}
		}
	}
}

/* 2. Search results
	========================================================================== */

.search-results {

	.search-results__banner {
		padding: var(--wp--preset--spacing--medium) 0 var(--wp--preset--spacing--large);

		h1 {
			font-size: var(--wp--preset--font-size--gigantic);
		}
	}

	.search-results__list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: var(--wp--preset--spacing--medium);
	}

	.facetwp-facet-count {
		margin-bottom: 0;
	}
}

/* 3. Search result
	========================================================================== */

.search-result {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: var(--wp--preset--spacing--small);
	padding-bottom: var(--wp--preset--spacing--medium);
	border-bottom: 1px solid var(--wp--preset--color--light-grey);

	&:first-of-type {
		padding-top: 0;
	}

	.search-result__type {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 80px;
		        flex: 0 0 80px;
	}

	.search-result__icon {
		width: 80px;
		height: 80px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	.search-result__label {
		font-size: var(--wp--preset--font-size--tiny);
		color: var(--wp--preset--color--dark-grey);
		text-transform: capitalize;
		margin-top: 5px;
	}

	h2 {
		font-size: var(--wp--preset--font-size--large);
		margin-top: 10px;

		a {
			color: var(--wp--preset--color--contrast);
			border-bottom: 1px solid transparent;
			text-decoration: none;
		}
	}

	time {
		font-size: var(--wp--preset--font-size--tiny);
		display: inline-block;
		margin-top: 10px;
	}

	.search-result__tax {
		margin-top: 20px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 5px;

		span {
			font-size: var(--wp--preset--font-size--tiny);
			color: var(--wp--preset--color--contrast);
			background: var(--wp--preset--color--secondary-highlight);
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			gap: 5px;
			padding: 2px 5px;

			svg {
				width: 18px;
				height: 18px;
				stroke: var(--wp--preset--color--secondary-shade);
			}
		}
	}

	&.search-result--post {

		.search-result__icon {
			background: var(--wp--preset--color--secondary-highlight);

			svg {
				stroke: var(--wp--preset--color--secondary-shade);
			}
		}

		.block-post-meta {
			color: var(--wp--preset--color--secondary);
		}

		h2:hover {
			color: var(--wp--preset--color--secondary);
			border-bottom-color: var(--wp--preset--color--secondary);
		}
	}

	&.search-result--page {

		.search-result__icon {
			background: var(--wp--preset--color--primary-shade);
			color: var(--wp--preset--color--base);

			svg {
				stroke: var(--wp--preset--color--base);
			}
		}

		.block-post-meta {
			color: var(--wp--preset--color--primary-shade);
		}
	}

	&.search-result--resources {

		.search-result__icon {
			background: var(--wp--preset--color--tertiary-shade);
			color: var(--wp--preset--color--base);

			svg {
				stroke: var(--wp--preset--color--base);
			}
		}

		.block-post-meta,
		time {
			color: var(--wp--preset--color--tertiary-shade);
		}
	}
}

/* 4. Search form
	========================================================================== */

.site-search {
	position: relative;
	margin-top: var(--wp--preset--spacing--medium);
	width: 100%;
	max-width: 600px;

	button {
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		margin: auto;
		padding: 0;
		right: 0;
		background: none;
		border: none;
		height: 100%;
		aspect-ratio: 1;
		width: auto;
		border-radius: 100px;
		font-size: var(--wp--preset--font-size--medium);
		cursor: pointer;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;

		svg {
			stroke: var(--wp--preset--color--primary-shade);
		}
	}

	&.site-search--light-bg {

		[type="search"] {
			border: 1px solid var(--wp--preset--color--dark-grey);
		}
	}
}

/* ==========================================================================
	Facets
	========================================================================== */

/**
 * FacetWP styles.
 *
 * Contents
 *
 * 1. Facet block
 */

/* 1. Facet block
	========================================================================== */

.block-facet {
	-webkit-margin-before: var(--wp--preset--spacing--small);
	        margin-block-start: var(--wp--preset--spacing--small);

	.block-facet__title {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		gap: 25px;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		cursor: pointer;

		& > div {
			display: -webkit-inline-box;
			display: -ms-inline-flexbox;
			display: inline-flex;
			-ms-flex-wrap: wrap;
			    flex-wrap: wrap;
			gap: 5px;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
		}

		h3,
		p {
			font-family: 'Barlow', sans-serif;
			font-size: var(--wp--preset--font-size--large);
			line-height: 1.3;
			font-weight: 600;
			margin: 0;
		}

		span {
			background: url(../../dist/img/icon-plus.svg) no-repeat right center transparent;
			border: none;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			padding: 0;
			width: 40px;
			height: 40px;
			cursor: pointer;

			&.is-active {
				background: url(../../dist/img/icon-minus.svg) no-repeat right center transparent;
			}
		}
	}

	/* For checkbox lists. */
	.block-facet__list {
		display: none;
		margin-top: var(--wp--preset--spacing--x-small);

		.facetwp-counter {
			display: none;
		}

		.facetwp-toggle {
			font-size: var(--wp--preset--font-size--small);
			padding: 6px 12px;
			border: 2px solid;
			border-radius: 50px;
			margin-top: var(--wp--preset--spacing--x-small);
			background: none;

			&:not(.facetwp-hidden) {
				display: -webkit-inline-box;
				display: -ms-inline-flexbox;
				display: inline-flex;
			}
		}

		.facetwp-facet {
			margin-bottom: 0 !important;
		}

		.facetwp-checkbox {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: start;
			    -ms-flex-align: start;
			        align-items: flex-start;
			background: none !important;
			gap: 10px;
			padding-left: 0 !important;
			position: relative;
			margin-bottom: 10px !important;

			&:before {
				content: '';
				margin-top: 4px;
				width: 20px;
				height: 20px;
				-webkit-box-flex: 0;
				    -ms-flex: 0 0 20px;
				        flex: 0 0 20px;
				border: 1px solid var(--wp--preset--color--contrast);
				background: none;
				-webkit-transition: background 120ms ease-in-out, -webkit-transform 120ms ease-in-out;
				transition: background 120ms ease-in-out, -webkit-transform 120ms ease-in-out;
				transition: background 120ms ease-in-out, transform 120ms ease-in-out;
				transition: background 120ms ease-in-out, transform 120ms ease-in-out, -webkit-transform 120ms ease-in-out;
			}

			&.checked:before {
				background: var(--wp--preset--color--primary);
			}

			&.checked:after {
				content: '';
				position: absolute;
				top: 7px;
				left: 8px;
				width: 5px;
				height: 12px;
				border: solid white;
				border-width: 0 2px 2px 0;
				-webkit-transform: rotate(45deg);
				        transform: rotate(45deg);
			}

			.facetwp-children {
				display: inline-block;
				margin-left: 10px;
				color: var(--wp--preset--color--dark-grey);
			}
		}

		&.has-primary-shade-highlight {

			.facetwp-checkbox.checked:before {
				background: var(--wp--preset--color--primary-shade);
			}

			.facetwp-toggle {
				border-color: var(--wp--preset--color--primary-shade);
				color: var(--wp--preset--color--primary-shade);
			}
		}

		&.has-secondary-shade-highlight {

			.facetwp-checkbox.checked:before {
				background: var(--wp--preset--color--secondary-shade);
				border-color: var(--wp--preset--color--secondary-shade);
			}

			.facetwp-toggle {
				border-color: var(--wp--preset--color--secondary-shade);
				color: var(--wp--preset--color--secondary-shade);
			}
		}

		&.has-tertiary-shade-highlight {

			.facetwp-checkbox.checked:before {
				background: var(--wp--preset--color--tertiary-shade);
				border-color: var(--wp--preset--color--tertiary-shade);
			}

			.facetwp-toggle {
				border-color: var(--wp--preset--color--tertiary-shade);
				color: var(--wp--preset--color--tertiary-shade);
			}
		}

		&.has-quaternary-highlight {

			.facetwp-checkbox.checked:before {
				background: var(--wp--preset--color--quaternary);
				border-color: var(--wp--preset--color--quaternary);
			}

			.facetwp-toggle {
				border-color: var(--wp--preset--color--quaternary);
				color: var(--wp--preset--color--quaternary);
			}
		}

		.facetwp-expand {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			margin-left: auto;

			i {
				display: inline-block;
				width: 18px;
				height: 18px;
				background: url(../../dist/img/icon-chevron-down.svg) no-repeat center center transparent;
				-webkit-transition: 0.3s ease-in-out;
				transition: 0.3s ease-in-out;

				&.is-collapse {
					-webkit-transform: rotate(180deg);
					        transform: rotate(180deg);
				}
			}
		}
	}


	/* For search. */
	.facetwp-input-wrap {
		display: block;
		max-width: 600px !important;
		width: 100% !important;
	}

	.facetwp-facet-search {
		margin-bottom: 0 !important;

		.facetwp-icon {
			width: 40px;
			margin-right: 20px;
			opacity: 1;

			&:before {
				background: none !important;
			}

			svg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}

	.has-secondary-shade-highlight .facetwp-icon svg {
		stroke: var(--wp--preset--color--secondary-shade);
	}

	.has-tertiary-shade-highlight .facetwp-icon svg {
		stroke: var(--wp--preset--color--tertiary-shade);
	}


	/* For reset. */
	.facetwp-reset {
		font-size: var(--wp--preset--font-size--small);
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		gap: 5px;
		padding: 8px 16px;
		background: none;
		border: 2px solid;
		border-radius: 50px;
		border: none;
		cursor: pointer;

		&:after {
			content: '';
			width: 20px;
			height: 20px;
			background: url(../../dist/img/icon-close-base.svg) no-repeat center center / contain;
		}

		&.is-disabled {
			background: var(--wp--preset--color--light-grey);
			cursor: auto;
			pointer-events: none;

			&:after {
				background: url(../../dist/img/icon-close.svg) no-repeat center center / contain;
			}
		}
	}

	.has-primary-shade-highlight {

		.facetwp-reset:not(.is-disabled) {
			background: var(--wp--preset--color--primary-shade);
			color: var(--wp--preset--color--base);
		}
	}

	.has-secondary-shade-highlight {

		.facetwp-reset:not(.is-disabled) {
			background: var(--wp--preset--color--secondary-shade);
			color: var(--wp--preset--color--base);
		}
	}

	.has-tertiary-shade-highlight {

		.facetwp-reset:not(.is-disabled) {
			background: var(--wp--preset--color--tertiary-shade);
			color: var(--wp--preset--color--base);
		}
	}

	.has-quaternary-highlight {

		.facetwp-reset:not(.is-disabled) {
			background: var(--wp--preset--color--quaternary);
			color: var(--wp--preset--color--base);
		}
	}


	/* For date range. */
	.facetwp-facet-date_range {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
		gap: 15px;
		margin-bottom: 0 !important;

		& > [type="text"] {
			font-family: 'Barlow', sans-serif;
			font-weight: 600;
			max-width: 300px;
			border-radius: 0;
			border: 2px solid var(--wp--preset--color--contrast);
			padding: 12px 20px;
			background: url(../../dist/img/icon-chevron-down.svg) no-repeat right 15px center / 20px 20px;
		}
	}


	/* For pagination. */
	.facetwp-pager {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 10px;

		.facetwp-page {
			padding: 0;
			border-bottom: 1px solid;
			line-height: 1.3;

			&.prev,
			&.next {
				border: none;
				width: 40px;
				height: 40px;
				text-indent: -9999px;
			}

			&.prev {
				background: url(../../dist/img/icon-chevron-left.svg) no-repeat center center;
				margin-right: 20px;
			}

			&.next {
				background: url(../../dist/img/icon-chevron-right.svg) no-repeat center center;
				margin-left: 20px;
			}

			&.active {
				padding: 8px;
				border: none;
				font-weight: 400;
			}

			&.dots {
				border: none;
			}
		}
	}

	.has-primary-shade-highlight {

		.facetwp-page.prev,
		.facetwp-page.next {
			background-color: var(--wp--preset--color--primary-shade);
		}

		.facetwp-page.active {
			background-color: var(--wp--preset--color--primary-highlight);
		}
	}

	.has-secondary-shade-highlight {

		.facetwp-page.prev,
		.facetwp-page.next {
			background-color: var(--wp--preset--color--secondary-shade);
		}

		.facetwp-page.active {
			background-color: var(--wp--preset--color--secondary-highlight);
		}
		
	}

	.has-tertiary-shade-highlight {

		.facetwp-page.prev,
		.facetwp-page.next {
			background-color: var(--wp--preset--color--tertiary-shade);
		}

		.facetwp-page.active {
			background-color: var(--wp--preset--color--tertiary);
		}
	}

	.has-quaternary-highlight {

		.facetwp-page.prev,
		.facetwp-page.next,
		.facetwp-page.active {
			background-color: var(--wp--preset--color--quaternary);
		}
	}


	/* For count. */
	.facetwp-facet-count {
		color: var(--wp--preset--color--dark-grey);
	}
}