/* =============================================================
   Boongroup Blog Content Styles
   Normalises two raw-HTML rendering modes inside blogBodyContentBlock:
     .blog-body--type-1  LinkedIn / entry-content-per-paragraph imports
     .blog-body--type-2  Boon native blog style (p / h2 with inline styles)
   ============================================================= */

/* ── Shared wrapper ──────────────────────────────────────────── */
.blog-body {
    color: #272727;
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
    line-height: 1.6;
}

.blog-body a {
    color: #3acda9;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-body a:hover,
.blog-body a:focus {
    color: #2fae8f;
}



/* ── CTA button ──────────────────────────────────────────────── */
.blog-body__cta {
    margin: 1.5rem 0;
}

.blog-body__cta a.btn-cta {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background-color: #3acda9;
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
    font-weight: 600;
}

.blog-body__cta a.btn-cta:hover {
    background-color: #2fae8f;
    color: #fff;
}



/* Images inside entry-content */
.blog-body--type-1 .entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1.5rem;
}

/* Type 2 images */
.blog-body--type-2 .entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
    margin: 0 auto 40px;
}

/* Hide empty entry-content blocks */
.blog-body--type-1 .entry-content:empty,
.blog-body--type-2 .entry-content:empty {
    display: none;
}

/* Hide blocks that only contain a non-breaking space */
.blog-body--type-1 .entry-content:has(> br:only-child),
.blog-body--type-2 .entry-content:has(> br:only-child) {
    display: none;
}


/* ============================================================
   TYPE 1 — LinkedIn / per-paragraph entry-content imports
   Each paragraph is wrapped in <div class="entry-content">
   ============================================================ */

/* Strip all inline background/color, apply Boon palette */
.blog-body--type-1 .entry-content,
.blog-body--type-1 li.entry-content {
    color: #272727 !important;
    background-color: transparent !important;
    margin-top: 0 !important;
    margin-bottom: 1rem;
    line-height: 1.6;
    border: none !important;
    padding: 0 !important;
}

.blog-body--type-1 .entry-content:empty,
.blog-body--type-1 .entry-content:has(> br:only-child) {
    display: none;
}

/* Headings inside entry-content divs */
.blog-body--type-1 .entry-content strong:first-child:last-child,
.blog-body--type-1 .entry-content > strong {
    display: block;
    color: #262d36;
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

/* Links */
.blog-body--type-1 .entry-content a,
.blog-body--type-1 li.entry-content a {
    color: #3acda9 !important;
    background-color: transparent !important;
}

.blog-body--type-1 .entry-content a:hover,
.blog-body--type-1 li.entry-content a:hover {
    color: #2fae8f !important;
}

/* Unordered lists */
.blog-body--type-1 ul {
    padding-left: 2rem;
    margin-bottom: 1rem;
    color: #272727;
}

.blog-body--type-1 ul li,
.blog-body--type-1 ul li.entry-content {
    color: #272727 !important;
    background-color: transparent !important;
    margin-bottom: 0 !important;
    padding: 0 0 0 0.5rem !important;
    line-height: 1.6;
    border: none !important;
}

/* Inline-styled spans from LinkedIn copy-paste */
.blog-body--type-1 span {
    color: inherit !important;
    background-color: transparent !important;
}



/* ============================================================
   TYPE 2 — Boon native blog style
   Uses <p style="color:#272727;..."> and <h2 style="...">
   or <header class="entry-header"> + <div class="entry-content">
   ============================================================ */

/* Normalise paragraph inline styles */
.blog-body--type-2 p {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    line-height: 15pt;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--bs-body-color);
}

/* Normalise h2 inline styles */
.blog-body--type-2 h2 {
    color: #5b6771;
    font-family: Roboto, sans-serif;
    font-weight: 600;
    line-height: 110%;
    font-size: 2rem;
    letter-spacing: 0;
    text-decoration: none;
}

/* Links */
.blog-body--type-2 a {
    color: #3acda9 !important;
    background-color: transparent !important;
}

.blog-body--type-2 a:hover {
    color: #2fae8f !important;
}

/* Single entry-content wrapper (variant 2/4 style) */
.blog-body--type-2 .entry-content {
    color: #272727;
    background-color: transparent !important;
}

    .blog-body--type-2 .entry-content p {
        font-family: Roboto, sans-serif;
        font-weight: 400;
        line-height: 160%;
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 1rem;
        color: var(--bs-body-color);
    }

    .blog-body--type-2 .entry-content h2 {
        color: #5b6771;
        font-family: Roboto, sans-serif;
        font-weight: 600;
        line-height: 110%;
        font-size: 2rem;
        letter-spacing: 0;
        text-decoration: none;
    }



/* Suppress duplicate entry-header h1 (title already shown) */
.blog-body--type-2 .entry-header {
    display: none;
}

/* Lists */
.blog-body--type-2 ul,
.blog-body--type-2 .entry-content ul {
    line-height: 165%;
}

.blog-body--type-2 ul,
.blog-body--type-2 .entry-content dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
   
}

.blog-body--type-2 ul,
.blog-body--type-2 .entry-content ol, ul {
    padding-left: 2rem;
    list-style-type: disc;
}

    .blog-body--type-2 ul li,
    .blog-body--type-2 .entry-content ul li {
        padding-left: .5rem;
    }

/* Inline spans */
.blog-body--type-2 span {
    color: inherit !important;
    background-color: transparent !important;
}
