/* =========================
   HEADER
   ========================= */
header {
    background-color: #204f2f; /* hoofdmenu achtergrond */
    position: sticky !important;
    top: 0;
    z-index: 1030;
    box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.06),
                0 8px 8px -5px rgba(0, 0, 0, 0.04);
    transition: ease .3s !important;
}

/* FORM ELEMENTEN */
button,
input,
optgroup,
select,
textarea {
    color: #f2f1e4;
    font: inherit;
    margin: 0;
}

/* =========================
   HOOFDMENU (BOVENBALK)
   ========================= */
.sf-menu > li {
    background-color: #204f2f; /* hoofdmenu li achtergrond */
}

.sf-menu > li > a {
    color: #f2f1e4; /* wit hoofdmenu tekst */
    padding: .5em 1em;
    text-decoration: none;
}

/* Hover hoofdmenu */
.sf-menu > li > a:hover,
.sf-menu > li.sfHover > a {
    color: #f2f1e4;
}

/* =========================
   SUBMENU / UITKLAPMENU
   ========================= */

/* Forceren van alle submenu niveaus */
.sf-menu ul,
.sf-menu ul li,
.sf-menu ul li a {
    background-color: #ffffff !important; /* wit uitklapmenu */
    color: #474B4E !important; /* donkergrijs tekst */
    text-decoration: none;
}

/* Hover submenu */
.sf-menu ul li a:hover,
.sf-menu ul li a:focus {
    background-color: #f1f1f1 !important; /* lichtgrijs hover */
    color: #474B4E !important; /* tekst blijft donkergrijs */
}

/* Submenu rand boven en onder */
.sf-menu > li > ul {
    border-top: 2px solid #d4af37;
    border-bottom: 2px solid #d4af37;
}

/* Submenu schaduw */
.sf-menu ul {
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
}

/* =========================
   MOBIEL
   ========================= */
@media (max-width: 991px) {
    .top-mobile a {
        margin-bottom: 12px;
        color: #f2f1e4 !important;
        font-size: 15px;
    }
}