/* ==========================================================================
   pagina.css · alleen voor de inhoudspagina's
   (over, privacy, voorwaarden, nooit, register, toegankelijkheid,
   hulpverleners, hulp, 404). Werkpakket PAGINA'S.

   De gedeelde onderdelen komen uit basis.css (APP): .kop, .pagina,
   .pagina-inner, .kicker, .lead, .knop, .kaart, .melding, .stappen-lijst,
   .voet, .sr-only, .skip, en de lijsten die gedeeld.js maakt (.bw-…).
   De kleuren en maten komen uit tokens.css (APP, SPEC §8).

   Afspraken in dit bestand:
   - Alle eigen classes beginnen met p- (pagina). Zo botsen ze niet met basis.css.
   - Alleen tokens uit tokens.css, steeds met een terugval, zodat de pagina
     leesbaar blijft als een token ontbreekt.
   - Geen eigen licht/donker-thema: --lijn, --grijs-tekst en currentColor
     volgen tokens.css. Koraal en limoen alleen als vlak, met --inkt erop
     en een inktrand (limoen op crème is maar 1,03:1). --inkt is in donker
     gelijk, dus het vlak blijft goed leesbaar.
   - Harde hoeken (geen border-radius), geen schaduw, geen animatie.
   - Maten in rem/em, zodat de knop A+ (100/115/130%) alles meeschaalt.
   - basis.css zet de marges van p, ul, ol en dl op 0; hier staan de marges
     voor lange teksten.
   - In een .stappen-lijst heeft elke <li> precies één kind (<span>): de li
     is in basis.css een grid met twee kolommen.
   ========================================================================== */

/* ---------- Tekstopbouw ---------- */

.pagina-inner > h1 {
  margin: .2em 0 .4em;
  font-family: var(--font-kop, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 3.6vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.005em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.pagina-inner h2 {
  margin: 0 0 .5em;
  font-family: var(--font-kop, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem);
  line-height: 1.05;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Kleinere koppen in Inter: beter leesbaar dan een smalle letter. */
.pagina-inner h3 {
  margin: 1.6em 0 .4em;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.3;
}

.pagina-inner > p,
.pagina-inner section > p,
.pagina-inner li,
.pagina-inner dd {
  max-width: 65ch;
}

.pagina-inner p {
  margin: 0 0 1em;
}

.pagina-inner section {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn, currentColor);
}

.pagina-inner ul:not([class]),
.pagina-inner ol:not([class]) {
  margin: 0 0 1.25em;
  padding-left: 1.3em;
}

.pagina-inner ul:not([class]) > li,
.pagina-inner ol:not([class]) > li {
  margin-bottom: .45em;
}

/* Links in lopende tekst altijd onderstreept (niet alleen kleur, WCAG 1.4.1). */
.pagina-inner a:not(.knop) {
  text-decoration-line: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

/* Lange woorden, adressen en nummers mogen nooit buiten de pagina lopen (320 px). */
.pagina-inner {
  overflow-wrap: break-word;
}

/* Ankers onder de vaste kop vandaan houden. */
.pagina-inner [id] {
  scroll-margin-top: 6rem;
}

.pagina-inner .stappen-lijst {
  margin-block: 1rem 1.5rem;
}

.pagina-inner .melding,
.pagina-inner .kaart {
  margin-block: 1.25rem;
}

/* Geen dubbele ruimte onderaan een melding of kaart. */
.pagina-inner .melding > :last-child,
.pagina-inner .kaart > :last-child {
  margin-bottom: 0;
}

.pagina-inner .melding ul {
  margin: .4em 0 0;
  padding-left: 1.3em;
}

/* ---------- Kleine onderdelen ---------- */

/* "Laatst bijgewerkt", bronnen en de tijd per deel: rustiger, wel met genoeg contrast. */
.p-bijgewerkt,
.p-bron,
.p-tijd {
  color: var(--grijs-tekst, inherit);
}

.p-bijgewerkt,
.p-bron {
  font-size: .9em;
}

/* Een rij knoppen. */
.p-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.5rem 0;
}

/* "Op deze pagina": inhoudsopgave met grote tikvlakken. */
.p-inhoud {
  margin: 1.75rem 0 0;
  padding: 1rem 0 .5rem;
  border-block: 2px solid var(--lijn, currentColor);
}

.pagina-inner .p-inhoud-kop {
  margin: 0 0 .25rem;
  font-weight: 700;
}

.p-inhoud ol {
  margin: 0;
  padding-left: 1.6em;
}

.p-inhoud li {
  margin: 0;
}

.p-inhoud a {
  display: inline-flex;
  align-items: center;
  min-height: var(--doel, 2.75rem); /* 44 px */
}

/* Tijd per deel bij de uitleg voor hulpverleners. */
.p-tijd {
  margin-left: .4em;
  font-size: .85em;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Lijsten met een teken ---------- */

/* "Dit doen wij nooit": grote, rustige lijst. */
.p-nooit {
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--lijn, currentColor);
}

.p-nooit > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--lijn, currentColor);
}

.pagina-inner .p-nooit h2 {
  margin: .2rem 0 .35rem;
  font-family: inherit;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.3;
}

.pagina-inner .p-nooit p {
  margin: 0;
}

/* Het teken in een vlak: koraal of limoen, met inkt erop. */
.p-teken {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--inkt, #171b20);
  background: var(--koraal, #ff6b5b);
  color: var(--inkt, #171b20);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
}

.p-teken.p-goed {
  background: var(--limoen, #e7ff00);
}

/* Twee blokken naast elkaar op een breed scherm, onder elkaar op een smal scherm. */
.p-twee {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin-block: 1.25rem;
}

.pagina-inner .p-twee > .kaart {
  margin: 0;
}

.p-twee h3:first-child {
  margin-top: 0;
}

/* Wel en niet: een vinkje of een kruisje voor elke regel.
   De tweede content-regel geeft het teken een lege tekst voor schermlezers. */
.p-wel,
.p-niet,
.p-check {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.p-wel > li,
.p-niet > li,
.p-check > li {
  position: relative;
  margin-bottom: .55em;
  padding-left: 1.9em;
}

.p-wel > li::before,
.p-niet > li::before,
.p-check > li::before {
  position: absolute;
  left: 0;
  top: .1em;
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  border: 1px solid var(--inkt, #171b20);
  color: var(--inkt, #171b20);
  font-size: .85em;
  font-weight: 800;
  line-height: 1;
}

.p-wel > li::before {
  content: "\2713";
  content: "\2713" / "";
  background: var(--limoen, #e7ff00);
}

.p-niet > li::before {
  content: "\2715";
  content: "\2715" / "";
  background: var(--koraal, #ff6b5b);
}

/* Een lege controlebox: "kijk dit na". Volgt de tekstkleur, dus ook zichtbaar in donker. */
.p-check > li::before {
  content: "";
  border: 2px solid currentColor;
  color: inherit;
  background: transparent;
}

/* Begrippen (statussen, rechten): een dikke lijn links. */
.p-begrippen {
  display: grid;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.p-begrippen > div {
  padding-left: 1rem;
  border-left: 4px solid var(--lijn, currentColor);
}

.p-begrippen dt {
  font-weight: 700;
}

.p-begrippen dd {
  margin: .2rem 0 0;
}

/* ---------- Uitklappen en techniek ---------- */

.p-uitklap {
  margin-block: 1.25rem;
  border: 1px solid var(--lijn, currentColor);
}

.p-uitklap > summary {
  display: list-item;
  min-height: var(--doel, 2.75rem); /* 44 px */
  padding: .7rem 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* Even specifiek als de lijstregels hierboven, en daarna: dus deze marge wint. */
.pagina-inner .p-uitklap > :not(summary) {
  margin-inline: 1rem;
}

.pagina-inner .p-uitklap > :last-child {
  margin-bottom: 1rem;
}

.p-code {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--lijn, currentColor);
  font-family: var(--font-mono, ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace);
  font-size: .8em;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.pagina-inner code {
  font-family: var(--font-mono, ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace);
  overflow-wrap: anywhere;
}

.p-code code {
  font-size: inherit;
}

/* ---------- Plekken die js/app/gedeeld.js vult ---------- */

/* Vingerafdruk van de registersleutel: een lange code, mag overal afbreken.
   gedeeld.js zet er een paar <p>'s in; daarom is de houder een <div>. */
.p-vingerafdruk {
  margin-block: 1rem 1.25rem;
  padding: .75rem 1rem;
  border: 2px solid var(--lijn, currentColor);
  overflow-wrap: anywhere;
}

.pagina-inner .p-vingerafdruk > :last-child {
  margin-bottom: 0;
}

.p-vingerafdruk code,
.p-vingerafdruk samp {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* De registerlijst en de hulplijst. De opmaak van wat erin komt (.bw-…)
   staat in basis.css; hier alleen veilige regels voor smalle schermen. */
.p-register-lijst,
.p-hulp-lijst {
  margin-block: 1rem 1.5rem;
  overflow-wrap: anywhere;
}

.p-register-lijst img,
.p-hulp-lijst img {
  max-width: 100%;
  height: auto;
}

/* ---------- Dit doen wij nooit: ons adres (zodra er een domein is) ---------- */

.p-adres {
  display: inline-block;
  margin: .25rem 0 1rem;
  padding: .6rem .9rem;
  border: 2px solid var(--inkt, #171b20);
  background: var(--limoen, #e7ff00);
  color: var(--inkt, #171b20);
  font-size: 1.35em;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---------- 404 ---------- */

.pagina-inner .p-fout {
  margin: 0;
  font-family: var(--font-kop, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: 800;
  font-size: clamp(5rem, 3rem + 18vw, 11rem);
  line-height: .85;
}

/* ---------- Printen (bijvoorbeeld de uitleg voor hulpverleners) ---------- */

@media print {
  .skip,
  .kop-nav,
  .tekstgrootte,
  .modusbanner,
  .voet nav,
  .p-inhoud,
  .p-knoppen {
    display: none !important;
  }

  .pagina-inner {
    max-width: none;
  }

  .pagina-inner h2,
  .pagina-inner h3 {
    break-after: avoid;
  }

  .p-nooit > li,
  .p-begrippen > div,
  .p-twee > .kaart,
  .stappen-lijst > li {
    break-inside: avoid;
  }

  /* Bij een geprint blad zie je waar een link naartoe gaat. */
  .pagina-inner a[href^="https://"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    overflow-wrap: anywhere;
  }
}