/* =========================================================
   POSITIEFSENSITIEF - BLOG STYLES
   Geschikt voor zowel live pagina als CKEditor contentsCss
   ========================================================= */


/* =========================================================
   1. ALGEMENE BLOGCONTAINER
   ========================================================= */

.blog-article {
    max-width: 860px;
    margin: 0 auto;
    color: #2f3542;
}


/* =========================================================
   2. TITEL
   ========================================================= */

.blog-title {
    margin: 0 0 14px 0;

    font-size: 2.6rem;
    line-height: 1.15;
    font-weight: 600;

    color: #27324a;
}


/* =========================================================
   3. SUBTITEL
   ========================================================= */

.blog-subtitle {
    margin: 0 0 14px 0;

    font-size: 1.25rem;
    line-height: 1.55;
    font-weight: 400;

    color: #765269;
}


/* =========================================================
   4. LEZERSINFORMATIE / META
   Bijvoorbeeld:
   7 minuten lezen · Persoonlijk verhaal
   ========================================================= */

.blog-meta {
    margin: 0 0 32px 0;

    font-size: 0.9rem;
    line-height: 1.5;

    color: #7a7a7a;
}


/* =========================================================
   5. HET GROTE WITTE ARTIKELKADER
   ========================================================= */

.blog-card {
    background: #ffffff;

    border-radius: 16px;
    padding: 48px 54px;

    box-shadow:
        0 10px 35px rgba(38, 50, 74, 0.08);
}


/* =========================================================
   6. GEWONE BROODTEKST
   ========================================================= */

.blog-card p {
    margin: 0 0 24px 0;

    font-size: 1rem;
    line-height: 1.8;

    color: #303746;
}


/* Geen extra marge onder laatste element */

.blog-card > *:last-child {
    margin-bottom: 0;
}


/* =========================================================
   7. INTRO / LEAD
   Eerste alinea van het artikel
   ========================================================= */

.blog-intro {
    margin: 0 0 32px 0;

    font-size: 1.18rem;
    line-height: 1.8;
    font-weight: 400;

    color: #344057;
}


/* =========================================================
   8. TUSSENKOPPEN
   ========================================================= */

.blog-card h2,
.blog-tussenkop {
    margin: 46px 0 18px 0;

    font-size: 1.55rem;
    line-height: 1.3;
    font-weight: 600;

    color: #27324a;
}

.blog-card h3 {
    margin: 36px 0 14px 0;

    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 600;

    color: #765269;
}


/* Eerste kop in een kader hoeft geen enorme bovenmarge */

.blog-card > h2:first-child,
.blog-card > .blog-tussenkop:first-child {
    margin-top: 0;
}


/* =========================================================
   9. QUOTE / KERNZIN
   ========================================================= */

.blog-quote {
    margin: 38px 18px;
    padding: 5px 0 5px 26px;

    border-left: 3px solid #765269;

    font-size: 1.28rem;
    line-height: 1.6;
    font-style: italic;
    font-weight: 400;

    color: #594454;
}

.blog-quote p {
    margin: 0;

    font-size: inherit;
    line-height: inherit;
    color: inherit;
}


/* Optionele bron onder quote */

.blog-quote cite {
    display: block;

    margin-top: 10px;

    font-size: 0.78em;
    font-style: normal;

    color: #858085;
}


/* =========================================================
   10. PERSOONLIJK KADER
   Voor eigen ervaringen, observaties en droge zijpaden
   ========================================================= */

.blog-personal {
    margin: 36px 0;
    padding: 26px 30px;
    display: block;
    background: #f5f0ed;
    border-left:3px solid #765269;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.75;
    background-color:#eee4e9;

    color: #1f3152;
}

.blog-personal::before {
}

.blog-personal p {
    color: inherit;
}

.blog-personal > *:first-child {
    margin-top: 0;
}

.blog-personal > *:last-child {
    margin-bottom: 0;
}

.blog-artikel-groen {
    background: #eaf2ec;
    border-left: 3px solid #3d6b47;
    padding: 20px 24px;
    margin: 24px 0;
    color: #3d6b47;
    display:inline-block;
}

/* =========================================================
   11. UITGELICHT KADER
   Voor uitleg, aandachtspunt, conclusie of extra context
   ========================================================= */

.blog-highlight {
    margin: 36px 0;
    padding: 25px 30px;

    background: #f1f4ef;

    border-left: 4px solid #71806d;
    border-radius: 0 12px 12px 0;

    font-size: 1rem;
    line-height: 1.75;

    color: #364136;
}

.blog-highlight > *:first-child {
    margin-top: 0;
}

.blog-highlight > *:last-child {
    margin-bottom: 0;
}


/* Optioneel label in een highlight:
   voeg in HTML class blog-highlight-label toe */

.blog-highlight-label {
    display: block;

    margin-bottom: 8px;

    font-size: 0.76rem;
    line-height: 1.2;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.08em;

    color: #596855;
}


/* =========================================================
   12. INLINE ACCENT
   Selecteer enkele woorden in CKEditor
   ========================================================= */

.blog-inline-accent {
    font-weight: 600;
    color: #765269;
}


/* =========================================================
   13. INLINE HIGHLIGHT
   Voor een heel subtiele markering
   ========================================================= */

.blog-inline-highlight {
    padding: 0.08em 0.28em;

    background: #f1ece8;

    border-radius: 4px;

    color: #594454;

    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}


/* =========================================================
   14. ACCENTLINK
   ========================================================= */

.blog-link-accent {
    color: #765269;

    font-weight: 600;
    text-decoration: underline;

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        color 0.2s ease,
        text-decoration-color 0.2s ease;
}

.blog-link-accent:hover,
.blog-link-accent:focus {
    color: #4f3546;
}


/* =========================================================
   15. GEWONE LINKS IN BLOGTEKST
   ========================================================= */

.blog-card a:not(.blog-link-accent) {
    color: #765269;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-card a:not(.blog-link-accent):hover,
.blog-card a:not(.blog-link-accent):focus {
    color: #4f3546;
}


/* =========================================================
   16. LIJSTEN
   ========================================================= */

.blog-card ul,
.blog-card ol {
    margin: 0 0 26px 0;
    padding-left: 1.4em;
}

.blog-card li {
    margin-bottom: 8px;

    line-height: 1.7;

    color: #303746;
}

.blog-card li:last-child {
    margin-bottom: 0;
}


/* =========================================================
   17. AFBEELDINGEN
   ========================================================= */

.blog-card img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 34px auto;

    border-radius: 10px;
}


/* =========================================================
   18. FIGURE + BIJSCHRIFT
   ========================================================= */

.blog-card figure {
    margin: 36px 0;
}

.blog-card figure img {
    margin: 0;
}

.blog-card figcaption {
    margin-top: 10px;

    font-size: 0.84rem;
    line-height: 1.5;
    text-align: center;

    color: #808080;
}


/* =========================================================
   19. HORIZONTALE SCHEIDING
   ========================================================= */

.blog-card hr {
    border: 0;
    border-top: 1px solid #e4e1df;

    margin: 42px 0;
}


/* =========================================================
   20. VET EN CURSIEF
   ========================================================= */

.blog-card strong {
    font-weight: 600;
    color: #27324a;
}

.blog-card em {
    color: #594454;
}


/* =========================================================
   21. CORRECTIES VOOR ELEMENTEN BINNEN KADERS
   ========================================================= */

.blog-personal h2,
.blog-personal h3,
.blog-highlight h2,
.blog-highlight h3 {
    margin-top: 0;
}

.blog-personal ul,
.blog-personal ol,
.blog-highlight ul,
.blog-highlight ol {
    margin-bottom: 0;
}


/* =========================================================
   22. RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 900px) {

    .blog-article {
        max-width: 100%;
    }

    .blog-card {
        padding: 40px 38px;
    }

    .blog-title {
        font-size: 2.3rem;
    }
}


/* =========================================================
   23. RESPONSIVE - MOBIEL
   ========================================================= */

@media (max-width: 700px) {

    .blog-title {
        font-size: 2rem;
        line-height: 1.2;
    }

    .blog-subtitle {
        font-size: 1.12rem;
    }

    .blog-meta {
        margin-bottom: 24px;
    }

    .blog-card {
        padding: 30px 24px;

        border-radius: 12px;
    }

    .blog-card p {
        line-height: 1.75;
    }

    .blog-intro {
        font-size: 1.1rem;
    }

    .blog-card h2,
    .blog-tussenkop {
        margin-top: 38px;

        font-size: 1.4rem;
    }

    .blog-quote {
        margin: 32px 0;
        padding-left: 20px;

        font-size: 1.18rem;
    }

    .blog-personal,
    .blog-highlight {
        margin: 30px 0;
        padding: 22px 22px;
    }
}


/* =========================================================
   24. CKEDITOR SPECIFIEK
   Alleen nuttig wanneer ditzelfde bestand als contentsCss
   wordt ingeladen.
   ========================================================= */

body.cke_editable {
    padding: 24px;

    background: #f7f5f3;

    font-size: 16px;
    line-height: 1.7;

    color: #303746;
}


/* In CKEditor staat de content meestal niet automatisch
   in .blog-card. Daarom maken we de editor zelf wit. */

body.cke_editable {
    background: #ffffff;
}


/* Ruimte rond geselecteerde div-blokken in editor */

body.cke_editable .blog-personal,
body.cke_editable .blog-highlight,
body.cke_editable .blog-quote {
    min-height: 20px;
}

media (max-width: 760px) {
    .blog-artikel {
        width: min(100% - 22px, 930px);
        border-radius: 20px;
    }
}
.blog-artikel {
    width: min(930px, calc(100% - 40px));
    margin: 0 auto clamp(70px, 10vw, 130px);
    padding: clamp(38px, 7vw, 78px) clamp(24px, 8vw, 86px);
    background: #FAF9F6;
    border: 1px solid rgba(154, 137, 115, 0.16);
    border-radius: 28px;
    box-shadow: 0 20px 55px rgba(57, 43, 29, 0.09);
}
.blog-artikel-intro {
    margin: 0 0 38px;
    color: #1f3152;
    font-size: 1.1rem;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    line-height: 1.52;
}
.blog-artikel-section {
    width: 58px;
    height: 3px;
    margin: 54px 0;
    border: 0;
    background: #765269;
    display: block;
}