/* ===================================================================
 * # Blog-Specific Blockquote Styles (from Abstract Theme)
 * Extracted from Abstract_2_0_0/css/styles.css
 * All styles are prefixed with .blog-post-content to avoid conflicts
 * ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## CSS Variables (Required for Blockquote Styles)
 * Adjusted for 20px base instead of 10px base (multiplied by 0.625)
 * ------------------------------------------------------------------- */
:root {   
    /* spacing
     * base font size: 18px adjusted for 20px base
     * vertical space unit : 32px adjusted for 20px base
     */
    --base-size     : 100%;  /* 20px base from globals.css */
    --base-font-size: 0.7rem;    /* 18px with 20px base (was 1.8rem with 10px base) */
    --space         : 1.6rem;    /* 32px with 20px base (was 3.2rem with 10px base) */

    /* vertical spacing - all converted to 20px base
     */
    --vspace-0_25 : calc(0.25 * var(--space));   /* 8px */
    --vspace-0_5  : calc(0.5 * var(--space));    /* 16px */
    --vspace-0_75 : calc(0.75 * var(--space));   /* 24px */
    --vspace-0_875: calc(0.875 * var(--space));  /* 28px */
    --vspace-1    : calc(var(--space));           /* 32px */
    --vspace-1_25 : calc(1.25 * var(--space));   /* 40px */
    --vspace-1_5  : calc(1.5 * var(--space));    /* 48px */
    --vspace-1_75 : calc(1.75 * var(--space));   /* 56px */
    --vspace-2    : calc(2 * var(--space));       /* 64px */
    --vspace-2_5  : calc(2.5 * var(--space));    /* 80px */
    --vspace-3    : calc(3 * var(--space));       /* 96px */
    --vspace-3_5  : calc(3.5 * var(--space));    /* 112px */
    --vspace-4    : calc(4 * var(--space));       /* 128px */
    --vspace-4_5  : calc(4.5 * var(--space));    /* 144px */
    --vspace-5    : calc(5 * var(--space));       /* 160px */

    /* type scale - converted to 20px base
     * ratio 1:2 | base: 18px (0.9rem with 20px base)
     * -------------------------------------------------------
     *
     * --text-display-3 = (77.40px) = 3.87rem
     * --text-display-2 = (64.50px) = 3.225rem  
     * --text-display-1 = (53.75px) = 2.6875rem
     * --text-xxxl      = (44.79px) = 2.2395rem
     * --text-xxl       = (37.32px) = 1.866rem
     * --text-xl        = (31.10px) = 1.555rem
     * --text-lg        = (25.92px) = 1.296rem
     * --text-md        = (21.60px) = 1.08rem
     * --text-size      = (18.00px) = 0.9rem BASE
     * --text-sm        = (15.00px) = 0.75rem
     * --text-xs        = (12.50px) = 0.625rem
     *
     * -------------------------------------------------------
     */
    --text-scale-ratio: 1.2;
    --text-size       : var(--base-font-size);  /* 0.9rem = 18px */
    --text-xs         : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));  /* ~0.625rem */
    --text-sm         : calc(var(--text-xs) * var(--text-scale-ratio));      /* ~0.75rem */
    --text-md         : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));  /* ~1.08rem */
    --text-lg         : calc(var(--text-md) * var(--text-scale-ratio));      /* ~1.296rem */
    --text-xl         : calc(var(--text-lg) * var(--text-scale-ratio));      /* ~1.555rem */
    --text-xxl        : calc(var(--text-xl) * var(--text-scale-ratio));      /* ~1.866rem */
    --text-xxxl       : calc(var(--text-xxl) * var(--text-scale-ratio));     /* ~2.2395rem */
    --text-display-1  : calc(var(--text-xxxl) * var(--text-scale-ratio));    /* ~2.6875rem */
    --text-display-2  : calc(var(--text-display-1) * var(--text-scale-ratio)); /* ~3.225rem */
    --text-display-3  : calc(var(--text-display-2) * var(--text-scale-ratio)); /* ~3.87rem */

    /* default button height - converted to 20px base
     */
    --vspace-btn: var(--vspace-2);  /* 64px */
    
    /* colors (unchanged)
     */
    --color-text-dark : #000000;
    --color-text-light: #848484; 
    --color-border    : #e0e0e0;
    --color-gray-1    : #f0f0f0;
    --color-gray-3    : #d1d1d1;
    --color-gray-16   : #282828;
    --color-white     : #ffffff;
    
    /* widths for rows and containers (unchanged - already in px)
     */
    --width-full    : 100%;
    --width-max     : 1200px;
    --width-wide    : 1400px;
    --width-wider   : 1600px;
    --width-widest  : 1800px;
    --width-narrow  : 1000px;
    --width-narrower: 900px;
    --width-grid-max: var(--width-max);

    /* gutters - converted to 20px base
     */
    --gutter-lg : 1rem;      /* 20px with 20px base (was 2rem with 10px base) */
    --gutter-md : 0.9rem;    /* 18px with 20px base (was 1.8rem with 10px base) */
    --gutter-mob: 0.5rem;    /* 10px with 20px base (was 1rem with 10px base) */
    
    /* Common flex properties for grid columns */
    --flex-column-base: 0 0;
    --flex-100: var(--flex-column-base) 100%;
    --flex-50: var(--flex-column-base) 50%;
    --flex-33: var(--flex-column-base) 33.33333%;
    --flex-25: var(--flex-column-base) 25%;
}

/* on mobile devices below 600px - adjust for 20px base
 */
@media screen and (max-width: 600px) {
    :root {
        --base-font-size: 0.8rem;   /* 16px with 20px base (was 1.6rem with 10px base) */
        --space: 1.4rem;            /* 28px with 20px base (was 2.8rem with 10px base) */
    }
}

/* ------------------------------------------------------------------- 
 * ## Basic blockquote styles
 * ------------------------------------------------------------------- */
.blog-post-content blockquote {
    margin: 0 0 var(--vspace-1) 0 !important;
    padding: var(--vspace-1) var(--vspace-1_5) !important;
    border-left: 4px solid black !important;
    position: relative;
    color: var(--color-text-dark) !important;
    font-style: normal !important;
}

@media screen and (max-width: 400px) {
    .blog-post-content blockquote {
        padding: var(--vspace-0_75) var(--vspace-0_75);
    }
}

.blog-post-content blockquote p {
    font-family: var(--font-1);
    font-size: var(--text-lg);
    font-weight: 400;
    font-style: normal;
    line-height: var(--vspace-1_25);
    color: var(--color-text-dark);
    padding: 0;
    margin-bottom: var(--vspace-0_75) !important;
}

.blog-post-content blockquote p:last-child {
    margin-bottom: 0 !important;
}

/* More specific selector to override .post-content p styles */
.post-content .blog-post-content blockquote p {
    margin-bottom: var(--vspace-0_75) !important;
}

.post-content .blog-post-content blockquote p:last-child {
    margin-bottom: 0 !important;
}

.blog-post-content blockquote cite {
    display: block;
    font-family: var(--font-1);
    font-weight: 400;
    font-size: var(--text-sm);
    line-height: var(--vspace-0_75);
    font-style: normal;
}

.blog-post-content blockquote cite:before {
    content: "\2014 \0020";
}

.blog-post-content blockquote cite, 
.blog-post-content blockquote cite a, 
.blog-post-content blockquote cite a:visited {
    color: var(--color-text-light);
    border: none;
}

/* ------------------------------------------------------------------- 
 * ## Pull quote styles
 * ------------------------------------------------------------------- */
.blog-post-content .pull-quote {
    position: relative;
    padding: 0;
    margin-top: 0;
    text-align: center;
}

.blog-post-content .pull-quote blockquote {
    border: none;
    margin: 0 auto;
    max-width: 62rem;
    padding-top: var(--vspace-2_5);
    position: relative;
}

.blog-post-content .pull-quote blockquote p {
    font-weight: 400;
    color: var(--color-text-dark);
}

.blog-post-content .pull-quote blockquote:before {
    content: "";
    display: block;
    height: var(--vspace-1);
    width: var(--vspace-1);
    background-repeat: no-repeat;
    background: center center;
    background-size: contain;
    background-image: url(../images/icons/icon-quote.svg);
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    position: absolute;
    top: var(--vspace-1);
    left: 50%;
}

/* ------------------------------------------------------------------- 
 * ## Format quote styles
 * ------------------------------------------------------------------- */
.blog-post-content .format-quote blockquote::before {
    display: none;
}

.blog-post-content .format-quote blockquote, 
.blog-post-content .format-link .link-wrap {
    display: table-cell;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    border: none;
}

.blog-post-content .format-quote blockquote p, 
.blog-post-content .format-link .link-wrap p {
    font-family: var(--font-2);
    font-weight: 500;
    font-size: var(--text-lg);
    line-height: var(--vspace-1);
    color: black;
    padding: 7.8rem 0 0 0;
    margin-bottom: var(--vspace-1);
}

.blog-post-content .format-quote cite, 
.blog-post-content .format-link cite {
    display: block;
    font-family: var(--font-1);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--color-text-light);
    font-style: normal;
}

.blog-post-content .format-quote cite::before, 
.blog-post-content .format-link cite::before {
    display: none;
}

.blog-post-content .format-quote cite a, 
.blog-post-content .format-quote cite a:visited {
    color: var(--color-text-light);
    border: none;
}

/* ------------------------------------------------------------------- 
 * ## Custom quote style for reviews
 * ------------------------------------------------------------------- */
.blog-post-content .review-quote {
    position: relative;
    margin: var(--vspace-1_5) 0;
    padding: var(--vspace-1) var(--vspace-1_5);
    background-color: #f8f9fa;
    border-left: 4px solid var(--color-text-dark);
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

.blog-post-content .review-quote p {
    font-family: var(--font-1);
    font-size: var(--text-md);
    font-weight: 400;
    line-height: var(--vspace-1_25);
    color: var(--color-text-dark);
    margin-bottom: var(--vspace-0_75) !important;
    padding: 0;
}

.blog-post-content .review-quote p:last-child {
    margin-bottom: 0 !important;
}

.blog-post-content .review-quote:before {
    content: "\201C";
    font-size: 4rem;
    color: var(--color-text-light);
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    font-family: serif;
    line-height: 1;
}

@media screen and (max-width: 600px) {
    .blog-post-content .review-quote {
        padding: var(--vspace-0_75) var(--vspace-0_75);
        margin: var(--vspace-1) 0;
    }
    
    .blog-post-content .review-quote:before {
        font-size: 3rem;
        top: -0.3rem;
        left: 0.5rem;
    }
}

/* ------------------------------------------------------------------- 
 * ## Responsive blockquote styles (consolidated)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1040px) {
    .blog-post-content .format-quote blockquote p, 
    .blog-post-content .format-link .link-wrap p {
        font-size: var(--text-md);
        line-height: calc(0.875 * var(--space));
    }
}

@media screen and (max-width: 980px) {
    .blog-post-content .format-quote blockquote p, 
    .blog-post-content .format-link .link-wrap p {
        font-size: var(--text-lg);
        line-height: var(--vspace-1);
    }
}

@media screen and (max-width: 700px) {
    .blog-post-content .format-quote blockquote p, 
    .blog-post-content .format-link .link-wrap p {
        font-size: var(--text-md);
        line-height: calc(0.875 * var(--space));
    }
}

@media screen and (max-width: 600px) {
    .blog-post-content .format-quote blockquote p, 
    .blog-post-content .format-link .link-wrap p {
        font-size: var(--text-lg);
        line-height: var(--vspace-1);
    }
}

/* Variables are now consolidated above */

/* ===================================================================
 * # Blog-Specific Grid System and Typography Styles
 * All styles are prefixed with .blog-post-content to avoid conflicts
 * ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## Row and Column Grid System
 * ------------------------------------------------------------------- */
.blog-post-content .row {
    width: 92%;
    max-width: var(--width-grid-max);
    margin: 0 auto;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-flow: row wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row wrap;
}

.blog-post-content .row .row {
    width: auto;
    max-width: none;
    margin-left: calc(var(--gutter-lg) * -1);
    margin-right: calc(var(--gutter-lg) * -1);
}

.blog-post-content .column {
    -ms-flex: 1 1 0%;
    -webkit-box-flex: 1;
    flex: 1 1 0%;
    padding: 0 var(--gutter-lg);
}

.blog-post-content .collapse>.column, 
.blog-post-content .column.collapse {
    padding: 0;
}

/* flex row containers utility classes */
.blog-post-content .row.row-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.blog-post-content .row.row-nowrap {
    -ms-flex-wrap: none;
    flex-wrap: nowrap;
}

.blog-post-content .row.row-y-top {
    -ms-flex-align: start;
    -webkit-box-align: start;
    align-items: flex-start;
}

.blog-post-content .row.row-y-bottom {
    -ms-flex-align: end;
    -webkit-box-align: end;
    align-items: flex-end;
}

.blog-post-content .row.row-y-center {
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
}

.blog-post-content .row.row-stretch {
    -ms-flex-align: stretch;
    -webkit-box-align: stretch;
    align-items: stretch;
}

.blog-post-content .row.row-baseline {
    -ms-flex-align: baseline;
    -webkit-box-align: baseline;
    align-items: baseline;
}

.blog-post-content .row.row-x-left {
    -ms-flex-pack: start;
    -webkit-box-pack: start;
    justify-content: flex-start;
}

.blog-post-content .row.row-x-right {
    -ms-flex-pack: end;
    -webkit-box-pack: end;
    justify-content: flex-end;
}

.blog-post-content .row.row-x-center {
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
}

/* flex item utility alignment classes */
.blog-post-content .align-center {
    margin: auto;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

.blog-post-content .align-left {
    margin-right: auto;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

.blog-post-content .align-right {
    margin-left: auto;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

.blog-post-content .align-x-center {
    margin-right: auto;
    margin-left: auto;
}

.blog-post-content .align-x-left {
    margin-right: auto;
}

.blog-post-content .align-x-right {
    margin-left: auto;
}

.blog-post-content .align-y-center {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

.blog-post-content .align-y-top {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.blog-post-content .align-y-bottom {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

/* ------------------------------------------------------------------- 
 * ## Large Screen Column Widths (optimized)
 * ------------------------------------------------------------------- */
.blog-post-content .large-1 {
    -ms-flex: var(--flex-column-base) 8.33333%;
    -webkit-box-flex: 0;
    flex: var(--flex-column-base) 8.33333%;
    max-width: 8.33333%;
}

.blog-post-content .large-2 {
    -ms-flex: var(--flex-column-base) 16.66667%;
    -webkit-box-flex: 0;
    flex: var(--flex-column-base) 16.66667%;
    max-width: 16.66667%;
}

.blog-post-content .large-3 {
    -ms-flex: var(--flex-25);
    -webkit-box-flex: 0;
    flex: var(--flex-25);
    max-width: 25%;
}

.blog-post-content .large-4 {
    -ms-flex: var(--flex-33);
    -webkit-box-flex: 0;
    flex: var(--flex-33);
    max-width: 33.33333%;
}

.blog-post-content .large-5 {
    -ms-flex: var(--flex-column-base) 41.66667%;
    -webkit-box-flex: 0;
    flex: var(--flex-column-base) 41.66667%;
    max-width: 41.66667%;
}

.blog-post-content .large-6 {
    -ms-flex: var(--flex-50);
    -webkit-box-flex: 0;
    flex: var(--flex-50);
    max-width: 50%;
}

.blog-post-content .large-7 {
    -ms-flex: var(--flex-column-base) 58.33333%;
    -webkit-box-flex: 0;
    flex: var(--flex-column-base) 58.33333%;
    max-width: 58.33333%;
}

.blog-post-content .large-8 {
    -ms-flex: var(--flex-column-base) 66.66667%;
    -webkit-box-flex: 0;
    flex: var(--flex-column-base) 66.66667%;
    max-width: 66.66667%;
}

.blog-post-content .large-9 {
    -ms-flex: var(--flex-column-base) 75%;
    -webkit-box-flex: 0;
    flex: var(--flex-column-base) 75%;
    max-width: 75%;
}

.blog-post-content .large-10 {
    -ms-flex: var(--flex-column-base) 83.33333%;
    -webkit-box-flex: 0;
    flex: var(--flex-column-base) 83.33333%;
    max-width: 83.33333%;
}

.blog-post-content .large-11 {
    -ms-flex: var(--flex-column-base) 91.66667%;
    -webkit-box-flex: 0;
    flex: var(--flex-column-base) 91.66667%;
    max-width: 91.66667%;
}

.blog-post-content .large-12 {
    -ms-flex: var(--flex-100);
    -webkit-box-flex: 0;
    flex: var(--flex-100);
    max-width: 100%;
}

/* ------------------------------------------------------------------- 
 * ## Medium Screen Column Widths (≤1200px)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .blog-post-content .row .row {
        margin-left: calc(var(--gutter-md) * -1);
        margin-right: calc(var(--gutter-md) * -1);
    }
    .blog-post-content .column {
        padding: 0 var(--gutter-md);
    }
    .blog-post-content .medium-1 {
        -ms-flex: 0 0 8.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }
    .blog-post-content .medium-2 {
        -ms-flex: 0 0 16.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    .blog-post-content .medium-3 {
        -ms-flex: 0 0 25%;
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .blog-post-content .medium-4 {
        -ms-flex: 0 0 33.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    .blog-post-content .medium-5 {
        -ms-flex: 0 0 41.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }
    .blog-post-content .medium-6 {
        -ms-flex: 0 0 50%;
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .blog-post-content .medium-7 {
        -ms-flex: 0 0 58.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }
    .blog-post-content .medium-8 {
        -ms-flex: 0 0 66.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    .blog-post-content .medium-9 {
        -ms-flex: 0 0 75%;
        -webkit-box-flex: 0;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .blog-post-content .medium-10 {
        -ms-flex: 0 0 83.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }
    .blog-post-content .medium-11 {
        -ms-flex: 0 0 91.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }
    .blog-post-content .medium-12 {
        -ms-flex: 0 0 100%;
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------- 
 * ## Tablet Column Widths (≤800px)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
    .blog-post-content .row {
        width: 94%;
    }
    .blog-post-content .tab-1 {
        -ms-flex: 0 0 8.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }
    .blog-post-content .tab-2 {
        -ms-flex: 0 0 16.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    .blog-post-content .tab-3 {
        -ms-flex: 0 0 25%;
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .blog-post-content .tab-4 {
        -ms-flex: 0 0 33.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    .blog-post-content .tab-5 {
        -ms-flex: 0 0 41.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }
    .blog-post-content .tab-6 {
        -ms-flex: 0 0 50%;
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .blog-post-content .tab-7 {
        -ms-flex: 0 0 58.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }
    .blog-post-content .tab-8 {
        -ms-flex: 0 0 66.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    .blog-post-content .tab-9 {
        -ms-flex: 0 0 75%;
        -webkit-box-flex: 0;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .blog-post-content .tab-10 {
        -ms-flex: 0 0 83.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }
    .blog-post-content .tab-11 {
        -ms-flex: 0 0 91.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }
    .blog-post-content .tab-12 {
        -ms-flex: 0 0 100%;
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .blog-post-content .hide-on-tablet {
        display: none;
    }
}

/* ------------------------------------------------------------------- 
 * ## Mobile Column Widths (≤600px)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    .blog-post-content .row {
        width: 100%;
        padding-left: 6vw;
        padding-right: 6vw;
    }
    .blog-post-content .row .row {
        margin-left: calc(var(--gutter-mob) * -1);
        margin-right: calc(var(--gutter-mob) * -1);
        padding-left: 0;
        padding-right: 0;
    }
    .blog-post-content .column {
        padding: 0 var(--gutter-mob);
    }
    .blog-post-content .mob-1 {
        -ms-flex: 0 0 8.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }
    .blog-post-content .mob-2 {
        -ms-flex: 0 0 16.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    .blog-post-content .mob-3 {
        -ms-flex: 0 0 25%;
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .blog-post-content .mob-4 {
        -ms-flex: 0 0 33.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    .blog-post-content .mob-5 {
        -ms-flex: 0 0 41.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }
    .blog-post-content .mob-6 {
        -ms-flex: 0 0 50%;
        -webkit-box-flex: 0;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .blog-post-content .mob-7 {
        -ms-flex: 0 0 58.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }
    .blog-post-content .mob-8 {
        -ms-flex: 0 0 66.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    .blog-post-content .mob-9 {
        -ms-flex: 0 0 75%;
        -webkit-box-flex: 0;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .blog-post-content .mob-10 {
        -ms-flex: 0 0 83.33333%;
        -webkit-box-flex: 0;
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }
    .blog-post-content .mob-11 {
        -ms-flex: 0 0 91.66667%;
        -webkit-box-flex: 0;
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }
    .blog-post-content .mob-12 {
        -ms-flex: 0 0 100%;
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .blog-post-content .hide-on-mobile {
        display: none;
    }
}

/* ------------------------------------------------------------------- 
 * ## Small Mobile (≤400px)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 400px) {
    .blog-post-content .row .row {
        margin-left: 0;
        margin-right: 0;
    }
    .blog-post-content .column {
        -ms-flex: 0 0 100%;
        -webkit-box-flex: 0;
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
}

/* ------------------------------------------------------------------- 
 * ## Blog-Specific Heading Styles
 * ------------------------------------------------------------------- */
.blog-post-content h1, 
.blog-post-content h2, 
.blog-post-content h3, 
.blog-post-content h4, 
.blog-post-content h5, 
.blog-post-content h6, 
.blog-post-content .h1, 
.blog-post-content .h2, 
.blog-post-content .h3, 
.blog-post-content .h4, 
.blog-post-content .h5, 
.blog-post-content .h6 {
    font-family: var(--font-2) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    color: var(--color-text-dark) !important;
    -webkit-font-variant-ligatures: common-ligatures;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
}

.blog-post-content h1, 
.blog-post-content .h1 {
    margin-top: var(--vspace-2_5) !important;
    margin-bottom: var(--vspace-0_75) !important;
}

.blog-post-content h2, 
.blog-post-content .h2, 
.blog-post-content h3, 
.blog-post-content .h3, 
.blog-post-content h4, 
.blog-post-content .h4 {
    margin-top: var(--vspace-2) !important;
    margin-bottom: var(--vspace-0_5) !important;
}

.blog-post-content h5, 
.blog-post-content .h5, 
.blog-post-content h6, 
.blog-post-content .h6 {
    margin-top: var(--vspace-1_5) !important;
    margin-bottom: var(--vspace-0_5) !important;
}

.blog-post-content h1, 
.blog-post-content .h1 {
    font-size: var(--text-display-1) !important;
    line-height: var(--vspace-2) !important;
    letter-spacing: -.015em !important;
}

@media screen and (max-width: 600px) {
    .blog-post-content h1, 
    .blog-post-content .h1 {
        font-size: var(--text-xxxl) !important;
        line-height: var(--vspace-1_75) !important;
    }
}

.blog-post-content h2, 
.blog-post-content .h2 {
    font-size: var(--text-xxl) !important;
    line-height: var(--vspace-1_5) !important;
}

.blog-post-content h3, 
.blog-post-content .h3 {
    font-size: var(--text-xl) !important;
    line-height: var(--vspace-1_25) !important;
}

.blog-post-content h4, 
.blog-post-content .h4 {
    font-size: var(--text-lg) !important;
    line-height: var(--vspace-1) !important;
}

.blog-post-content h5, 
.blog-post-content .h5 {
    font-size: var(--text-md) !important;
    line-height: var(--vspace-0_875) !important;
}

.blog-post-content h6, 
.blog-post-content .h6 {
    font-size: calc(var(--text-size) * 0.8889) !important;
    font-weight: 700 !important;
    line-height: var(--vspace-0_75) !important;
    text-transform: uppercase !important;
    letter-spacing: .25em !important;
}

.blog-post-content .lead, 
.blog-post-content .attention-getter {
    font-family: var(--font-2) !important;
    font-weight: 300 !important;
    font-size: var(--text-md) !important;
    line-height: calc(1.125 * var(--space)) !important;
    color: var(--color-text-dark) !important;
}

@media screen and (max-width: 400px) {
    .blog-post-content .lead, 
    .blog-post-content .attention-getter {
        font-size: calc(var(--text-size) * 1.0556) !important;
    }
}

/* ------------------------------------------------------------------- 
 * ## Blog-Specific Text and Typography Elements
 * ------------------------------------------------------------------- */
.blog-post-content figure img, 
.blog-post-content p img {
    margin: 0;
    vertical-align: bottom;
}

.blog-post-content em, 
.blog-post-content i:not([class*="fa"]), 
.blog-post-content strong, 
.blog-post-content b {
    font-size: inherit;
    line-height: inherit;
}

.blog-post-content em, 
.blog-post-content i:not([class*="fa"]) {
    font-family: var(--font-1) !important;
    font-style: italic !important;
}

/* FontAwesome icon support */
.blog-post-content i[class*="fa"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

.blog-post-content strong, 
.blog-post-content b {
    font-family: var(--font-1) !important;
    font-weight: 600 !important;
    color: var(--color-text-dark) !important;
}

.blog-post-content small {
    font-size: var(--text-sm) !important;
    font-weight: 500 !important;
    line-height: var(--vspace-0_5) !important;
}

.blog-post-content figure {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

.blog-post-content figure img+figcaption {
    margin-top: var(--vspace-1);
}

.blog-post-content figcaption {
    font-size: var(--text-sm);
    text-align: center;
    margin-bottom: 0;
}

.blog-post-content var, 
.blog-post-content kbd, 
.blog-post-content samp, 
.blog-post-content code, 
.blog-post-content pre {
    font-family: "Consolas", "Monaco", "Courier New", monospace;
}

.blog-post-content pre {
    padding: var(--vspace-0_75) var(--vspace-1) var(--vspace-1);
    background: var(--color-gray-1);
    overflow-x: auto;
}

.blog-post-content code {
    font-size: var(--text-sm);
    line-height: 1.6rem;
    margin: 0 .2rem;
    padding: calc(((var(--vspace-1) - 1.6rem) / 2) - .1rem) calc(.8rem - .1rem);
    white-space: nowrap;
    background: var(--color-gray-1);
    border: 1px solid var(--color-gray-3);
    color: var(--color-text);
    border-radius: 3px;
}

.blog-post-content pre>code {
    display: block;
    white-space: pre;
    line-height: var(--vspace-1);
    padding: 0;
    margin: 0;
    border: none;
}

.blog-post-content del {
    text-decoration: line-through;
}

.blog-post-content abbr {
    font-variant: small-caps;
    font-weight: 600;
    text-transform: lowercase;
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

.blog-post-content abbr[title], 
.blog-post-content dfn[title] {
    cursor: help;
    border-bottom: 1px dotted var(--color-text-light);
}

.blog-post-content mark {
    background: #ffef8a;
    color: var(--color-text-dark);
}

.blog-post-content hr {
    border: solid var(--color-gray-3);
    border-width: 1px 0 0;
    clear: both;
    margin: var(--vspace-2) 0 calc(var(--vspace-2) - 1px);
    height: 0;
}

.blog-post-content hr.fancy {
    border: 0;
    height: 1px;
    background-color: transparent;
    background-image: linear-gradient(90deg, transparent, var(--color-gray-5), transparent);
}

.blog-post-content hr.fancy::before {
    content: "";
    display: table;
}

/* ------------------------------------------------------------------- 
 * ## Blog-Specific List Styling (from Abstract theme)
 * Adapted for 20px base font size
 * ------------------------------------------------------------------- */

/* Default list styles */
.blog-post-content ol {
    list-style: decimal;
    margin-left: 0.8rem;    /* 16px with 20px base (was 1.6rem with 10px base) */
}

.blog-post-content ul {
    list-style: disc;
    margin-left: 0.8rem;    /* 16px with 20px base (was 1.6rem with 10px base) */
}

.blog-post-content li {
    display: list-item;
}

.blog-post-content ol, 
.blog-post-content ul {
    margin-bottom: var(--vspace-1);  /* 20px bottom margin */
}

.blog-post-content ul li {
    padding-left: 0.2rem;   /* 4px with 20px base (was 0.4rem with 10px base) */
}

.blog-post-content ul ul, 
.blog-post-content ul ol, 
.blog-post-content ol ol, 
.blog-post-content ol ul {
    margin: 0.8rem 0 0.8rem 0.8rem;  /* 16px margins (was 1.6rem with 10px base) */
}

/* Special disc style with custom bullets */
.blog-post-content ul.disc li {
    display: list-item;
    list-style: none;
    padding: 0 0 0 0.4rem;  /* 8px with 20px base (was 0.8rem with 10px base) */
    position: relative;
}

.blog-post-content ul.disc li::before {
    content: "";
    display: inline-block;
    width: var(--vspace-0_25);   /* 4px */
    height: var(--vspace-0_25);  /* 4px */
    border-radius: 50%;
    background: var(--color-1-dark, #333);  /* Fallback color */
    position: absolute;
    left: -0.45em;     /* Adjusted for 20px base */
    top: 0.65em;       /* Adjusted for 20px base */
    vertical-align: middle;
}

/* ------------------------------------------------------------------- 
 * ## Blog-Specific Utility Width Classes
 * ------------------------------------------------------------------- */
.blog-post-content .wide {
    max-width: var(--width-wide);
}

.blog-post-content .wider {
    max-width: var(--width-wider);
}

.blog-post-content .narrow {
    max-width: var(--width-narrow);
}

.blog-post-content .narrower {
    max-width: var(--width-narrower);
}

/* ------------------------------------------------------------------- 
 * ## Blog-Specific Image Float Classes
 * For images and video containers that should float within paragraphs with text wrapping
 * ------------------------------------------------------------------- */
.blog-post-content .h-pull-left {
    float: left;
    margin: 0 var(--vspace-1) var(--vspace-0_5) 0 !important;  /* 20px right, 8px bottom */
}

.blog-post-content .h-pull-right {
    float: right;
    margin: 0 0 var(--vspace-0_5) var(--vspace-1) !important;  /* 8px bottom, 20px left */
}

.blog-post-content .h-pull-left,
.blog-post-content .h-pull-right {
    max-width: 50%;
    height: auto;
    border-radius: 0.25rem;  /* 5px with 20px base */
}

/* Ensure video containers also get proper sizing when floating */
.blog-post-content .video-container.h-pull-left,
.blog-post-content .video-container.h-pull-right {
    max-width: 50%;
}

/* Clear floats for proper layout */
.blog-post-content .h-clear {
    clear: both;
}

/* Responsive adjustments for floating images and videos */
@media screen and (max-width: 600px) {
    .blog-post-content .h-pull-left,
    .blog-post-content .h-pull-right,
    .blog-post-content .video-container.h-pull-left,
    .blog-post-content .video-container.h-pull-right {
        float: none;
        margin: var(--vspace-0_5) auto;
        display: block;
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------- 
 * ## Blog-Specific Responsive Video Container
 * Adapted from Abstract theme for embedded videos (YouTube, etc.)
 * ------------------------------------------------------------------- */
.blog-post-content .video-container {
    max-width: 40rem;        /* 800px with 20px base (was 80rem with 10px base) */
    margin: 1rem auto;       /* 20px with 20px base (was 2rem with 10px base) */
    border-radius: 0.4rem;   /* 8px with 20px base */
    overflow: hidden;
    box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,0.1);
}

.blog-post-content .video-container .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.blog-post-content .video-container iframe, 
.blog-post-content .video-container object, 
.blog-post-content .video-container embed, 
.blog-post-content .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.blog-post-content .video-caption {
    padding: 0.5rem;         /* 10px with 20px base (was 1rem with 10px base) */
    background: #f5f5f5;
    margin: 0;
    font-size: 0.9rem;      /* 9px with 20px base (was 0.9rem with 10px base) */
    color: #666;
    line-height: 1.4;
}