.blog-container {
    max-width: 1100px;
    /* margin: 0 auto; */
    padding: 20px 5px;
}

/* MAIN 2-COLUMN LAYOUT */
.blog-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* MAIN ARTICLE */
.blog-main {
    flex: 1;
    max-width: 750px;
}

/* SIDEBAR */
.blog-sidebar {
    width: 260px; 
    position: sticky;
    top: 100px;
    height: fit-content;
}

/* TABLE OF CONTENTS BOX */
.toc {
    background: #fff;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 10px;
}

.toc h3 {
    font-size: 14px;
    margin-bottom: 10px;
}

.toc a {
    display: block;
    font-size: 13px;
    margin: 8px 0;
    color: #333;
    text-decoration: none;
}

.toc a:hover {
    color: #FB470D;
}

/* MOBILE RESPONSIVE */
@media (max-width: 900px) {
    .blog-layout {
        flex-direction: column;
    }

    .blog-sidebar {
        display: none;
    }

    .blog-main {
        max-width: 100%;
    }
}

/* IMPROVE READABILITY */
.blog-main p {
    line-height: 1.8;
    margin: 0 0 16px;
    /* font-size: 16px; */ 
    color: #333;
}

.blog-main h1 {
    /* font-size: 28px; */
}

.blog-main h2 {
    margin-top: 30px;
}

/* QUICK ANSWER ORANGE BOX */
.quick-answer-orange {
    margin: 24px 0 30px;
    padding: 18px 20px;
    border: 1px solid #ffd8c9;
    border-left: 4px solid #fb470d;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff7f2, #ffffff);
    box-shadow: 0 5px 16px rgba(35, 35, 35, 0.05);
}

.quick-answer-orange-title {
    margin: 0 0 8px;
    color: #222;
    font-size: 16px;
    font-weight: 700;
}

.quick-answer-orange p:last-child {
    margin-bottom: 0;
}

.quick-answer-grey {
    background:#f9f9f9; 
    padding:15px; 
    border-radius:8px; 
    margin:20px 0;
}

/* ---------- Modern article layout ---------- */
.blog.pageContent {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

.blog.pageContent .blogPostImage {
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(15, 22, 38, .12);
}

.blog.pageContent .blog-container {
    max-width: none;
    padding: 28px 0 0;
}

.blog-layout {
    gap: 48px;
}

.blog-main {
    min-width: 0;
    max-width: 760px;
}

.blog-main h1 {
    margin: 0 0 12px;
    color: #0f1626;
    font-size: clamp(28px, 4.5vw, 40px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.blog-main > p:first-of-type[style] {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff1ea;
    color: #b8340f !important;
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 1.4;
}

.blog-main p,
.blog-main li {
    color: #2b3140;
    font-size: 17px;
    line-height: 1.85;
}

.blog-main p {
    margin: 0 0 20px;
}

.blog-main h2,
.pageContent .blog-main h2 {
    position: relative;
    margin: 44px 0 14px;
    padding-left: 16px;
    color: #0f1626;
    font-size: clamp(21px, 3vw, 27px);
    font-weight: 800;
    line-height: 1.3;
    scroll-margin-top: 90px;
}

.blog-main h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(#ff7a4d, #F04A23);
}

.pageContent .blog-main h3 {
    margin: 28px 0 10px;
    color: #0f1626;
    font-size: 19px;
    font-weight: 700;
}

.blog-main ul,
.blog-main ol {
    margin: 0 0 22px;
    padding-left: 22px;
}

.blog .blog-main li {
    list-style-position: outside;
    margin-bottom: 8px;
}

.pageContent .blog-main a {
    color: #d93a12;
    text-decoration: underline;
    text-decoration-color: rgba(217, 58, 18, .35);
    text-underline-offset: 3px;
}

.pageContent .blog-main a:hover {
    text-decoration-color: currentColor;
}

.blog-main img {
    max-width: 100%;
    height: auto;
}

.blog-main table {
    display: block;
    width: 100%;
    margin: 24px 0;
    overflow-x: auto;
    border-collapse: collapse;
    border: 1px solid #eceef3;
    border-radius: 14px;
    font-size: 15px;
}

.blog-main th {
    padding: 12px 14px;
    background: #0f1626;
    color: #fff;
    text-align: left;
    white-space: nowrap;
}

.blog-main td {
    padding: 12px 14px;
    border-top: 1px solid #eceef3;
    color: #2b3140;
}

.blog-main tr:nth-child(even) td {
    background: #fafbfc;
}

.blog-main .quick-answer-orange {
    border-radius: 16px;
    padding: 20px 22px;
}

.blog-main .quick-answer-grey,
.blog-main .orange-box {
    padding: 18px 20px;
    border-radius: 14px;
}

.blog-main .author-info {
    padding: 22px !important;
    border: 1px solid #eceef3;
    border-radius: 16px !important;
    background: #fafbfc !important;
}

.blog-main .author-info p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.blog-main .shareArticle hr {
    border: 0;
    border-top: 1px solid #eceef3;
}

.blog-main .shareArticle a {
    padding: 9px 16px !important;
    border-radius: 999px !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s;
}

.blog-main .shareArticle a:hover,
.blog-main #copyLinkBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 22, 38, .15);
}

.blog-main #copyLinkBtn {
    padding: 9px 16px !important;
    border-radius: 999px !important;
    transition: transform .2s, box-shadow .2s;
}

/* Sidebar */
.blog-sidebar {
    top: 90px;
    width: 280px;
    flex: 0 0 280px;
}

.toc {
    padding: 22px;
    border: 1px solid #eceef3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 22, 38, .06);
}

.toc h3 {
    margin: 0 0 12px;
    color: #0f1626;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.toc a {
    margin: 0;
    padding: 9px 12px;
    border-left: 2px solid #eceef3;
    color: #4a5163;
    font-size: 14px;
    line-height: 1.4;
    transition: color .2s, border-color .2s, background .2s;
}

.toc a:hover {
    border-left-color: #F04A23;
    background: #fff7f2;
    color: #d93a12;
}

.toc a[target="_blank"] {
    margin-top: 14px;
    padding: 12px 16px !important;
    border: 0;
    border-radius: 12px !important;
    background: #F04A23 !important;
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    display: block !important;
}

.toc a[target="_blank"]:hover {
    background: #d93a12 !important;
    color: #fff !important;
}

@media (max-width: 900px) {
    .blog-layout {
        gap: 0;
    }

    .blog-main p,
    .blog-main li {
        font-size: 16px;
        line-height: 1.8;
    }

    .blog.pageContent .blogPostImage {
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-main .shareArticle a,
    .blog-main #copyLinkBtn,
    .toc a {
        transition: none;
    }
}

.orange-box {
    background:#fff4ef; 
    padding:15px; 
    border-radius:8px; 
    margin:20px 0;
}