/* DOMCA — onderscheid tussen secties, subsecties en hoofdstukken in de
   zijbalk. Material geeft alle drie standaard dezelfde opmaak, waardoor een
   sectiekop niet te onderscheiden is van een hoofdstuk eronder.

   Let op de selectoren: een sectie is een <li> waarvan het eerste kind een
   verborgen <input type=checkbox> is, met daarna het <label> met de tekst.
   Selecteren op .md-nav__link:first-child raakt daarom niets — de opmaak
   moet op label.md-nav__link staan. De hoofdstukken eronder zitten in een
   geneste <nav>, niet rechtstreeks in een <ul>. */

/* ---- sectie (## in de README): Gebruik, Techniek, Ontwerp, ... ---- */

.md-nav--primary .md-nav__item--section > label.md-nav__link {
  display: block;
  margin: 1.4em 0 0.5em;
  padding: 0.45em 0.6rem;

  border-top: 1px solid var(--md-default-fg-color--lighter);
  border-bottom: 1px solid var(--md-default-fg-color--lighter);
  background-color: var(--md-default-fg-color--lightest);

  color: var(--md-primary-fg-color);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: default;
  opacity: 1;
}

/* De eerste sectie hoeft niet zo ver van de bovenkant af te staan. */
.md-nav--primary > .md-nav__list > .md-nav__item--section:first-of-type
  > label.md-nav__link {
  margin-top: 0.7em;
}

/* Het uitklap-pijltje hoort niet bij een kop die niets uitklapt. */
.md-nav--primary .md-nav__item--section > label.md-nav__link
  > .md-nav__icon {
  display: none;
}

/* ---- hoofdstukken onder een sectie ---- */

/* Verticale geleidelijn, zodat te zien is wat onder welke sectie valt. */
.md-nav--primary .md-nav__item--section > nav.md-nav > ul.md-nav__list {
  margin-left: 0.35rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--md-default-fg-color--lightest);
}

.md-nav--primary .md-nav__item--section a.md-nav__link {
  font-weight: 400;
}

/* ---- subsectie (vette tussenkop in de README) ----
   Room Server, Logisch ontwerp, Kernlibraries, Randapparatuur, ...
   Zwaarder dan een hoofdstuk, maar zonder balk. */

.md-nav--primary
  .md-nav__item--nested:not(.md-nav__item--section)
  > label.md-nav__link {
  margin-top: 0.5em;
  color: var(--md-default-fg-color);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- knoppen om aan te draaien ----

   Balk te zwaar? Haal de regel `background-color:` hierboven weg; dan
   blijven alleen de twee lijnen over.

   Alleen een lijn erboven? Haal dan ook `border-bottom:` weg.

   Geleidelijn niet gewenst? Haal het blok met `border-left:` weg. */