/* Het leesmenu: een smalle kolom streepjes langs de linkerrand die laat zien
   waar de lezer is en waar hij heen kan. Het verschijnt pas zodra iemand voorbij
   de kop is gescrold en verdwijnt weer bovenaan.

   Twee dingen staan vast:
   - menu.js bouwt het. Draait dat script niet, dan is er domweg geen menu en
     mist de bezoeker niets: de kop bovenaan blijft gewoon staan.
   - Onder 1180 pixels is er naast de tekstkolom geen ruimte. Daar blijft het
     verborgen, ook als het script wel heeft gedraaid. */

.leesmenu {
  position: fixed;
  left: max(26px, calc((100vw - 1080px) / 2 - 172px));
  top: 50%;
  z-index: 35;
  display: none;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.leesmenu.zichtbaar {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}

.leesmenu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  text-decoration: none;
  color: var(--ink-3, var(--dim, #8c8374));
  transition: color .2s ease;
}

.leesmenu .streep {
  flex: none;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: width .24s cubic-bezier(.22, .61, .36, 1), background-color .2s ease;
}

.leesmenu .tekst {
  font-size: .78rem;
  line-height: 1.2;
  letter-spacing: .005em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .22s ease, transform .22s cubic-bezier(.22, .61, .36, 1);
}

/* Het woord bij het streepje verschijnt zodra de muis bij het menu komt, en
   staat altijd bij het onderdeel waar de lezer nu is. */
.leesmenu:hover .tekst,
.leesmenu:focus-within .tekst,
.leesmenu a[aria-current] .tekst { opacity: 1; transform: none; }

.leesmenu a:hover,
.leesmenu a:focus-visible { color: var(--ink, #e8e1d4); outline: none; }

.leesmenu a[aria-current] { color: var(--accent, #d9a514); }
.leesmenu a[aria-current] .streep { width: 29px; }

/* Onder 1180 pixels is er geen ruimte naast de tekstkolom en blijft het menu weg.
   Tussen 1180 en 1400 is er wel ruimte voor de streepjes, maar niet voor het
   woord ernaast: dat zou over de tekst heen vallen. Daar staat het woord er dus
   alleen voor een voorleesprogramma, niet in beeld. */
@media (min-width: 1180px) {
  .leesmenu { display: flex; }
  .leesmenu .tekst {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip-path: inset(50%);
  }
}

@media (min-width: 1400px) {
  .leesmenu .tekst {
    position: static;
    width: auto; height: auto;
    margin: 0; overflow: visible;
    clip-path: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leesmenu,
  .leesmenu .streep,
  .leesmenu .tekst { transition: none; }
  .leesmenu { transform: translateY(-50%); }
}

/* Heeft een pagina een eigen inhoudsopgave, dan krijgt die geen tweede menu
   ernaast maar wordt daar aangestreept waar de lezer nu leest. menu.js zet het
   kenmerk; staat het script stil, dan ziet de lijst er gewoon uit als altijd. */
.toc li { position: relative; }
.toc a[aria-current] { color: var(--accent, #d9a514); }
.toc a[aria-current]::before {
  content: "";
  position: absolute;
  left: -15px;
  top: .66em;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}