/* =========================================================================
   Topstukken — juridische en hulppagina's
   (verantwoord-spelen, privacy, voorwaarden, spelreglement, cookies, disclaimer,
    toegankelijkheid, beeldverantwoording, veelgestelde-vragen, contact)
   ========================================================================= */

/* ---------- documentraster: brede tabellen mogen de kolom niet oprekken ---------- */
.doc { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .doc { grid-template-columns: 240px minmax(0, 1fr); } }
.doc > * { min-width: 0; }

/* ---------- inhoudsopgave ---------- */
.toc__n { color: var(--subtle); font-variant-numeric: tabular-nums; margin-right: .15em; }
.toc a.is-current .toc__n { color: var(--teal-ink); }
.toc a.is-empty { opacity: .45; }
@media (min-width: 640px) and (max-width: 999px) {
  .toc ol { columns: 2; column-gap: var(--s-6); }
  .toc li { break-inside: avoid; }
}

/* ---------- documenttekst ---------- */
.prose--legal { hyphens: auto; overflow-wrap: break-word; max-width: none; }
.prose--legal > :not(.table-wrap):not(section) { max-width: var(--measure); }
.prose--legal .table-wrap { max-width: 860px; }
.prose--legal .table td, .prose--legal .table th { hyphens: manual; }
.prose--legal > h2:first-child, .prose--legal > :first-child { margin-top: 0; }
.prose--legal h2 { display: flex; gap: 0; align-items: baseline; }
.prose--legal h2 .num { flex: none; }
.prose--legal h3 { font-size: 1.2rem; }
.prose--legal ol { padding-left: 1.5em; }
.prose--legal ol > li::marker { font-weight: 600; font-variant-numeric: tabular-nums; }
.prose--legal ol ul { margin-top: .5em; }
.prose--legal strong { font-weight: 650; color: var(--ink-strong); }
.prose--legal code { font-size: .88em; background: var(--bg-deep); padding: .1em .35em; border-radius: var(--r-xs); white-space: nowrap; }
.prose--legal .doc-meta { margin-top: 2.5em; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.prose .table-wrap { max-width: 100%; }
.prose .table-wrap table { background: transparent; }
.prose .notice + h2 { margin-top: 1.6em; }

.legal-dl { margin-block: 1.2em; padding: var(--s-5); background: var(--surface); box-shadow: var(--shadow-1); font-size: var(--fs-small); }
.legal-terms { display: grid; gap: .2em var(--s-5); }
.legal-terms dt { font-weight: 650; color: var(--ink-strong); margin-top: .6em; }
.legal-terms dd { margin: 0; color: var(--muted); }
@media (min-width: 640px) {
  .legal-terms { grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); }
  .legal-terms dt { margin-top: 0; }
}
.legal-address { padding: var(--s-4) var(--s-5); background: var(--surface); box-shadow: var(--shadow-1); font-size: var(--fs-small); line-height: 1.6; }
.legal-table td:first-child { font-weight: 550; color: var(--ink-strong); }
@media (min-width: 700px) { .legal-table td:first-child { min-width: 12rem; } }

/* samenvatting bovenaan */
.summary { background: var(--surface); box-shadow: var(--shadow-1); padding: var(--s-5); }
.summary__title { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; color: var(--ink-strong); }
.summary ul { margin-top: var(--s-3); }

/* ---------- slogan ---------- */
.slogan-panel { background: var(--dark); color: var(--on-dark); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) clamp(1.25rem, 1rem + 2vw, 2.25rem); }
.slogan-panel__text { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); line-height: 1.2; color: #fff; hyphens: manual; text-wrap: balance; }
.slogan-panel__sub { margin-top: var(--s-3); color: var(--on-dark-muted); font-size: var(--fs-small); }
.slogan-panel a { color: #fff; text-decoration-color: var(--teal); }
.prose .slogan-panel--end { margin-top: 2.5em; }
.prose > .slogan-panel:first-child + h2 { margin-top: 1.6em; }

/* ---------- checklist signalen ---------- */
.checklist { background: var(--surface); box-shadow: var(--shadow-1); padding: var(--s-5); }
.checklist__title { font-weight: 650; color: var(--ink-strong); }
.prose .checklist ul { list-style: none; padding: 0; margin-top: var(--s-3); display: grid; gap: var(--s-2); }
@media (min-width: 760px) { .prose .checklist ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-6); } }
.prose .checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: start; margin: 0; }
.checklist li .i { width: 20px; height: 20px; margin-top: 2px; color: var(--teal-ink); padding: 2px; border: 1.5px solid var(--line-strong); border-radius: var(--r-xs); stroke-width: 2.5; }

/* ---------- hulpmiddelen in een document ---------- */
.prose .rg-tools--doc { padding: 0; list-style: none; margin-top: 1.2em; gap: var(--s-4); }
.prose .rg-tools--doc .rg-tool { margin: 0; background: var(--surface); box-shadow: var(--shadow-1); padding: var(--s-5); }
.prose .rg-tools--doc h3 { margin-top: 0; font-size: 1.125rem; }
.prose .rg-tools--doc p { font-size: var(--fs-small); color: var(--muted); }
.prose .rg-tools--doc p + p { margin-top: var(--s-3); }
.rg-tools--doc .more { font-weight: 600; font-size: var(--fs-small); }

/* ---------- hulp: telefoonregel en organisaties ---------- */
.help-callout { display: grid; gap: var(--s-4); align-items: center; background: var(--dark); color: var(--on-dark); padding: var(--s-5); }
@media (min-width: 640px) { .help-callout { grid-template-columns: minmax(0, 1fr) auto; } }
.help-callout .help-callout__title { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; color: #fff; }
.help-callout p { color: var(--on-dark-muted); font-size: var(--fs-small); }
.help-callout p + p { margin-top: var(--s-1); }
.help-callout__phone { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); color: #fff; text-decoration: none; white-space: nowrap; }
.help-callout__phone .i { color: var(--teal); width: .85em; height: .85em; }
.help-callout__phone:hover { color: var(--teal); }
.prose .help-orgs { padding: 0; list-style: none; margin-top: var(--s-4); }
.prose .help-orgs > li { margin: 0; }
.prose .help-org h3 { margin-top: 0; }
.prose .help-org p + p { margin-top: var(--s-1); }
.prose .help-orgs { grid-template-columns: 1fr; }
@media (min-width: 560px) { .prose .help-org { grid-template-columns: 132px minmax(0, 1fr); gap: var(--s-5); } }
@media (max-width: 420px) {
  .help-org { grid-template-columns: 1fr; }
  .help-org__logo { width: 112px; }
}

/* ---------- prijzentabel ---------- */
.legal-prizes th[scope="row"] { min-width: 10rem; }
.legal-prizes__note { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--subtle); margin-top: 2px; max-width: 32ch; line-height: 1.45; }
.legal-prizes .prize-amount { font-size: 1rem; }

/* ---------- tabellen gestapeld op smalle schermen (.table--stack + data-label op td) ---------- */
@media (max-width: 679px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack, .table--stack tbody, .table--stack tfoot, .table--stack tr, .table--stack th, .table--stack td { display: block; }
  .table--stack .num { text-align: left; }
  .table--stack td.is-empty { display: none; }
  .table--stack tfoot tr { border-top: 2px solid var(--line); border-bottom: 0; }
  .table--stack.prize-table td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
  .table--stack.prize-table td::before { margin-top: 0; }
  .table--stack.prize-table tbody th { padding-bottom: .4em; }
  .table--stack tfoot td, .table--stack tfoot th { border: 0; }
  .table--stack.prize-table tfoot td:first-child { justify-content: flex-start; padding-bottom: .4em; }
  .table--stack.prize-table tfoot td:first-child::before { content: none; }
  .table--stack tr { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack th, .table--stack td { border: 0; padding: .15em 0; min-width: 0 !important; }
  .table--stack td::before { content: attr(data-label); display: block; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--subtle); margin-top: .55em; }
  .table--stack tr > :first-child::before { margin-top: 0; }
  .table--stack.legal-table td:first-child { font-size: 1rem; }
  .cookie-table th code { font-size: 1rem; }
}

/* ---------- beeldverantwoording ---------- */
.prose.credits-doc { max-width: none; }
.credits-doc > section + section, .credits-doc > section + h2 { margin-top: 2.5em; }
.credits-doc > section > p { max-width: var(--measure); }
.credits-count { font-family: var(--font-sans); font-size: .6em; font-weight: 500; color: var(--subtle); margin-left: .35em; }
.prose .credits { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; gap: var(--s-4); }
@media (min-width: 1200px) { .prose .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prose .credit { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); background: var(--surface); box-shadow: var(--shadow-1); padding: var(--s-4); align-items: start; }
@media (min-width: 520px) { .prose .credit { grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-5); } }
.credit__thumb { aspect-ratio: 1; display: grid; place-items: center; background: var(--bg-deep); overflow: hidden; border-radius: var(--r-xs); }
.credit__thumb img { width: 100%; height: 100%; object-fit: cover; }
.credit__thumb--dark, .credit__thumb--light, .credit__thumb--icon { padding: 12px; }
.credit__thumb--dark { background: var(--dark); }
.credit__thumb--light { background: #fff; outline: 1px solid var(--line); outline-offset: -1px; }
.credit__thumb--icon { background: #fff; outline: 1px solid var(--line); outline-offset: -1px; }
.credit__thumb--dark img, .credit__thumb--light img, .credit__thumb--icon img { object-fit: contain; }
.credit__thumb--icon img { max-width: 56px; max-height: 56px; }
.credit__missing { font-size: var(--fs-xs); color: var(--subtle); text-align: center; padding: var(--s-2); }
.prose h3.credit__title { margin-top: 0; font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.3; }
.prose .credit__meta { margin-top: var(--s-2); display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .15em var(--s-4); font-size: var(--fs-small); line-height: 1.5; }
.credit__meta dt { color: var(--subtle); }
.credit__meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.credit__meta code { font-size: .8em; white-space: normal; overflow-wrap: anywhere; hyphens: manual; }
.prose .credit__note { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }

/* ---------- veelgestelde vragen ---------- */
.faq-main { min-width: 0; max-width: 820px; }
.faq-search { display: grid; gap: var(--s-2); margin-bottom: var(--s-7); }
.faq-search .input { min-height: 54px; font-size: 1.0625rem; }
.faq-group > h2 { scroll-margin-top: calc(var(--header-h) + 24px); }
.faq__answer p { font-family: var(--font-serif); font-size: var(--fs-read); line-height: var(--lh-read); }
.faq-doc .empty { margin-top: var(--s-5); }
/* Mobiel en tablet: het zoekveld (het belangrijkste hulpmiddel) staat boven de onderwerpenlijst */
@media (max-width: 999px) {
  .faq-doc { display: flex; flex-direction: column; gap: 0; }
  .faq-doc .faq-main { display: contents; }
  .faq-doc .faq-search { order: -1; margin-bottom: var(--s-6); }
  .faq-doc .toc { margin-bottom: var(--s-7); }
}

/* ---------- contact ---------- */
.contact { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; } }
.contact__form { background: var(--surface); box-shadow: var(--shadow-1); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); min-width: 0; }
.contact__form h2 { font-size: var(--fs-h3); }
.contact__aside { display: grid; gap: var(--s-5); min-width: 0; }
.contact-card { background: var(--surface); box-shadow: var(--shadow-1); padding: var(--s-5); }
.contact-card h2 { font-size: 1.25rem; margin-bottom: var(--s-3); }
.contact-card__line { display: flex; align-items: center; gap: .5em; font-weight: 600; font-size: 1.0625rem; margin-bottom: var(--s-3); overflow-wrap: anywhere; }
.contact-address { font-style: normal; line-height: 1.6; }
.contact-card__line .i { flex: none; color: var(--teal-ink); width: 1.2em; height: 1.2em; }
.contact-links { display: grid; gap: var(--s-2); }
.contact-links .more { font-weight: 600; }
.contact .field { align-content: start; }