/* ============================================================
   Psalmenproject — minimalist layout

   De opmaak hangt aan de kale elementen header, nav, main en
   footer, net als op dick.wursten.be en bach.wursten.be. De
   namen site-header, topnav, content en site-footer uit de
   FrontPage-conversie zijn eruit (klassen.py).

   EB Garamond (koppen) en Inter (tekst) worden zelf meegeleverd
   uit fonts/ - geen verwijzing meer naar Google. Achter elk
   lettertype staat een terugval op wat de computer zelf heeft,
   voor het geval een bestand ooit niet meekomt.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-700italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}


/* ============================================================
   Grondslag
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
/*  background-image: url('paper_texture.jpg');
  background-repeat: repeat; */
  color: #222;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: 'EB Garamond', Georgia, "Times New Roman", serif;
  font-weight: 600;
  color: #111;
  line-height: 1.25;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Bladspiegel — het perkamenten 'papieren' blok
   ============================================================ */

main {
  max-width: 900px;
  margin: 2em auto;
  padding: 2em; /* Voldoende ruimte zodat tekst niet op de papierrand kleeft */

  /* Papier-effect: zachte warme rand en subtiele schaduw */
  border: 1px solid #d4ceb8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

/* ============================================================
   Kop en navigatie
   ============================================================ */

header {
  text-align: center;
  padding-bottom: 1em;
  border-bottom: 1px solid #d0c8b8;
  margin-bottom: 1.5em;
}

header nav {
  margin-top: 0.8em;
}

header nav a {
  color: #444;
  text-decoration: none;
  margin: 0 0.8em;
  font-weight: 500;
  padding-bottom: 2px;
}

header nav a:hover,
header nav a:focus,
header nav a.active {
  color: #000;
  border-bottom: 2px solid #000;
  outline: none;
}

/* ============================================================
   Voet
   ============================================================ */

footer {
  text-align: center;
  font-size: 0.9em;
  color: #666;
  border-top: 1px solid #d0c8b8;
  padding-top: 1.5em;
  margin-top: 3em;
}

/* ============================================================
   Beeld en bijschrift
   ============================================================ */

/* Zonder deze regel houdt figure de standaardinspringing van de
   browser (ongeveer 40px) en staat het beeld niet in lijn met de
   tekst erboven. */
figure {
  margin: 2em 0;
}

figcaption {
  font-size: 0.9em;
  color: #666;
  line-height: 1.4;
  padding-top: 0.4em;
}

/* ============================================================
   Geluid — een opname met een bijschrift
   ============================================================ */

/* De speler is van de browser zelf; hij krijgt de volle kolom-
   breedte, zodat de tijdbalk bruikbaar lang is. */
figure.audio {
  margin: 1.75em 0;
}

figure.audio audio {
  display: block;
  width: 100%;
}

figure.audio figcaption {
  text-align: left;
}

/* meerdere opnamen onder elkaar: minder ruimte ertussen */
figure.audio + figure.audio { margin-top: 1em; }

/* Een reeks opnamen: bijschrift boven de speler, zodat het niet
   met de volgende opname meeleest. Gebruik in de pagina:
   <figure class="audio caption-first"> ... */
figure.audio.caption-first {
  display: flex;
  flex-direction: column-reverse;
}

figure.audio.caption-first figcaption {
  padding: 0 0 0.4em;
}

/* ============================================================
   Twee losse kolommen naast elkaar

   LET OP: hier is GEEN koppeling per regel. De twee kolommen
   lopen elk hun eigen gang. Goed voor een inleiding naast een
   toelichting; ongeschikt voor een berijming naast een vertaling,
   want dan schuiven de regels ten opzichte van elkaar op zodra
   de ene kolom een regel meer heeft dan de andere.

   Moeten links en rechts op ooghoogte blijven, neem dan
   table.tweekolom hieronder.
   ============================================================ */

.parallel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  margin: 2em 0;
  align-items: start;
}

.parallel .kolom p {
  margin: 0 0 0.15em;
  line-height: 1.35;
}

.parallel .kolom h4 {
  margin: 0 0 0.8em;
  font-size: 1em;
  border-bottom: 1px solid #d0c8b8;
  padding-bottom: 0.3em;
}

.parallel .strofe { height: 0.7em; }

@media (max-width: 700px) {
  .parallel { grid-template-columns: 1fr; gap: 2.5em; }
}

/* ============================================================
   Paralleltekst — origineel naast vertaling

   Een tabel, want een tabelrij houdt links en rechts op één
   lijn, wat er ook in staat. Zonder randen, gelijke kolommen.

       <table class="tweekolom">
         <tr>
           <th>Marot 1543</th>
           <th>Datheen 1566</th>
         </tr>
         <tr>
           <td>...</td>
           <td>...</td>
         </tr>
       </table>

   De rij met <th> mag weg als de kolommen geen opschrift nodig
   hebben. Dezelfde klassenaam als op de andere sites, zodat de
   HTML die u schrijft overal dezelfde is.
   ============================================================ */

table.tweekolom {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  table-layout: fixed;     /* verdeelt de breedte gelijk over de kolommen */
}

table.tweekolom th {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 0.95em;
  text-align: left;
  border-bottom: 1px solid #d0c8b8;
  padding: 0.4em 0.8em 0.4em 0;
}

table.tweekolom td {
  padding: 0.5em 0.8em 0.6em 0;
  vertical-align: top;
  line-height: 1.35;
  break-inside: avoid;
}

/* Een lege regel tussen twee strofen binnen een cel, net als
   .parallel .strofe hierboven. */
table.tweekolom .strofe { height: 0.7em; }

/* Op een telefoon onder elkaar. De vertaling krijgt dan de
   gedempte kleur van de bijschriften: zonder de kolommen naast
   elkaar is anders niet te zien wat wat is. */
@media (max-width: 700px) {
  table.tweekolom th { display: none; }

  table.tweekolom tr {
    display: block;
    border-bottom: 1px solid #d0c8b8;
    margin-bottom: 1.2em;
    padding-bottom: 0.6em;
  }

  table.tweekolom td {
    display: block;
    padding: 0.1em 0;
  }

  table.tweekolom td + td { color: #666; }
}

/* ============================================================
   Paginaoverzicht (inhoud.html) — letterbalk en lijst
   ============================================================ */

.letterbalk {
  margin: 1.5em 0 2em;
  padding-bottom: 0.8em;
  border-bottom: 1px solid #d0c8b8;
}

.letterbalk a {
  display: inline-block;
  min-width: 1.6em;
  margin-right: 0.2em;
  text-align: center;
  font-weight: 500;
  color: #444;
  text-decoration: none;
}

.letterbalk a:hover,
.letterbalk a:focus {
  color: #000;
  border-bottom: 2px solid #000;
}

.inhoudlijst {
  list-style: none;
  margin: 0 0 2.5em;
  padding: 0;
}

.inhoudlijst li {
  margin-bottom: 0.7em;
}

.inhoudlijst a {
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #d0c8b8;
}

.inhoudlijst a:hover,
.inhoudlijst a:focus {
  border-bottom-color: #000;
}

/* de omschrijving onder een titel, als u met --omschrijving draait */
.inhoudlijst .zin {
  font-size: 0.9em;
  color: #666;
}

/* de letterkoppen A, B, C ... */
main h2[id^="letter-"] {
  margin: 1.8em 0 0.6em;
  font-size: 1.4em;
  color: #444;
}

/* ============================================================
   Partituurtabel (goudimel.html en verwante pagina's)
   ============================================================ */

/* De wikkel laat de tabel op een smal scherm horizontaal schuiven.
   Vijf kolommen met miniaturen van 141px zijn samen ruim 750px; die
   in een telefoonscherm persen maakt de partituren onherkenbaar.
   Schuiven is dan eerlijker dan verkleinen. */
.tabelwikkel {
  overflow-x: auto;
  margin: 2em 0;
  -webkit-overflow-scrolling: touch;
}

table.partituren {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
}

table.partituren th,
table.partituren td {
  border: 1px solid #d0c8b8;
  padding: 0.5em;
  text-align: center;
  vertical-align: middle;
}

/* De kolomkoppen */
table.partituren thead th {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.2;
  background: #faf8f3;
  vertical-align: bottom;
}

/* Het psalmnummer in de eerste kolom */
table.partituren tbody th {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 1.15em;
  width: 4.5em;
  white-space: nowrap;
}

/* De laatste kolom draagt lopende tekst, geen beeld */
table.partituren td:last-child {
  width: 150px;
  text-align: left;
  font-size: 0.9em;
  line-height: 1.35;
}

/* De miniaturen. display:block haalt de witruimte onder de
   afbeelding weg die anders van de regelhoogte komt. */
table.partituren img {
  display: block;
  margin: 0 auto;
  max-width: 141px;
  height: auto;
  border: 1px solid #e5e0d5;
}

table.partituren a:hover img,
table.partituren a:focus-visible img {
  border-color: #888;
}

/* ============================================================
   Afdrukken
   ============================================================ */

/* Bij het afdrukken hoeft er niets te schuiven */
@media print {
  .tabelwikkel { overflow: visible; }
  table.partituren { min-width: 0; }
}