/* wiki.css — de handleiding: zijbalk met zoeken, brede leeskolom, schermafdrukken.
 *
 * Bouwt op design-tokens.css en base.css; hier staat alleen wat de handleiding zelf nodig
 * heeft. Alle kleuren komen uit de tokens, zodat de handleiding meebeweegt met de rest van
 * de site en er nergens een losse hexwaarde in de code staat.
 *
 * De indeling is twee kolommen vanaf 1000 px: links de hoofdstukken en het zoekveld, rechts
 * de tekst. Daaronder klapt de zijbalk boven de tekst, want op een telefoon lees je met één
 * kolom en wil je het zoekveld meteen zien. */

/* --- Sitebalk en voet ---------------------------------------------------------------
 * Dezelfde balk als op de gidsen. Op die pagina's staat hij inline in een <style>-blok;
 * hier hoort hij in het stijlblad, want de handleiding heeft tientallen pagina's en die
 * gaan niet allemaal dezelfde regels dragen. Zonder deze regels valt de navigatie terug op
 * zwarte tekst op wit, wat er bij de eerste proefronde ook uitzag als een kapotte pagina. */

body { background: var(--surface-page); color: var(--text-strong); margin: 0; }

header.site { background: var(--navy-700); position: sticky; top: 0; z-index: 20; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.site .links { display: flex; align-items: center; gap: 20px; }
.site .links a { color: rgba(255,255,255,.82); font-size: 14px; font-weight: 500; text-decoration: none; }
.site .links a:hover { color: #fff; }
.nav-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  border-radius: var(--radius-full); background: var(--amber-600);
  color: #fff !important; font-weight: 600; font-size: 14px;
}

footer.site { background: var(--navy-900); color: rgba(255,255,255,.65); margin-top: 30px; }
footer.site .wrap { padding: 28px 20px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer.site a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 14px; }
footer.site a:hover { color: #fff; }

@media (max-width: 760px) {
  .site .links a:not(.nav-cta) { display: none; }
  .hs-kop h1 { font-size: 27px; }
}

.wrap--breed { max-width: 1240px; margin: 0 auto; padding-inline: 20px; }

/* Smal scherm: één kolom, maar wel in deze volgorde: zoekveld, artikel, inhoudsopgave.
   De zijkolom lost daarvoor op met display:contents, zodat zijn twee kinderen zelf in de
   flexvolgorde meedoen. Stond de lijst met 27 hoofdstukken bovenaan, dan scrolde je op een
   telefoon eerst een heel scherm langs de inhoudsopgave voordat de tekst begon. */
.wiki { display: flex; flex-direction: column; padding-bottom: 48px; }
.zijkolom { display: contents; }
.zoekdoos { order: 1; }
.wiki-inhoud { order: 2; }
.zijbalk { order: 3; padding-top: 8px; border-top: 1px solid var(--border-default); margin-top: 32px; }

@media (min-width: 1000px) {
  .wiki {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  /* Breed scherm: de zijkolom is weer een echte kolom, en blijft meelopen bij het scrollen. */
  .zijkolom {
    display: block;
    position: sticky;
    top: 74px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 6px 0 0;
  }
  .zijbalk { border-top: 0; margin-top: 0; padding-top: 0; }
}

.zoekdoos { position: relative; margin: 0 0 20px; }

.zoekdoos input {
  width: 100%;
  height: 44px;                 /* tikvlak van minstens 44 px */
  padding: 0 14px 0 38px;
  font-size: 16px;              /* 16 px, anders zoomt iOS bij het focussen in */
  font-family: var(--font-body);
  color: var(--text-strong);
  background: var(--surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A95AC' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E") no-repeat 12px center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.zoekdoos input:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  border-color: var(--border-focus);
}

.uitslag {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  top: calc(100% + 6px);
  max-height: 62vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1000px) {
  .uitslag { width: 420px; }
}

.uitslag a {
  display: block;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-strong);
}

.uitslag a:hover, .uitslag a:focus-visible { background: var(--surface-sunken); }
.uitslag .u-h { display: block; font-size: 11.5px; color: var(--text-muted); letter-spacing: .02em; }
.uitslag .u-t { display: block; font-weight: 600; font-size: 14.5px; margin: 1px 0 2px; }
.uitslag .u-s { display: block; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.uitslag mark { background: var(--amber-100); color: inherit; border-radius: 2px; padding: 0 1px; }
.uitslag .u-leeg { padding: 12px; font-size: 13.5px; color: var(--text-muted); }

.zb-kop {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.zb-lijst { list-style: none; margin: 0; padding: 0; }

.zb-lijst a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-body);
  text-decoration: none;
}

.zb-lijst a:hover { background: var(--surface-sunken); color: var(--text-strong); }

.zb-lijst a.aan {
  background: var(--teal-50);
  color: var(--teal-700);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--teal-600);
}

.zb-lijst .nr {
  flex: none;
  min-width: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.zb-lijst a.aan .nr { color: var(--teal-600); }

/* --- Leeskolom ---------------------------------------------------------------------- */

.wiki-inhoud { padding-top: 18px; min-width: 0; }

.crumb { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
.crumb a { color: var(--text-muted); text-decoration: none; }
.crumb a:hover { color: var(--teal-700); text-decoration: underline; }

.hs-kop { margin: 0 0 22px; }
.hs-kop .eyebrow {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber-700);
}
.hs-kop h1 { font-size: 34px; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 10px; }
.hs-kop .lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text-muted); max-width: 46em; }

.opdeze {
  margin: 0 0 26px;
  padding: 14px 16px;
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
}
.opdeze p {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.opdeze ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.opdeze a { font-size: 14px; color: var(--teal-700); text-decoration: none; }
.opdeze a:hover { text-decoration: underline; }

.sectie { scroll-margin-top: 78px; }
.sectie h2 {
  font-size: 23px;
  line-height: 1.25;
  margin: 38px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-default);
}
.sectie:first-of-type h2 { border-top: 0; padding-top: 0; margin-top: 8px; }

.wiki-inhoud p { font-size: 16.5px; line-height: 1.62; max-width: 42em; margin: 0 0 14px; }
.wiki-inhoud ul, .wiki-inhoud ol { max-width: 42em; font-size: 16.5px; line-height: 1.6; }
.wiki-inhoud li { margin: 0 0 6px; }

.wiki-inhoud code {
  font-family: var(--font-mono);
  font-size: .9em;
  padding: 1px 5px;
  background: var(--surface-sunken);
  border-radius: 4px;
}

/* Een knopnaam uit de app: herkenbaar als iets dat letterlijk op het scherm staat. */
.wiki-inhoud b.ui {
  font-weight: 600;
  color: var(--text-strong);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}

ol.stappen { counter-reset: stap; list-style: none; padding: 0; }
ol.stappen > li {
  counter-increment: stap;
  position: relative;
  padding-left: 38px;
  margin: 0 0 12px;
  min-height: 26px;
}
ol.stappen > li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font: 700 13px/26px var(--font-body);
  text-align: center;
}

/* --- Kaders ------------------------------------------------------------------------- */

.kader {
  max-width: 42em;
  margin: 0 0 16px;
  padding: 13px 16px;
  border-radius: var(--radius-lg);
  font-size: 15.5px;
  line-height: 1.55;
}
.kader b { display: block; margin-bottom: 2px; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.kader--tip { background: var(--teal-50); color: var(--text-body); }
.kader--tip b { color: var(--teal-700); }
.kader--let { background: var(--amber-50); color: var(--text-body); }
.kader--let b { color: var(--amber-700); }

/* --- Velden: elke knop met zijn echte naam ------------------------------------------ */

dl.velden { margin: 0 0 20px; max-width: 46em; }

.veld {
  display: grid;
  gap: 2px 18px;
  padding: 11px 0;
  border-top: 1px solid var(--border-default);
}
.veld:last-child { border-bottom: 1px solid var(--border-default); }

@media (min-width: 720px) {
  .veld { grid-template-columns: 210px minmax(0, 1fr); }
}

.veld dt {
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text-strong);
  margin: 0;
}
.veld dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-body); }

/* --- Schermafdrukken ---------------------------------------------------------------- */

figure.scherm { margin: 6px 0 22px; }
figure.scherm img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  cursor: zoom-in;
}
figure.scherm figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 42em;
}

/* --- Tabellen ----------------------------------------------------------------------- */

.tabelwrap { overflow-x: auto; margin: 0 0 22px; }
.tabelwrap table { border-collapse: collapse; width: 100%; min-width: 440px; font-size: 15px; }
.tabelwrap th, .tabelwrap td {
  text-align: start;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-default);
  vertical-align: top;
  line-height: 1.5;
}
.tabelwrap th { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.tabelwrap td:first-child { font-weight: 600; color: var(--text-strong); }

/* --- Vorige/volgende ---------------------------------------------------------------- */

.pager { display: grid; gap: 12px; margin: 42px 0 0; }
@media (min-width: 640px) { .pager { grid-template-columns: 1fr 1fr; } }

.pg {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-strong);
  font-weight: 600;
  line-height: 1.35;
}
.pg:hover { border-color: var(--teal-600); }
.pg span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.pg--n { text-align: end; }

/* --- Hoofdstukkaarten op de startpagina --------------------------------------------- */

.hk-raster { display: grid; gap: 12px; }
@media (min-width: 700px) { .hk-raster { grid-template-columns: 1fr 1fr; } }

.hk {
  display: flex;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  text-decoration: none;
  color: var(--text-strong);
}
.hk:hover { border-color: var(--teal-600); }
.hk-nr {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font: 700 13px/28px var(--font-body);
  text-align: center;
}
.hk-tx { display: block; min-width: 0; }
.hk-tx b { display: block; font-size: 16px; margin-bottom: 3px; }
.hk-tx span { display: block; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

/* Alleen voor schermlezers. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}