/* 92-redactie.css — één sjabloon voor alle uitlegpagina's.
 *
 * Band van vensterrand tot vensterrand, daaronder twee kolommen op 1200px:
 * 720 tekst, 40 tussenruimte, 380 zijkolom. Geen witte kaart om de tekst — een
 * document hoeft niet in een doosje.
 *
 * Verticale ritmiek: 40px tussen twee h2-blokken, 14px tussen alinea's. Geen
 * andere waarden.
 */

.tb-redactie-in{max-width:1200px;margin-inline:auto;padding-inline:24px;}

.tb-redactie-band{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--tb-wash);
  padding:24px 0 40px;
  margin-bottom:40px;
}
.tb-redactie-band .tb-kruimels{padding-top:0;}

.tb-redactie .tb-redactie-band h1{
  font-family:var(--tb-serif);font-size:clamp(30px,3.4vw,40px);font-weight:600;
  line-height:1.14;color:var(--tb-ink);margin:8px 0 0;
}
.tb-redactie-intro{
  margin:14px 0 0;max-width:680px;
  font:400 17px/1.6 var(--tb-sans);color:var(--tb-body);
}
.tb-redactie-datum{
  margin:14px 0 0;
  font:400 13.5px/1.5 var(--tb-sans);color:var(--tb-muted);
}

/* ------------------------------------------------------------ twee kolommen */

.tb-redactie-body{display:grid;gap:40px;align-items:start;padding-bottom:96px;}
@media (min-width:1024px){
  .tb-redactie-body{grid-template-columns:720px 380px;}
  .tb-redactie-body.is-enkel{grid-template-columns:minmax(0,720px);}
}

/* De regelmaat zit op de alinea's, niet op de kolom: koppen, panelen en
   afbeeldingen mogen de volle 720 px gebruiken, lopende tekst niet. Boven de
   680 px (± 72 tekens) raakt het oog de volgende regel kwijt. */
.tb-redactie-tekst{font-size:16px;line-height:1.7;color:var(--tb-body);}
.tb-redactie-tekst p,
.tb-redactie-tekst ul,
.tb-redactie-tekst ol,
.tb-redactie-tekst blockquote{max-width:680px;}

.tb-redactie-tekst > :first-child{margin-top:0;}
.tb-redactie-tekst h2{
  font-family:var(--tb-serif);font-size:23px;font-weight:600;color:var(--tb-ink);
  margin:40px 0 14px;line-height:1.25;
}
.tb-redactie-tekst h3{
  font-family:var(--tb-serif);font-size:18.5px;font-weight:600;color:var(--tb-ink);
  margin:40px 0 14px;
}
.tb-redactie-tekst h4{font-size:16px;font-weight:600;color:var(--tb-ink);margin:40px 0 14px;}
.tb-redactie-tekst p{margin:0 0 14px;}
.tb-redactie-tekst a{
  color:var(--tb-ink);text-decoration:underline;
  text-decoration-color:var(--tb-accent-line);text-underline-offset:3px;
}
.tb-redactie-tekst a:hover{color:var(--tb-action);}
.tb-redactie-tekst img{max-width:100%;height:auto;border-radius:var(--tb-r-img);margin:14px 0;}
.tb-redactie-tekst hr{border:0;border-top:1px solid var(--tb-line);margin:40px 0;}
.tb-redactie-tekst{overflow-wrap:anywhere;}
.tb-redactie-tekst a{word-break:break-word;}

/* Opsommingen krijgen een vinkje. Ronde bolletjes komen nergens anders op deze
   site voor, en een lijst met uitleg is geen opsomming van gelijke dingen. */
.tb-redactie-tekst ul{list-style:none;margin:0 0 14px;padding:0;}
.tb-redactie-tekst ul li{position:relative;padding-left:26px;margin:0 0 8px;}
.tb-redactie-tekst ul li::before{
  content:"";position:absolute;left:5px;top:7px;
  width:6px;height:10px;border:solid var(--tb-ok);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.tb-redactie-tekst ol{margin:0 0 14px;padding-left:22px;}
.tb-redactie-tekst ol li{margin:0 0 8px;}

.tb-redactie-tekst blockquote{
  margin:40px 0;padding:14px 20px;
  background:var(--tb-warn-bg);border-left:3px solid var(--tb-accent);
  border-radius:0 var(--tb-r-ctrl) var(--tb-r-ctrl) 0;
  color:var(--tb-warn-ink);font:400 15px/1.6 var(--tb-sans);
}
.tb-redactie-tekst blockquote p:last-child{margin-bottom:0;}
.tb-redactie-tekst :where(h2,h3)[id]{scroll-margin-top:var(--tb-sticky-top);}

/* --------------------------------------------------------------- zijkolom */

@media (min-width:1024px){
  .tb-redactie-zij{position:sticky;top:100px;}
}

/* Inhoudsopgave */
.tb-redactie-inhoud h2{
  margin:0 0 14px;
  font:600 12px/1.2 var(--tb-sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tb-soft);
}
.tb-redactie-inhoud ol{list-style:none;margin:0;padding:0;counter-reset:oip;}
.tb-redactie-inhoud li{counter-increment:oip;}
.tb-redactie-inhoud a{
  display:flex;gap:8px;padding:7px 0 7px 12px;
  border-left:2px solid transparent;
  font:400 14px/1.45 var(--tb-sans);color:var(--tb-body);text-decoration:none;
}
.tb-redactie-inhoud a::before{
  content:counter(oip) ".";flex:none;color:var(--tb-soft);font-variant-numeric:tabular-nums;
}
.tb-redactie-inhoud li.tb-oip-eigen-nummer a::before{content:none;}
.tb-redactie-inhoud a:hover{color:var(--tb-action-hover);}
.tb-redactie-inhoud a:focus-visible{outline:2px solid var(--tb-action);outline-offset:2px;border-radius:4px;}
/* De sectie waar je bent. Kleur én een streep, want kleur alleen haalt de
   contrasteis niet voor iedereen. */
.tb-redactie-inhoud a.is-hier{
  color:var(--tb-action);font-weight:600;border-left-color:var(--tb-action);
}

/* Hulppaneel op korte pagina's */
.tb-hulp-paneel{
  background:var(--tb-surface);border:1px solid var(--tb-line);
  border-radius:var(--tb-r-card);box-shadow:var(--tb-lift);
  padding:24px;
}
.tb-hulp-paneel h2{
  margin:0;font-family:var(--tb-serif);font-size:17px;font-weight:600;color:var(--tb-ink);
}
.tb-hulp-sub{margin:6px 0 14px;font:400 13.5px/1.5 var(--tb-sans);color:var(--tb-muted);}
.tb-hulp-paneel ul{list-style:none;margin:0;padding:0;}
.tb-hulp-paneel li{padding:14px 0;border-top:1px solid var(--tb-line);}
.tb-hulp-paneel li a{
  display:block;font:600 15px/1.35 var(--tb-sans);color:var(--tb-ink);text-decoration:none;
}
.tb-hulp-paneel li a:hover{color:var(--tb-action);text-decoration:underline;text-underline-offset:3px;}
.tb-hulp-paneel li span{display:block;margin-top:2px;font-size:13px;color:var(--tb-muted);}
.tb-hulp-reactie{
  margin:14px 0 0;padding:14px;
  background:var(--tb-ground-alt);border-radius:var(--tb-r-ctrl);
  font:400 13.5px/1.55 var(--tb-sans);color:var(--tb-body);
}
.tb-hulp-reactie strong{color:var(--tb-ink);}

@media (max-width:1023px){
  .tb-redactie-body{padding-bottom:64px;}
}
@media (max-width:899px){
  .tb-redactie-in{padding-inline:20px;}
  .tb-redactie-band{padding:24px 0;margin-bottom:24px;}
  .tb-kruimels a{display:inline-block;padding-block:5px;}
}

/* Het e-mailadres als primaire knop (inc/tb-contact.php).
   Het was een pil met een randje; een pil leest als een label, niet als iets
   waar je op drukt. Het adres is het label, en verschijnt pas na een klik. */
.tb-mail{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tb-mail-knop{
  appearance:none;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;
  height:var(--tb-h-ctrl);padding:0 20px;
  background:var(--tb-action);color:#fff;border:0;border-radius:var(--tb-r-ctrl);
  font:600 15px/1 var(--tb-sans);
}
.tb-mail-knop:hover{background:var(--tb-action-hover);color:#fff;}
.tb-mail-knop:focus-visible{outline:2px solid var(--tb-ink);outline-offset:2px;}
.tb-mail-knop[disabled]{opacity:.65;cursor:default;}
.tb-mail-envelop{flex:none;}
.tb-redactie-tekst a.tb-mail-adres{color:#fff;text-decoration:none;}
.tb-mail-status{font:400 13.5px/1.4 var(--tb-sans);color:var(--tb-muted);}
.tb-mail-noscript{font:500 15px/1.5 var(--tb-sans);color:var(--tb-body);}

/* Sociale links op één regel, met hun eigen merkicoon ervoor. */
.tb-sociaal{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:0 0 14px;padding:0;list-style:none;}
.tb-redactie-tekst .tb-sociaal li{padding-left:0;margin:0;}
.tb-redactie-tekst .tb-sociaal li::before{content:none;}
.tb-sociaal a{
  display:inline-flex;align-items:center;gap:8px;
  font:500 15px/1 var(--tb-sans);color:var(--tb-ink);
  text-decoration:none;padding-block:6px;
}
.tb-sociaal a:hover{color:var(--tb-action);text-decoration:underline;text-underline-offset:3px;}
.tb-sociaal svg{flex:none;color:var(--tb-muted);}
.tb-sociaal a:hover svg{color:var(--tb-action);}

/* Een inleidende alinea die vroeger als kop was opgemaakt: nadruk zonder in de
   koppenstructuur te gaan zitten. */
.tb-redactie-tekst p.tb-lead{
  font-size:17px;line-height:1.6;color:var(--tb-ink);font-weight:500;
  margin:0 0 14px;
}

/* Een voorbehoud is geen voordeel.
   "Let op: Thuisbanket controleert niet of je aan de regels voldoet" kreeg
   hetzelfde groene vinkje als een lijst met voordelen — dat leest als
   goedkeuring. Deze items krijgen de waarschuwingskleur en een uitroepteken. */
.tb-redactie-tekst ul li.tb-let-op{
  background:var(--tb-warn-bg);color:var(--tb-warn-ink);
  border-radius:var(--tb-r-ctrl);
  padding:12px 14px 12px 38px;margin-bottom:10px;
}
.tb-redactie-tekst ul li.tb-let-op::before{
  content:"!";
  left:14px;top:12px;
  width:auto;height:auto;border:0;transform:none;
  font:700 15px/1.3 var(--tb-sans);color:var(--tb-accent);
}