/* =========================================================
   bachbio.css — aanvulling op bach.css

   Voor de biografie: een brede tekstkolom met de noten ernaast,
   die meescrollen. Typografie, kleuren, links en de voet komen
   uit de sitestylesheet; hieronder staat alleen de indeling en
   het voetnootapparaat.

   In de pagina volstaat voortaan:
     <link rel="stylesheet" href="bachbio.css">
   in plaats van het hele <style>-blok.

   De @import moet de eerste regel blijven.
   ========================================================= */

@import url("../bach.css");

/* =========================================================
   Kop van de pagina
   ========================================================= */

/* De titel van de pagina staat boven het raster, niet erin,
   zodat de notenkolom pas begint waar de tekst begint. */
.paginakop {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.paginakop h1 { margin: 0 0 0.4rem; }

.paginakop .bron {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.paginakop .postzegel {
  margin: 0 0 1.5rem;
  max-width: 160px;
}

.paginakop .postzegel img { width: 100%; height: auto; margin: 0; }

.subtitle {
  color: var(--color-muted);
  font-size: var(--fs-small);
  margin-top: 0.25rem;
}

/* =========================================================
   De indeling: tekst links, noten rechts

   minmax(0, ...) voorkomt dat een lange ononderbroken regel in
   de notenkolom het hele raster buiten beeld duwt.
   ========================================================= */

.wrap {
  display: grid;
  /* De notenkolom krijgt een eigen maat in plaats van een vaste
     verhouding: onder de 17rem worden de noten onleesbaar smal. */
  grid-template-columns: minmax(0, 1fr) clamp(17rem, 26%, 23rem);
  gap: 2.5rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
  align-items: start;
}

.wrap > * { min-width: 0; }

@media (max-width: 900px) {
  .wrap { display: block; }
}

article img { max-width: 100%; height: auto; }
article table { border-collapse: collapse; width: 100%; }
article td, article th { padding: 0.35rem 0.6rem 0.35rem 0; vertical-align: top; }
article hr { border: none; border-top: 1px solid var(--color-rule); margin: 2.5rem 0; }

/* =========================================================
   Inhoudsopgave
   ========================================================= */

details.toc {
  border: 1px solid var(--color-rule);
  padding: 0.8rem 1.1rem;
  margin: 0 0 2.5rem;
  font-size: 1rem;          /* even groot als de lopende tekst */
  line-height: 1.25;        /* de 1.6 van de body is voor een lijst veel te ruim */
}

details.toc summary {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

/* Alle niveaus, ook de geneste: geen eigen marges. De geneste
   <ul> was de oorzaak van de gaten tussen de regels. */
details.toc ul,
details.toc ul ul,
details.toc ul ul ul {
  list-style: none;
  margin: 0;
  padding-left: 1.1rem;
}

details.toc > ul { padding-left: 0; }

details.toc li { margin: 0; padding: 0.06rem 0; }

details.toc a { text-decoration: none; }
details.toc a:hover { text-decoration: underline; }

/* Een enkele ingang draagt nog een kleur uit de oude stylesheet;
   in de inhoudsopgave hoort alles dezelfde kleur te hebben. */
details.toc [style*="color"] { color: inherit; }

/* =========================================================
   Meescrollende voetnoten
   ========================================================= */

.aside-notes {
  position: sticky;
  top: 1rem;
  align-self: start;
}

.aside-notes .box {
  border-left: 1px solid var(--color-rule);
  padding-left: 1.1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  font-size: 0.95rem;
  line-height: 1.45;
  scrollbar-width: thin;
}

.aside-notes h2 {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: none;
  margin: 0 0 0.7rem;
}

ol.footnotes { list-style: none; padding: 0; margin: 0; }

/* Het nummer stond in een eigen kolom van 2rem plus tussenruimte;
   in een smalle kolom is dat een vijfde van de regel. Het staat nu
   in de tekst zelf, met een hangende inspringing. */
ol.footnotes li {
  display: block;
  padding: 0.45rem 0 0.45rem 1.5rem;
  text-indent: -1.5rem;
  border-bottom: 1px solid #ece8e1;
  hyphens: auto;
}

ol.footnotes li:last-child { border-bottom: none; }

ol.footnotes .num {
  display: inline-block;
  width: 1.1rem;
  margin-right: 0.4rem;
  text-align: right;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* de noot en de verwijzing waar de lezer nu bij is */
ol.footnotes li.active {
  background: var(--color-accent-light);
  border-left: 2px solid var(--color-accent);
  padding-left: 1.3rem;
}

sup.fn-ref {
  cursor: pointer;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: super;
  color: var(--color-accent);
}

sup.fn-ref.active {
  background: var(--color-accent-light);
  border-radius: 2px;
  padding: 0 2px;
}

@media (max-width: 900px) {
  .aside-notes { position: static; }
  .aside-notes .box {
    max-height: none;
    border-left: none;
    border-top: 1px solid var(--color-rule);
    padding-left: 0;
    padding-top: 1.5rem;
    margin-top: 2.5rem;
  }
}

/* =========================================================
   Minder beweging voor wie dat instelt
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}