/* Generic content page (privacybeleid, etc.) */

.kpg-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 40px 60px 60px;
}

.kpg-content h1 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 32px;
    color: var(--color-text);
    margin-bottom: 24px;
}

.kpg-content__body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
}

.kpg-content__body h2 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 24px;
    margin: 32px 0 12px;
}

.kpg-content__body h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 20px;
    margin: 24px 0 8px;
}

.kpg-content__body p {
    margin-bottom: 16px;
}

.kpg-content__body ul,
.kpg-content__body ol {
    margin: 0 0 16px 24px;
}

.kpg-content__body li {
    margin-bottom: 6px;
}

/* Willem #14: the block editor leaves genuinely-empty paragraphs/list-items
   that the client can't delete; they render as stray blank lines between bullets
   and after a heading. Collapse them so they add no vertical space — a CSS-only
   fix, no post_content change. (A <p> holding only a <br> is NOT targeted here:
   :only-child ignores text nodes, so it would also catch real text+<br> lines.) */
.kpg-content__body p:empty,
.kpg-content__body li:empty {
    display: none;
    margin: 0;
}

/* Willem: the client styles sub-headings as a fully-bold paragraph (not a Heading
   block), so they inherit the normal paragraph margin and read with a blank line
   above the line below. Hug the next line by tightening only the bottom margin.
   Targets ONLY a <p> whose sole child element is <strong>; mixed lines such as the
   contact block (<strong>Kinderplezier</strong><br>E-mail: …) are excluded by
   :only-child, and nothing is hidden (margin-only, no content collapse). */
.kpg-content__body p:has(> strong:only-child) {
    margin-bottom: 4px;
}

/* Desktop <p> keeps a non-zero top margin (UA default), so the reduced bottom
   margin above is masked by the next paragraph's top margin via margin-collapse.
   Zero the top margin of the line directly after a bold-heading paragraph so it
   actually hugs the heading. (Mobile already zeroes p top margin, so this is a
   no-op there; kept for parity.) */
.kpg-content__body p:has(> strong:only-child) + p {
    margin-top: 0;
}

.kpg-content__body a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 767px) {
    .kpg-content {
        padding: 24px 16px 40px;
    }

    .kpg-content h1 {
        font-size: 24px;
    }

    .kpg-content__body {
        font-size: 15px;
    }
}