/* Berichten (single.php), de berichten in het blogoverzicht en de lokale pagina's (templates/lokaal.php).
   Alleen wat site.css niet heeft: de tekst van een bericht is gewone HTML uit
   WordPress (lijsten, tussenkoppen, citaten, beeld, links) zonder de klassen van
   de vaste artikelen. Maten en kleuren volgen .ar-sec en .ar-ul in site.css. */

.ar-bericht .ar-intro>*:first-child,.ar-bericht .ar-sec h2+*{margin-top:16px}
.ar-bericht .ar-intro p+*,.ar-bericht .ar-intro *+p{margin-top:18px}

/* links in de tekst */
.ar-bericht .ar-col a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ar-bericht .ar-col a:hover{color:var(--brand-h);text-decoration-thickness:2px}

/* tussenkoppen onder een h2 */
.ar-bericht .ar-col h3{font-family:var(--body);font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-align:left;margin-top:32px}
.ar-bericht .ar-col h4{font-family:var(--body);font-weight:700;font-size:17.5px;line-height:1.35;color:var(--ink);margin-top:24px}

/* lijsten: zoals .ar-ul, genummerd met groene cijfers */
.ar-bericht .ar-col ul,.ar-bericht .ar-col ol{list-style:none;margin-top:18px}
.ar-bericht .ar-col li{position:relative;padding-left:22px;font-size:17.5px;line-height:1.65;color:#374151}
.ar-bericht .ar-col li+li{margin-top:10px}
.ar-bericht .ar-col ul>li::before{content:"";position:absolute;left:3px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.ar-bericht .ar-col ol{counter-reset:nr}
.ar-bericht .ar-col ol>li{counter-increment:nr;padding-left:28px}
.ar-bericht .ar-col ol>li::before{content:counter(nr) ".";position:absolute;left:0;top:0;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.ar-bericht .ar-col li ul,.ar-bericht .ar-col li ol{margin-top:10px}
.ar-bericht .ar-col li p{margin-top:0;font-size:inherit}

/* citaat */
.ar-bericht .ar-col blockquote{margin-top:24px;padding:4px 0 4px 20px;border-left:3px solid var(--brand)}
.ar-bericht .ar-col blockquote p{margin-top:0;font-size:18.5px;line-height:1.6;color:var(--ink)}
.ar-bericht .ar-col blockquote p+p{margin-top:12px}

/* beeld in de tekst */
.ar-bericht .ar-col figure{margin-top:28px}
.ar-bericht .ar-col img{height:auto;border-radius:14px}
.ar-bericht .ar-col p>img{margin-top:8px}
.ar-bericht .ar-col figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.ar-bericht .ar-col figcaption a{color:inherit}

/* overige */
.ar-bericht .ar-col hr{margin:36px 0 0;border:0;border-top:1px solid var(--line)}
.ar-bericht .ar-col code{font-size:.92em;background:var(--soft);border-radius:5px;padding:2px 5px}
.ar-bericht .ar-col pre{margin-top:20px;background:var(--soft);border-radius:12px;padding:16px;overflow-x:auto}
.ar-bericht .ar-col pre code{background:none;padding:0}
.ar-bericht .ar-tabel table{margin:0}

/* zonder uitgelichte afbeelding: de mascotte rechts op het groene vlak */
.ar-media.is-leeg img.is-leeg{inset:auto 64px 0 auto;width:auto;height:88%;object-fit:contain}
.ar-media.is-leeg .ar-scrim{display:none}
.bi-row img.is-leeg,.ar-next-card img.is-leeg{object-fit:contain;background:var(--mint)}
.bi-row img.is-leeg{padding:8px 0 0}
.ar-next-card img.is-leeg{inset:auto 0 0 auto;width:60%;height:85%;background:none}

/* lokale pagina met een foto: 300px hoog (Casper, 3 november); welk deel van de foto je ziet, staat per foto
   in de mediabibliotheek (_blg_focus, de hoogte van het gezicht van de mascotte) */
@media (min-width:761px){
  .ar-lokaal .ar-media:not(.is-leeg){height:300px}
}

/* lokale pagina: de andere diensten in deze plaats en deze dienst in andere plaatsen */
.lk-meer h2{font-size:34px;text-align:left}
.lk-meer h2+.lk-lijst{margin-top:24px}
.lk-lijst+h2{margin-top:56px}
.lk-lijst{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.lk-lijst a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:15.5px;font-weight:500;color:var(--ink);transition:border-color .15s,color .15s}
.lk-lijst a:hover{border-color:var(--brand);color:var(--brand)}

@media (max-width:760px){
  .lk-meer h2{font-size:26px}
  .lk-lijst+h2{margin-top:40px}
  .ar-bericht .ar-col h3{font-size:18px;margin-top:26px}
  .ar-bericht .ar-col li{font-size:16.5px}
  .ar-bericht .ar-col blockquote p{font-size:17px}
  .ar-media.is-leeg img.is-leeg{position:relative;inset:auto;display:block;width:100%;height:150px;padding-top:14px}
}

/* vorige/volgende onder het blogoverzicht (home.php), alleen bij meer dan één pagina */
.bi-pages{display:flex;justify-content:center;gap:12px;margin-top:40px}