/* Standaardmenu styling */
.main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-menu li {
    margin-bottom: 5px;
}

/* Links en de nieuwe button-elementen dezelfde basisopmaak geven */
.main-menu li a, 
.main-menu li .menu-toggle {
    display: block;
    width: 100%;             /* Zorgt dat de knop de volle breedte inneemt */
    text-align: left;        /* Lijnt de tekst links uit net als bij <a> */
    border: none;            /* Verwijdert de standaard knop-rand */
    font-family: inherit;    /* Neemt het lettertype van de pagina over */
    font-size: 1em;          /* Behoudt de standaard lettergrootte */
    padding: 5px 7px;
    background-color: #f7e9c5; /* Lichte goudgele achtergrond */
    color: #4a3e36;          /* Donkerbruin voor tekst */
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-sizing: border-box;  /* Zorgt dat padding netjes binnen de breedte valt */
}

.main-menu li a:hover, 
.main-menu li .menu-toggle:hover {
    background-color: #e5b263; /* Zelfde kleur als de header bij hover */
}

/* Zichtbare focus-ring voor toetsenbordnavigatie (Tab-toets) */
.main-menu li a:focus-visible, 
.main-menu li .menu-toggle:focus-visible {
    outline: 2px solid #b38644;
    outline-offset: -2px;
}

/* Verbergt de submenu's standaard */
.main-menu .submenu {
    list-style: none;
    padding: 0;
    font-size: 0.9em;
    margin: 5px 0 0 15px;
    display: none;
}

/* Toont de submenu's wanneer de parent 'active' is */
.dropdown.active > .submenu {
    display: block;
}

/* Styling van de sub-menu links */
.submenu li a {
    background-color: #fcf8e8; /* Lichte achtergrondkleur van de body */
    color: #6a4f40; /* Iets lichtere bruintint */
    /* font-weight: normal;*/
    font-size: 0.9em;
    padding: 5px 15px;
    border-left: 2px solid #b38644;
}

.submenu li a:hover {
    background-color: #f7e9c5; /* Zelfde hover-kleur als de hoofdkleuren */
}
/* Opvallende kleur voor de Zoeken-knop in het menu */
.main-menu a.search-link {
    background-color: #d9534f;
    color: #ffffff !important;
    font-weight: bold;
    border-radius: 4px;
    padding: 8px 12px;
    display: block;
    text-align: center;
}

.main-menu a.search-link:hover {
    background-color: #c9302c;
}