/* ==========================================================================
   Hoofdmenu in de balk bovenaan (_Layout.cshtml > Components/Menu/Default.cshtml)
   --------------------------------------------------------------------------
   Overgenomen uit EPOS (Styles/Overwrite.css), dat op zijn beurt het uitzicht
   van https://ses.pxl.be volgt: witte menu-items in het huisfont Raleway, en
   bij hover een (bijna) witte achtergrond met grijze tekst i.p.v. goud.
   Raleway wordt in _Layout.cshtml via Google Fonts ingeladen - zonder die
   <link> valt de browser terug op Arial.
   Alles staat op .navbar .navbar-nav zodat de algemene .nav-link-regel in
   site.css (o.a. voor de tabbladen in ZoekVervangingen) ongemoeid blijft.
   ========================================================================== */
:root {
    --pxl-menu-font: 'Raleway', Arial, Helvetica, sans-serif;
    --pxl-menu-hover-achtergrond: #F4F4F2;
    --pxl-menu-hover-tekst: #808080;
}

.navbar {
    font-family: var(--pxl-menu-font);
}

.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
    color: #ffffff !important;
    font-weight: bold;
}

.navbar-dark .navbar-text {
    color: #ffffff;
}

.navbar .navbar-nav .nav-link {
    color: #ffffff !important;
    font-family: var(--pxl-menu-font);
    font-weight: 500;
    font-size: 16px !important;
    text-transform: none;
    /* nooit onderlijnen: site.css onderlijnt .nav-link bij hover en
       a:link:not(.btn-pxl):hover in pxl.css doet hetzelfde */
    text-decoration: none !important;
    cursor: pointer;
}

    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-item.show > .nav-link,
    .navbar .navbar-nav .nav-item:hover > .nav-link {
        color: var(--pxl-menu-hover-tekst) !important;
        background-color: var(--pxl-menu-hover-achtergrond);
    }

/* --------------------------------------------------------------------------
   Menu-items over de volledige hoogte van de balk, zoals op ses.pxl.be. De
   balk verliest haar verticale padding en die verhuist naar het logo, waarna
   elk niveau (kolom -> ul -> li -> a) uitgerekt wordt. Zo loopt het hover-vlak
   van boven tot onder. Enkel vanaf lg: daaronder klapt de balk open tot een
   verticale lijst en is uitrekken niet gewenst.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar.bg-pxl {
        padding-top: 0;
        padding-bottom: 0;
        align-items: stretch;
    }

        /* de logo's zijn 50px hoog; 8px lucht boven en onder houdt de balk even
           hoog als met de vroegere navbar-padding */
        .navbar.bg-pxl .navbar-brand {
            display: flex;
            align-items: center;
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .navbar.bg-pxl > .navbar-collapse {
            align-items: stretch;
        }

            .navbar.bg-pxl > .navbar-collapse > .col-8 {
                display: flex;
                align-items: stretch;
            }

            /* rechterkolom (naam en afmelden) blijft verticaal gecentreerd
               i.p.v. uitgerekt */
            .navbar.bg-pxl > .navbar-collapse > .col-4 {
                align-self: center;
            }

        .navbar.bg-pxl .navbar-nav,
        .navbar.bg-pxl .navbar-nav .nav-item {
            display: flex;
            align-items: stretch;
        }

            .navbar.bg-pxl .navbar-nav .nav-link {
                display: flex;
                align-items: center;
                padding: 0 16px;
                margin: 0 2px;
            }
}