/* =====================================================
   ALGEMENE INSTELLINGEN
   ===================================================== */

/* 
   De universele selector (*) past regels toe op alle elementen.
   - box-sizing: border-box zorgt ervoor dat padding en border
     binnen de opgegeven breedte/hoogte vallen (handiger bij layouts).
   - margin en padding op 0: reset standaard browserstijlen.
*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 
   De body = hele pagina.
   - font-family: standaard lettertype Arial (met sans-serif als fallback).
   - line-height: ruimte tussen tekstregels (leesbaarheid).
   - background-color: lichtgrijze achtergrondkleur.
   - color: standaard tekstkleur (donkergrijs).
*/
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f9f9f9;
  color: #333;
}

/* =====================================================
   HEADER + NAVIGATIEBALK
   ===================================================== */

/* 
   De header staat bovenaan de pagina.
   - achtergrondkleur donkerblauw (#004080).
   - padding: ruimte rondom de inhoud.
   - display: flex -> maakt flexbox container.
   - justify-content: space-between -> nav links, knop rechts.
   - align-items: center -> alles netjes verticaal gecentreerd.
*/
header {
  background-color: #004080;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 
   De nav bevat de navigatielinks.
   - display: flex -> links staan naast elkaar.
   - gap: ruimte van 1rem tussen de links.
*/
nav {
  display: flex;
  gap: 1rem;
}

/* 
   De navigatielinks zelf.
   - kleur: wit (valt goed op tegen blauwe achtergrond).
   - text-decoration: none -> geen onderstreping.
   - padding: extra klikruimte en beter uiterlijk.
*/
nav a {
  color: white;
  text-decoration: none;
  padding: 0.3rem 0.6rem;
}

/* 
   Hover-effect bij navigatielinks.
   - achtergrondkleur verandert naar lichter blauw (#0066cc).
   Geeft feedback dat je eroverheen gaat.
*/
nav a:hover {
  background-color: #0066cc;
}

/* =====================================================
   DARK MODE KNOP
   ===================================================== */

/* 
   De knop rechtsboven waarmee dark mode geactiveerd wordt.
   - blauwe achtergrondkleur (#0066cc).
   - witte tekst/icoon (🌙).
   - border-radius: afgeronde hoeken.
   - cursor: pointer maakt klik-handje zichtbaar.
   - font-size: iets kleiner zodat hij compact blijft.
*/
.theme-btn {
  background-color: #0066cc;
  color: #fff;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

/* 
   Hover-effect: knop wordt nog iets lichter blauw (#0080ff).
*/
.theme-btn:hover {
  background-color: #0080ff;
}

/* =====================================================
   MAIN (HOOFDINHOUD)
   ===================================================== */

/* 
   Main is het centrale contentgedeelte van de pagina.
   - max-width: 900px -> zodat de tekstkolom niet te breed wordt (leesbaarheid).
   - margin: auto -> centreert de inhoud in het midden van de pagina.
   - padding: 1rem -> ruimte links en rechts.
   - padding-bottom: 6rem -> extra ruimte zodat de footer niet over de tekst valt.
*/
main {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
  padding-bottom: 6rem;
}

/* 
   Titels (h1 en h2).
   - margin-bottom: ruimte eronder.
   - kleur: dezelfde blauw als de header (#004080).
*/
h1, h2 {
  margin-bottom: 1rem;
  color: #004080;
}

/* 
   Paragrafen (p).
   - margin-bottom: ruimte eronder voor leesbaarheid.
*/
p {
  margin-bottom: 1rem;
}

/* 
   Ongeordende lijsten (ul).
   - margin: extra ruimte boven/onder de lijst.
   - padding-left: inspringing zodat de bolletjes goed uitgelijnd staan.
*/
ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

/* 
   Afbeeldingen (img).
   - max-width: 100% -> afbeelding past zich aan breedte van container aan.
   - height: auto -> behoudt verhoudingen (geen vervorming).
   - margin: ruimte boven/onder de afbeelding.
   - border-radius: afgeronde hoeken.
*/
img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 8px;
}

/* =====================================================
   FOOTER
   ===================================================== */

/* 
   De footer staat altijd onderaan de pagina (fixed).
   - position: fixed -> blijft onderaan in beeld, ook bij scrollen.
   - width: 100% -> over de hele breedte.
   - achtergrondkleur donkerblauw.
   - kleur: witte tekst.
   - text-align: center -> tekst gecentreerd.
   - padding: ruimte rondom de tekst.
   - font-size: iets kleiner.
*/
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #004080;
  color: white;
  text-align: center;
  padding: 0.8rem;
  font-size: 0.9rem;
}

/* =====================================================
   ALGEMENE KNOPPEN
   ===================================================== */

/* 
   Algemene stijl voor knoppen (class .btn).
   - blauwe achtergrondkleur.
   - witte tekst.
   - afgeronde hoeken.
   - cursor: pointer -> handje bij hover.
   - font-size: normale grootte.
*/
.btn {
  background-color: #004080;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}

/* 
   Hover-effect: iets lichter blauw.
*/
.btn:hover {
  background-color: #0066cc;
}

/* =====================================================
   CONTACTFORMULIER
   ===================================================== */

/* 
   Inputvelden en tekstvelden (textarea).
   - width: 100% -> nemen de volledige breedte van container in.
   - max-width: 400px -> maar nooit breder dan 400px.
   - padding: ruimte binnen het veld (voor tekst).
   - margin-top: kleine ruimte boven elk veld.
   - border: dunne grijze rand.
   - border-radius: afgeronde hoeken.
   - font-family: inherit -> gebruikt hetzelfde lettertype als de rest van de site.
*/
input, textarea {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem;
  margin-top: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: inherit;
}

/* =====================================================
   DARK MODE
   ===================================================== */

/* 
   Donkere modus voor de body.
   - achtergrondkleur wordt donkergrijs.
   - tekstkleur wordt lichtgrijs/wit.
*/
.dark-mode {
  background-color: #222;
  color: #f9f9f9;
}

/* 
   In dark mode: header en footer nog donkerder (#111).
*/
.dark-mode header,
.dark-mode footer {
  background-color: #111;
}

/* 
   Navigatielinks in dark mode: lichte tekstkleur.
*/
.dark-mode nav a {
  color: #f9f9f9;
}

/* 
   Hover bij links in dark mode: donkergrijs (#333).
*/
.dark-mode nav a:hover {
  background-color: #333;
}

/* 
   Dark mode knop zelf: donkergrijze achtergrond.
   Tekst blijft licht.
*/
.dark-mode .theme-btn {
  background-color: #333;
  color: #f9f9f9;
}