/*!
Theme Name: PADDAP
Theme URI: http://underscores.me/
Author: PADDAP
Author URI: https://paddap.nl
Description: This is the boilerplate theme of PADDAP Digital Agency
Version: 1.0.0
Tested up to: 6.0.2
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: paddap
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

PADDAP is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

* {
	font-family: var(--font-primary);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
}

body {
	background: var(--color-beige);
}

button[type="button"] {
	background: transparent;
}

/* Global horizontal scrollbar hide */
html, body {
	overflow-x: clip;
}

html {
	scrollbar-width: auto;
	scrollbar-color: auto;
}

/* Chrome, Safari, Edge */
::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: var(--color-beige);
}

::-webkit-scrollbar-thumb {
	background: var(--color-donker-beige);
	border-radius: 4px;
	transition: all 0.5s ease;
}

::-webkit-scrollbar-thumb:hover {
	background: #b0a9a1;
}

/* Firefox */
* {
	scrollbar-color: var(--color-donker-beige) var(--color-beige);
}

/* HEADER */
.site-header {
	position: fixed;
	top: 0 !important;
	z-index: 100;
	width: 100%;
	background: transparent;
}

.site-header__content {
	padding: var(--space-xs) var(--space-lg);
	margin-top: var(--space-md);
	justify-content: space-between;
	align-items: center;
}

.site-branding {
	max-width: 200px;
}

.site-branding img {
	width: 100%;
	height: auto;
	display: block;
}

.main-navigation {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-md);
}

.site-header ul {
	list-style: none;
}

.site-header .menu {
	display: flex;
	flex-direction: row;
	gap: var(--space-md);
	height: 40px;
}

.site-header__content .navbar__button {
	transition: all 0.5s ease;
}

.site-header {
	transition: transform 0.3s ease, background 0.3s ease;
}
.site-header.scrolled {
	transform: translateY(calc(-1 * var(--space-md)));
	background: var(--color-wit);
	box-shadow: 0px 4px 4px 0px #0000001A;
}
.site-header.scrolled .menu a {
	color: var(--color-donkerblauw);
}
.site-header.scrolled {
	background: var(--color-wit);
}

.menu-item {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.site-footer a,
.menu-item > a {
	display: flex;
	align-items: center;
	height: 100%;
	text-align: center;
	text-decoration: none;
	position: relative;
}
.site-footer__info-bottom a::after,
.site-footer__contact-1-info a::after,
.site-footer__contact-2-info a::after,
.menu-item > a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: currentcolor;
	transition: width 0.3s ease;
}

.site-footer__info-bottom a:not(.button-primary):hover::after,
.site-footer__contact-1-info a:not(.button-primary):hover::after,
.site-footer__contact-2-info a:not(.button-primary):hover::after,
.menu-item:not(:has(ul)) > a:hover::after {
	width: 100%;
}

.sub-menu {
	position: absolute;
	top: 100%;
	background: var(--color-aquagroen);
	padding: 0 var(--space-sm);
	border-radius: 10px 10px var(--space-md) 10px;
	box-shadow: 0px 4px 4px 0px #00000040;
}

.sub-menu > li {
	display: flex;
}

.sub-menu > li > a {
	padding: 10px 0;
	width: fit-content;
	position: relative;
	font-weight: var(--fw-book);
}

.menu-item:has(.sub-menu):hover .submenu-chevron {
	transform: rotate(180deg);
}

.submenu-chevron {
	margin-left: var(--space-xxs);
	transition: all 0.3s ease;
}

.heart-button {
	cursor: pointer;
	display: grid;
	place-items: center;
	min-width: 30px;
	min-height: 30px;
}

/* HERO SECTION */
.hero-section {
	padding-top: var(--space-md);
	padding-inline: var(--space-md);
}

.hero-section__container {
	position: relative;
}

.hero-section__image-container {
	position: relative;
	height: 680px;
	overflow: hidden;
	width: 100%;
	display: flex;
	flex-direction:  column;
	align-items: center;
	justify-content: center;
	border-bottom-right-radius: var(--radius-lg);
}

.hero-section__image-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
		circle at center,
		rgba(0, 0, 0, 0.03) 0%,
		rgba(0, 0, 0, 0.10) 45%,
		rgba(0, 0, 0, 0.18) 100%
	);
	pointer-events: none;
	z-index: 10;
}

.hero-section__image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.hero-section__image-container img.active {
	opacity: 1;
}

.hero-section__title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 550px;
	color: var(--color-wit);
	text-align: center;
	z-index: 20;
}

.vacature-overzicht-section__filters,
.hero-section__search-form {
	display: flex;
	flex-direction: row;
	gap: var(--space-md);
	position: relative;
	background: var(--color-aquagroen);
	padding: var(--space-md);
	margin-top: -80px;
	width: 100%;
	z-index: 30;
	margin-inline: auto;
	border-top-left-radius: var(--radius-md);
	margin-bottom: 20px;
}

.hero-section__search-form {
	width: 50%;
}

.hero-section__subtitle {
	color: var(--color-wit);
	line-height: 1.5;
	width: 100%;
}

.vacature-overzicht-section__filters {
	transition: top 0.25s ease;
}

.vacature-overzicht-section__filters,
.hero-section__search-form-container {
	display: flex;
	width: 100%;
	position: relative;
}

.page-id-6 .hero-section__search-form-container {
	width: fit-content;
}

.vacature-overzicht-section__filters-container,
.hero-section__search-form-container form {
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: var(--space-sm);
}

.vacature-overzicht-section__filters-container {
	flex-direction: column;
	margin-top: var(--space-md);
}

.vacature-overzicht-section__filters > form > h2 {
	color: var(--color-wit);
}

.wpcf7-form,
.vacature-overzicht-section__filters,
.hero-section__search-form {
	border-bottom: 20px solid var(--color-zeegroen);
}

.vacature-overzicht-section__filters-buttons {
	margin-top: var(--space-sm);
	display: flex;
	flex-direction: row;
	gap: var(--space-sm);
}

.vacature-overzicht-section__filters-buttons input {
	max-width: 100%;
	width: 100%;
}

.vacature-overzicht-section__control-bar {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.vacature-overzicht-section__list-type-buttons {
	display: flex;
	flex-direction: row;
	gap: var(--space-md);
}

.vacature-overzicht-section__list-type-buttons button {
	display: flex;
	flex-direction: row;
	gap: var(--space-xs);
	align-items: center;
	border: none;
	cursor: pointer;
	color: var(--color-donker-beige);
	background: transparent;
}

/* Grid view — default */
.vacature-list.view-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
}

/* List view */

.vacature-list.view-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.vacature-overzicht-section__meer-laden-button {
	margin-top: var(--space-md);
}

.vacature-list.view-list .vacature-kaart {
	flex-direction: row;
	padding-bottom: var(--space-md);
	padding-right: var(--space-xl);
	min-height: fit-content;
	gap: var(--space-lg);
	justify-content: space-between;
}

.vacature-kaart .location-pin-icon,
.vacature-kaart .graduation-cap-icon,
.vacature-kaart .watch-icon {
	min-height: 32px;
	min-width: 32px;
}

.vacature-list.view-list .vacature-kaart__title {
	width: 100%;
	max-width: 300px;
	font-size: 20px;
	line-height: 1;
}

.vacature-list.view-list .vacature-kaart__locatie {
	max-width: 230px;
}

.vacature-list.view-list .vacature-kaart__content {
	margin-top: 0;
	margin-left: auto;
	flex-direction: row;
}

/* HOME IMAGE TEXT SECTION */

.image-text-section {
	margin-top: var(--space-xl);
}

.page-id-6 .image-text-section:nth-child(2) h1 {
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	color: var(--color-zeegroen); 
}

.image-text-section__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 100px;
}

.image-text-section__text {
	max-width: 628px;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.image-text-section__text h1 {
	color: var(--color-zeegroen);
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	max-width: 600px;
}

.image-text-section__text p {
	font-family: var(--font-primary);
	font-weight: var(--fw-book);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-donkerblauw);
}

.image-text-section__image {
	flex-shrink: 0;
}

.image-text-section__image img {
	width: 519px;
	height: 486px;
	object-fit: cover;
	border-top-left-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
}

.image-text-section__buttons {
	display: flex;
	flex-direction: row;
	gap: var(--space-sm);
}

/* Uitgelichte Vacatures */

.uitgelichte-vacatures-section {
	margin-top: var(--space-xxl);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.uitgelichte-vacatures-section > div {
	margin-top: var(--space-lg);
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: var(--space-xs);
}

.uitgelichte-vacatures-section > a {
	margin-top: var(--space-md);
}

/* Vacature Kaart */
div:has(.vacature-kaart),
.vacature-kaart {
	width: 100%;
}

.vacature-kaart {
	background: var(--color-wit);
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	padding-bottom: var(--space-lg);
	border-radius:  var(--radius-sm);
	min-height: 346px;
	height: 100%;
	position: relative;
}

.vacature-kaart > h3 {
	word-break: normal;
	overflow-wrap: break-word;
}

.vacature-kaart .heart-button-wrapper {
	position: absolute;
	top: 25px;
	right: 23px;
	cursor: pointer;
}

.share-button-wrapper {
	cursor: pointer;
}

/* Vacature detail heart toggle */
.heart-button-wrapper .heart-icon {
	cursor: pointer;
	fill: none;
	stroke: var(--color-donkerblauw);
	transition: fill 0.2s ease, stroke 0.2s ease;
	height: 30px;
	width: 35px;
}

/* Filled state */
.heart-icon.liked, .heart-button-wrapper.filled .heart-icon {
	fill: var(--color-aquagroen);
	stroke: var(--color-aquagroen);
}

.vacature-kaart .heart-button-wrapper > svg {
	min-height: 30px;
	min-width: 35px;
}
.vacature-kaart .heart-button-wrapper > svg {
	transition: fill 0.2s ease, stroke 0.2s ease;
}
.vacature-kaart .heart-button-wrapper .heart-icon.filled,
.vacature-detail .heart-button-wrapper .heart-icon.filled {
	fill: #00B194;
	stroke: #00B194;
}

.vacature-kaart__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin-top: var(--space-md);
}

.vacature-kaart__content > div {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-xs);

}

/* verhaal uitgelicht section */

.verhaal-uitgelicht-kaart {
	margin-top: var(--space-xxl);
	padding-inline: var(--space-md);
}

.verhaal-uitgelicht-kaart__container {
	display: flex;
	min-height: 680px;
	border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
	overflow: hidden;
}

.verhaal-uitgelicht-kaart__image {
	width: 50%;
	height: 100%;
}

.verhaal-uitgelicht-kaart__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.verhaal-uitgelicht-kaart__content {
	width: 50%;
	height: 100%;
	background: #fff;
	padding: 133px var(--space-lg);
	display: flex;
	flex-direction: column;
}

.verhaal-uitgelicht-kaart__content *:not(a) {
	color: var(--color-blauw);
}

.verhaal-uitgelicht-kaart__category {
	margin-top: 10px;
}

.verhaal-uitgelicht-kaart__quote {
	margin-top: var(--space-sm);
}

.verhaal-uitgelicht-kaart__description {
	margin-top: var(--space-md);
}

.verhaal-uitgelicht__button {
	margin-top: var(--space-md);
}

/* Werkplekken Section */

.werkplekken-section {
	margin-top: var(--space-xxl);
	display: flex;
	flex-direction: column;
	overflow: visible;
}

.werkplekken-section__content {
	margin-top: var(--space-lg);
	overflow: visible;
	cursor: grab;
	user-select: none;
}

.werkplekken-section__title {
	text-align: center;
}

.werkplekken-section__content.is-dragging {
	cursor: grabbing;
}

.werkplekken-section__scroll-wrapper {
	display: flex;
	gap: var(--space-md);
	will-change: transform;
	transition: transform 0.1s ease-out;
}

.werkplekken-section__content.is-dragging .werkplekken-section__scroll-wrapper {
	transition: none;
}

.werkplekken-section__item {
	display: flex;
	flex-direction: column;
	min-width: fit-content;
	border-radius: var(--radius-sm);
	overflow: hidden;
	cursor: pointer;
	transition: all 0.5s ease;
}

.werkplekken-section__item a {
	-webkit-user-drag: none;
	user-drag: none;
}

.werkplekken-section__item-img {
	display: grid;
	place-items: center;
	min-width: 237px;
	min-height: 237px;
	background: var(--color-aquagroen);
	transition: background 0.2s ease;
	pointer-events: none;
}

.werkplekken-section__item:hover .werkplekken-section__item-img {
	background: var(--color-zeegroen);
}

.werkplekken-section__item-text {
	background: var(--color-wit);
	text-align: center;
	min-height: 95px;
	display: grid;
	place-items: center;
}

.werkplekken-section__item:hover {
	border-radius: var(--radius-md) 0;
}

/* FOOTER */

.site-footer {
	margin-top: var(--space-xxl);	
}

.site-footer__content {
	display: flex;
	flex-direction: column;
	padding-inline: var(--space-md);
}

.site-footer__img-banner {
	border-top-right-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
}

.site-footer__img-banner img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.site-footer__info {
	background: var(--color-zeegroen);
	padding: var(--space-md) var(--space-lg);
	position: relative;
	border-bottom: 20px solid var(--color-aquagroen);
}

.site-footer__info * {
	color: var(--color-wit);
}

.site-footer__info-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-right: 150px;
}

.site-footer__info-top-left-content,
.site-footer__info-top-right-content {
	margin-top: var(--space-sm);
	display: flex;
	flex-direction: row;
	gap: 12px;
}

.site-footer__info-top-left-content > a {
	display: flex;
	height: 60px;
	width: 62px;
	display: grid;
	place-items: center;
}

.site-footer__info-bottom {
	margin-top: var(--space-md);
	font-weight: var(--fw-light);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-md);
}

.site-footer__info-top-right-content {
	gap: 48px;
}

.site-footer__info-top-right-content > div {
	display: flex;
	flex-direction: row;
	gap: var(--space-xs);
}

.site-footer__info-top-right-content img {
	border-radius: 999px;
	height: 60px;
	width: 60px;
	object-fit: cover;
}

.site-footer__contact-1-info,
.site-footer__contact-2-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
}

/* ========== CONTACT FORM ========== */
.contact-form {
	background: var(--color-wit);
	padding: var(--space-md);
	border-radius: var(--radius-md) 0 var(--radius-md) 0; /* top-left, top-right, bottom-right, bottom-left */
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-bottom: -460px;
	z-index: 10;
	margin-left: var(--space-md);
	max-width: 625px;
}

.contact-form__title {
	color: var(--color-aquagroen);
}

.contact-form__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

/* Name row — layout only */
.contact-form__name-row {
	display: flex;
	flex-direction: row;
	gap: var(--space-xs);
}

/* Base input styles */
.contact-form__input {
	color: var(--color-donkerblauw);
	width: 100%;
	background: var(--color-lichtblauw-tint-2);
	border: none;
	outline: none;
	border-radius: var(--radius-sm);
	height: 60px;
	padding-inline: var(--space-xs);
	font-family: var(--font-primary);
}

.contact-form__input::placeholder {
	color: var(--color-donkerblauw);
}

.contact-form__input--full {
	background: var(--color-lichtblauw-tint-2);
	border-radius: var(--radius-sm);
	height: 60px;
	padding-inline: var(--space-xs);
}

/* Checkbox grid */
.contact-form__checkbox-grid {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	gap: var(--space-sm);
}
.contact-form__checkbox-grid-flex {
	margin-top: 0.5rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem 1.25rem;
}

.contact-form__checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--color-donkerblauw);
	cursor: pointer;
	user-select: none;
}

/* Custom checkbox box */
.contact-form__checkbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 20px;
	background: var(--color-lichtblauw-tint-2);
	border-radius: 4px;
	border: none;
	outline: none;
	transition: background 0.2s ease;
}

/* Checked state */
input:checked + .contact-form__checkbox, .contact-form__checkbox--checked {
	background: var(--color-blauw);
}

/* Checkmark via pseudo */
input:checked + .contact-form__checkbox::after, .contact-form__checkbox--checked::after {
	content: '';
	display: block;
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--color-wit);
	border-bottom: 2px solid var(--color-wit);
	transform: rotate(45deg) translate(-1px, -1px);
}

/* VACATURE PAGE */
.vacature-overzicht-section {
	display: flex;
	flex-direction: row;
	margin-top: var(--space-lg);
	gap: 47px;
	position: relative;
}
.vacature-overzicht-section.full-width .vacature-list.view-grid {
	grid-template-columns: repeat(auto-fill, minmax(410px, 1fr));
}
.vacature-overzicht-section.full-width .vacature-list.view-list .vacature-kaart {
	max-width: 100%;
}

.vacature-overzicht-section br {
	display: none;
}

.vacature-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.page-id-27 .vacature-list {
	grid-template-columns: repeat(2, 1fr);
}

.page-id-27 .section, 
.page-id-27 .site-footer__content {
	max-width: 1600px;
}

.vacature-overzicht-section__filters {
	display: flex;
	height: fit-content;
	position: sticky;
	top: 150px;
	margin-top: -290px;
}

.vacature-overzicht-section__filters {
	max-width: 350px;	
}

.vacature-overzicht-section__filters form {
	width: 100%;
}

.vacature-overzicht-section > div:nth-child(2) {
	width: 100%;
}

/* HERO 2 SECTION */
.hero-2 {
	padding-inline: var(--space-md);
}

.hero-2-container {
	position: relative;
	height: 500px;
	padding-top: 90px;
	width: 100%;
	overflow: hidden;
	border-bottom-right-radius: var(--radius-lg);
}

.hero-2-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.hero-2-container h1 {
	color: var(--color-wit);
	text-align: center;
	margin-top: 130px; 
	position: absolute;
}

.hero-2-container {
	min-height: 420px;

	background-image: radial-gradient(
		circle at center,
		rgba(0, 0, 0, 0.0) 0%,
		rgba(0, 0, 0, 0.12) 40%,
		rgba(0, 0, 0, 0.25) 100%
	), var(--hero-image);

	background-size: cover;
	background-position: 50% 20%;
	background-blend-mode: multiply;

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

/* SEARCH BOX */

.search-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid var(--color-wit);
	min-height: 60px;
	padding-inline: var(--space-xs);
	border-radius: var(--radius-sm);
	align-items: center;
}

.search-box > input {
	outline: none;
	color: var(--color-wit);
	width: 100%;
	height: 100%;
	background: transparent;
	border: 0;
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	font-size: var(--fs-button);
	line-height: var(--lh-button);
}

.search-box input::placeholder {
	color: var(--color-wit);
}

.search-box svg {
	min-height: 24px;
	min-width: 24px;
}

/* RESET BUTTON */

.reset-button {
	border: 0;
	background: transparent;
	padding-inline: 17px;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: var(--fs-body);
	gap: var(--space-xs);
	font-weight: var(--fw-book);
}

/* VACATURE DETAIL PAGE */

.vacature-detail {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vacature-detail__hero {
	display: grid;
	place-items: center;
	padding-top: 200px;
	padding-bottom: 100px;
}

.vacature-detail__title {
	max-width: 850px;
	text-align: center;
	color: var(--color-zeegroen);
}

.vacature-detail__solliciteren-balk,
.vacature-detail__details,
.vacature-detail__buttons,
.vacature-detail__details-item {
	display: flex;
	flex-direction: row;
	align-items: center;	
}

.vacature-detail__solliciteren-balk {
	background: var(--color-wit);
	padding: var(--space-xs) var(--space-md);
	justify-content: space-between;
	border-radius: var(--radius-md) 0 var(--radius-md) 0;
	width: 100%;
	max-width: 1060px;
}

.vacature-detail__details {
	gap: 60px;
}

.vacature-detail__details-item {
	gap: var(--space-sm);
}

.vacature-detail__buttons a {
	margin-right: var(--space-md);
}

.vacature-detail__buttons .share-link-icon {
	margin-right: var(--space-sm);
}

/* .vacature-detail__buttons .heart-button {
height: 40px;
width: 40px;
} */

.vacature-detail__details-item-info {
	max-width: 300px;
}

.vacature-detail__description-content {
	display: flex;
	flex-direction: column;	
}

.vacature-detail__content {
	padding-top: var(--space-xl);
	width: 100%;
}

.vacature-detail__accordion {
	margin-top: var(--space-lg);
	display: flex;
	flex-direction: column;
}

.vacature-detail__accordion-item:not(:last-child) {
	border-bottom: 1px solid var(--color-donker-beige);
}

.vacature-detail__accordion-title {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	user-select: none;
}

.vacature-detail__accordion-title {
	padding-block: var(--space-md);
}

.vacature-detail__accordion-item:first-child .vacature-detail__accordion-title {
	padding-top: 0;
}

.vacature-detail__accordion-icon {
	display: inline-block;
	position: relative;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.vacature-detail__accordion-icon::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--color-donkerblauw);
	transform: translateY(-50%);
}

.vacature-detail__accordion-icon::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 2px;
	height: 100%;
	background: var(--color-donkerblauw);
	transform: translateX(-50%);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.vacature-detail__accordion-item.open .vacature-detail__accordion-icon::after {
	opacity: 0;
	transform: translateX(-50%) rotate(90deg);
}

.vacature-detail__accordion-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.vacature-detail__accordion-item.open .vacature-detail__accordion-content {
	grid-template-rows: 1fr;
}

.vacature-detail__accordion-content-inner {
	overflow: hidden;
	padding-bottom: 0;
	transition: padding-bottom 0.35s ease;
}

.vacature-detail__accordion-item.open .vacature-detail__accordion-content-inner {
	padding-bottom: var(--space-md);
}

.vacature-detail__accordion-content-inner h5 {
	margin-top: var(--space-md);
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
}

.vacature-detail__accordion-content-inner ul {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vacature-detail__accordion-content-inner ul {
	list-style: none;
	padding-left: 0;
}

.vacature-detail__accordion-content-inner li {
	position: relative;
	padding-left: 30px;
}

.vacature-detail__accordion-content-inner li::before {
	content: '•';
	position: absolute;
	left: 0;
	top: -4px;
	color: var(--color-aquagroen);
	font-size: 3em;
}

.vacature-template-default .verhaal-uitgelicht-kaart {
	padding: 0;
	min-height: fit-content;
	height: fit-content;
}

.vacature-template-default .verhaal-uitgelicht-kaart__container {
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	border-radius: 0;
	min-height: fit-content;
	height: fit-content;
}

.vacature-template-default .verhaal-uitgelicht-kaart__content {
	padding: 0;
	height: fit-content;
	background: transparent;
}

.vacature-template-default .verhaal-uitgelicht-kaart__content * {
	color: var(--color-donkerblauw);
}

.verhaal-uitgelicht-kaart__verhalen-naam,
.verhaal-uitgelicht-kaart__category {
	line-height: 1;	
}

.vacature-template-default .verhaal-uitgelicht-kaart__image {
	max-width: 520px;
	max-height: 486px;
	margin-left: 50px;
	border-top-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
	overflow: hidden;
}

.vacature-template-default .verhaal-uitgelicht__button {
	color: var(--color-donkerblauw);
	border-color: var(--color-donkerblauw);
	background: transparent;
}

.vacature-template-default .verhaal-uitgelicht__button:hover {
	color: var(--color-zeegroen);
	border-color: var(--color-zeegroen);
}

/* TEKST/TEXT SECTION */

.tekst-section {
	padding-top: var(--space-xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
}

/* .tekst-section {
padding-top: var(--space-lg);
} */

.tekst-section h1 {
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	color: var(--color-zeegroen);
	margin-top: var(--space-xl);
}

.tekst-section p {
	text-align: justify;
	max-width: 846px;
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	font-size: var(--fs-h4-intro);
	line-height: var(--lh-h4-intro);
}

/* CATEGORY INFO PAGE */

div:has(.category-info-section) {
	width: 100%;
}

.category-info-section {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	width: 100%;
	margin-top: var(--space-xl);
}

.category-info-section__image {
	width: 100%;
	max-width: 520px;
	overflow: hidden;
	border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
	margin-right: 50px;
}

.category-info-section__image img {
	width: 100%;
	height: 486px;
	object-fit: cover;
	object-position: center;
}

.category-info-section__content {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 630px;
	height: max-content;
	gap: var(--space-md);
}

.category-info-section__content h2 {
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	color: var(--color-donkerblauw);
}

.category-info-section__content p {
	font-family: var(--font-primary);
	font-weight: var(--fw-book);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* VACATURE DETAIL PAGE CONTACT FORM */

.vacature-detail-2 form {
	margin-top: var(--space-xl);
	width: 100%;
}

.vacature-detail-2 .wpcf7-form {
	position: relative;
	background: var(--color-aquagroen);
	padding: var(--space-lg);
	border-top-left-radius: var(--radius-lg);
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.sollicitatie-form__column-left,
.sollicitatie-form__column-right,
.sollicitatie-form__label {
	display: flex;
	flex-direction: column;
}

.sollicitatie-form__name-group,
.sollicitatie-form__contact-group {
	display: flex;
	flex-direction: row;
}

.sollicitatie-form__column-left {
	gap: var(--space-sm);
}

.sollicitatie-form__content {
	display: flex;
	flex-direction: row;
	gap: 35px;
}

.sollicitatie-form__buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.sollicitatie-form__name-group,
.sollicitatie-form__contact-group {
	display: flex;
	flex-direction: row;
	gap: var(--space-sm);
}

.vacature-detail-2 .wpcf7-form input:not(input[type="submit"]),
.vacature-detail-2 .wpcf7-form textarea {
	background: var(--color-aquagroen-tint-2);
	border-radius: var(--radius-sm);
	border: none;
	outline: none;
	font-weight: var(--fw-book);
	font-size: var(--fs-body);
	color: var(--color-donkerblauw);
}

.sollicitatie-form__name-group > *,
.sollicitatie-form__contact-group > * {
	flex: 1;
	min-width: 0;
}

.wpcf7-form-control-wrap,
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
	width: 100%;
}

.page-id-1171 .wpcf7-form input,
.vacature-template-default .wpcf7-form input {
	height: 60px;
	padding-inline: var(--space-sm);
}

.page-id-1171 .wpcf7-form textarea,
.vacature-template-default .wpcf7-form textarea {
	padding: var(--space-sm);
	resize: vertical;
	min-height: 295px;	
}

.sollicitatie-form__label {
	font-weight: var(--fw-book);
	font-size: var(--fs-body-small);
	line-height: var(--lh-body-small);
	color: var(--color-wit);
	gap: 6px;
}

.sollicitatie-form__column-right .sollicitatie-form__label,
.wpcf7-form-control-wrap:has(textarea) {
	height: 100%;
	display: flex;
}

.sollicitatie-form___create-cv-btn {
	display: flex;
	flex-direction: row;
	background: var(--color-wit);
	border-radius: var(--radius-sm);
	padding: 44px var(--space-md);
	gap: 85px;
}

.sollicitatie-form___create-cv-btn span {
	max-width: 214px;
}

p.uploadText {
	font-size: 14px;
}

/* hide native file input */
.wpcf7-form-control-wrap[data-name="your-cv"] input[type="file"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	z-index: 2;
}

/* custom container */
.wpcf7-form-control-wrap[data-name="your-cv"] {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--color-aquagroen-tint-2);
	border-radius: var(--radius-sm);
	height: 60px;
	overflow: hidden;
}

/* button on left */
.wpcf7-form-control-wrap[data-name="your-cv"]::before {
	content: 'Kies bestand';
	display: flex;
	align-items: center;
	padding-inline: var(--space-xs);
	margin: 10px;
	height: calc(100% - 20px);
	background: var(--color-aquagroen-tint-1);
	border-radius: var(--radius-sm);
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	font-size: var(--fs-body-small);
	color: var(--color-donkerblauw);
	white-space: nowrap;
	z-index: 1;
	flex-shrink: 0;
}

/* filename text — default */
.wpcf7-form-control-wrap[data-name="your-cv"]::after {
	content: 'Geen bestand(en) geselecteerd';
	padding-inline: var(--space-xs);
	font-family: var(--font-primary);
	font-weight: var(--fw-book);
	font-size: var(--fs-body-small);
	color: var(--color-donkerblauw);
	z-index: 1;
}

/* filename text — after file selected */
.wpcf7-form-control-wrap[data-name="your-cv"][data-filename]::after {
	content: attr(data-filename);
}

.vacature-detail-2 {
	display: flex;
	flex-direction: column;
	padding-inline: var(--space-md);
}

.stappenplan-sollicitatie-container {
	margin-top: var(--space-xxl);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stappenplan-sollicitatie-container__content {
	max-width: 846px;
}

.stappenplan-sollicitatie-container__content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ZIEKENHUIS PAGE */
.page-id-909 .image-text-section__container {
	flex-direction: row-reverse;
}

.page-id-909 .image-text-section__container h2 {
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	color: var(--color-blauw);
}

.page-id-909 .image-text-section__container img {
	width: 100%;
	max-width: 509px;
}

.page-id-909 .image-text-section__buttons {
	display: none;
}

/* stappenplan sollicitatie slider */
.stappenplan-sollicitatie-container__stappenplan-sollicitatie-slider {
	width: fit-content;
	position: relative;
	height: 60px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-block: 130px;
}
/* Lines Positions */
.stappenplan-sollicitatie-slider__line-2 {margin-bottom: 25px;}
.stappenplan-sollicitatie-slider__line-3 {margin-bottom: 18px;}
.stappenplan-sollicitatie-slider__line-4 {margin-top: 13px;}
.stappenplan-sollicitatie-slider__line-5 {margin-top: 45px;}
.stappenplan-sollicitatie-slider__line-6 {margin-top: 52px;}
.stappenplan-sollicitatie-slider__line-7 {margin-top: 30px;}


/* default node styles */
.stappenplan-sollicitatie-slider__node {
	position: absolute;
	height: 60px;
	width: 60px;
	background: var(--color-aquagroen-tint-1);
	border-radius: 999px;
	top: 50%;
	transform: translate(-22px, -50%) scale(1);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: all 0.3s ease;
}
/* hover effect for non active nodes */
.stappenplan-sollicitatie-slider__node:not(.active):hover {
	transform: translate(-22px, -50%) scale(1.2);
	filter: brightness(1.1);
}
/* Nodes positions */
.stappenplan-sollicitatie-slider__node--1 {
	top: 63%;
	left: 0;
}
.stappenplan-sollicitatie-slider__node--2 {
	top: 30%;
	left: 14.28%;
}
.stappenplan-sollicitatie-slider__node--3 {
	top: 20%;
	left: 28.57%;
}
.stappenplan-sollicitatie-slider__node--4 {
	top: 45%;
	left: 42.85%;
}
.stappenplan-sollicitatie-slider__node--5 {
	top: 80%;
	left: 57.14%;
}
.stappenplan-sollicitatie-slider__node--6 {
	top: 95%;
	left: 71.42%;
}
.stappenplan-sollicitatie-slider__node--7 {
	top: 80%;
	left: 85.71%;
}
.stappenplan-sollicitatie-slider__node--8 {
	top: 50%;
	left: 99%;
}
/* Node checked state */
.stappenplan-sollicitatie-slider__node.checked {
	background-color: var(--color-aquagroen);
}
/* Node active state */
.stappenplan-sollicitatie-slider__node.active {
	height: 180px;
	width: 180px;
	transform: translate(-80px, -50%) scale(1);
	cursor: default;
	background: var(--color-zeegroen);
}
.stappenplan-sollicitatie-slider__node.active img {
	animation: fadeIn 1s ease forwards;
	height: 110px;
	width: 110px;
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
/* Active line styles */
.stappenplan-sollicitatie-slider__line:not(.active) path {
	stroke-width: 5px;
	stroke: var(--color-aquagroen-tint-1);
}
.stappenplan-sollicitatie-container__content {
	transition: opacity 0.3s ease;
}

/* GERELATEERDE VACATURES SECTION */
.gerelateerde-vacatures-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: center;
	margin-top: var(--space-xl);
}

.gerelateerde-vacatures-section .vacature-list.view-list .vacature-kaart {
	max-width: 100% !important;
}

.gerelateerde-vacatures-section .vacature-list.view-list .vacature-kaart__title {
	max-width: 400px;
}

/* GERELATEERDE VERHALEN SECTION */

.gerelateerde-verhalen-section {
	margin-top: var(--space-xl);
	display: flex;
	flex-direction: column;	
	align-items: center;
}

.gerelateerde-verhalen-section strong {
	margin-top: var(--space-md);
}

.gerelateerde-verhalen-section__header {
	text-align: center;
}

.gerelateerde-verhalen-section > div {
	margin-top: var(--space-lg);
}

.gerelateerde-verhalen-section__button {
	margin-top: var(--space-md);
}

/* VERHALEN LIST / VERHAAL KAART */

.verhalen-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
}

.verhaal-kaart {
	border-radius: var(--radius-sm);
	background: var(--color-wit);
	overflow: hidden;
	min-height: 500px;
}

.verhaal-kaart__image {
	height: 100%;
	max-height: 250px;
	overflow: hidden;
}

.verhaal-kaart img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	object-position: center;
}

.verhaal-kaart__content {
	padding: var(--space-md);
	padding-bottom: 60px;
}

.verhaal-kaart__naam {
	font-weight: var(--fw-medium);
}

.verhaal-kaart__naam,
.verhaal-kaart__category {
	line-height: 100%;
}

.verhaal-kaart__category {
	margin-top: 5px;
	color: var(--color-lichtblauw);
	transition: all 0.5s ease;
}
.verhaal-kaart:hover .verhaal-kaart__category {
	color: var(--color-aquagroen);
}

.verhaal-kaart__quote {
	margin-top: var(--space-xs);
}

/* VERHALEN OVERZICHT PAGE */

.page-id-34 .verhaal-kaart_content .verhaal-kaart_category {
	color: var(--color-lichtblauw);
}

.verhalen-hero-section h1 {
	max-width: 800px;
	text-align: center;
}

.verhalen-content {
	margin-top: var(--space-xl);
	display: flex;
	flex-direction: column;
}

.verhalen-overzicht-controls {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.verhalen-overzicht-controls *:not(.custom-select__option) {
	color: var(--color-donkerblauw);
	border-color: var(--color-donkerblauw);
}

.verhalen-overzicht-controls .reset-button > * {
	color: var(--color-zeegroen);
}

.verhalen-overzicht-controls .reset-icon path {
	stroke: var(--color-zeegroen);
}

.verhalen-overzicht-list {
	margin-top: var(--space-md);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
}

.verhaal-uitgelicht-kaart-2 {
	display: flex;
	flex-direction: row;
	grid-column: span 2;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.verhaal-uitgelicht-kaart-2__content {
	padding: 60px var(--space-md);
	background: var(--color-aquagroen);
	position: relative;
	width: 100%;
}

.verhaal-uitgelicht-kaart-2__content *:not(a) {
	color: var(--color-wit);
}

.verhaal-uitgelicht-kaart-2__image {
	width: 100%;
	height: 100%;
}

.verhaal-uitgelicht-kaart-2__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.verhaal-uitgelicht-kaart-2__content .verhaal-uitgelicht__description {
	margin-top: var(--space-sm);
}

.verhaal-uitgelicht-kaart-2__content::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 20px;
	background-color: var(--color-zeegroen);
	display: block;
}

.verhalen-overzicht-list .verhaal-uitgelicht-kaart-2:nth-child(7) .verhaal-uitgelicht-kaart-2__content {
	background: var(--color-wit);
}

.verhalen-overzicht-list .verhaal-uitgelicht-kaart-2:nth-child(7) .verhaal-uitgelicht-kaart-2__content * {
	color: var(--color-blauw);
}

.verhalen-overzicht-list .verhaal-uitgelicht-kaart-2:nth-child(7) .verhaal-uitgelicht-kaart-2__content::after {
	background-color: var(--color-aquagroen);
}

.verhalen-overzicht-list__meer-laden {
	margin: 0 auto;
	margin-top: var(--space-md);
}

/* VERHALEN DETAIL PAGE */

.verhalen-detail-page-content  {
	padding-top: var(--space-xl);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.verhalen-detail-page-content__text-content {
	margin-top: var(--space-xxl);
	max-width: 846px;
}

.verhalen-detail-page,
.verhalen-detail-page-content__hero {
	display: flex;
	flex-direction: column;
}

.verhalen-detail-page-content__hero {
	align-items: center;
	padding-top: var(--space-xl);
}

.verhalen-detail-page-content__hero * {
	text-align: center;
}

.verhalen-detail-page-content__hero h1 {
	max-width: 1000px;
	margin-top: var(--space-md);
}

.verhalen-detail-page-content__hero-image {
	height: 600px;
	width: 100%;
	max-width: 1060px;
	overflow: hidden;
	border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
	margin-top: var(--space-xl);
}

.verhalen-detail-page-content__hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.verhalen-detail-page-content__naam {
	font-weight: var(--fw-medium);
}

.verhalen-detail-page-content__category {
	font-weight: var(--fw-book);
}

.verhalen-detail-page-content__naam,
.verhalen-detail-page-content__category {
	line-height: 1;
}

.verhalen-detail-page-content__category {
	margin-top: 10px;
}

.verhalen-detail-page-content__text-content > h4 {
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	font-size: var(--fs-h4-intro);
	line-height: var(--lh-h4-intro);
}

.verhalen-detail-page-content__text-content > h3 {
	margin-top: var(--space-lg);
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	color: var(--color-donkerblauw);
}

.verhalen-detail-page-content__text-content > p {
	margin-top: var(--space-md);
	font-family: var(--font-primary);
	font-weight: var(--fw-book);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-donkerblauw);
}

.verhalen-detail-page-content__text-content > h5 {
	margin-top: var(--space-md);
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
}

.verhalen-detail-page-content__text-content > ul {
	margin-top: 12px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.verhalen-detail-page-content__image-text-section {
	margin-top: var(--space-xxl);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--space-md);
}

.image-text-section__text h1 {
	font-family: var(--font-primary);
	font-weight: var(--fw-light);
	font-size: var(--fs-quote-h1);
	line-height: var(--lh-quote-h1);	
	color: var(--color-donkerblauw);
}

.verhalen-detail-page-content__text-content li {
	position: relative;
	padding-left: 30px;
	font-weight: var(--fw-book);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-donkerblauw);
}

.verhalen-detail-page-content__text-content li::before {
	content: '•';
	position: absolute;
	left: 0;
	top: 11px;
	color: var(--color-aquagroen);
	font-size: 3em;
	line-height: 0;
}

/* CARDS HOVER EFFECT */
.verhaal-kaart::after,
.vacature-kaart::after {
	content: "";
	position: absolute;
	bottom: 0;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	left: 0;
	width: 100%;
	height: 20px;
	background-color: var(--color-zeegroen);
	display: block;
	opacity: 0;
	transition: all 0.5s ease;
}

.verhaal-kaart__quote,
.vacature-kaart__content path,
.vacature-kaart__title {
	transition: all 0.5s ease;
}
.verhaal-kaart:hover .verhaal-kaart__quote,
.vacature-kaart:hover .vacature-kaart__title {
	color: var(--color-zeegroen);
}
.vacature-kaart:hover .vacature-kaart__content path {
	fill: var(--color-zeegroen);
}

.verhaal-kaart:hover::after,
.vacature-kaart:hover::after {
	opacity: 1;
}

.verhaal-uitgelicht-kaart-2,
.verhaal-kaart,
.vacature-kaart {
	position: relative;
	transition: all 0.5s ease;
}

.verhaal-kaart:hover,
.vacature-kaart:hover {
	border-top-left-radius: var(--radius-md);
}

.verhaal-uitgelicht-kaart-2:hover {
	border-top-left-radius: var(--radius-lg);
}

.verhaal-uitgelicht-kaart-2:hover .verhaal-uitgelicht-kaart-2__content,
.verhaal-uitgelicht-kaart-2:hover .verhaal-uitgelicht-kaart-2__content::after {
	transition: all 0.5s ease;
}

.verhaal-uitgelicht-kaart-2:hover .verhaal-uitgelicht-kaart-2__content::after {
	background: var(--color-aquagroen);
}

.verhaal-uitgelicht-kaart-2:hover .verhaal-uitgelicht-kaart-2__content {
	background: var(--color-zeegroen);
}
.verhaal-uitgelicht-kaart-2:nth-child(7):hover .verhaal-uitgelicht-kaart-2__content::after {
	background: var(--color-zeegroen);
}
.verhaal-uitgelicht-kaart-2:nth-child(7):hover .verhaal-uitgelicht-kaart__quote p {
	color: var(--color-wit);
}
.verhaal-uitgelicht-kaart-2:nth-child(7):hover .verhaal-uitgelicht-kaart-2__content {
	background: var(--color-aquagroen);
}

.verhaal-uitgelicht-kaart-2:nth-child(7):hover .verhaal-uitgelicht-kaart-2__content > h1 > p,
.verhaal-uitgelicht-kaart-2:nth-child(7):hover .verhaal-uitgelicht-kaart-2__content > p {
	color: var(--color-wit);
}

/* PIE CHART SECTION */

.pie-chart-section {
	display: flex;
	flex-direction: column;
	margin-top: var(--space-xxl);
}

.pie-chart-section__pie-chart {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3px;
	width: fit-content;
}

.pie-chart-section__pie-chart-wrapper {
	height: 450px;
	min-width: 450px;
	display: grid;
	place-items: center;
}

.pie-chart-section__text-content-container p {
	max-width: 625px;
	margin-top: var(--space-md);
}

.pie-chart-section__text-content-container {
	display: flex;
	flex-direction: column;	
	height: fit-content;
}

.pie-chart-section__text-content-container h2 {
	margin-top: var(--space-sm);
}

.pie-chart-section__container {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: var(--space-lg) 85px;
	background: var(--color-wit);
	border-radius: var(--radius-lg) 0;
	gap: var(--space-sm);
	justify-content: space-between;
}

.pie-chart-section__text-content-container {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.pie-chart-section__text-content-container.active {
	opacity: 1;
	pointer-events: auto;
}

.pie-chart-section__container {
	position: relative;
}

.pie-chart-section__content {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pie-chart-section__text-content-container {
	position: absolute;
}

.pie-chart__slice--1 {
	width: 185px;
	height: 185px;
	border-top-left-radius: 999px;
	background: var(--color-aquagroen);
	transform-origin: bottom right;
}
.pie-chart__slice--2 {
	width: 185px;
	height: 185px;
	border-top-right-radius: 999px;
	background: var(--color-zeegroen);
	transform-origin: bottom left;
}
.pie-chart__slice--3 {
	width: 185px;
	height: 185px;
	border-bottom-left-radius: 999px;
	background: var(--color-lichtblauw);
	transform-origin: top right;
}
.pie-chart__slice--4 {
	width: 185px;
	height: 185px;
	border-bottom-right-radius: 999px;
	background: var(--color-blauw);
	transform-origin: top left;
}

.pie-chart-section__pie-chart {
	transition: transform 0.4s ease;
}

.pie-chart__slice--1,
.pie-chart__slice--2,
.pie-chart__slice--3,
.pie-chart__slice--4 {
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pie-chart__slice--1.hovered { transform: scale(1.2); }
.pie-chart__slice--2.hovered { transform: scale(1.2); }
.pie-chart__slice--3.hovered { transform: scale(1.2); }
.pie-chart__slice--4.hovered { transform: scale(1.2); }

.page-id-1152 .image-text-section__text h1, /* CONTACT PAGE */
.page-id-947 .image-text-section__text h1 { /* OVER ONS PAGE */
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	color: var(--color-zeegroen);
	max-width: 640px;
}

.page-id-947 .hero-section__search-form {
	display: none;
}

.page-id-947 .hero-section__title {
	top: 60%;
	left: 50%;
	transform: translateX(-50%);
	width: 600px;
	max-width: 100%;
}

.page-id-1152 .image-text-section__text h1 { /* CONTACT PAGE */
	max-width: 500px;
}


/* FEITJES SECTION */

.feitjes-section {
	display: flex;
	flex-direction: column;
	margin-top: var(--space-xxl);
	align-items: center;
}

.feitjes-section__items {
	display: flex;
	flex-direction: row;
	margin-top: var(--space-lg);
	gap: var(--space-md);
}

.feitjes-section__items {
	width: 100%;
}

.feitjes-section__item {
	width: 100%;
	background: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: var(--space-sm);
	text-align: center;
	justify-content: center;
	gap: var(--space-md);
	height: 356px;
	border-radius: var(--radius-lg) 0;
}

.feitjes-section__item:nth-child(2) p,
.feitjes-section__item:nth-child(4) p {
	color: var(--color-donkerblauw);
}

.feitjes-section__item > * {
	color: var(--color-wit);
}

.feitjes-section__item img {
	display: block !important;
}

.feitjes-section__item:nth-child(1) {
	background: var(--color-zeegroen);
}
.feitjes-section__item:nth-child(2) {
	background: var(--color-aquagroen);
}
.feitjes-section__item:nth-child(3) {
	background: var(--color-blauw);
}
.feitjes-section__item:nth-child(4) {
	background: var(--color-lichtblauw);
}

/* ========== MOBILE NAV ========== */

.mobile-nav {
	display: none;
	flex-direction: row;
	align-items: center;
	gap: var(--space-md);
}

.mobile-menu-btn {
	cursor: pointer;
	display: grid;
	place-items: center;
	border: none;
	background: transparent;
	padding: 0;
}

.mobile-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	background: var(--color-wit);
	padding: var(--space-lg) var(--space-lg);
	padding-top: var(--space-sm);
	width: 100%;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	box-shadow: 0px 10px 12px rgba(0,0,0,0.1);
	position: absolute;
	top: 94%;

	/* transition */
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	transition: max-height 0.5s ease, opacity 0.3s ease;
}

.mobile-menu.open {
	max-height: 900px;
	opacity: 1;
	pointer-events: all;
}

.mobile-menu .menu {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: auto;
}

.mobile-menu .menu a {
	color: var(--color-donkerblauw);
	padding: var(--space-xs) 0;
}

.mobile-menu .sub-menu {
	position: static;
	box-shadow: none;
	background: var(--color-wit);
	padding: 0 var(--space-lg);
	border-radius: var(--radius-sm);
	max-height: none !important;
	overflow: visible !important;
}

.mobile-menu > img {
	width: 200px;
	height: auto;
}

.mobile-menu .button-navbar {
	width: 100%;
	display: flex;
	max-width: 100%;
}
.no-favourite-jobs-found .button-primary {
	margin-top: 1rem;
}

/* open sollicitatie page */
.page-id-1171 form {
	margin-top: 0;
}

@media (max-width: 1600px) {
	.page-id-27 .section, 
	.page-id-27 .site-footer__content {
		max-width: 1440px;
	}
	.page-id-27 .vacature-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.page-id-27 .vacature-kaart > h3 {
		max-width: 300px;
	}
}

@media (max-width: 1250px) {
	/* stappenplan sollicitatie */
	.stappenplan-sollicitatie-container__stappenplan-sollicitatie-slider {
		transform: scale(0.65);
		height: 50px;
		margin-block: 120px;
	}

	.stappenplan-sollicitatie-slider__line {
		width: 160px;
	}

	.stappenplan-sollicitatie-slider__node.active {
		height: 150px;
		width: 150px;
		transform: translate(-65px, -50%) scale(1);
	}

	.stappenplan-sollicitatie-slider__node.active img {
		height: 90px;
		width: 90px;
	}

	.stappenplan-sollicitatie-container__content {
		max-width: 90vw;
	}

	.stappenplan-sollicitatie-slider__node--1 {
		top: 63%;
		left: 0;
	}
	.stappenplan-sollicitatie-slider__node--2 {
		top: 30%;
		left: 14.28%;
	}
	.stappenplan-sollicitatie-slider__node--3 {
		top: 20%;
		left: 28.57%;
	}
	.stappenplan-sollicitatie-slider__node--4 {
		top: 45%;
		left: 42.85%;
	}
	.stappenplan-sollicitatie-slider__node--5 {
		top: 85%;
		left: 57.14%;
	}
	.stappenplan-sollicitatie-slider__node--6 {
		top: 105%;
		left: 71.42%;
	}
	.stappenplan-sollicitatie-slider__node--7 {
		top: 90%;
		left: 85.71%;
	}
	.stappenplan-sollicitatie-slider__node--8 {
		top: 50%;
		left: 99%;
	}

}

@media (max-width: 768px) {
	.main-navigation {
		display: none;
	}

	.mobile-nav {
		display: flex;
	}

	.mobile-menu .submenu-chevron {
		display: none;
	}

	.site-header__content {
		padding: var(--space-md) var(--space-lg);
	}

	.site-header.scrolled .site-header__content {
		padding-inline: var(--space-lg);
	}

	.hero-section__title {
		min-width: 250px;
		max-width: 100%;
		top: 40%;
	}

	.hero-section__search-form {
		margin-top: -100px;
		width: fit-content;
		max-width: 100%;
		flex-direction: column;
	}

	.page-id-6  .hero-section__search-form-container {
		width: 100%;
	}

	.hero-section__search-form-container form {
		flex-direction: row;
		width: 100%;
	}

	.hero-section__image-container {
		height: 500px;
	}

	.hero-section__search-form {
		max-width: 100%;
		width: 90%;
	}

	.contact-form .button-primary,
	.hero-section__search-form-container .button-primary--wit-groen {
		width: 100%;
		display: flex;
		max-width: 100%;
	}

	.image-text-section__container {
		flex-direction: column-reverse;
		gap: var(--space-md);
	}

	.image-text-section__image {
		width: 100%;
	}

	.image-text-section__image img {
		width: 100%;
		height: auto;
	}

	.vacature-kaart {
		min-width: 300px;
		max-width: 100%;
		min-height: 200px;
		display: block;
	}

	.vacature-kaart > h3 {
		max-width: 200px!important;
	}

	.uitgelichte-vacatures-section {
		padding: 0;
	}

	.uitgelichte-vacatures-section .vacature-kaart__content {
		gap: var(--space-sm);
		margin-top: var(--space-lg);
	}

	.uitgelichte-vacatures-section > div {
		display: flex;
		flex-direction: row;
		padding-inline: var(--space-md);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--space-xs); /* space for scrollbar */
	}

	.uitgelichte-vacatures-section > div .vacature-kaart {
		min-width: 280px;
	}

	.verhaal-uitgelicht-kaart__container {
		flex-direction: column-reverse;
	}

	.verhaal-uitgelicht-kaart__container > div {
		width: 100%;
	}

	.verhaal-uitgelicht-kaart__content {
		padding-block: var(--space-lg);
	}

	.contact-form {
		position: relative;
		border-radius: 0;
		margin-bottom: 0;
		margin-left: 0;
		max-width: 100%;
	}

	.site-footer__img-banner {
		border-radius: var(--radius-md) var(--radius-md) 0 0;
	}

	.contact-form { order: 2; }
	.site-footer__img-banner { order: 1; }
	.site-footer__info { order: 3; }

	.contact-form__checkbox-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-form__title {
		max-width: 300px;
	}

	.site-footer__info-top {
		flex-direction: column;
	}

	.site-footer__info-top-right {
		margin-top: var(--space-lg);
	}

	.site-footer__info-top-right-content {
		flex-direction: column;
		gap: var(--space-sm);
		margin-top: var(--space-lg);
	}

	.site-footer__info-top-right h3 {
		max-width: 200px;
	}

	.site-footer__info-top {
		padding: 0;
	}

	.site-footer__info {
		padding-block: var(--space-xl);
	}

	.site-footer__info-bottom {
		flex-direction: column;
		margin-top: var(--space-xl);
		gap: var(--space-sm);
		align-items: start;
	}

	.werkplekken-section {
		padding: 0;
	}

	.werkplekken-section__content {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-inline: var(--space-md);
	}

	.site-footer__info-top-left-content {
		gap: 0;
	}

	.werkplekken-section__scroll-wrapper::after {
		content: '';
		display: block;
		min-width: var(--space-md); /* match your padding-inline value */
		flex-shrink: 0;
	}

	.werkplekken-section__scroll-wrapper {
		/* override any JS transform on mobile */
		transform: none !important;
		display: flex;
		flex-direction: row;
		gap: var(--space-md);
		padding-bottom: var(--space-xs);
	}

	.werkplekken-section__item {
		min-width: 180px;
		min-width: 230px;
	}

	.verhaal-uitgelicht-kaart__container {
		flex-direction: column;
	}

	/* Vacature Overzicht */

	body:not(.page-id-1144) .vacature-overzicht-section {
		flex-direction: column;
		margin-top: -70px;
		padding-inline: 30px;
	}

	.vacature-overzicht-section__filters {
		margin-top: 0;
		position: static;
		max-width: 100%;
	}

	.vacature-overzicht-section__list-type-buttons {
		display: none;
	}

	.vacature-list {
		display: flex !important;
		flex-direction: column !important;
	}

	.vacature-overzicht-section__meer-laden-button {
		margin-inline: auto;
	}

	/* Hero 2 */

	.hero-2-container {
		padding-top: 0;
	}

	.hero-2 .heading--h1 {
		bottom: 140px !important;
		padding-inline: var(--space-sm) !important;
		text-align: center;
		width: 100%  !important;
		right: auto !important;
	}

	/* Text Section */
	.tekst-section p {
		text-align: center;
	}

	/* 	Image text */
	.verhalen-detail-page-content__image-text-section,
	.category-info-section,
	.verhaal-uitgelicht-kaart__container,
	.image-text-section__container {
		flex-direction: column !important;
	}
	.verhaal-uitgelicht-kaart__image,
	.category-info-section__image,
	.image-text-section__image {
		order: -1;
	}

	.verhaal-uitgelicht-kaart__image,
	.category-info-section__image {
		margin-right: 0;
		margin-left: 0 !important;
	}

	.verhaal-uitgelicht-kaart__container,
	.category-info-section {
		gap: var(--space-md);
	}

	.verhalen-detail-page-content__hero-image,
	.category-info-section__image {
		max-height: 350px;
	}

	/* Verhalen List */
	.verhalen-list {
		display: flex;
		flex-direction: column;
	}
	.verhaal-kaart {
		min-height: fit-content;
	}

	/* Verhalen */
	.verhaal-uitgelicht-kaart-2,
	.verhalen-overzicht-list {
		display: flex;
		flex-direction: column;
	}
	.verhalen-overzicht-controls {
		gap: var(--)
			}
	.verhalen-overzicht-controls .custom-select {
		min-width: fit-content;
	}
	.verhalen-overzicht-controls .reset-button__text {
		display: none;
	}

	/* Contact Form */
	.catCheckboxContainer > div {
		grid-template-columns: repeat(2, 1fr);
	}
	.contact-form__name-row,
	.sollicitatie-form__column-left > div,
	.sollicitatie-form__content {
		flex-direction: column;
	}
	.page-id-1171 .wpcf7-form textarea,
	.vacature-template-default .wpcf7-form textarea {
		min-height: 150px;
	}
	.sollicitatie-form__buttons {
		flex-direction: column;
	}
	.sollicitatie-form___create-cv-btn {
		padding-block: var(--space-md);
		align-items: center;
	}
	.sollicitatie-form___create-cv-btn .heading--h3 {
		height: fit-content;
	}
	.sollicitatie-form__buttons > input {
		width: 50%;
		max-width: 50%;
	}
	.vacature-detail-2 .wpcf7-form {
		padding: var(--space-lg) var(--space-md);
	}

	/* Over ons hero */
	.page-id-947 .hero-2-container img {
		object-position: 25% 30%;
	}

	/* feitjes section */
	.feitjes-section {
		padding-inline: var(--space-sm);
	}
	.feitjes-section__items {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.feitjes-section__item {
		height: 100%;
		max-height: 300px;
		padding: var(--space-lg) var(--space-sm);
	}
	.feitjes-section__item p {
		text-align: center;
	}
	.feitjes-section__item img {
		height: 80px;
		width: 80px;
	}

	/* stappenplan sollicitatie */
	.stappenplan-sollicitatie-container__stappenplan-sollicitatie-slider {
		transform: scale(0.35);
		margin-block: 50px;
	}

	.stappenplan-sollicitatie-slider__node {
		height: 70px;
		width: 70px;
	}

	.stappenplan-sollicitatie-slider__line {
		width: 130px;
	}

	.stappenplan-sollicitatie-slider__node.active {
		height: 160px;
		width: 160px;
		transform: translate(-60px, -50%) scale(1);
	}

	.stappenplan-sollicitatie-slider__node.active img {
		height: 90px;
		width: 90px;
	}

	.stappenplan-sollicitatie-container__content {
		max-width: 90vw;
	}

	/* Vacature Detail */
	.vacature-detail__solliciteren-balk {
		flex-direction: column;
		gap: var(--space-md);
		align-items: flex-start;
		padding-block: var(--space-md);
	}
	.vacature-detail__details {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-sm);
	}
	.vacature-detail__buttons {
		width: 100%;
	}
	.vacature-detail__buttons > a {
		margin-right: auto;
	}
}

/* cv generator */

.cv-page__title-wrapper {
	color: var(--color-aquagroen);
}
.cv-generator__form {
	padding 60px !important;
}
.cv-generator__image-upload {
	background-color: var(--color-lichtblauw-tint-2);
	padding: var(--space-xs);
	border-radius: var(--radius-sm);
}
.select2-container--default .select2-selection--multiple {
	display: none;
}
select, .custom-select__trigger {
	border: 1px solid var(--color-wit);
	color: var(--color-wit);
	/* 	display: none; */
}
.custom-select__option {
	color: var(--color-donkerblauw);	
}
.custom-select__option:hover {
	background: var(--color-beige);
}
.custom-select__dropdown {
	background: var(--color-wit);
	border: 1px solid transparent;
	overflow-y: scroll;
}
.custom-select__chevron {
	border-bottom: 2px solid var(--color-wit);
	border-right: 2px solid var(--color-wit);
}
.wpcf7-form-control.wpcf7-radio .wpcf7-list-item label input {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 20px;
	background: var(--color-lichtblauw-tint-2) !important;
	border-radius: 4px;
	border: none;
	outline: none;
	transition: background 0.2s ease;
}
.wpcf7-form-control-wrap input, .wpcf7-form-control-wrap textarea {
	background: var(--color-lichtblauw-tint-2);
	border: none;
	padding: var(--space-xs);
	border-radius: var(--radius-sm);
}
.wpcf7-form-control.wpcf7-select {
	display: block !important;
}

/* 404 page */
.error-404 {
	min-height: calc(100vh - 100px);
	display: flex;
	justify-content: center;
	align-items: center;
}

.error-404__inner {
	text-align: center;
	position: relative;
	z-index: 2;
}

.error-404__inner a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 3;
}
.error-404__inner p {
	margin-bottom: 30px;
}
.grecaptcha-badge {
    display: none !important;
}
/* Cookies */
button.cky-btn.cky-btn-accept, button.cky-btn.cky-btn-reject, button.cky-btn.cky-btn-preferences {
	background-color: #034C9E !important;
	border-color: #034C9E !important;
	border-radius: 10px !important;
	color: #FFF !important;
}
button.cky-btn.cky-btn-customize {
	border-color: #034C9E !important;
	border-radius: 10px !important;
	color: #034C9E !important;
}
.cky-consent-container {
	font-family: var(--bodyFont) !important;
}
.cky-consent-bar .cky-notice-des p {
	font-size: 16px;
	color: #283341 !important;
}
.cky-notice .cky-title {
	font-size: 20px !important;
	color: #007A77 !important;
}
.cky-consent-container [data-cky-tag="powered-by"] {
    display: none !important;
}
.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    display: none !important;
}