/* Brand palette and typography from lindaverhoef.nl, applied on top of Bootstrap 5. */
:root {
    --lv-pink: #d92046;
    --lv-teal: #0d8a81;
    --lv-gold: #f5cc00;
    --lv-dark: #34061a;
    --lv-light: #ffffff;

    --bs-primary: var(--lv-pink);
    --bs-primary-rgb: 217, 32, 70;
    --bs-link-color: var(--lv-pink);
    --bs-link-color-rgb: 217, 32, 70;
    --bs-link-hover-color: var(--lv-teal);
    --bs-link-hover-color-rgb: 13, 138, 129;
    --bs-body-font-family: 'Poppins', sans-serif;
    --bs-body-color: var(--lv-dark);
}

body {
    font-family: 'Poppins', sans-serif;
    position: relative;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--lv-dark);
}

.btn-primary {
    background-color: var(--lv-pink);
    border-color: var(--lv-pink);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--lv-teal);
    border-color: var(--lv-teal);
}

.navbar {
    background-color: var(--lv-light) !important;
    border-bottom-color: var(--lv-gold) !important;
    border-bottom-width: 3px !important;
}

.nav-link:hover,
.nav-link.active,
.dropdown-item:hover,
.dropdown-item:active {
    color: var(--lv-teal) !important;
}

/* Below the lg breakpoint, show the collapsed menu as a dropdown-style panel anchored under the
   toggler instead of Bootstrap's default full-width panel below the whole header. */
@media (max-width: 991.98px) {
    .navbar > .container {
        position: relative;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 1050;
        min-width: 220px;
        margin-top: .5rem;
        padding: 1rem;
        background-color: var(--lv-light);
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: .375rem;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    }

    /* Menu volgorde op mobiel: Welkom bovenaan, het gebruikersmenu (Mijn gegevens, Beveiliging, Uitloggen) onderaan met een divider erboven —
       gewoon de brondocument-volgorde, dit paneel is geen flex-layout. */
    #hoofdmenu .welkom-item .navbar-text {
        font-weight: 600;
    }

    /* Bootstraps .dropdown-divider leunt op een CSS-variabele die alleen binnen .dropdown-menu
       gedefinieerd is; buiten die context toont hij geen randlijn. Vandaar een eigen, simpele hr. */
    #hoofdmenu .divider-item hr {
        margin: .5rem 0;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, .15);
    }

    /* In het uitgeklapte mobiele paneel staan Mijn gegevens, Beveiliging en Uitloggen gewoon onder elkaar:
       een hamburger-menu in een hamburger-paneel is dubbelop. */
    #hoofdmenu .gebruiker-item > .nav-link {
        display: none;
    }

    #hoofdmenu .gebruiker-item .dropdown-menu {
        display: block;
        position: static;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #hoofdmenu .gebruiker-item .dropdown-item {
        padding-left: 0;
    }
}

/* Vanaf lg staat het menu weer in een rij: Home, Beheer, dan Welkom + hamburger-menu rechts, zonder
   de mobiele divider ertussen. */
@media (min-width: 992px) {
    #hoofdmenu .home-item {
        order: 1;
    }

    #hoofdmenu .beheer-item {
        order: 2;
    }

    #hoofdmenu .welkom-item {
        order: 3;
        margin-left: auto;
    }

    #hoofdmenu .welkom-item .navbar-text {
        padding-top: 0;
        padding-bottom: 0;
    }

    #hoofdmenu .vr-divider-item {
        order: 4;
        margin: 0 .75rem;
    }

    #hoofdmenu .vr-divider-item .vr {
        min-height: 1.25rem;
    }

    #hoofdmenu .gebruiker-item {
        order: 5;
    }

    /* Het hamburger-icoon (Bootstraps navbar-toggler-icon) als knop, in de kleuren van de andere menu-items. */
    #hoofdmenu .gebruiker-item > .nav-link {
        display: flex;
        align-items: center;
    }

    #hoofdmenu .gebruiker-item .dropdown-menu {
        min-width: 11rem;
    }

    #hoofdmenu .divider-item {
        display: none;
    }
}