/* style.css: hier staat hoe de site eruitziet (kleuren, ruimte, plekken) */

/* de hele pagina */
body {
  font-family: Verdana, sans-serif;  /* soort letters */
  background-color: #f4f9fc;         /* lichtblauwe achtergrond */
  color: #1c2b36;                    /* kleur van de tekst */
  margin: 0;                         /* geen rand om de pagina */
}

/* doos om alles heen: flex zet het menu naast de inhoud */
.pagina {
  display: flex;
}

/* het menu links */
.zijbalk {
  width: 200px;
  background-color: #0b3c5d;         /* donkerblauw */
  padding: 20px;                     /* ruimte binnen het menu */
}

.zijbalk h2 {
  color: #f28c28;                    /* oranje */
}

.zijbalk ul {
  list-style: none;                  /* geen bolletjes */
  padding: 0;
}

.zijbalk li {
  margin-bottom: 15px;               /* ruimte onder elke link */
}

.zijbalk a {
  color: white;
  text-decoration: none;             /* geen streep onder de link */
}

/* hover = als je met de muis op de link staat */
.zijbalk a:hover {
  color: #f28c28;
}

/* de rechterkant: pakt de rest van de ruimte */
.inhoud {
  flex: 1;
}

/* bovenkant met de titel */
header {
  border-bottom: 5px solid #f28c28;  /* oranje lijn onder de titel */
  padding: 10px 30px;
}

header h1 {
  color: #0b3c5d;
}

/* de tekst in het midden */
main {
  padding: 20px 30px;
  max-width: 800px;
}

/* foto's worden nooit breder dan de pagina */
img {
  max-width: 100%;
}

figcaption, .fotocredit {
  font-size: 0.75em;
}

/* onderkant */
footer {
  background-color: #0b3c5d;
  color: white;
  padding: 10px 30px;
}

/* lunchpagina: de kaartjes staan naast elkaar */
.kaartjes {
  display: flex;
  gap: 15px;                         /* ruimte tussen de kaartjes */
}

.kaartje {
  flex: 1;                           /* alle kaartjes even breed */
  background-color: white;
  border-top: 5px solid #f28c28;
  padding: 10px;
}

/* foto in een kaartje: even breed als het kaartje */
.kaartje img {
  width: 100%;
}

/* sportpagina: de tabel */
table {
  border-collapse: collapse;         /* lijntjes vallen samen */
  width: 100%;
  background-color: white;
}

th, td {
  border: 1px solid #0b3c5d;
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #0b3c5d;
  color: white;
}

tfoot {
  background-color: #fde6cc;
}

/* ICT-pagina: elk bedrijf heeft een oranje streep links */
.bedrijf {
  background-color: white;
  border-left: 8px solid #f28c28;
  padding: 5px 15px;
  margin-bottom: 15px;
}

/* knoppen */
button {
  background-color: #f28c28;
  border: none;
  padding: 8px 14px;
  cursor: pointer;                   /* handje bij de knop */
}