/* Gedeeld door de vier handleidingen: fonts (lokaal geleverd), basis en de tabbalk. */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
}
@font-face { font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 400; src: url("fonts/inter-tight-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 500; src: url("fonts/inter-tight-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 600; src: url("fonts/inter-tight-latin-600-normal.woff2") format("woff2"); }

:root { color-scheme: light; --fk-parchment: #f4f1e8; --fk-panel: #faf8f2; --fk-ink: #1a1c1a; --fk-muted: #5f5e55; --fk-line: #c8bfa6; --fk-slate: #3f4a4f; }
/* Een ankerlink landt onder de vaste balk, niet erachter. */
html { box-sizing: border-box; scroll-padding-top: 72px; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; padding: 0 16px 64px; background: var(--fk-parchment); color: var(--fk-ink); font-family: "Inter Tight", system-ui, sans-serif; }
img { max-width: 100%; }

/* De kop van faunakompas.nl, zodat je vanuit een handleiding terug naar de site kunt. Hij scrolt weg; de tabbalk eronder blijft staan.
   Merk en menu volgen /styles.css (kleuren en maten), maar met de lokale fonts van de handleidingen. */
.sitekop {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px;
  margin: 0 -16px; padding: 12px 16px; min-height: 72px;
  background: #f8f4ea; border-bottom: 1px solid #e6dcc3;
}
.sitekop-merk { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none;
  font-family: "Fraunces", Georgia, serif; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.sitekop-merk img { width: 44px; height: 44px; object-fit: contain; }
.sitekop .wm-fauna { color: #5c3704; }
.sitekop .wm-kompas { color: #5f8a07; }
.sitekop-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.sitekop-nav a { font: 500 15.5px/1.5 "Inter Tight", system-ui, sans-serif; color: #5c4a30; text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; }
.sitekop-nav a:hover { color: #2b1d0c; border-bottom-color: #5f8a07; }
.sitekop-nav a.current { color: #395a04; font-weight: 600; border-bottom-color: #5f8a07; }
.sitekop a:focus-visible { outline: 2px solid var(--fk-slate); outline-offset: 2px; }
/* Op telefoon staat het menu op een eigen regel onder het merk, zoals op de startpagina. */
@media (max-width: 720px) { .sitekop-nav { width: 100%; gap: 2px 18px; } .sitekop-nav a { font-size: 14px; } }

/* De balk loopt over de volle breedte, ook al geeft elke pagina de body zijn eigen zijmarge. */
.balk {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin: 0 -16px 32px; padding: 4px 16px 0;
  border-bottom: 1px solid var(--fk-line); background: var(--fk-panel);
}
.balk .tabs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; }
.balk .tabs a { font: 500 14px/1 "Inter Tight", system-ui, sans-serif; color: var(--fk-muted); text-decoration: none;
  border-bottom: 2px solid transparent; padding: 10px 12px 12px; white-space: nowrap; }
.balk .tabs a:hover { color: var(--fk-ink); }
.balk .tabs a[aria-current="page"] { color: var(--fk-ink); border-bottom-color: var(--fk-slate); }
.balk a:focus-visible { outline: 2px solid var(--fk-slate); outline-offset: -2px; }
/* Past de balk niet op één regel, dan scrolt hij mee: twee regels vast kosten een telefoon te veel scherm. */
@media (max-width: 860px) { .balk { position: static; } html { scroll-padding-top: 0; } }
@media print { .sitekop, .balk { display: none; } }

.overzicht { max-width: 820px; margin: 0 auto; }
.overzicht h1 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(30px, 5vw, 42px); margin: 0 0 18px; }
.overzicht ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fk-line); }
.overzicht li { border-bottom: 1px solid var(--fk-line); }
.overzicht a { display: block; padding: 14px 2px; color: var(--fk-ink); text-decoration: none; font-family: "Fraunces", Georgia, serif; font-size: 19px; }
.overzicht a:hover, .overzicht a:focus-visible { text-decoration: underline; }

/* V17: een kader is zo breed als de leesbreedte van zijn tekst (p, li: 68ch), plus padding (2 x 14px) en rand (3px). */
.doc blockquote { max-width: calc(68ch + 31px); }