/*
 * Thema "vernieuwd": het klassieke Greenery-thema met kleine moderniseringen.
 * Wordt na klassiek.css geladen en overschrijft alleen wat verandert.
 */

/* Zijbalk-menu: geen opsommingstekens en onderstrepingen meer, maar
   blokjes die oplichten bij hover. De huidige pagina blijft gemarkeerd. */
#sidebar ul {
  list-style: none;
  padding-left: 0;
  width: 166px;
  margin: 0.6em 0 1em 35px;
}
#sidebar li + li {
  margin-top: 1px;
}
#sidebar li a {
  display: block;
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s;
}
#sidebar li a:hover,
#sidebar li a:focus-visible {
  background: #686868;
  color: #fff;
}
#sidebar li a[aria-current="page"] {
  background: #86e160;
  color: #222;
}

#sidebar section h2 {
  width: 166px;
}
#footer {
  width: 146px;
  margin-left: 35px;
}

/* Leesbaarheid: grotere letter dan de oude 0.8em (12,8px). De kop met het
   menu houdt de oude maat, zodat menu en tabje er hetzelfde uitzien. */
body {
  font-size: 15px;
  line-height: 1.65;
}
#header {
  font-size: 12.8px;
}
#sidebar {
  font-size: 14px;
}

/* Links in de tekst en de voet: onderstreping alleen bij hover. */
#content a,
#footer a,
.contactblok a {
  text-decoration: none;
}
#content a:hover,
#content a:focus-visible,
#footer a:hover,
.contactblok a:hover {
  text-decoration: underline;
}

/* Contactgegevens in de zijbalk. */
.contactblok p {
  width: 154px;
  margin: 0.6em 0 0 35px;
  padding: 3px 6px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* Foto's: afgeronde hoeken en een dun kader, passend bij de kopbalken. */
.tekst img {
  border: 1px solid #5f5f5f;
  border-radius: 6px;
}

/* Naam in de kop: normale letterafstand. */
#title a {
  letter-spacing: 0;
}

/*
 * Bredere pagina op grote schermen: 1000px in plaats van 767px.
 * De kolom en de lichtgroene kopband komen uit bg_body.jpg en bg_header.jpg
 * (768px breed, x=417..1185). Elke helft van het scherm toont dezelfde
 * afbeelding, 116px naar buiten geschoven, zodat kolom en band breder worden
 * en schaduw, patroon en verloop aan de randen origineel blijven.
 */
@media (min-width: 1040px) {
  body,
  #header {
    position: relative;
  }
  body {
    min-height: 100vh;
    background: #585858;
  }
  body::before,
  body::after,
  #header::before,
  #header::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: -1;
  }
  body::before,
  #header::before {
    left: 0;
    background-position-x: calc(100% + 683px);
  }
  body::after,
  #header::after {
    right: 0;
    background-position-x: -685px;
  }
  body::before,
  body::after {
    background-image: url(/klassiek/bg_body.jpg);
    background-repeat: repeat-y;
  }
  #header {
    background: none;
    z-index: 0;
  }
  #header::before,
  #header::after {
    background-image: url(/klassiek/bg_header.jpg);
    background-color: #44a41d;
    background-repeat: repeat-y;
  }

  #menu,
  #wrapper {
    width: 1000px;
  }
  #content {
    width: 608px;
  }
  /* Bredere zijbalk, zodat het e-mailadres op één regel past. */
  #sidebar {
    width: 254px;
  }
  #sidebar ul,
  #sidebar section h2 {
    width: 216px;
  }
  .contactblok p {
    width: 204px;
  }
  #footer {
    width: 196px;
  }
  /* Bredere kolom: drie foto's naast elkaar, zodat ze niet worden opgeblazen. */
  .tekst p:has(> img + img) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Telefoons: zijbalk over de volle breedte. */
@media (max-width: 780px) {
  #sidebar ul {
    width: auto;
    margin-left: 0;
  }
  #sidebar section h2,
  #footer {
    width: auto;
    margin-left: 0;
  }
  .contactblok p {
    width: auto;
    margin-left: 0;
  }
}