/* Paginatekst die met de visuele editor is gemaakt. Wordt op de site én in de editor gebruikt. */
.page-body { display: flow-root; line-height: 1.75; }

/* tekstblokken blijven in een prettig leesbare kolom; foto's mogen breder zijn */
.page-body > p, .page-body > ul, .page-body > ol, .page-body > blockquote, .page-body > pre,
.page-body > h1, .page-body > h2, .page-body > h3, .page-body > h4, .page-body > h5, .page-body > h6 { max-width: 70ch; }

.page-body p { margin: 0 0 1.1em; }
.page-body h1, .page-body h2, .page-body h3, .page-body h4, .page-body h5, .page-body h6 { margin: 1.6em 0 .5em; }
.page-body > :first-child { margin-top: 0; }
.page-body ul, .page-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.page-body li { margin-bottom: .3em; }
.page-body blockquote { margin: 0 0 1.1em; padding: .1em 0 .1em 1.1em; border-left: 3px solid var(--accent, currentColor); color: var(--muted, inherit); font-style: italic; }
.page-body pre { margin: 0 0 1.1em; padding: .8em 1em; overflow-x: auto; background: var(--surface-2, #eee); border-radius: 4px; font-size: .9em; }
.page-body code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }
.page-body hr { max-width: 70ch; margin: 2em 0; border: 0; border-top: 1px solid var(--line, #ccc); }
.page-body img { max-width: 100%; }

/* tekstuitlijning */
.page-body .ta-center { text-align: center; }
.page-body .ta-right { text-align: right; }
.page-body .ta-justify { text-align: justify; }
.page-body > .ta-center { margin-inline: auto; }
.page-body > .ta-right { margin-left: auto; }

/* foto's: breedte in % van de paginabreedte, links/rechts met tekst eromheen, midden of volledig */
.page-body figure { margin: 0 0 1.2rem; max-width: 100%; }
.page-body figure img { display: block; width: 100%; height: auto; }
.page-body figcaption { margin-top: .4rem; font-size: .9em; line-height: 1.4; color: var(--muted, inherit); }
.page-body figure.ed-left { float: left; margin: .3rem 1.6rem 1rem 0; }
.page-body figure.ed-right { float: right; margin: .3rem 0 1rem 1.6rem; }
.page-body figure.ed-center { margin-inline: auto; clear: both; }
.page-body figure.ed-full { width: 100% !important; clear: both; }

@media (max-width: 640px) {
  .page-body figure.ed-left, .page-body figure.ed-right { float: none; width: 100% !important; margin: 1rem 0; }
  .page-body figure.ed-center { width: 100% !important; }
}

/* headerfoto */
.hero img { display: block; width: 100%; height: var(--hero-h, 360px); object-fit: cover; }
.hero-wrap { padding-top: 1.2rem; }
.hero-content img { border-radius: var(--photo-radius, 0); }
@media (max-width: 640px) { .hero img { height: min(var(--hero-h, 360px), 62vw); } }

/* Foto vult het scherm: direct onder de header en precies in beeld */
.hero-fill img { height: calc(100vh - var(--hdr-real, var(--header-h, 70px))); height: calc(100svh - var(--hdr-real, var(--header-h, 70px))); min-height: 200px; }
@media (min-width: 781px) { .hero-fill.hero-under-d img { height: 100vh; height: 100svh; } }
@media (max-width: 780px) { .hero-fill.hero-under-m img { height: 100vh; height: 100svh; } }
.hero-content.hero-fill img { height: calc(100svh - var(--hdr-real, var(--header-h, 70px)) - 1.2rem); }
@media (max-width: 640px) { .hero-fill img { height: calc(100svh - var(--hdr-real, 64px)); } }

/* Paginatekst over de volle breedte (per pagina in te stellen) */
.page-body.is-wide { max-width: none; }
.page-body.is-wide > p, .page-body.is-wide > ul, .page-body.is-wide > ol, .page-body.is-wide > blockquote,
.page-body.is-wide > pre, .page-body.is-wide > hr,
.page-body.is-wide > h1, .page-body.is-wide > h2, .page-body.is-wide > h3,
.page-body.is-wide > h4, .page-body.is-wide > h5, .page-body.is-wide > h6 { max-width: none; }

/* Paginatitel in de headerfoto */
.hero { position: relative; }
.hero-title { --tp-c: var(--tp, 50); --ts-c: var(--ts, 56px); position: absolute; left: 0; right: 0; top: calc(var(--tp-c) * 1%); transform: translateY(calc(var(--tp-c) * -1%)); z-index: 2; pointer-events: none; }
.hero-title h1 { margin: 0; color: var(--tc, #fff); font-family: var(--tf, var(--font-head)); font-size: min(var(--ts-c), 11vw); line-height: 1.1; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
@media (max-width: 780px) {
  .hero-title { --tp-c: var(--tp-m, var(--tp, 50)); --ts-c: var(--ts-m, var(--ts, 56px)); }
  .hero-title h1 { font-size: var(--ts-c); }
}
@media (min-width: 781px) { .hero-under-d .hero-title { padding-top: var(--hdr-real, 70px); box-sizing: border-box; } }
@media (max-width: 780px) { .hero-under-m .hero-title { padding-top: var(--hdr-real, 64px); box-sizing: border-box; } }