/* Custom CSS for Dropdown articles column Width and Word Break */
.dropdown-menu {
    width: 100% !important; /* Zorg ervoor dat de dropdown de volledige breedte van de container gebruikt */
    overflow-wrap: break-word !important; /* Zorg ervoor dat lange woorden worden afgebroken */
    white-space: normal !important; /* Zorg ervoor dat de tekst niet op één regel blijft */
    word-break: break-word !important; /* Zorg ervoor dat woorden worden afgebroken indien nodig */
    max-height: 300px !important; /* Beperk de hoogte van de dropdown-menu */
    overflow-y: auto !important; /* Zorg voor scrollen als de hoogte is bereikt */
}

/* Responsive adjustments for sticky elements on mobile */
@media (max-width: 767.98px) {
    .position-sticky {
        position: relative !important;
        top: auto !important;
    }
    .order-1 {
        order: 1 !important;
    }
}

/* Navbar Dropdown Styling */
.navbar-nav .dropdown-menu {
    background-color: #ffffff; /* Achtergrondkleur van het dropdown menu */
    border: 1px solid #dddddd; /* Randkleur van het dropdown menu */
}

.navbar-nav .dropdown-menu .dropdown-item {
    color: #333333; /* Kleur van de dropdown items */
}

.navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa; /* Achtergrondkleur van dropdown items bij hover */
    color: #000000; /* Kleur van de dropdown items bij hover */
}

/* Custom CSS for the sticky column */
.position-sticky {
    position: sticky;
    top: 20px; /* Beginpositie van de sticky kolom */
    overflow: visible; /* Zorg ervoor dat de inhoud zichtbaar blijft */
    margin-bottom: 100px; /* Voeg wat extra ruimte toe aan de onderkant van de kolom om vroegtijdig stoppen te voorkomen */
    z-index: 1000; /* Voeg een hoge z-index toe om ervoor te zorgen dat het boven andere elementen blijft */
}

/* Extra ruimte aan de onderkant van de container om sticky element te laten stoppen */
.container-sticky {
    padding-bottom: 150px; /* Voeg extra padding toe aan de onderkant van de container */
}

/* === Stijlen voor het hoofdmenu === */
.navbar-nav .nav-link {
    color: #ffffff !important; /* Witte tekstkleur */
    padding: 1rem 1rem !important; /* Padding aanpassen om de hoogte te vergroten */
}

.navbar-nav .nav-link:hover {
    color: #cccccc !important; /* Kleur bij hover */
}

/* === Stijlen voor het submenu === */
.navbar-nav .dropdown-menu {
    background-color: #007bff !important; /* Zelfde achtergrondkleur als het hoofdmenu */
    border: none !important; /* Geen rand */
    white-space: normal !important; /* Zorgen dat de tekst niet op één regel blijft */
    word-break: break-word !important; /* Woorden afbreken indien nodig */
}

.navbar-nav .dropdown-menu .dropdown-item {
    color: #ffffff !important; /* Witte tekstkleur voor submenu items */
    padding: 0.5rem 1rem !important; /* Padding aanpassen */
}

.navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: #0056b3 !important; /* Donkerdere kleur bij hover */
    color: #ffffff !important; /* Tekstkleur bij hover */
}



#job-listings {
    width: calc(100% - 320px); /* Verondersteld dat de rechterkolom 300px breed is en er 20px marge is */
    margin-right: 20px; /* Pas aan afhankelijk van je lay-out */
}