/* Basisinstellingen voor de hele pagina */
body {
    background-color: #f0f0f0; /* Zachtgrijze achtergrond */
    color: #333; /* Donkergrijze tekstkleur */
    font-family: Arial, sans-serif; /* Lekker leesbaar lettertype */
    margin: 0; /* Verwijder standaard marge van de browser */
    padding: 0; /* Verwijder standaard opvulling */
  }
  /* Stijl voor de header */
header {
    background-color: #073c79; /* Mooie blauw-tint als achtergrond */
    color: white; /* Witte tekst */
    padding: 1rem; /* Ruimte binnenin het blok */
    text-align: center; /* Zet de tekst in het midden */
  }
  /* Navigatiebalk */
nav {
    background-color: #333; /* Donkere achtergrond */
    color: white; /* Witte tekst */
    display: flex; /* Zet de items naast elkaar */
    justify-content: space-between; /* Links + rechts uitlijnen */
    align-items: center; /* Centreert verticaal */
    padding: 1rem; /* Binnenruimte */
  }
  nav a {
    color: white;
    text-decoration: none; /* Haalt de onderstreping weg */
    margin-right: 1rem; /* Ruimte tussen links */
    font-weight: bold;
  }
  
  nav button {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
  }
  nav a:hover {
    color: #4a90e2;
  }
    /* Zoekformulier styling */
#zoekformulier {
  display: flex;              /* Zet alles op één rij */
  gap: 0.5rem;                /* Ruimte tussen de onderdelen */
  justify-content: center;   /* Centreer het geheel op de pagina */
  margin: 2rem 0;             /* Wat ruimte boven en onder het formulier */
}

#zoekformulier input,
#zoekformulier select,
#zoekformulier button {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#zoekformulier input {
  width: 300px;
}

#zoekformulier button {
  background-color: #4a90e2;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#zoekformulier button:hover {
  background-color: #357ABD;
}

/* Categorie-container in grid-layout */
.categorie-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* ruimte tussen de categorieën */
  justify-content: center; /* centreren */
  padding: 20px;
}

/* Elk categorieblok kleiner en naast elkaar */
.categorie {
  background-color: #f5f5f5;
  padding: 15px;
  width: 250px; /* vaste breedte */
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Titel en verwijderknop netjes naast elkaar */
.categorie-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.categorie-header h3 {
  margin: 0;
  font-size: 1.2em;
}

/* Verwijderknop */
.verwijder-categorie {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: #d9534f;
}

/* Formulier */
.bookmark-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

/* Inputs en knop */
.bookmark-form input,
.bookmark-form button {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* De bookmarklijst */
.bookmark-lijst {
  list-style: none;
  padding: 0;
}

.bookmark-lijst li {
  margin-bottom: 8px;
}

/* Linkjes */
.bookmark-lijst a {
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
}

.bookmark-lijst a:hover {
  text-decoration: underline;
}

/* ❌ knopjes bij bookmarks */
.bookmark-lijst button {
  background: none;
  border: none;
  font-size: 1.2em;
  color: #d9534f;
  cursor: pointer;
}

/* Nieuwe categorie invoerveld styling */
#nieuwe-categorie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 20px auto;
  padding: 20px;
}

/* De input en knop netjes maken */
#nieuwe-categorie input,
#nieuwe-categorie button {
  width: 250px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Knop iets opvallender */
#nieuwe-categorie button {
  background-color: #28a745; /* Mooi groen */
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

#nieuwe-categorie button:hover {
  background-color: #218838;
}