/* De drie leeractiviteiten vormen visueel één rustige menugroep. */
.nav .nav-study,
.nav .nav-reader,
.nav .nav-learning,
.nav .nav-practice {
  position: relative;
  margin: 2px 0;
  padding: 11px;
  border: 0;
  border-left: 3px solid var(--level-accent);
  background: transparent;
  color: #30414d;
  box-shadow: none;
  font-size: inherit;
  font-weight: 800;
}

.nav .nav-study::before,
.nav .nav-reader::before,
.nav .nav-learning::before,
.nav .nav-practice::before {
  content: none;
}

.nav .nav-study:hover,
.nav .nav-reader:hover,
.nav .nav-learning:hover,
.nav .nav-practice:hover {
  background: var(--level-special-hover);
  color: var(--level-dark);
  transform: none;
}

.nav button.nav-study.active,
.nav button.nav-reader.active,
.nav button.nav-learning.active,
.nav button.nav-practice.active {
  padding-left: 13px;
  border-left: 3px solid var(--level-dark);
  background: #fff;
  color: var(--navy);
}

@media (max-width: 560px) {
  .nav .nav-study,
  .nav .nav-reader,
  .nav .nav-learning,
  .nav .nav-practice {
    grid-column: 1 / -1;
    min-height: 46px;
    margin: 3px 0;
    padding: 12px 14px;
    border-left-width: 4px;
  }

  .nav button.nav-study.active,
  .nav button.nav-reader.active,
  .nav button.nav-learning.active,
  .nav button.nav-practice.active {
    padding-left: 14px;
    border-left-width: 4px;
  }
}