/*
 * Blog post body — the bridge between what the block editor emits and the design's scale.
 *
 * The prototype wrote its subheads as <div class="heading-30">, and [class*="heading-"]
 * (style.css:781) is the theme's only base heading rule — so a real <h2> typed into the editor
 * inherits the browser default and nothing else. blog-insights.css:201 already sizes the *spacing*
 * around h1-h6 inside .blog-detail-main, which says the UI team expected real headings here; they
 * just never gave them a size.
 *
 * Sizes are the same clamp() values as .heading-30 / .heading-26 / .heading-20 in style.css rather
 * than new ones, so an editor heading and a designed one are the same object. Scoped to
 * .blog-detail-main so nothing outside a post body is touched.
 *
 * Not written into blog-insights.css: that file came from the UI team and stays theirs.
 */

.blog-detail-main :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-body-family);
    color: var(--black);
    margin-bottom: 20px;
    line-height: 1.18;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
}

.blog-detail-main h1,
.blog-detail-main h2 {
    font-size: clamp(1.25rem, 1.0983rem + 0.6472vw, 1.875rem); /* .heading-30 */
}

.blog-detail-main h3 {
    font-size: clamp(1.125rem, 1.0036rem + 0.5178vw, 1.625rem); /* .heading-26 */
}

.blog-detail-main :is(h4, h5, h6) {
    font-size: clamp(1.125rem, 1.0947rem + 0.1294vw, 1.25rem); /* .heading-20 */
}

/*
 * An image dropped into the body gets the hero treatment the design gives .blog-detail-hero
 * (blog-insights.css:208), because that is what a full-width image in this column looks like.
 * The editor wraps images in <figure class="wp-block-image">, and a classic-editor <img> on its
 * own is covered too.
 */
.blog-detail-main figure.wp-block-image {
    margin: 0 0 40px;
    padding-top: 15px;
}

.blog-detail-main figure.wp-block-image img,
.blog-detail-main > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.blog-detail-main figure.wp-block-image figcaption {
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-color);
    text-align: center;
}

.blog-detail-main :is(figure, .wp-block-quote, .blog-detail-hero) + :is(h1, h2, h3, h4, h5, h6, [class*="heading-"]) {
    padding-top: 15px;
}