/* ========== ROOT VARIABLES ========== */
@font-face {
    font-family: 'Halcom';
    font-style: normal;
    font-weight: 100;
    src: local('Halcom Thin'), url('assets/fonts/Halcom/Halcom-Thin-BF648a7145280f9.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: italic;
    font-weight: 100;
    src: local('Halcom Thin Italic'), url('assets/fonts/Halcom/Halcom-ThinItalic-BF648a714522fdf.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: normal;
    font-weight: 300;
    src: local('Halcom Light'), url('assets/fonts/Halcom/Halcom-Light-BF648a71454e889.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: italic;
    font-weight: 300;
    src: local('Halcom Light Italic'), url('assets/fonts/Halcom/Halcom-LightItalic-BF648a71454d055.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: normal;
    font-weight: 400;
    src: local('Halcom Book'), url('assets/fonts/Halcom/Halcom-Book-BF648a71455e035.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: italic;
    font-weight: 400;
    src: local('Halcom Book Italic'), url('assets/fonts/Halcom/Halcom-BookItalic-BF648a71454e521.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: normal;
    font-weight: 450;
    src: local('Halcom Regular'), url('assets/fonts/Halcom/Halcom-Regular-BF648a71453957a.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: italic;
    font-weight: 450;
    src: local('Halcom Italic'), url('assets/fonts/Halcom/Halcom-Italic-BF648a71456443a.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: normal;
    font-weight: 500;
    src: local('Halcom Medium'), url('assets/fonts/Halcom/Halcom-Medium-BF648a714568789.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: italic;
    font-weight: 500;
    src: local('Halcom Medium Italic'), url('assets/fonts/Halcom/Halcom-MediumItalic-BF648a71455df9d.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: normal;
    font-weight: 700;
    src: local('Halcom Bold'), url('assets/fonts/Halcom/Halcom-Bold-BF648a714549635.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: italic;
    font-weight: 700;
    src: local('Halcom Bold Italic'), url('assets/fonts/Halcom/Halcom-BoldItalic-BF648a7145597de.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: normal;
    font-weight: 800;
    src: local('Halcom ExtraBold'), url('assets/fonts/Halcom/Halcom-ExtraBold-BF648a71454d82a.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: italic;
    font-weight: 800;
    src: local('Halcom ExtraBold Italic'), url('assets/fonts/Halcom/Halcom-ExtraBoldItalic-BF648a714551827.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: normal;
    font-weight: 900;
    src: local('Halcom Black'), url('assets/fonts/Halcom/Halcom-Black-BF648a7144cd3a5.woff') format('woff');
}

@font-face {
    font-family: 'Halcom';
    font-style: italic;
    font-weight: 900;
    src: local('Halcom Black Italic'), url('assets/fonts/Halcom/Halcom-BlackItalic-BF648a71455b3bd.woff') format('woff');
}

:root {
	--font-primary: "Halcom", sans-serif;

	/* Primary Greens */
	--color-zeegroen: #007A77;
	--color-aquagroen: #00B194;
	--color-aquagroen-tint-1: #7DCCBA;
	--color-aquagroen-tint-2: #D1F3EC;

	/* Blues */
	--color-blauw: #034C9E;
	--color-blauw-shade: #0B3883;
	--color-blauw-tint: #2C61B7;
	--color-lichtblauw: #92C5EB;
	--color-lichtblauw-tint-1: #B4D9F5;
	--color-lichtblauw-tint-2: #E3EDFA;

	/* Neutrals */
	--color-donkerblauw: #283341;
	--color-donker-beige: #C5BFB8;
	--color-beige: #F1EEEA;
	--color-wit: #FFFFFF;

	/* Font weights */
	--fw-light: 300;
	--fw-book: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-extra-bold: 800;

	/* Font sizes */
	--fs-h1: 54px;
	--fs-h2: 38px;
	--fs-h3: 26px;
	--fs-h4-intro: 26px;
	--fs-h5: 20px;
	--fs-h1-photo: 54px;
	--fs-body: 18px;
	--fs-body-small: 16px;
	--fs-button: 18px;
	--fs-navbar: 18px;
	--fs-quote-h1: 48px;
	--fs-quote-h2: 40px;

	/* Line heights */
	--lh-h1: 54px;
	--lh-h2: 41.8px;
	--lh-h3: 33.8px;
	--lh-h4-intro: 36.4px;
	--lh-h5: 30.6px;
	--lh-h1-photo: 54px;
	--lh-body: 30.6px;
	--lh-body-small: 27.2px;
	--lh-button: 100%;
	--lh-navbar: 100%;
	--lh-quote-h1: 54px;
	--lh-quote-h2: 48px;

	/* Rounded corners */
	--radius-lg: 80px;
	--radius-md: 40px;
	--radius-sm: 10px;

	/* Spacing variables (semantic names) */
	--space-xxs: 6px;    /* extra extra small */
	--space-xs: 20px;    /* extra small */
	--space-sm: 24px;    /* small */
	--space-md: 40px;    /* medium */
	--space-lg: 80px;    /* large */
	--space-xl: 100px;   /* extra large */
	--space-xxl: 120px;  /* extra extra large */
}

/* ========== SECTION ========== */
.site-header__content,
.site-footer__content,
.section {
	width: 100%;
	max-width: 1440px;
	display: flex;
	margin: 0 auto;
	justify-content: center;
	padding-inline: var(--space-lg);
}

.section__container {
	width: 100%;	
}

/* ========== HEADINGS ========== */
.heading--h1 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}

/* default */
.heading--h2,
.heading--h2-donkerblauw,
.heading--h2-blauw {
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	color: var(--color-donkerblauw);
}

.heading--h2-donkerblauw {  
	color: var(--color-donkerblauw);
}

.heading--h2-blauw {
	color: var(--color-blauw);
}

.heading--h3,
.heading--h3-donkerblauw,
.heading--h3-wit {
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	color: var(--color-donkerblauw);
}

.heading--h3-donkerblauw { 
	color: var(--color-donkerblauw);
}

.heading--h3-wit {
	color: var(--color-wit);
}

.heading--h4-intro {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4-intro);
  line-height: var(--lh-h4-intro);
}

.heading--h5 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
}

.heading--h1-photo {
  font-family: var(--font-primary);
  font-weight: var(--fw-extra-bold);
  font-size: var(--fs-h1-photo);
  line-height: var(--lh-h1-photo);
}

/* ========== BODY TEXT ========== */
.text--body {
  font-family: var(--font-primary);
  font-weight: var(--fw-book);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
	color: var(--color-donkerblauw);
}

.text--small {
  font-family: var(--font-primary);
  font-weight: var(--fw-book);
  font-size: var(--fs-body-small);
  line-height: var(--lh-body-small);
}


/* ========== NAVBAR ========== */

.menu a,
.navbar-text {
	font-weight: var(--fw-medium);
	font-size: var(--fs-navbar);
	line-height: var(--lh-navbar);
	color: var(--color-wit);
}

/* ========== QUOTES ========== */
.quote--h1 {
  font-family: var(--font-primary);
  font-weight: var(--fw-light);
  font-size: var(--fs-quote-h1);
  line-height: var(--lh-quote-h1);
}

.quote--h2 {
  font-family: var(--font-primary);
  font-weight: var(--fw-light);
  font-size: var(--fs-quote-h2);
  line-height: var(--lh-quote-h2);
}

/* ========== BUTTONS ========== */

.button-text {
	font-family: Halcom;
	font-weight: var(--fw-medium);
	font-size: var(--fs-button);
	line-height: var(--lh-button);
	color: var(--color-donkerblauw);
}

/* Shared button styles for all variants */
.button-primary,
.button-primary--wit-groen,
.button-primary--wit-blauw,
.button-primary--blauw,
.button-secondary,
.button-secondary--wit,
.button-navbar,
.button-navbar--wit {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	min-height: 50px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	font-size: var(--fs-button);
	line-height: var(--lh-button);
	border: 1px solid; /* border will match background */
	max-width: fit-content;
}

.button-navbar,
.button-navbar--wit {
	height: 40px;
}

/* Primary variants */
.button-primary {
	background: var(--color-aquagroen);
	color: var(--color-wit);
	border-color: var(--color-aquagroen);
}
.button-primary:hover {
	background: var(--color-zeegroen);
	color: var(--color-wit);
	border-color: var(--color-zeegroen);
}

.button-primary--wit-groen {
	background: var(--color-wit);
	color: var(--color-zeegroen);
	border-color: var(--color-wit);
}
.button-primary--wit-groen:hover {
	background: var(--color-zeegroen);
	color: var(--color-wit);
	border-color: var(--color-zeegroen);
}

.button-primary--wit-blauw {
	background: var(--color-white);
	color: var(--color-blauw-tint);
	border-color: var(--color-white);
}
.button-primary--wit-blauw:hover {
	background: var(--color-blauw-tint);
	color: var(--color-wit);
	border-color: var(--color-blauw-tint);
}

.button-primary--blauw {
	background: var(--color-blauw);
	color: var(--color-wit);
	border-color: var(--color-blauw);
}
.button-primary--blauw:hover {
	background: var(--color-blauw-shade);
	border-color: var(--color-blauw-shade);
}

/* Secondary variants */
.button-secondary {
	color: var(--color-donkerblauw);
	border-color: var(--color-donkerblauw);
}
.button-secondary:hover {
	color: var(--color-zeegroen);
	border-color: var(--color-zeegroen);
}

.button-secondary--wit {
	color: var(--color-wit);
	border-color: var(--color-wit);
}

/* Navbar variants */
.button-navbar {
	background: var(--color-blauw);
	color: var(--color-wit);
	border-color: var(--color-blauw);
}
.button-navbar:hover {
	background: var(--color-blauw-shade);
	color: var(--color-wit);
	border-color: var(--color-blauw-shade);
}

.button-navbar--wit {
	background: var(--color-wit);
	color: var(--color-blauw-tint);
	border-color: var(--color-wit);
}
.button-navbar--wit:hover {
	background: var(--color-blauw-shade);
	color: var(--color-wit);
	border-color: var(--color-blauw-shade);
}

/* ========== DROPDOWN SELECT ========== */

.custom-select {
	position: relative;
	min-width: 257px;
}

.page-id-6 .custom-select {
	display: none;
}

select,
.custom-select__trigger {
	height: 60px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--color-wit);
	border-radius: var(--radius-sm);
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	font-size: var(--fs-button);
	line-height: var(--lh-button);
	color: var(--color-wit);
	cursor: pointer;
	padding-inline: 20px;
	background: transparent;
}

.custom-select__chevron {
	width: 13px;
	height: 13px;
	border-right: 2px solid var(--color-wit);
	border-bottom: 2px solid var(--color-wit);
	transform: rotate(45deg);
	transition: transform 0.25s ease;
	margin-left: 10px;
}

.custom-select.open .custom-select__chevron {
	transform: rotate(-135deg);
}

.custom-select__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: 8px;
	background: var(--color-aquagroen);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-wit);
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-10px);
	transition: all 0.25s ease;
	z-index: 999;
	box-shadow: 0px 4px 4px 0px #00000040;
}

.custom-select.open .custom-select__dropdown {
	max-height: 400px;
	opacity: 1;
	transform: translateY(0);
}

.custom-select__option {
	padding: var(--space-sm);
	color: var(--color-wit);
	cursor: pointer;
	transition: background 0.2s ease;
}

.custom-select__option:hover {
	background: rgba(255,255,255,0.1);
}

/* ========== FONT SIZE UTILITIES ========== */
.fs-h1 {
    font-size: var(--fs-h1);         /* 54px */
    line-height: var(--lh-h1);       /* 54px */
}

.fs-h2 {
    font-size: var(--fs-h2);         /* 38px */
    line-height: var(--lh-h2);       /* 41.8px */
}

.fs-h3 {
    font-size: var(--fs-h3);         /* 26px */
    line-height: var(--lh-h3);       /* 33.8px */
}

.fs-h4-intro {
    font-size: var(--fs-h4-intro);   /* 26px */
    line-height: var(--lh-h4-intro); /* 36.4px */
}

.fs-h5 {
    font-size: var(--fs-h5);         /* 20px */
    line-height: var(--lh-h5);       /* 30.6px */
}

.fs-h1-photo {
    font-size: var(--fs-h1-photo);   /* 54px */
    line-height: var(--lh-h1-photo); /* 54px */
}

.fs-body {
    font-size: var(--fs-body);       /* 18px */
    line-height: var(--lh-body);     /* 30.6px */
}

.fs-body-small {
    font-size: var(--fs-body-small); /* 16px */
    line-height: var(--lh-body-small); /* 27.2px */
}

.fs-button {
    font-size: var(--fs-button);     /* 18px */
    line-height: var(--lh-button);   /* 100% */
}

.fs-navbar {
    font-size: var(--fs-navbar);     /* 18px */
    line-height: var(--lh-navbar);   /* 100% */
}

.fs-quote-h1 {
    font-size: var(--fs-quote-h1);   /* 54px */
    line-height: var(--lh-quote-h1); /* 54px */
}

.fs-quote-h2 {
    font-size: var(--fs-quote-h2);   /* 40px */
    line-height: var(--lh-quote-h2); /* 48px */
}


/* ========== FONT WEIGHT UTILITIES ========== */
.fw-light {
    font-weight: var(--fw-light);    /* 300 */
}

.fw-book {
    font-weight: var(--fw-book);     /* 400 */
}

.fw-medium {
    font-weight: var(--fw-medium);   /* 500 */
}

.fw-bold {
    font-weight: var(--fw-bold);     /* 700 */
}

.fw-extra-bold {
    font-weight: var(--fw-extra-bold); /* 800 */
}

/* ========== TEXT COLOR UTILITIES ========== */

/* Primary Greens */
.text-zeegroen          { color: var(--color-zeegroen); }
.text-aquagroen         { color: var(--color-aquagroen); }
.text-aquagroen-tint-1  { color: var(--color-aquagroen-tint-1); }
.text-aquagroen-tint-2  { color: var(--color-aquagroen-tint-2); }

/* Blues */
.text-blauw             { color: var(--color-blauw); }
.text-blauw-shade       { color: var(--color-blauw-shade); }
.text-blauw-tint        { color: var(--color-blauw-tint); }
.text-lichtblauw        { color: var(--color-lichtblauw); }
.text-lichtblauw-tint-1 { color: var(--color-lichtblauw-tint-1); }
.text-lichtblauw-tint-2 { color: var(--color-lichtblauw-tint-2); }

/* Neutrals */
.text-donkerblauw       { color: var(--color-donkerblauw); }
.text-donker-beige      { color: var(--color-donker-beige); }
.text-beige             { color: var(--color-beige); }
.text-wit               { color: var(--color-wit); }

/* MOBILE VARIABLES */

@media (max-width: 768px) {
    :root {
        /* Font sizes */
        --fs-h1: 32px;
        --fs-h2: 22px;
        --fs-h3: 18px;
        --fs-h4-intro: 16px;
        --fs-h5: 15px;
        --fs-h1-photo: 28px;
        --fs-body: 14px;
        --fs-body-small: 13px;
        --fs-button: 14px;
        --fs-navbar: 16px;
        --fs-quote-h1: 28px;
        --fs-quote-h2: 22px;

        /* Line heights */
        --lh-h1: 32px;
        --lh-h2: 26px;
        --lh-h3: 24px;
        --lh-h4-intro: 22px;
        --lh-h5: 22px;
        --lh-h1-photo: 32px;
        --lh-body: 22px;
        --lh-body-small: 20px;
        --lh-quote-h1: 32px;
        --lh-quote-h2: 28px;

        /* Spacing */
        --space-xxs: 4px;
        --space-xs: 10px;
        --space-sm: 16px;
        --space-md: 20px;
        --space-lg: 40px;
        --space-xl: 60px;
        --space-xxl: 80px;

        /* Rounded corners */
        --radius-lg: 40px;
        --radius-md: 20px;
        --radius-sm: 8px;
    }
}