/* CSS Custom Properties for easy testing and maintenance */
:root {
    /* Global heading styles - EDIT THESE to change all headings at once */
    --blog-heading-color: #232323;
    --blog-heading-font: inherit;
    --blog-heading-weight-bold: 700;
    --blog-heading-weight-semibold: 600;

    /* Desktop heading sizes (default) */
    --blog-h1-size: 48px;
    --blog-h1-lh: 58px;
    --blog-h2-size: 36px;
    --blog-h2-lh: 44px;
    --blog-h3-size: 30px;
    --blog-h3-lh: 38px;
    --blog-h4-size: 24px;
    --blog-h4-lh: 32px;
    --blog-h5-size: 20px;
    --blog-h5-lh: 28px;
    --blog-h6-size: 18px;
    --blog-h6-lh: 26px;
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
    :root {
        --blog-h1-size: 42px;
        --blog-h1-lh: 50px;
        --blog-h2-size: 32px;
        --blog-h2-lh: 40px;
        --blog-h3-size: 28px;
        --blog-h3-lh: 36px;
        --blog-h4-size: 22px;
        --blog-h4-lh: 30px;
        --blog-h5-size: 18px;
        --blog-h5-lh: 26px;
        --blog-h6-size: 16px;
        --blog-h6-lh: 24px;
    }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    :root {
        --blog-h1-size: 36px;
        --blog-h1-lh: 44px;
        --blog-h2-size: 28px;
        --blog-h2-lh: 36px;
        --blog-h3-size: 24px;
        --blog-h3-lh: 32px;
        --blog-h4-size: 20px;
        --blog-h4-lh: 28px;
        --blog-h5-size: 18px;
        --blog-h5-lh: 26px;
        --blog-h6-size: 16px;
        --blog-h6-lh: 24px;
    }
}

/* Small mobile breakpoint */
@media (max-width: 480px) {
    :root {
        --blog-h1-size: 30px;
        --blog-h1-lh: 38px;
        --blog-h2-size: 26px;
        --blog-h2-lh: 34px;
        --blog-h3-size: 22px;
        --blog-h3-lh: 30px;
        --blog-h4-size: 18px;
        --blog-h4-lh: 26px;
        --blog-h5-size: 16px;
        --blog-h5-lh: 24px;
        --blog-h6-size: 14px;
        --blog-h6-lh: 22px;
    }
}

/* Heading styles with high specificity to override WordPress defaults */
body.single .container {
    #content {

        /* Global heading styles - applies to all heading levels and variants */
        h1, h1.wp-block-heading, h1.wp-block-heading span,
        h2, h2.wp-block-heading, h2.wp-block-heading span,
        h3, h3.wp-block-heading, h3.wp-block-heading span,
        h4, h4.wp-block-heading, h4.wp-block-heading span,
        h5, h5.wp-block-heading, h5.wp-block-heading span,
        h6, h6.wp-block-heading, h6.wp-block-heading span {
            color: var(--blog-heading-color);
            font-family: var(--blog-heading-font);
            margin-bottom: 1rem;
            margin-top: 1.5rem;
        }

        /* Individual heading sizes using CSS variables */
        h1, h1.wp-block-heading, h1.wp-block-heading span {
            font-size: var(--blog-h1-size);
            line-height: var(--blog-h1-lh);
            font-weight: var(--blog-heading-weight-bold);
        }

        h2, h2.wp-block-heading, h2.wp-block-heading span {
            font-size: var(--blog-h2-size);
            line-height: var(--blog-h2-lh);
            font-weight: var(--blog-heading-weight-bold);
        }

        h3, h3.wp-block-heading, h3.wp-block-heading span {
            font-size: var(--blog-h3-size);
            line-height: var(--blog-h3-lh);
            font-weight: var(--blog-heading-weight-bold);
        }

        h4, h4.wp-block-heading, h4.wp-block-heading span {
            font-size: var(--blog-h4-size);
            line-height: var(--blog-h4-lh);
            font-weight: var(--blog-heading-weight-semibold);
        }

        h5, h5.wp-block-heading, h5.wp-block-heading span {
            font-size: var(--blog-h5-size);
            line-height: var(--blog-h5-lh);
            font-weight: var(--blog-heading-weight-semibold);
        }

        h6, h6.wp-block-heading, h6.wp-block-heading span {
            font-size: var(--blog-h6-size);
            line-height: var(--blog-h6-lh);
            font-weight: var(--blog-heading-weight-semibold);
        }
    }
}


.post-author {
    color: #ffff;
}