/* ==========================================================================
   Blog single post — SmartFX Design System
   gradient #6a5be2→#4535ad · lilac #efeaff/#e3dbfa · accent #5a4bd6
   text #2a2350/#6f6a86/#9a97ad · gold #ffd35a · radius 18–22px
   Scoped to body.single-post so nothing else on the site is touched.
   ========================================================================== */

body.single-post {
    --sfx-grad: linear-gradient(150deg, #6a5be2, #4535ad);
    --sfx-lilac: #efeaff;
    --sfx-lilac-2: #e3dbfa;
    --sfx-accent: #5a4bd6;
    --sfx-accent-dk: #4535ad;
    --sfx-ink: #2a2350;
    --sfx-ink-2: #6f6a86;
    --sfx-ink-3: #9a97ad;
    --sfx-gold: #ffd35a;
    --sfx-body: #35315a;
    --sfx-shadow: 0 18px 45px -24px rgba(69, 53, 173, 0.42);
    --sfx-shadow-sm: 0 10px 26px -18px rgba(69, 53, 173, 0.4);
    background:
        radial-gradient(1100px 460px at 100% -8%, rgba(106, 91, 226, 0.08), transparent 60%),
        #f6f4fd;
}

/* ============================ Article card ============================ */
body.single-post .rem-box {
    background: #fff;
    border: 1px solid rgba(227, 219, 250, 0.75);
    border-radius: 22px !important;
    box-shadow: var(--sfx-shadow);
}

/* ============================ Title ============================ */
body.single-post .post-title {
    color: var(--sfx-ink);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: -0.2px;
    position: relative;
    padding-top: 14px;
}
body.single-post .post-title::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    height: 5px;
    border-radius: 999px;
    background: var(--sfx-grad);
}

/* ============================ Meta bar ============================ */
body.single-post .post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.9rem !important;
    color: var(--sfx-ink-2) !important;
}
body.single-post .post-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--sfx-lilac);
    color: var(--sfx-ink) !important;
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
}
body.single-post .post-meta > span i { color: var(--sfx-accent); font-size: 13px; }
body.single-post .post-meta > span.mx-2 { display: none; } /* hide the "|" divider */

/* ============================ Featured image ============================ */
body.single-post .post-thumbnail img {
    border-radius: 18px !important;
    box-shadow: var(--sfx-shadow-sm) !important;
    width: 100%;
}

/* ============================ Article content typography ============================ */
body.single-post #blogArticleContent {
    color: var(--sfx-body);
    font-size: 16.5px;
    line-height: 2.05;
    text-align: justify;
}
body.single-post #blogArticleContent p { margin: 0 0 1.15rem; }

body.single-post #blogArticleContent h2,
body.single-post #blogArticleContent h3,
body.single-post #blogArticleContent h4 {
    color: var(--sfx-ink);
    font-weight: 800;
    line-height: 1.6;
    margin: 2.2rem 0 1rem;
    scroll-margin-top: 110px;
}
body.single-post #blogArticleContent h2 {
    font-size: 1.5rem;
    padding-right: 14px;
    border-right: 4px solid var(--sfx-accent);
}
body.single-post #blogArticleContent h3 {
    font-size: 1.25rem;
    color: var(--sfx-accent-dk);
    padding-right: 12px;
    position: relative;
}
body.single-post #blogArticleContent h3::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sfx-accent);
}
body.single-post #blogArticleContent h4 { font-size: 1.1rem; font-weight: 700; }

body.single-post #blogArticleContent a {
    color: var(--sfx-accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(90, 75, 214, 0.4);
    transition: color 0.2s ease;
}
body.single-post #blogArticleContent a:hover {
    color: var(--sfx-accent-dk);
    text-decoration-color: var(--sfx-accent-dk);
}

body.single-post #blogArticleContent ul,
body.single-post #blogArticleContent ol { padding-right: 1.4rem; margin: 0 0 1.15rem; }
body.single-post #blogArticleContent li { margin-bottom: 0.55rem; line-height: 1.95; }
body.single-post #blogArticleContent ul li::marker { color: var(--sfx-accent); }
body.single-post #blogArticleContent ol li::marker { color: var(--sfx-accent); font-weight: 700; }

body.single-post #blogArticleContent blockquote {
    background: var(--sfx-lilac);
    border-right: 5px solid var(--sfx-gold);
    border-radius: 14px;
    padding: 16px 20px;
    margin: 1.5rem 0;
    color: var(--sfx-ink);
    font-weight: 500;
}
body.single-post #blogArticleContent blockquote p:last-child { margin-bottom: 0; }

body.single-post #blogArticleContent img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: var(--sfx-shadow-sm);
    margin: 0.5rem 0;
}
body.single-post #blogArticleContent hr {
    border: none;
    border-top: 1px solid var(--sfx-lilac-2);
    margin: 1.75rem 0;
}
body.single-post #blogArticleContent strong { color: var(--sfx-ink); font-weight: 700; }

/* Article tables — override the theme's global !important table styling */
body.single-post #blogArticleContent table {
    border-radius: 16px !important;
    box-shadow: var(--sfx-shadow-sm) !important;
    border: 1px solid var(--sfx-lilac-2) !important;
    overflow: hidden !important;
}
body.single-post #blogArticleContent thead { background: var(--sfx-grad) !important; }
body.single-post #blogArticleContent thead th {
    color: #fff !important;
    border: none !important;
    border-color: transparent !important;
    font-weight: 700 !important;
}
body.single-post #blogArticleContent td { color: var(--sfx-body) !important; border-color: #f0ecfb !important; }
body.single-post #blogArticleContent tbody tr:nth-child(even) { background: #faf9ff !important; }
body.single-post #blogArticleContent table tbody tr:hover { background: var(--sfx-lilac) !important; }
/* Editor tables have no <thead>; treat the first body row as the header */
body.single-post #blogArticleContent table tbody tr:first-child { background: var(--sfx-grad) !important; }
body.single-post #blogArticleContent table tbody tr:first-child td {
    color: #fff !important;
    font-weight: 700 !important;
    border-color: transparent !important;
}
body.single-post #blogArticleContent table tbody tr:first-child:hover { background: var(--sfx-grad) !important; }

/* ============================ Sidebar ============================ */
/* Smooth native sticky. The old JS toggled `position:fixed`, which yanked the
   ad+TOC block out of flow (sudden jump) and let it overlap the popular-posts
   widget. Here the sidebar column simply stretches to the article's height so
   `position: sticky` has room to travel the whole way down — no JS, no jump. */
body.single-post .row > .col-md-3 {
    display: flex;
    flex-direction: column;
}
body.single-post .blog-sidebar {
    position: static;
    top: auto;
    flex: 1 1 auto;
    height: auto;
}
body.single-post .blog-sidebar-ad-toc-sticky {
    position: sticky;
    top: 90px;
    z-index: 20;
    max-height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
}
/* let the TOC list scroll inside instead of the block overflowing the viewport */
body.single-post .blog-sidebar-ad-toc-sticky > .blog-sidebar-widget:last-child {
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
body.single-post .blog-sidebar-ad-toc-sticky .blog-toc-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}
/* neutralize the retired JS class if it ever lands */
body.single-post .blog-sidebar-ad-toc-sticky.sidebar-fixed {
    position: sticky !important;
    top: 90px !important;
    max-width: none;
    overflow: visible;
}

@media (max-width: 991px) {
    body.single-post .row > .col-md-3 { display: block; }
    body.single-post .blog-sidebar-ad-toc-sticky {
        position: static;
        max-height: none;
        display: block;
    }
    body.single-post .blog-sidebar-ad-toc-sticky .blog-toc-content {
        max-height: 400px;
        overflow-y: auto;
    }
    body.single-post .blog-sidebar-ad-toc-sticky > .blog-sidebar-widget:last-child {
        display: block;
    }
}

body.single-post .blog-sidebar-widget {
    border: 1px solid rgba(227, 219, 250, 0.9);
    border-radius: 18px;
    box-shadow: var(--sfx-shadow-sm);
}
body.single-post .blog-sidebar-title {
    color: var(--sfx-ink);
    border-bottom: 2px solid var(--sfx-lilac);
}
body.single-post .blog-sidebar-title i { color: var(--sfx-accent); }

body.single-post .blog-popular-link:hover { background: var(--sfx-lilac); }
body.single-post .blog-popular-link:hover .blog-popular-title { color: var(--sfx-accent); }
body.single-post .blog-popular-thumb { border: 1px solid var(--sfx-lilac-2); border-radius: 10px; }
body.single-post .blog-popular-title { color: var(--sfx-ink); }
body.single-post .blog-popular-date {
    display: inline-flex;
    background: var(--sfx-lilac);
    color: var(--sfx-accent);
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 600;
}
body.single-post .blog-popular-date i { color: var(--sfx-accent); }

body.single-post .blog-toc-item a:hover { color: var(--sfx-accent); }
body.single-post .blog-toc-item.active a {
    color: var(--sfx-accent);
    border-right: 3px solid var(--sfx-accent);
}
body.single-post .blog-toc-content::-webkit-scrollbar { width: 6px; }
body.single-post .blog-toc-content::-webkit-scrollbar-thumb { background: var(--sfx-lilac-2); border-radius: 4px; }
body.single-post .blog-toc-content::-webkit-scrollbar-thumb:hover { background: var(--sfx-accent); }

/* ============================ FAQ accordion ============================ */
body.single-post #faq-container h5 { color: var(--sfx-ink) !important; font-weight: 700 !important; }
body.single-post .smartfx-faq-item {
    border: 1px solid var(--sfx-lilac-2);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}
body.single-post .smartfx-faq-button {
    background: #fff;
    transition: background 0.2s ease;
}
body.single-post .smartfx-faq-button:hover,
body.single-post .smartfx-faq-button:not(.collapsed) { background: var(--sfx-lilac); }
body.single-post .smartfx-faq-question { color: var(--sfx-ink); font-weight: 600; }
body.single-post .smartfx-faq-button:not(.collapsed) .smartfx-faq-question { color: var(--sfx-accent-dk); }
body.single-post .smartfx-faq-icon { color: var(--sfx-accent); transition: transform 0.25s ease; }
body.single-post .smartfx-faq-button:not(.collapsed) .smartfx-faq-icon { transform: rotate(180deg); }
body.single-post .smartfx-faq-answer { color: var(--sfx-body); line-height: 1.95; }

/* ============================ Comments ============================ */
body.single-post #comment-form h4,
body.single-post #comments-section h3 { color: var(--sfx-ink); font-weight: 800; }
body.single-post #comment-form .form-label { color: var(--sfx-ink); font-weight: 600; }
body.single-post #comment-form .form-control,
body.single-post #comment-form .form-select {
    border: 1.5px solid var(--sfx-lilac-2);
    border-radius: 12px;
    padding: 10px 14px;
    color: var(--sfx-ink);
}
body.single-post #comment-form .form-control:focus,
body.single-post #comment-form .form-select:focus {
    border-color: var(--sfx-accent);
    box-shadow: 0 0 0 4px rgba(90, 75, 214, 0.12);
}
body.single-post #comment-form .btn-primary {
    background: var(--sfx-grad);
    border: none;
    border-radius: 999px;
    padding: 10px 28px;
    font-weight: 700;
    box-shadow: 0 12px 24px -12px rgba(69, 53, 173, 0.85);
}
body.single-post #comment-form .btn-primary:hover { filter: brightness(1.06); }
body.single-post #load-more-comments.btn-outline-primary {
    color: var(--sfx-accent);
    border: 1.5px solid var(--sfx-accent);
    border-radius: 999px;
    padding: 8px 24px;
    font-weight: 600;
}
body.single-post #load-more-comments.btn-outline-primary:hover {
    background: var(--sfx-accent);
    color: #fff;
}

/* ============================ Responsive ============================ */
@media (max-width: 768px) {
    body.single-post .post-title { font-size: 1.5rem; }
    body.single-post #blogArticleContent { font-size: 15.5px; line-height: 1.95; }
    body.single-post #blogArticleContent h2 { font-size: 1.25rem; }
    body.single-post #blogArticleContent h3 { font-size: 1.1rem; }
    body.single-post .rem-box { border-radius: 18px !important; }
}