/*-- 
    Name: Henos Amlesom
    Date:11-9-2025
*/

/* --- HEADER ALGEMEEN index --- */
header {
  background-color: transparent; /* Header zelf krijgt geen achtergrondkleur */
  display: flex; /* Plaatst logo en navigatie naast elkaar */
  align-items: center; /* Centreert logo en navigatie verticaal */
  justify-content: flex-start; /* Plaatst alles aan de linkerkant */
  padding: 0 20px 0 0; /* Ruimte rechts van de header (logo tegen boven- en linkerrand) */
  margin: 0; /* Verwijdert eventuele witruimte van buitenaf */
  border-top: 2px solid #b87d0e; /* Lijn boven de header */
  border-bottom: 2px solid #b87d0e; /* Lijn onder de header */
  border-left: none; /* Geen lijn aan de zijkanten */
  border-right: none; /* Geen lijn aan de zijkanten */
}

/* --- NAVIGATIE --- */
nav {
  flex: 0.9; /* Laat navigatie ongeveer 90% van de resterende breedte gebruiken */
  margin-left: 40px; /* Ruimte tussen logo en eerste knop */
}

nav ul {
  list-style: none; /* Verwijdert standaard bolletjes van de lijst */
  margin: 0; /* Verwijdert standaard marge van ul */
  padding: 0; /* Verwijdert standaard padding van ul */
  display: flex; /* Zet de navigatie-items naast elkaar */
  justify-content: space-between; /* Verdeelt knoppen gelijkmatig */
  width: 80%; /* Breedte van de navigatieknoppen samen */
}

nav li {
  flex: 1; /* Elke knop krijgt evenveel ruimte */
  text-align: center; /* Tekst in het midden van de knop */
}

nav a {
  display: block; /* Maakt hele knop klikbaar */
  padding: 14px 0; /* Hoogte van de knoppen */
  text-decoration: none; /* Verwijdert onderstreping */
  color: rgb(0, 0, 0); /* Tekstkleur van de knoppen */
}

nav a:hover {
  background-color: rgba(0, 0, 0, 0.2); /* Achtergrond bij hover */
  color: white; /* Tekstkleur bij hover */
}

/* --- LOGO --- */
header img {
  width: 130px; /* Breedte van het logo */
}
/* --- WEBSITE ACHTERGROND --- */
body {
  margin: 0; /* Verwijdert witruimte rondom de pagina */
  padding: 0; /* Verwijdert interne ruimte */
  background-color: #f5f5dc; /* Achtergrondkleur van de website */
}