/*
 * SARGODEANS FURNITURE
 * Public Blog Content Styling
 * Active public stylesheet for formatted article content.
 */

.blog-content{
    width:100%;
    max-width:900px;
    margin:0 auto;
    font-family:var(--font-body,"Poppins",Arial,sans-serif);
    font-size:17px;
    line-height:1.85;
    color:var(--ink-soft,#333);
}

.blog-content p{margin:0 0 22px;}

.blog-content h2,
.blog-content h3,
.blog-content h4{
    font-family:var(--font-display,"Cormorant Garamond",Georgia,serif);
    color:var(--forest-deep,#102b24);
    font-weight:700;
    letter-spacing:-.01em;
}

.blog-content h2{
    margin:44px 0 17px;
    font-size:clamp(1.8rem,3vw,2.35rem);
    line-height:1.25;
}

.blog-content h3{
    margin:34px 0 14px;
    font-size:clamp(1.5rem,2.5vw,1.9rem);
    line-height:1.3;
}

.blog-content h4{
    margin:28px 0 12px;
    font-size:clamp(1.25rem,2vw,1.55rem);
    line-height:1.35;
}

.blog-content strong{
    font-weight:700;
    color:var(--ink,#222);
}

.blog-content em{font-style:italic;}

.blog-content ul,
.blog-content ol{
    margin:0 0 26px;
    padding-left:30px;
}

.blog-content li{
    margin:0 0 9px;
    padding-left:4px;
    line-height:1.75;
}

.blog-content li::marker{color:var(--brass,#C8A45C);}

.blog-content blockquote{
    position:relative;
    margin:34px 0;
    padding:23px 26px 23px 28px;
    border-left:4px solid var(--brass,#C8A45C);
    border-radius:0 10px 10px 0;
    background:var(--ivory,#f8f6f1);
    color:var(--ink-soft,#444);
    font-family:var(--font-display,"Cormorant Garamond",Georgia,serif);
    font-size:clamp(1.2rem,2vw,1.45rem);
    line-height:1.6;
    font-style:italic;
}

.blog-content a{
    color:var(--forest,#183c32);
    text-decoration:underline;
    text-decoration-color:var(--brass,#C8A45C);
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

.blog-content a:hover{color:var(--brass,#C8A45C);}

.blog-content img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    margin:30px auto;
    border-radius:10px;
}

.blog-content hr{
    border:0;
    border-top:1px solid var(--line,#e5e5e5);
    margin:36px 0;
}

@media(max-width:768px){
    .blog-content{font-size:16px;line-height:1.78;}
    .blog-content h2{margin-top:34px;}
    .blog-content h3{margin-top:28px;}
    .blog-content h4{margin-top:24px;}
    .blog-content blockquote{padding:18px 20px;font-size:1.18rem;}
    .blog-content ul,.blog-content ol{padding-left:24px;}
}

@media(max-width:480px){
    .blog-content{font-size:15.5px;}
    .blog-content p{margin-bottom:19px;}
    .blog-content blockquote{margin:26px 0;}
}