/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Algemene instellingen */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
  color: #333;
}

/* Header */
header {
  background: #1e90ff;
  color: white;
  padding: 20px;
  display: flex;                /* activeer flexbox */
  align-items: center;          /* verticaal centreren */
  justify-content: flex-start;  /* alles naar links uitlijnen */
  gap: 20px;                    /* ruimte tussen logo en tekst */
}

header .logo {
  max-width: 120px;
  display: block;
  margin: 0;                    /* geen automatische marge meer */
}

header .text {
  display: flex;
  flex-direction: column;       /* titel boven, subtitel onder */
  justify-content: center;
}

header h1 {
  margin: 0;
  font-size: 2.2rem;
}

header p {
  font-size: 1.1rem;
  margin: 5px 0 0 0;
}

/* Navigatie */
nav {
  background: #0d6efd;
  padding: 10px;
  text-align: center;
}

nav a {
  color: white;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
}

nav a:hover {
  text-decoration: underline;
}

/* Main content */
main {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

main h2 {
  color: #1e90ff;
}

main ul {
  list-style: disc inside;
  line-height: 1.6;
}

/* Afbeeldingen */
img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 15px auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

figure {
  margin: 20px 0;
  text-align: center;
}

figure figcaption {
  font-size: 0.9rem;
  color: #555;
  margin-top: 5px;
  font-style: italic;
}
/* Afbeelding naast tekst */
.content-with-image {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 20px 0;
}

.content-with-image .side-image {
  max-width: 200px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.content-with-image .text {
  flex: 1;
}

@media (max-width: 768px) {
  .content-with-image {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .content-with-image .side-image {
    max-width: 100%;
  }
}

/* Footer */
footer {
  background: #222;
  color: white;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
}

/* Responsive design */
@media (max-width: 768px) {
  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  nav a {
    margin: 8px;
    font-size: 0.95rem;
  }

  main {
    margin: 10px;
    padding: 15px;
  }
}

@media (max-width: 480px) {
  header h1 {
    font-size: 1.8rem;
  }

  header p {
    font-size: 1rem;
  }

  nav a {
    display: block;
    margin: 8px 0;
    font-size: 1rem;
  }

  main {
    margin: 5px;
    padding: 10px;
  }
}
/* Blokken onder de tekst */
.cards-section {
  margin: 40px 0;
  text-align: center;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.card {
  background: #f4f4f4;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  flex: 1 1 200px;  /* groeit tot 1, minimaal 200px */
  max-width: 220px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.card h3 {
  margin-top: 0;
  color: #0d6efd;
}

.card p {
  font-size: 0.9rem;
  color: #333;
}

/* Mobiel responsive */
@media (max-width: 480px) {
  .cards-container {
    flex-direction: column;
    align-items: center;
  }

  .card {
    max-width: 100%;
  }
}