:root{
	--kleur_achtergrond : #d3d3d3;	/* Lichtgrijze kleur */
	--kleur_menu_standaard : #555;
	--kleur_menu_licht : #444;		/* Donker grijs */
	--kleur_group_selected : #666;	/* Geselecteerde submenu's */
	--kleur_menu_item: #222;		/* Kleur van een menu item zonder link meer */
	--kleur_font_link: #ffd700;		/* Kleur van de font zonder deeplink optie */
}

/* Zorg ervoor dat alle styling alleen van toepassing is op het pulldown_menu */
#pulldown_menu {
    width: 250px; 
    background-color: var(--kleur_achtergrond);
    color: white;
    padding: 0;
    margin: 0 3px 0 0;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
}

/* Zorg ervoor dat de submenu's zichtbaar zijn als het parent-item actief is */
#pulldown_menu .pulldown_menu-item.active > .pulldown_menu-list {
    display: block; /* Maak submenu zichtbaar */
}

#pulldown_menu .pulldown_menu-item {
    display: none; /* Verberg alle items standaard */
}

#pulldown_menu .pulldown_menu-item.active {
    display: block; /* Maak actieve items zichtbaar */
}

nav.pulldown_menu {
    background-color: var(--kleur_achtergrond);
}

.website-container {
    display: flex;  /* Plaatst de menu en body naast elkaar */
    max-width: 1050px;  /* Max breedte van de hele container */
    width: 100%;  /* Zorgt dat het menu en body samen de breedte 100% vullen */
    margin: 0 auto;  /* Centreert de container */
    min-height: 100vh;  /* Zorgt ervoor dat de container altijd ten minste de hoogte van het scherm is */
}


/* Body-content instellingen */
.body_content {
    flex: 1; /* Gebruik resterende ruimte naast het menu */
    background-color: white; /* Zorg dat content apart staat van het menu */
	box-sizing: border-box;
}

#pulldown_menu .pulldown_menu-item a.toggle {
    width: 230px;
	padding: 10px 10px; 
    text-decoration: none; /* Zorg ervoor dat er geen onderlijning is */
    color: white; /* Zorg ervoor dat de tekst wit is */
    display: flex; /* Zorg voor een flexbox layout */
    justify-content: space-between; /* Zet de inhoud goed uit elkaar */
    align-items: center; /* Verticaal centreren */
    background-color: var(--kleur_menu_licht);
}

#pulldown_menu .pulldown_menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
	border: none; 
}

#pulldown_menu .pulldown_menu-item {
    background-color: var(--kleur_menu_licht);
    border-bottom: 1px solid var(--kleur_menu_standaard);
	padding: 0;
}

#pulldown_menu .pulldown_menu-item a {
    display: block;
    text-decoration: none;
    color: white;
    justify-content: space-between;
    align-items: center;
	border-bottom: none; 
}

/* Hover-effecten voor links */
#pulldown_menu .pulldown_menu-item a:hover {
    background: linear-gradient(to right, #333, #777); 
    color: white; 
    transition: background 0.3s ease-in-out; 
}

#pulldown_menu .hoofdgroep a {
    color: var(--kleur_font_link);
}

/* Stijlen voor submenu's */
#pulldown_menu .toggle + .pulldown_menu-list {
    display: none; /* Verberg submenu's standaard */
}

#pulldown_menu .pulldown_menu-list a {
    font-size: 14px; 
}

#pulldown_menu .pulldown_menu-item:not(.active):hover {
    background: linear-gradient(to right, #333, #777);
    color: white; 
}

/* Voor alle items in een geopend submenu */
#pulldown_menu .pulldown_menu-item.active > .pulldown_menu-list > .pulldown_menu-item {
    background-color: var(--kleur_group_selected); /* Pas de achtergrondkleur aan */
}

/* Voor items met een submenu die geopend zijn */
#pulldown_menu .pulldown_menu-item.active > .pulldown_menu-list > .pulldown_menu-item a.toggle {
    background-color: var(--kleur_group_selected); /* Zelfde kleur voor links in submenu */
}

/* Hover-gedrag blijft behouden */
#pulldown_menu .pulldown_menu-item.active > .pulldown_menu-list > .pulldown_menu-item:hover {
    background: linear-gradient(to right, #333, #777); /* Hover effect */
    color: white; 
}

.pulldown_menu-hamburger {
    display: none;
    background-color: transparent; /* Maak achtergrond transparant zodat icoon beter zichtbaar is */
    border: none; /* Verwijder rand */
    width: 30px;
    height: 25px;
    position: fixed;
    top: 20px;
    right: 20px; /* Rechts uitlijnen */
    z-index: 1000;
    cursor: pointer;
}

/* Als je FontAwesome gebruikt voor een mooier icoon */
.pulldown_menu-hamburger i {
    font-size: 30px; /* Pas de grootte van het icoon aan */
    color: #fff; /* Icoonkleur */
}

/* Specifieke stijlen voor mobiele weergave */
@media screen and (max-width: 768px) {
    /* Menu begint buiten het scherm */
    #pulldown_menu {
        position: fixed;  /* Zorgt ervoor dat het menu boven de pagina ligt */
        max-width: 250px; /* Maximaal 250px breed */
		top: 0;
        left: -100%;  /* Begin het menu buiten het scherm */
        width: 100%;
        height: 100%;  /* Volledige hoogte van het scherm */
        background-color: var(--kleur_achtergrond);
        z-index: 999;  /* Zorg ervoor dat het menu boven andere elementen komt */
        transition: left 0.3s ease-in-out;
    }

    /* Menu wordt zichtbaar wanneer de 'open' class is toegevoegd */
    #pulldown_menu.open {
        left: 0;  /* Het menu komt van links naar rechts */
    }

    .pulldown_menu-hamburger {
        display: block;
        
        width: 30px;
        height: 25px;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;  /* Zorgt dat de hamburgerknop boven het menu komt */
        cursor: pointer;
    }

    .pulldown_menu-hamburger span {
        display: block;
        background-color: #fff;
        height: 4px;
        margin: 5px 0;
        width: 100%;
    }
}