@import url('https://use.typekit.net/frs3gaa.css'); /*primary_font_url*/
:root {
}

/*###> custom ###*/
.page_vacancy-overview .layout_hero .is-overlay .is-overlay-bg {
    background-position: top 38% center;
}

.favorites-toggle::after {
    display: none !important;
    content: none !important;
}

.favourite::after,
.favorite-add::after,
.favorite-vacancy::after {
    display: none !important;
    content: none !important;
}

/* Scrollbar toevoegen aan het submenu in de navigatie */
ul[data-component-type="site-nav-submenu"] {
    max-height: 50vh;       /* Beperkt de hoogte tot 70% van de schermhoogte */
    overflow-y: auto;       /* Voegt een verticale scrollbar toe als de lijst te lang is */
    overflow-x: hidden;     /* Voorkomt ongewenste horizontale scrollbars */
}

/* Optioneel: Mooiere, slankere scrollbar voor moderne browsers (Chrome, Edge, Safari) */
ul[data-component-type="site-nav-submenu"]::-webkit-scrollbar {
    width: 6px;
}

ul[data-component-type="site-nav-submenu"]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

ul[data-component-type="site-nav-submenu"]::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

ul[data-component-type="site-nav-submenu"]::-webkit-scrollbar-thumb:hover {
    background: #999;
}

@media (max-width: 768px) {
    /* 1. Maak van de hoofdcontainer een flexbox die elementen onder elkaar zet */
    .is-hero-section {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
        height: auto !important;
        padding: 0 !important;
    }

    /* 2. Geef de afbeelding als losse banner een vaste hoogte bovenin */
    .is-hero-section .is-overlay {
        position: relative !important;
        height: 220px !important; /* Pas aan naar gewenste fotohoogte */
        width: 100% !important;
    }

    .is-hero-section .is-overlay-bg {
        background-size: cover !important;
        background-position: center center !important;
    }

    /* 3. Plaats de inhoud (het witte blok) netjes onder de foto */
    .is-hero-section .is-boxes {
        position: relative !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .is-hero-section .card {
        margin: 0 !important;
        border-radius: 0 !important; /* Optioneel: maakt de kaart strak sluitend op mobiel */
        box-shadow: none !important;
    }
}

/* 1. Reset de teksttransformatie en verberg ALLEEN de directe tekst 'Verstuur sollicitatie' */
[data-endpoint^="/applicant_snippet/open/"] button#submit_btn {
  text-transform: none !important;
  font-size: 0 !important;
}

/* 2. Voeg de nieuwe tekst 'Meld aan' toe met overerving van de originele knopgrootte */
[data-endpoint^="/applicant_snippet/open/"] button#submit_btn::before {
  content: 'Meld aan';
  font-size: initial !important; /* Herstelt naar de oorspronkelijk geldende font-size */
  text-transform: none !important;
  display: inline-block;
  margin-right: 0.5rem; /* Ruimte tussen tekst en pijltje */
}

/* 3. Zorg dat het pijltje/icoon de juiste grootte behoudt */
[data-endpoint^="/applicant_snippet/open/"] button#submit_btn svg,
[data-endpoint^="/applicant_snippet/open/"] button#submit_btn i,
[data-endpoint^="/applicant_snippet/open/"] button#submit_btn::after {
  font-size: initial !important; /* Zorgt dat het pijltje mee schaalt naar het originele formaat */
  display: inline-block;
}

/* 02-10-2026 */
/* Kleurcorrectie PsyQ */

body:is(:has([value="PsyQ"]:checked), .psyq, [data-site-theme="psyq"]) {
    --primary-color: #0036A0;
    --accent-color: #DC3005;
    --content-color: #0036A0;
  }
/*###< custom ###*/