/* Lettertypes: eigen kit + kit van fonville.nl (voor futura-pt-condensed) */
@import url("https://use.typekit.net/gkd6mem.css");
@import url("https://use.typekit.net/rqh0aix.css");

/*** VARIABELEN (afgestemd op fonville.nl) ***/
:root {
    /* Lettertypes zoals op fonville.nl */
    --f-heading: 'futura-pt-condensed', 'futura-pt', Futura, sans-serif;
    --f-body: -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* Kleuren zoals op fonville.nl */
    --c-heading: #004A9A;               /* hoofdblauw: koppen, knoppen, footer */
    --c-heading-dark: #00346E;          /* donkerblauw: h1 en hover */
    --c-text: #1F2A37;                  /* lopende tekst */
    --c-muted: #4A5568;                 /* bijzaken: kenmerken, toelichting */
    --c-light: #F1F7FD;                 /* lichte sectie-achtergrond, zoals op fonville.nl */
    --c-faded-blue: #F1F7FD;
    --c-photo-bg: #EDFBFF;              /* achtergrond die in de vakgebied-foto's zit */
    --c-soft-blue: #DCEBFA;             /* tekst in footer, zachte vlakken */
    --c-border: #DCEBFA;                /* lijnen */
    --c-accent-line: #95D1D3;           /* streepje boven koppen */
    --card-shadow: 0 1px 2px rgba(0, 40, 90, .06), 0 6px 18px rgba(0, 40, 90, .06);
    --card-shadow-hover: 0 2px 4px rgba(0, 40, 90, .08), 0 12px 28px rgba(0, 40, 90, .10);

    /* Typografie
       Condensed koppen ogen kleiner dan ze zijn, dus die mogen fors groter dan de tekst.
       Desktop: h1 56 / h2 40 / h3 26 / tekst 17 / klein 15
       Mobiel:  h1 40 / h2 32 / h3 22 / tekst 16 / klein 15 */
    --fs-body: 17px;
    --lh-body: 1.65;

    /* Witruimte: overal hetzelfde ritme */
    --space-section: 96px;              /* boven en onder elke sectie */
    --space-block: 72px;                /* tussen blokken binnen een sectie */

    /* Variabelen van het vacaturesysteem */
    --vacancy-accent-color: 0, 74, 154;
    --vacancy-accent-color-hover: #00346E;
    --vacancy-text-color: 31, 42, 55;
    --vacancy-btn-color-hover: #AF265B;
    /* Kleurgebruik: roze ALLEEN voor zoeken en solliciteren, al het andere is blauw.
       Wil je ook de roze knoppen blauw, zoals op fonville.nl? Zet dan deze twee regels aan:
    --vacancy-btn-color: 0, 74, 154;
    --vacancy-btn-color-hover: #00346E;
    */
}

/*** ALGEMEEN ***/
*[data-lastpass-icon-root="true"] {display: none; visibility: hidden;}

* {
    font-family: var(--f-body);
    scroll-behavior: smooth;
}

body {
    color: var(--c-text);
    font-weight: 400;  /* het systeem zette 300: te dun voor het systeemlettertype */
}

/* Lopende tekst: rustige regelafstand (het systeem zette hier "normal") */
body p,
body li {
    font-size: var(--fs-body);
    line-height: var(--lh-body) !important;
    font-weight: 400;
    font-style: normal !important;
}
body p strong,
body li strong,
body b {font-weight: 700;}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--f-heading) !important;
    font-weight: 700 !important;
    letter-spacing: .005em;
    text-wrap: balance;  /* geen losse woorden op de laatste regel */
}

h2,h3,h4,h5,h6 {
    color: var(--c-heading);
}

h1 {line-height: 1.15!important;}

h1:not(.vacancy-detail-title) {
    text-transform: initial!important;
    margin-top: 0;
    line-height: 1.05!important;
    font-size: 56px!important;
}

h2,
.cta-title {
    font-size: 40px;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 20px;
}

h3 {font-size: 26px; line-height: 1.15;}

/* Losse <br> in paginatitels weg: de kop breekt zelf netjes af */
.is-header h1 br {display: none;}

@media screen and (max-width: 768px) {
    :root {--fs-body: 16px; --space-section: 64px; --space-block: 48px;}
    h1:not(.vacancy-detail-title) {font-size: 40px!important;}
    h2, .cta-title {font-size: 32px;}
    h3 {font-size: 22px;}
}

/* Iconen blauw (roze is voor zoeken en solliciteren) */
.fas,
.far {
    color: var(--c-heading);
}

img.shadow {
    box-shadow: none!important;
}

/*** RITME: elke sectie krijgt dezelfde ruimte boven en onder ***/
.is-section:where(:not(.is-header):not(.is-footer):not(.is-pulled-over--top):not(.is-team-image):not(.is-team-content)) .is-container {
    margin-top: var(--space-section) !important;
    margin-bottom: var(--space-section) !important;
}

.col-md-6.img-default {
    padding: 0px 30px;
}

.is-header { overflow: clip !important; }

.form-group.row { margin-top: 10px; }

@media screen and (max-width: 992px) {
    .col-md-6.img-default {padding: 15px;}
    .is-overlay .is-overlay-bg {background-position: center left;}
    .is-footer img {width: 200px !important;}
    .is-header-home p {color: var(--c-heading) !important;}
}


/*** NAVIGATIE ***/
li.nav-item:first-child {
    display: none;
}

#nav-main {background-color: #fff!important;}
#nav-main .btn.btn-sidebar-dropdown { display: none !important; }
#nav-main .nav-item.dropdown a { font-size: 16px !important; }
#nav-main .nav-item.dropdown .dropdown-menu a:hover { background-color: #FFF !important; color: #000 !important; }
#nav-main .nav-item:has(+ .nav-item.dropdown) {order: 999;}
#nav-main .nav-item:has(.js-open-application) {line-height: 1; height: 100%;}
#nav-main .nav-item .js-open-application { display: inline-flex; align-items: center; justify-content: center; column-gap: 10px; padding: 14px 20px; border-radius: 10px; background-color: rgb(var(--vacancy-btn-color)); color: #fff!important; font-weight: 600;}
#nav-main .nav-item .js-open-application:hover { background-color: var(--vacancy-btn-color-hover)!important; border-color: var(--vacancy-btn-color-hover); transition: 200ms ease; }
#nav-main .nav-item .js-open-application:after { content: '\f061'; font-family: "Font Awesome 5 Pro"; font-weight: 600; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; }

@media (min-width: 768px) {
    #nav-main .nav-item {font-size: 16px;}
    #nav-main .nav-link {padding: 1rem .6rem;}
}

@media screen and (min-width: 992px) {
    #nav-main {padding: 12px 0;}
    #nav-main .navbar-nav {margin-left: 12px!important; width: 100%; align-items: center;}
    #nav-main .nav-item:has(.js-open-application) {margin-left: auto!important;}
    #navbar-main .nav-item .nav-link { position: relative; }
    #navbar-main .nav-item .nav-link:hover::after { opacity: 1; }
    #navbar-main .nav-item.active .nav-link::after { opacity: 1; }
}

@media screen and (max-width: 992px) {
    #nav-main .navbar-nav { padding: 10px 15px 15px 15px; }
    #nav-main .is-container { position: static; }
    #nav-main .nav-item:has(.js-open-application) { border-bottom: none; margin-top: 12px; }
    #nav-main .navbar-toggler { order: -1; }
    #nav-main .nav-item .js-open-application { display: inline-flex; padding-left: 20px!important; }
    #navbar-main { position: absolute; top: 100%; left: 0px; right: 0px; background-color: #fff; margin: 0; }
    #navbar-main .nav-item { border: none; }
    #navbar-main .nav-item .nav-link { font-size: 18px; padding-left: 0px; }
    .navbar-expand-lg .navbar-nav .nav-link { padding-left: 0; padding-right: 0; }
}

@media (max-width: 991px) {
    #nav-main .navbar-nav { padding-left: calc((100vw - 650px) / 2); padding-right: calc((100vw - 650px) / 2); }
}

@media (max-width: 682px) {
    #nav-main .navbar-nav { padding-left: 16px!important; padding-right: 16px!important; }
}


/*** HEADER-BALK ***/
/* Blijft bovenaan staan tijdens scrollen, groter logo, menu rechts naast de knop,
   duidelijke actieve pagina en een compacte taalkeuze (alleen vlag). */
html,
body:not(.modal-open) {overflow-x: clip !important; overflow-y: visible !important; height: auto !important;}  /* nodig om de balk te laten meescrollen */
#nav-main {position: sticky; top: 0; z-index: 1030; box-shadow: 0 1px 0 var(--c-border), 0 4px 16px rgba(0, 40, 90, .05);}
#nav-main .navbar-logo {height: 46px; max-height: none; width: auto;}
#nav-main .navbar-nav .nav-link:not(.js-open-application):not([href*="open-sollicitatie"]) {position: relative; color: var(--c-text) !important; font-weight: 500; transition: color .15s ease;}
#nav-main .navbar-nav .nav-link:not(.js-open-application):not([href*="open-sollicitatie"]):hover,
#nav-main .navbar-nav .nav-item.active > .nav-link:not(.js-open-application):not([href*="open-sollicitatie"]) {color: var(--c-heading) !important;}

/* Witte tekst op de roze knop, ook bij hover */
#nav-main .navbar-nav .nav-link.js-open-application,
#nav-main .navbar-nav .nav-link.js-open-application:hover {color: #fff !important;}

#nav-main .nav-item.dropdown > .nav-link {display: flex; align-items: center; gap: 6px; font-size: 0 !important;}
#nav-main .nav-item.dropdown > .nav-link img {width: 22px; height: 16px; margin: 0 !important; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);}
#nav-main .nav-item.dropdown > .nav-link::after {font-size: 16px;}
#nav-main .dropdown-menu {border: 0; border-radius: 12px; box-shadow: var(--card-shadow-hover); padding: 8px;}
#nav-main .dropdown-menu .dropdown-item {border-radius: 8px; font-size: 15px !important; padding: 8px 12px;}

@media (min-width: 992px) {
    #nav-main {padding: 14px 0 !important;}
    #nav-main .navbar-nav {justify-content: flex-end; column-gap: 4px;}
    #nav-main .navbar-nav .nav-link:not(.js-open-application):not([href*="open-sollicitatie"]) {padding: 10px 12px !important;}
    #nav-main .navbar-nav .nav-item.active > .nav-link::after,
    #nav-main .navbar-nav .nav-item:not(.dropdown) > .nav-link:not(.js-open-application):not([href*="open-sollicitatie"]):hover::after {content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 2px; background-color: var(--c-accent-line); opacity: 1;}
    #nav-main .nav-item.dropdown {margin-left: 4px;}
    #nav-main .nav-item:has(.js-open-application) {margin-left: 12px !important;}
    #nav-main .nav-item .js-open-application {height: 48px; padding: 0 20px !important;}
}

/* Logo nooit laten krimpen en menu-items niet laten afbreken */
#nav-main .navbar-brand {flex-shrink: 0;}
#nav-main .navbar-nav .nav-link {white-space: nowrap;}

/* Desktop: header over de volle breedte (het systeem maakt hem tussen 992 en 1024px maar 650px breed) */
@media (min-width: 992px) {
    #nav-main > .is-container {width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px; padding-right: 24px;}
}

/* Kleinere laptops: alles iets compacter zodat het op één regel past */
@media (min-width: 992px) and (max-width: 1199px) {
    #nav-main .navbar-logo {height: 38px;}
    #nav-main .navbar-nav {column-gap: 0;}
    #nav-main .navbar-nav .nav-item:not(.dropdown) > .nav-link:not(.js-open-application):not([href*="open-sollicitatie"]) {padding: 10px 8px !important; font-size: 15px !important;}
    #nav-main .navbar-nav .nav-item.active > .nav-link::after,
    #nav-main .navbar-nav .nav-item:not(.dropdown) > .nav-link:not(.js-open-application):not([href*="open-sollicitatie"]):hover::after {left: 8px; right: 8px;}
    #nav-main .nav-item:has(.js-open-application) {margin-left: 8px !important;}
    #nav-main .nav-item .js-open-application {height: 44px; padding: 0 16px !important; font-size: 15px !important;}
}

@media (max-width: 991px) {
    #nav-main .navbar-logo {height: 38px;}
    #nav-main .navbar-toggler {border: 0 !important; padding: 8px 4px;}
    #navbar-main {border-top: 1px solid var(--c-border); box-shadow: 0 16px 24px rgba(0, 40, 90, .10);}
    #navbar-main .navbar-nav {padding-top: 8px !important; padding-bottom: 20px !important;}
    #nav-main .navbar-nav .nav-item:not(:has(.js-open-application)):not(:has(> a[href*="open-sollicitatie"])) > .nav-link {width: 100%; padding: 14px 0 !important; border-bottom: 1px solid var(--c-border); font-size: 18px !important;}
    #nav-main .nav-item.dropdown > .nav-link {font-size: 16px !important; color: var(--c-muted) !important;}
    #nav-main .nav-item:has(.js-open-application) {margin-top: 16px !important;}
    #nav-main .nav-item .js-open-application {display: flex !important; width: 100%; height: 50px; justify-content: center; padding: 0 20px !important;}
}


/*** EIGEN MENU-ITEM "SOLLICITEER DIRECT" ***/
/* Linkt de standaardknop zelf naar de open sollicitatie, dan blijft die gewoon staan.
   Staat er daarnaast een eigen menulink naar /solliciteren/open-sollicitatie, dan wordt de standaardknop
   verborgen en krijgt de eigen link de roze knopstijl. */
#nav-main .navbar-nav:has(a[href*="open-sollicitatie"]:not(.js-open-application)) .nav-item:has(.js-open-application) {display: none !important;}
#nav-main .nav-item:has(> a[href*="open-sollicitatie"]) {order: 1000; line-height: 1;}
#nav-main .navbar-nav .nav-link[href*="open-sollicitatie"] {display: inline-flex; align-items: center; justify-content: center; column-gap: 10px; height: 48px; padding: 0 20px !important; border-radius: 10px; background-color: rgb(var(--vacancy-btn-color)); color: #fff !important; font-weight: 600; transition: background-color .2s ease;}
#nav-main .navbar-nav .nav-link[href*="open-sollicitatie"]:hover {background-color: var(--vacancy-btn-color-hover) !important; color: #fff !important;}
#nav-main .navbar-nav .nav-link[href*="open-sollicitatie"]::after {content: '\f061'; position: static !important; height: auto !important; background: none !important; font-family: "Font Awesome 5 Pro"; font-weight: 600; font-size: .85em;}
@media (min-width: 992px) {
    #nav-main .nav-item:has(> a[href*="open-sollicitatie"]) {margin-left: 12px;}
}
@media (max-width: 991px) {
    #nav-main .nav-item:has(> a[href*="open-sollicitatie"]) {margin-top: 16px;}
    #nav-main .navbar-nav .nav-link[href*="open-sollicitatie"] {display: flex; width: 100%; height: 50px; border-bottom: 0 !important;}
}


/*** KNOPPEN (vorm zoals op fonville.nl) ***/
.btn {
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 10px;
}
.btn::after {content: '\f061'; font-family: "Font Awesome 5 Pro"; font-weight: 600; font-size: .85em; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased;}

/* Witte tekst op roze knoppen, ook op knoppen zonder link (die nemen anders de tekstkleur over) */
.btn-primary,
.btn-primary:hover { color: #fff !important; }

body .btn.btn-primary:hover { background-color: var(--vacancy-btn-color-hover)!important; border-color: var(--vacancy-btn-color-hover); opacity: 1; }

/* Tweede knop: blauwe rand op wit, zoals "Neem contact op" op fonville.nl */
.btn-secondary { background-color: #fff; border: 1px solid var(--c-heading); color: var(--c-heading)!important;}
.btn-secondary:hover { background-color: var(--c-heading)!important; border-color: var(--c-heading)!important; color: #fff!important; }

/* Kleine kop boven sectietitels: streepje zoals op fonville.nl */
.is-section .uppertitle {display: block; color: var(--c-heading); font-size: 13px; line-height: 1.4; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px;}
.is-section .uppertitle::before,
.is-section .is-container h2:not(.uppertitle + h2):not(.vacancy-detail-subtitle):not(.cta-title)::before {content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background-color: var(--c-accent-line); margin-bottom: 14px;}

@media screen and (max-width: 576px) {
    .is-section .uppertitle {font-size: 12px; letter-spacing: 1px;}
}
.is-section .btn-wrapper {display: flex; column-gap: 10px; row-gap: 10px; padding-top: 5px; flex-wrap: wrap;}

@media screen and (max-width: 768px) {
    .is-section .btn-wrapper {flex-direction: column;}
    .is-section .btn-wrapper .btn {width: 100%;}
}


/*** WHATSAPP-KNOP ***/
.whatsappbutton { z-index: 1000; background-color: #25D366; position: fixed; right: 40px; bottom: 20px; font-size: 18px; padding: 10px 20px; border-radius: 100px; font-weight: 500; transition: ease-in-out 200ms all; }
.whatsappbutton,
.whatsappbutton * { color: #fff !important; }
.whatsappbutton .fa-whatsapp { font-weight: bold; font-size: 24px; }
.whatsappbutton .whatsapp { display: flex; align-items: center; column-gap: 10px; }
.whatsappbutton:hover { transform: scale(1.05); text-decoration: none; }

@media screen and (max-width: 992px) {
    .whatsappbutton { right: 10px; bottom: 10px; font-size: 16px; }
}


/*** MODAL ***/
.modal .modal-content {border-radius: 16px;}
.modal .modal-content .modal-title {font-family: var(--f-heading); font-weight: 700; color: var(--c-heading);}
.modal .modal-body {padding-top: 0!important;}
.modal .modal-body label {line-height: 1;}


/*** ACHTERGRONDEN ***/
.is-bg-faded-blue {background-color: var(--c-faded-blue)!important;}


/*** HEADER ***/
.is-header:not(.is-header-home) {display: flex!important; align-items: center;}
.is-header .is-overlay .is-overlay-bg .is-overlay-color {background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 80%)!important; opacity: 1!important;}


/*** HEADER HOME ***/
.is-header-home form {display: flex; column-gap: 12px; margin-top: 28px;}
.is-header-home form .form-controller {min-width: 250px; min-height: 50px; border-radius: 10px; border: none; outline: none; padding: 5px 15px; color: rgb(var(--vacancy-text-color));}
.is-header-home .is-container {margin-top: 100px!important; margin-bottom: 260px!important;}
.is-header-home .slogan {font-size: 32px; margin-bottom: 8px;}
.is-header-home .display p {letter-spacing: 1px; font-weight: 500;}

@media screen and (max-width: 992px) {
    .is-header-home form .form-controller {min-width: 200px;}
}

@media screen and (max-width: 768px) {
    .is-header-home .display .slogan,
    .is-header-home .display h1 {color: var(--c-heading-dark);}
    .is-header-home .display p {font-size: 16px;}
    .is-header-home .is-overlay {height: 200px; position: initial;}
    .is-header-home .is-overlay .is-overlay-bg {position: initial;}
    .is-header-home .is-overlay .is-overlay-bg .is-overlay-color {display: none!important;}
    .is-header-home .is-container {margin-top: 32px!important; margin-bottom: 32px!important;}
    .is-header-home form {flex-direction: column; row-gap: 8px;}
    .is-header-home form .form-controller {min-width: unset; min-height: 55px; border: 1px solid var(--c-heading);}
}


/*** TEXT MEDIA ***/
.is-text-media.is-pulled-over--top .is-container {margin-bottom: 0; margin-top: -160px;}
.is-text-media.is-pulled-over--top .row {background-color: #fff; box-shadow: var(--card-shadow); margin-left: -80px; margin-right: -80px; padding: 56px; border-radius: 16px; align-items: center;}
.is-text-media.is-pulled-over--top .spacer {display: none;}
.is-text-media.is-pulled-over--top .img-default img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.is-text-media .img-default img {border-radius: 16px;}

@media screen and (max-width: 992px) {
    .is-text-media.is-pulled-over--top .row {padding: 40px 32px;}
}

@media screen and (max-width: 768px) {
    .is-text-media .row {row-gap: 15px;}
    .is-text-media.is-pulled-over--top {background-color: #fff!important;}
    .is-text-media.is-pulled-over--top .is-container {margin-top: 0; margin-bottom: 0;}
    .is-text-media.is-pulled-over--top .row {background-color: #fff; box-shadow: none; margin-left: 0; margin-right: 0; padding: 32px 0; border-radius: 0;}
}


/*** CTA ***/
.is-cta p {max-width: 46ch;}
.is-cta .is-overlay .is-overlay-color {background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0.1) 70%, rgba(255,255,255,0) 100%); opacity: 1!important; background-color: transparent!important;}

@media screen and (max-width: 768px) {
    .is-cta .is-overlay {height: 200px; position: initial;}
    .is-cta .is-overlay .is-overlay-bg {position: initial;}
    .is-cta .is-overlay .is-overlay-bg .is-overlay-color {display: none!important;}
}


/*** FOOTER (zoals fonville.nl: blauw met lichtblauwe tekst) ***/
.is-footer {background-color: var(--c-heading)!important; color: var(--c-soft-blue);}
.is-footer .is-container {margin-top: 64px !important; margin-bottom: 40px !important;}
.is-footer .footer-logo {filter: saturate(0) brightness(100); width: 75%;}
.is-footer h3 {margin-top: 0; color: #fff;}
.is-footer p {color: var(--c-soft-blue);}
.is-footer .menu-item {display: block; font-size: 18px; line-height: 1.6; color: var(--c-soft-blue); text-decoration: none; transform: translateX(-14px); transition: .2s ease;}
.is-footer .menu-item::before {opacity: 0; transition: .2s ease; content: '\f0da'; width: 14px; font-family: "Font Awesome 5 Pro"; font-weight: 600; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased;}
.is-footer .menu-item:hover {transform: translateX(0); color: #fff;}
.is-footer .menu-item:hover::before {opacity: 1;}
.is-footer .socials {display: flex; align-items: center; column-gap: 16px;}
.is-footer .social-icon {color: #fff; transition: .12s ease; width: 44px; height: 44px; line-height: 0; border: 1px solid #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;}
.is-footer .social-icon:hover {color: var(--c-heading)!important; background-color: #fff; text-decoration: none;}
.is-footer .social-icon i {color: inherit; font-size: 20px;}

@media screen and (max-width: 768px) {
    .is-footer .row {row-gap: 28px; text-align: center;}
    .is-footer .socials {justify-content: center;}
}

@media screen and (max-width: 576px) {
    .is-footer { min-height: 0; }
    .is-footer .col-md-3:nth-child(2) { display: none; }
    .is-footer .col-md-3:nth-child(3) { display: none; }
    .is-footer .is-boxes { min-height: 0px; }
    .is-footer .is-container { margin-bottom: 0!important; }
}


/*** FEATURED CARDS ***/
.is-featured-cards .header {margin-bottom: 32px;}
.is-featured-cards .cards {row-gap: 48px;}
.is-featured-cards .cards .item {text-decoration: none;}
.is-featured-cards .cards .item .item-header {height: 240px; line-height: 0; border-radius: 16px; overflow: hidden;}
.is-featured-cards .cards .item .item-header > img {height: 100%; width: 100%; object-fit: cover; transition: .2s ease;}
.is-featured-cards .cards .item:is(a):hover .item-header > img {transform: scale(1.075);}

/* Vakgebieden: foto als lichte tegel, eronder een blauwe klikbalk */
.is-featured-cards .cards:has(.item-small-body) {row-gap: 18px; overflow: hidden;}
.is-featured-cards .cards .item:has(.item-small-body) {display: block; border-radius: 16px; overflow: hidden;}
.is-featured-cards .cards .item .item-header:has(+ .item-small-body) {border-radius: 16px 16px 0 0; background-color: var(--c-photo-bg);}
.is-featured-cards .cards .item .item-small-body {display: flex; align-items: center; justify-content: center; min-height: 58px; background-color: var(--c-heading); border-radius: 0 0 16px 16px; padding: 16px 18px; text-align: center; position: relative; transition: background-color .2s ease;}
.is-featured-cards .cards .item:is(a):hover .item-small-body {background-color: var(--c-heading-dark);}
.is-featured-cards .cards .item .item-small-body h3 {font-size: 22px; line-height: 1.2; margin: 0; color: #fff !important;}
.is-featured-cards .cards .item .item-small-body h3::after {content: '\f061'; font-family: "Font Awesome 5 Pro"; font-weight: 600; font-size: .6em; margin-left: 8px; vertical-align: middle;}
.is-featured-cards .cards .item .item-small-body > .hover-overlay {position: absolute; inset: 0; top: 100%; visibility: hidden; opacity: 0; border-radius: 0 0 16px 16px; pointer-events: none; transition: .2s ease;}
.is-featured-cards .cards .item:is(a):hover .item-small-body > .hover-overlay {top: 0; visibility: visible; opacity: 1;}

/* Kernwaarden: duidelijke kop, rustige toelichting */
.is-featured-cards .cards .item .item-body {margin-top: 18px;}
.is-featured-cards .cards .item .item-body h3,
.is-featured-cards .cards .item .item-body h4 {font-size: 24px; line-height: 1.1; margin: 0 0 10px; color: var(--c-heading);}
.is-featured-cards .cards .item .item-body p,
.is-featured-cards .cards .item .item-body div {font-size: 16px !important; line-height: 1.6 !important; color: var(--c-muted) !important; margin: 0;}
.is-featured-cards .cards .item .item-body p:empty {display: none;}

/* Video onder de kernwaarden: ruimte ertussen en niet schermvullend */
.is-featured-cards .embed-responsive {max-width: 960px; margin: var(--space-block) auto 0; border-radius: 16px;}

@media screen and (max-width: 768px) {
    .is-featured-cards .header {margin-bottom: 18px;}
}

@media screen and (max-width: 576px) {
    .is-featured-cards .col-6:nth-child(odd) { padding-right: 10px; }
    .is-featured-cards .col-6:nth-child(even) { padding-left: 10px; }
    .is-featured-cards .cards .item .item-small-body { padding: 10px 8px; min-height: 52px; }
    .is-featured-cards .cards .item .item-small-body h3 { font-size: 17px; }
    .is-featured-cards .cards .item .item-small-body h3::after { display: none; }
    .is-featured-cards .cards .item .item-small-body > .hover-overlay { font-size: 14px; }
    .is-featured-cards__scroll-x .cards { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; }
    .is-featured-cards__scroll-x .cards .col-12 { scroll-snap-align: center; }
}


/*** VACATUREOVERZICHT ***/
#lijst {margin-top: 18px;}
#lijst > .row:first-child {margin-bottom: 48px; row-gap: 10px;}
#lijst label:has(+ .input-group) {display: none;}
/* Zoekvelden: één nette rand om icoon en veld samen, blauw bij typen */
#lijst .input-group-search {display: flex; align-items: center; flex-wrap: nowrap; min-height: 50px; background-color: #fff; border: 1px solid #D5E2F0 !important; border-radius: 10px !important; transition: border-color .15s ease, box-shadow .15s ease;}
#lijst .input-group-search:focus-within {border-color: var(--c-heading) !important; box-shadow: 0 0 0 3px rgba(0, 74, 154, .12);}
#lijst .input-group-search {overflow: hidden;}
#lijst .input-group-search .input-group-prepend {margin: 0 !important; padding-left: 16px; background: transparent !important; border-radius: 0 !important;}
#lijst .input-group-search .input-group-prepend i {font-size: 15px; color: var(--c-muted);}
#lijst .input-group-search .form-control {height: 48px; min-height: 48px; padding: 0 16px; border: 0 !important; border-radius: 10px !important; background: transparent; box-shadow: none !important; font-size: 16px;}
#lijst .input-group-search .input-group-prepend + .form-control {padding-left: 10px;}
#lijst .btn-search {width: 100%;}

/* Filters */
.vacancy-index-sidebar {background-color: var(--c-light); padding: 1.6rem; border-radius: 16px;}
.vacancy-index-active-filters {margin-bottom: 18px;}
.vacancy-index-item-filter-name {font-family: var(--f-heading); font-size: 20px; line-height: 1.1; color: var(--c-heading); font-weight: 700; margin-bottom: 12px;}
.vacancy-index-item-filter-options {margin-bottom: 24px;}
.vacancy-index-item-filter-options:last-of-type {margin-bottom: 0;}
.vacancy-index-sidebar .custom-control {min-height: 0; margin-bottom: 6px;}
label.custom-control-label {font-weight: 400; font-size: 15px; line-height: 1.45; color: var(--c-text);}
label.custom-control-label::before,
label.custom-control-label::after {top: .15em;}

/* "54 Vacatures gevonden" */
.vacancy-index-list-title {display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--c-text);}
.vacancy-index-list-counter {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background-color: var(--c-heading);
}

/* Vacaturekaarten: titel in het tekstlettertype (scant beter dan condensed met streepjes),
   kenmerken klein en grijs, hele kaart klikbaar, knop rustig tot je erover beweegt */
.vacancy-index-item {position: relative; border: 1px solid #E3ECF6; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 40, 90, .05), 0 8px 24px rgba(0, 40, 90, .07); padding: 22px 24px; margin-bottom: 14px; border-radius: 16px; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;}
.vacancy-index-item:hover {border-color: #CFDDEE; box-shadow: 0 2px 4px rgba(0, 40, 90, .08), 0 14px 32px rgba(0, 40, 90, .12); transform: translateY(-2px);}
.vacancy-index-item > .row.mb-2 {margin-bottom: 6px !important;}
.vacancy-index-item-title,
.vacancy-index-item-title:hover,
.vacancy-index-item-title:visited {font-family: var(--f-body); color: var(--c-heading); font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; text-decoration: none;}
.vacancy-index-item-title:hover {color: var(--c-heading-dark); text-decoration: underline; text-underline-offset: 3px;}
.vacancy-index-item-title::after {content: ''; position: absolute; inset: 0; border-radius: 16px;}

.vacancy-index-item-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    width: unset;
}
.vacancy-index-item-fields > div {padding: 0 !important; max-width: 100%;}
.vacancy-index-item-fields > .ml-auto {
    grid-column: 3;
    grid-row: 1 / 4;
}
.vacancy-index-item-field-value {font-size: 15px; color: var(--c-muted); white-space: normal;}
.vacancy-index-item-field-value i {font-size: 14px; color: var(--c-heading); margin-right: 6px;}

.vacancy-index-item .btn {min-height: 44px; font-size: 16px; padding: 0 18px;}
body .vacancy-index-item .btn.btn-primary {background-color: #fff !important; color: var(--c-heading) !important; border: 1px solid var(--c-heading) !important;}
body .vacancy-index-item:hover .btn.btn-primary {background-color: var(--c-heading) !important; color: #fff !important;}

/* Knop altijd rechts in het midden, ook als de kenmerken lang zijn */
@media screen and (min-width: 993px) {
    .vacancy-index-item {padding-right: 170px;}
    .vacancy-index-item-fields > .ml-auto {position: absolute; right: 24px; top: 50%; transform: translateY(-50%); margin: 0 !important;}
}

/* "Bekijk alle vacatures" onder de uitgelichte vacatures: tweede knop, blauw */
.vacancy-index-items + .text-center {margin-top: 24px;}
.vacancy-index-items + .text-center .btn {background-color: #fff !important; color: var(--c-heading) !important; border: 1px solid var(--c-heading) !important;}
.vacancy-index-items + .text-center .btn:hover {background-color: var(--c-heading) !important; color: #fff !important;}

@media screen and (max-width: 992px) {
    .vacancy-index-item-fields > .ml-auto {
        grid-column: 1 / 3;
        grid-row: unset;
        margin-left: unset;
        width: 100%;
        margin-top: 5px;
    }
    .vacancy-index-item-fields > .ml-auto .btn {width: 100%;}
}

@media screen and (max-width: 768px) {
    #lijst > .row:first-child {margin-bottom: 28px;}
    #lijst > .row:first-child .btn {width: 100%;}
    .vacancy-index-item {padding: 20px;}
    .vacancy-index-item-title,
    .vacancy-index-item-title:hover,
    .vacancy-index-item-title:visited {font-size: 19px;}
    .vacancy-index-item-fields > div.mb-2 {margin-bottom: 2px !important;}
}


/*** VACATUREDETAIL ***/
.vacancy-detail-title {color: var(--c-heading-dark);}
.vacancy-detail .employee {background-color: var(--c-heading);}
.vacancy-detail .form-control {border-radius: 10px !important;}
.apply-btn-submit {border-radius: 10px; padding: 15px 20px;}
.section_vacancy-detail-header .header {border-radius: 16px 16px 0 0;}
.vacancy-detail-offer-and-requirements .item {border-radius: 14px;}
.vacancy-detail-sidebar .sidebar-card,
.vacancy-detail-cta {border-radius: 16px; background-color: var(--c-light);}
.vacancy-detail-sidebar .vacancy-detail-sidebar-cta .btn {display: flex !important;}
.section_vacancy-detail-body .btn {padding-block: 8px;}

/* Vacaturetekst: echte tussenkoppen, prettige regellengte en -afstand */
.vacancy-detail-body .vacancy-detail-content > p,
.vacancy-detail-body .vacancy-detail-content > ul:not(.secondary-benefits) {max-width: 66ch;}
.vacancy-detail-content p,
.vacancy-detail-content li {line-height: 1.7 !important;}
.vacancy-detail-content p {margin-bottom: 14px;}
.vacancy-detail-content > p:first-child:last-child {margin-bottom: 24px;}  /* introtekst: zelfde maat als de rest, iets meer ruimte tot de kenmerken */
.section_vacancy-detail-body h3 {font-size: 28px; line-height: 1.15; margin-top: 40px !important; margin-bottom: 12px;}
.section_vacancy-detail-body ul {padding-left: 1.25em; margin-bottom: 16px;}
.section_vacancy-detail-body li {margin-bottom: 6px; padding-left: 4px;}
.section_vacancy-detail-body li::marker {color: var(--c-heading);}
.vacancy-detail-subtitle {font-size: 28px !important; line-height: 1.15;}
.vacancy-detail-subtitle.small {font-size: 22px !important;}
.vacancy-contact-name {font-size: 22px !important;}
.vacancy-contact-function {font-size: 15px !important; color: var(--c-muted);}

@media screen and (max-width: 768px) {
    .section_vacancy-detail-body h3 {font-size: 24px; margin-top: 32px !important;}
}


/*** VACATUREPAGINA: AANTREKKELIJKER ***/

/* Kopkaart: label met streepje, grotere titel, rustige gegevensregel */
/* Minder hoge fotobalk, zodat de vacature direct in beeld is */
.section_vacancy-detail-header {margin-bottom: 8px !important;}
.section_vacancy-detail-header > .container-fluid {padding-top: 190px !important;}
.section_vacancy-detail-header .slide {background-position: center 25% !important;}
.section_vacancy-detail-header .header {padding: 32px 40px !important; box-shadow: 0 -8px 24px rgba(0, 40, 90, .06);}
.section_vacancy-detail-header .header span:first-child {display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-heading) !important;}
.section_vacancy-detail-header .header span:first-child::before {content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background-color: var(--c-accent-line); margin-bottom: 12px;}
.vacancy-detail-title {font-size: 40px !important; line-height: 1.1 !important; margin-bottom: 10px !important;}
.vacancy-info {flex-wrap: wrap; gap: 6px 20px;}
.vacancy-info .item {margin: 0 !important;}
.vacancy-info .item p {margin: 0; font-size: 15px !important; color: var(--c-muted);}
.vacancy-info .item i {margin-right: 8px; font-size: 14px; color: var(--c-heading) !important;}

/* Salaris, functie en uren als drie lichte tegels naast elkaar */
.vacancy-detail-offer-and-requirements {margin-top: 20px;}
.vacancy-detail-offer-and-requirements .row > div {display: flex;}
.vacancy-detail-offer-and-requirements .item {flex: 1; padding: 14px 16px !important; border: 0 !important; border-radius: 14px !important; background-color: var(--c-light) !important;}
.vacancy-detail-offer-and-requirements .item > span {display: block; margin-bottom: 6px; font-size: 12px !important; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-muted) !important;}
.vacancy-detail-offer-and-requirements .item .d-flex {align-items: flex-start !important; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--c-heading);}
.vacancy-detail-offer-and-requirements .item .d-flex i {margin: 3px 0 0 !important; color: var(--c-heading) !important;}
.vacancy-detail-offer-and-requirements .row > div:first-child .item .d-flex::before {content: '\f153'; margin-top: 2px; font-family: "Font Awesome 5 Pro"; font-weight: 600; font-size: 14px; color: var(--c-heading);}  /* euroteken bij salaris */
@media (min-width: 768px) {
    .vacancy-detail-offer-and-requirements .row > .col-md-6 {flex: 0 0 33.333%; max-width: 33.333%;}
}

/* Opsommingen: blauwe bolletjes, gelijke afstanden */
.vacancy-detail-content ul {list-style: none; padding-left: 0 !important;}
.vacancy-detail-content ul li {position: relative; padding-left: 22px !important; margin-bottom: 4px;}

/* Tussenkoppen in de vacaturetekst iets compacter */
.section_vacancy-detail-body h3 {font-size: 26px !important; margin-top: 32px !important; margin-bottom: 10px !important;}
.vacancy-detail-content ul li::marker {content: '';}
.vacancy-detail-content ul li::before {content: ''; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background-color: var(--c-heading); opacity: .85;}
.vacancy-detail-content ul li p {margin: 0 !important;}

/* "Wij bieden": lichte kaart met vinkjes in twee kolommen */
.vacancy-detail-content ul.secondary-benefits {margin-top: 4px; margin-bottom: 0 !important; padding: 22px 26px !important; border-radius: 16px; background-color: var(--c-light); column-count: 2; column-gap: 32px;}
.vacancy-detail-content ul.secondary-benefits li {break-inside: avoid; padding-left: 28px !important; margin-bottom: 8px; font-size: 15px; line-height: 1.5 !important;}
.vacancy-detail-content ul.secondary-benefits li::before {content: '\f00c'; top: 1px; left: 0; width: auto; height: auto; background: none; opacity: 1; font-family: "Font Awesome 5 Pro"; font-weight: 600; font-size: 14px; color: var(--c-heading);}
.secondary-benefit-value {display: block; margin-top: 2px; font-size: 14px; font-weight: 400 !important; color: var(--c-muted) !important;}

/* Zijbalk: afgeronde kaart, contactkaart zonder lege ruimte, rustige deelknop */
.vacancy-detail-sidebar-map {margin-bottom: 24px !important; border-radius: 16px !important; overflow: hidden; box-shadow: var(--card-shadow);}
.vacancy-detail-sidebar-map iframe {display: block; height: 200px;}
.vacancy-detail-sidebar-contact {margin-bottom: 24px !important; padding: 24px !important; text-align: left !important;}
.vacancy-detail-sidebar-contact::before {content: 'Vragen? Neem contact op'; display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-muted);}
.section_vacancy-detail-body .vacancy-contact-name {margin-top: 0 !important;}
.vacancy-contact-info .info-item {display: flex !important; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--c-heading) !important; text-decoration: none;}
.vacancy-contact-info .info-item:hover {text-decoration: underline;}
.vacancy-contact-info .info-item span {margin: 0 !important;}
.vacancy-detail-sidebar-cta {padding: 24px !important;}
.vacancy-detail-sidebar-cta .btn-apply {width: 100%;}
.vacancy-detail-sidebar .sticky-top {top: 110px !important;}
.vacancy-detail-sidebar .social-share {padding-top: 16px !important;}
.vacancy-detail-sidebar .social-share button {color: var(--c-muted) !important;}
.vacancy-detail-sidebar .social-share button:hover {color: var(--c-heading) !important;}
.vacancy-detail-sidebar .social-share i {margin-right: 6px; color: inherit !important;}
.vacancy-detail-sidebar .vacancy-detail-sidebar-cta .social-share span {font-size: 15px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: inherit !important;}

/* Sollicitatieprocedure: streepje boven de kop, foto's met zachte verloop zodat de tekst leesbaar is */
.section_vacancy-detail-body .row.pt-5:has(.vacancy-detail-subtitle) {padding-top: 0 !important;}
.vacancy-detail-subtitle:not(.small) {margin-top: 48px !important; margin-bottom: 20px !important; padding: 0 !important; border: 0 !important;}
.vacancy-detail-subtitle:not(.small)::before {content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background-color: var(--c-accent-line); margin-bottom: 14px;}
.vacancy-detail-subtitle::after {display: none !important;}
.vacancy-detail-process .mb-4 {margin-bottom: 16px !important;}
.vacancy-detail-process-item {height: 180px; min-height: 180px !important; border-radius: 16px !important; overflow: hidden; background-size: cover; background-position: center;}
.vacancy-detail-process-item .overlay {border-radius: 16px !important; background: linear-gradient(180deg, rgba(0, 30, 70, .65) 0%, rgba(0, 30, 70, 0) 55%) !important; opacity: 1 !important;}
.vacancy-detail-process-item .step p {margin: 0; font-family: var(--f-heading); font-size: 22px !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important;}
.vacancy-detail-process-item .number {background-color: #fff !important; color: var(--c-heading) !important; font-weight: 700;}

/* Slotblok: streepje, ruimte tot de footer */
.vacancy-detail-cta {margin-top: 32px !important; margin-bottom: 64px !important; padding: 40px 32px !important; text-align: center;}
.vacancy-detail-cta h2 {font-size: 34px !important; margin-bottom: 20px !important;}
.vacancy-detail-cta h2::before {content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background-color: var(--c-accent-line); margin: 0 auto 14px;}

@media (max-width: 768px) {
    .section_vacancy-detail-header > .container-fluid {padding-top: 150px !important;}
    .section_vacancy-detail-body h3 {font-size: 22px !important;}
    .section_vacancy-detail-header .header {padding: 28px 20px !important;}
    .vacancy-detail-title {font-size: 32px !important;}
    .section_vacancy-detail-header .col-auto {flex: 0 0 100%; max-width: 100%;}
    .section_vacancy-detail-header .btn-apply {width: 100%;}
    .vacancy-detail-content ul.secondary-benefits {column-count: 1; padding: 22px 20px !important;}
}


/*** HOMEPAGE: KAART, UITGELICHTE VACATURES EN ALERT ALS DUIDELIJKE BLOKKEN ***/
.is-interactive-map .is-container > .row + .row {margin-top: var(--space-block);}
.is-interactive-map .is-container > .row + .row > .col-12 > br:first-child {display: none;}
.is-interactive-map #mapbox-container-vacancy {border-radius: 16px; overflow: hidden;}
#vacature-alert .row.mt-4 {margin-bottom: 0 !important;}


/*** VACATURE ALERT ***/
/* Licht blok: links de uitleg, rechts een rustig formulier met alle velden onder elkaar.
   Op mobiel staat alles onder elkaar. */
.vacancy-alert-container {
    margin-top: var(--space-block);
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: 64px;
    align-items: center;
    padding: 56px;
    border-radius: 16px;
    background-color: var(--c-light);
    color: var(--c-text);
}
.vacancy-alert-container > h2 {grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 12px;}
.vacancy-alert-container > p:first-of-type {grid-column: 1; grid-row: 2; align-self: start; margin: 0;}
.vacancy-alert-container > form {grid-column: 2; grid-row: 1 / 3;}
.vacancy-alert-container a {color: var(--c-heading);}

/* Labels boven de velden */
#vacature-alert .input-group {flex-wrap: wrap !important; margin-bottom: 16px !important;}
#vacature-alert .input-group-prepend {flex: 0 0 100%; margin: 0 0 6px;}
#vacature-alert .input-group-text,
#vacature-alert label.col-form-label {background: none !important; border: 0 !important; padding: 0 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--c-text) !important;}
#vacature-alert u {text-decoration: none; font-weight: 700;}

/* Velden: allemaal even hoog, witte achtergrond, dunne lichtblauwe rand */
#vacature-alert .select2-container {flex: 1 1 100% !important; width: 100% !important;}
#vacature-alert .select2-container--default .select2-selection--multiple,
#vacature-alert .form-control {min-height: 50px; border: 1px solid var(--c-border) !important; border-radius: 10px !important; background-color: #fff; box-shadow: none;}
#vacature-alert .form-control:focus,
#vacature-alert .select2-container--focus .select2-selection--multiple {border-color: var(--c-heading) !important; outline: 0; box-shadow: 0 0 0 3px rgba(0, 74, 154, .12);}
#vacature-alert .select2-selection--multiple .select2-search__field {margin-top: 12px; padding-left: 6px;}

/* E-mail, beveiligingsvraag en knop onder elkaar */
#vacature-alert > .input-group + .row {row-gap: 16px;}
#vacature-alert > .input-group + .row > [class*="col-"] {flex: 0 0 100%; max-width: 100%;}
#vacature-alert .form-group.row {margin: 0 !important;}
#vacature-alert .form-group.row > label {flex: 0 0 100%; max-width: 100%; padding-left: 0; margin-bottom: 6px;}
#vacature-alert .form-group.row > .col-md-6 {flex: 0 0 100%; max-width: 100%; padding: 0;}

/* Knop: blauw (roze is voor zoeken en solliciteren) */
body .vacancy-alert-container .btn.btn-primary {height: 50px !important; min-height: 50px; margin-top: 0 !important; padding: 0 24px !important; border: 0 !important; background-color: var(--c-heading) !important; color: #fff !important;}
body .vacancy-alert-container .btn.btn-primary:hover {background-color: var(--c-heading-dark) !important; color: #fff !important;}

/* Privacyregel klein en grijs */
#vacature-alert > .row:last-of-type p {margin: 14px 0 0; font-size: 13px !important; line-height: 1.5 !important; color: var(--c-muted);}

@media screen and (max-width: 991px) {
    .vacancy-alert-container {grid-template-columns: 1fr; padding: 32px 20px;}
    .vacancy-alert-container > h2,
    .vacancy-alert-container > p:first-of-type,
    .vacancy-alert-container > form {grid-column: 1; grid-row: auto;}
    .vacancy-alert-container > p:first-of-type {margin-bottom: 24px;}
}

/* Keuzeveld "Kies functies" elders (bijv. filters): op één regel en over de volle breedte */
.input-group:has(.select2-container) {flex-wrap: nowrap;}
.input-group .select2-container {flex: 1 1 auto; width: auto !important; min-width: 0;}
.input-group:has(.select2-container) .input-group-text {border-radius: 10px 0 0 10px;}
.input-group .select2-container--default .select2-selection--multiple {border-radius: 0 10px 10px 0; min-height: 50px;}


/*** TEAM LIST ITEM (collega's aan het woord) ***/
/* Foto met naam erop, daaronder het citaat en een rustige "Meer lezen" link. De hele kaart is klikbaar. */
.team-list-item {display: flex; flex-direction: column; height: 100%; background-color: #fff; position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--card-shadow); transition: box-shadow .2s ease, transform .2s ease;}
.team-list-item:hover {box-shadow: var(--card-shadow-hover); transform: translateY(-2px);}
.team-list-item .team-list-item-info {position: relative; height: 320px; background-size: cover !important; background-position: center 20%;}
.team-list-item .team-list-item-info:before {display: none;}
.team-list-item .team-list-item-info::after {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,30,70,0) 50%, rgba(0,30,70,.75) 100%);}
.team-list-item .team-list-item-name {position: absolute; left: 24px; right: 24px; bottom: 42px; z-index: 1; text-align: left; font-family: var(--f-heading); font-weight: 700; font-size: 28px; line-height: 1.1; color: #fff !important;}
.team-list-item .team-list-item-function {position: absolute; left: 24px; right: 24px; bottom: 18px; z-index: 1; text-align: left; font-size: 15px; color: var(--c-soft-blue);}
.team-list-item .team-list-item-content {flex: 1 1 auto; padding: 22px 24px 8px; text-align: left;}
.team-list-item .team-list-item-content p {font-size: 17px; font-style: italic !important; color: var(--c-text); margin: 0;}
.team-list-item .team-list-item-button {position: static; padding: 0 24px 22px; text-align: left;}
.team-list-item .team-list-item-button .btn {background: transparent !important; border: 0 !important; color: var(--c-heading) !important; padding: 0; min-height: 0; font-size: 16px;}
.team-list-item .team-list-item-button .btn:before {content: ''; position: absolute; inset: 0;}
.team-list-item:hover .team-list-item-button .btn {text-decoration: underline; text-underline-offset: 3px;}


/*** TEAM ***/
.is-team-cards.has-seperation {background: linear-gradient(180deg, #fff 0, #fff 200px, var(--c-faded-blue) 200px, var(--c-faded-blue));}
.is-section.is-team-cards.has-seperation .is-container {margin-top: 0 !important;}
.is-section:has(+ .is-team-cards.has-seperation) .is-container {margin-bottom: 56px !important;}
.is-team-cards.has-seperation .team-member {overflow: hidden; border-radius: 16px; box-shadow: var(--card-shadow);}
.is-team-cards .floating-buttons .btn-primary {background-color: var(--c-heading) !important; border-color: var(--c-heading) !important;}
.is-team-cards .floating-buttons .btn-primary:hover {background-color: var(--c-heading-dark) !important;}
.is-team-cards.has-seperation .team-member .team-member-header > img {height: 320px; width: 100%; object-fit: cover;}
.is-team-cards.has-seperation .team-member .team-member-body {display: flex; flex-direction: column; align-items: center; background-color: #fff; padding: 25px; padding-top: 40px; text-align: center; position: relative;}
.is-team-cards.has-seperation .team-member .team-member-body .floating-buttons {flex-wrap: nowrap; position: absolute; top: -5px; transform: translateY(-50%); left: 25px; right: 25px;}
.is-team-cards.has-seperation .team-member .team-member-body .floating-buttons .btn {width: 100%; font-size: 14px; min-height: 40px; padding: 7px 15px;}
/* Volgorde: naam, functie, dan bereikbaarheid */
.is-team-cards.has-seperation .team-member .team-member-body p {margin: 0; font-size: 15px; color: var(--c-muted);}
.is-team-cards.has-seperation .team-member .team-member-body .name {order: -2; font-family: var(--f-heading); font-size: 26px; font-weight: 700; margin: 0 !important;}
.is-team-cards.has-seperation .team-member .team-member-body .function-title {order: -1; margin: 2px 0 12px; font-size: 15px; color: var(--c-muted); font-weight: 500;}

@media screen and (max-width: 991.98px) {
    .is-team-cards .row {row-gap: 24px;}
}

@media screen and (max-width: 768px) {
    .is-team-cards.has-seperation .team-member .team-member-body .floating-buttons {row-gap: 5px; bottom: calc(100% - 20px); top: unset; transform: unset;}
}


/*** TEAM DETAIL ***/
.is-team-image { background: linear-gradient(0deg, var(--c-faded-blue) 0%, var(--c-faded-blue) 20%, rgba(255,255,255,1) 20%)!important; }
.is-team-image .is-container { margin-top: 0!important; margin-bottom: 0!important; }
.is-team-image .is-container img { width: 100%; max-height: 500px; object-fit: cover; border-radius: 16px; }

.is-team-content { overflow: inherit!important; }
.is-team-content .card { width: 100%; max-width: 360px; position: absolute; bottom: 100%; right: 15px; border: none; border-radius: 16px; box-shadow: var(--card-shadow); padding: 18px; align-items: start; }
.is-team-content .card p { margin-top: 0; margin-bottom: 20px; }

@media screen and (max-width: 450px) {
    .is-team-content .card { right: 30px; left: 30px; width: fit-content; }
}

@media (min-width: 1200px) {
    .is-team-content .card { padding: 32px; }
    .is-team-content .card p { font-size: 18px; }
}


/*** GRIJZE VLAKKEN WORDEN LICHTBLAUW ***/
.is-bg-grey {background-color: var(--c-light) !important;}


/*** INTRO-TEKST (gecentreerd, bijv. Collega's aan het woord) ***/
.is-section.is-align-center .row > .col-lg-8 {margin-left: auto; margin-right: auto;}
.is-section.is-align-center .row > .col-lg-8[style*="bold"] {font-weight: 400 !important; font-size: 20px; line-height: 1.6; color: var(--c-text);}
.is-section.is-align-center .row > .col-lg-8[style*="bold"] p {font-size: 20px; line-height: 1.6 !important;}


/*** HALF-HALF BLOK MET FOTO (bijv. Bijbaan en vakantiewerk): tekst op dezelfde lijn als de rest ***/
@media (min-width: 992px) {
    .is-section-100 .is-box-7 .is-container {padding-left: max(24px, calc((100vw - 1200px) / 2 + 15px)) !important; padding-right: 64px !important; max-width: none !important;}
}
@media (max-width: 991px) {
    .is-section-100 .is-box-7 .is-container {padding: 48px 20px !important;}
}


/*** TABELLEN (bijv. uurlonen) ***/
table.default {border-collapse: collapse; width: 100%; max-width: 440px; margin: 8px 0 20px;}
table.default td {padding: 12px 0 !important; border-bottom: 1px solid var(--c-border); font-size: var(--fs-body); vertical-align: middle !important;}
table.default tr:first-child td {border-top: 1px solid var(--c-border);}
table.default td:last-child {text-align: right; font-weight: 700; color: var(--c-heading);}


/*** CITAAT VAN EEN MEDEWERKER ***/
.is-section .row:has(.ion-quote) {align-items: center;}
.is-section .row:has(.ion-quote) img {border-radius: 16px;}
.is-section .row:has(.ion-quote) .col-md-8 {padding-left: 48px;}
.is-section .ion-quote {font-size: 48px !important; line-height: 1; color: var(--c-accent-line) !important;}
.is-section .row:has(.ion-quote) p:not(.size-14) {max-width: 40ch; font-size: 24px !important; line-height: 1.5 !important; font-weight: 500; color: var(--c-heading);}
.is-section .row:has(.ion-quote) p.size-14 {font-size: 16px !important; font-weight: 600; color: var(--c-muted) !important;}
.is-section .row:has(.ion-quote) p.size-14::before {content: '– ';}

@media (max-width: 768px) {
    .is-section .row:has(.ion-quote) .col-md-8 {padding-left: 15px; margin-top: 24px;}
    .is-section .row:has(.ion-quote) p:not(.size-14) {font-size: 20px !important;}
}


/*** SCHOLIEREN EN STUDENTEN ***/
.is-featured-vacancies .vacancy-index-items + .text-center { display: none; }
.vakantiewerk .vacancy-index-sidebar { display: none; }


/*** UITGELICHTE VACATURES ***/
.is-featured-vacancies .is-boxes { min-height: 0px; }


/*** CONTACT INFO ***/
.is-contact-info .row {row-gap: 10px;}
.is-contact-info h2 {margin-bottom: 24px;}
.is-contact-info .contact-option {display: flex; align-items: center; column-gap: 8px; padding: 18px 32px; border-radius: 14px;}
.is-contact-info .col-lg-4:nth-child(even) .contact-option {background-color: var(--c-heading);}
.is-contact-info .col-lg-4:nth-child(odd) .contact-option {background-color: var(--c-heading-dark);}
.is-contact-info .contact-option p {margin: 0; font-weight: 600;}
.is-contact-info .contact-option i {color: #fff;}


/*** EUROPARCS (landingspagina met eigen navigatie) ***/
body:has(.is-section-custom-nav) #nav-main { display: none!important; }
.is-section-custom-nav { padding-top: 15px!important; padding-bottom: 15px!important; }
.is-section-custom-nav .is-container { display: flex; align-items: center; }
.is-section-custom-nav .btn.btn-primary { margin-left: auto; padding: 12px 20px; border-radius: 10px; line-height: 1; }
.is-section-custom-nav .navbar-brand { padding-top: 0rem; padding-bottom: 0rem; }
.is-section-custom-nav .navbar-brand:nth-child(1) { padding-top: .5rem; padding-bottom: .5rem; border-right: 1px solid #707070; padding-right: 1rem!important; }

@media (min-width: 992px) {
    .is-section-custom-nav .navbar-brand:nth-child(1) { padding-top: 1rem; padding-bottom: 1rem; padding-right: 47px!important; margin-right: 47px!important; }
}


/*** VACATUREKAARTEN MET MEER KARAKTER ***/
/* Dun blauw streepje links dat bij hover lichtgroenblauw en iets breder wordt; het pijltje in "Bekijken" schuift mee. */
.vacancy-index-item {overflow: hidden;}
.vacancy-index-item::before {content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background-color: var(--c-heading); transition: background-color .2s ease, width .2s ease;}
.vacancy-index-item:hover::before {width: 6px; background-color: var(--c-accent-line);}
.vacancy-index-item .btn::after {transition: transform .2s ease;}
.vacancy-index-item:hover .btn::after {transform: translateX(4px);}
.vacancy-index-item-title {transition: color .2s ease;}


/*** ZACHTE ANIMATIES BIJ HET SCROLLEN ***/
/* Blokken komen licht omhoog in beeld zodra je ernaartoe scrolt.
   Alleen in browsers die dit ondersteunen, en niet voor mensen die "minder beweging" hebben ingesteld.
   Andere browsers tonen alles gewoon direct. */
@keyframes fv-reveal {
    from {opacity: 0; translate: 0 28px;}
    to   {opacity: 1; translate: 0 0;}
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .vacancy-index-item,
        .is-featured-cards .cards .item:not(:has(.item-small-body)),
        .is-featured-cards .cards:has(.item-small-body),
        .is-featured-cards .embed-responsive,
        .team-list-item,
        .is-team-cards .team-member,
        .is-contact-info .contact-option,
        .is-section .row:has(.ion-quote),
        .vacancy-alert-container,
        .vacancy-detail-offer-and-requirements .item,
        .vacancy-detail-content ul.secondary-benefits,
        .vacancy-detail-process-item,
        .vacancy-detail-cta {
            animation: fv-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 90%;
        }
    }
}