/* ============================================================
   SB NEWS - NEXT LEVEL ARTICLE STYLING
   Version: 3.0 - Bismillah Edition
   - Clean premium design
   - Compact featured image with gradient border
   - Beautiful typography
   ============================================================ */

/* ============================================================
   1. HIDE KADENCE DEFAULT HEADER ON SINGLE POSTS
   ============================================================ */

.single-post .site-header,
.single-post #masthead,
.single-post header.site-header,
.single-post .site-header-wrap {
    display: none !important;
}

/* ============================================================
   2. ARTICLE CONTAINER - CLEAN BOX
   ============================================================ */

.single-post .content-wrap,
.single-post .site-main {
    background: #0A0A0B !important;
    padding-top: 20px !important;
}

.single-post .entry-content-wrap,
.single-post article.entry {
    background: linear-gradient(135deg, rgba(20, 20, 22, 0.95), rgba(15, 15, 17, 0.98)) !important;
    border: 1px solid rgba(124, 58, 237, 0.2) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    margin: 0 auto 40px auto !important;
    max-width: 800px !important;
    position: relative !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Gradient top accent line */
.single-post article.entry::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 40px !important;
    right: 40px !important;
    height: 3px !important;
    background: linear-gradient(90deg,
        transparent,
        #4F46E5 20%,
        #7C3AED 50%,
        #4F46E5 80%,
        transparent
    ) !important;
    border-radius: 0 0 4px 4px !important;
}

/* ============================================================
   3. FEATURED IMAGE - 50% SMALLER & CLEAN CONTAINER
   ============================================================ */

/* RESET Kadence forced aspect ratios */
.single-post .post-thumbnail.kadence-thumbnail-ratio-9-16,
.single-post .post-thumbnail[class*="kadence-thumbnail-ratio"] {
    padding-bottom: 0 !important;
    aspect-ratio: unset !important;
}

.single-post .post-thumbnail.kadence-thumbnail-ratio-9-16 .post-thumbnail-inner,
.single-post .post-thumbnail[class*="kadence-thumbnail-ratio"] .post-thumbnail-inner {
    position: relative !important;
    padding-bottom: 0 !important;
    height: auto !important;
}

/* Main thumbnail container - 50% width, centered, CLEAN */
.single-post .post-thumbnail.article-post-thumbnail,
.single-post .post-thumbnail {
    display: block !important;
    max-width: 50% !important;
    width: 50% !important;
    height: auto !important;
    margin: 0 auto 32px auto !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 2px solid rgba(124, 58, 237, 0.3) !important;
    box-shadow:
        0 12px 40px rgba(79, 70, 229, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

/* Inner container - clean, no padding */
.single-post .post-thumbnail-inner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
}

/* The actual image - fits container exactly */
.single-post .post-thumbnail img,
.single-post .wp-post-image,
.single-post .post-top-featured {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   4. ARTICLE TITLE - PREMIUM WHITE
   ============================================================ */

.single-post .entry-title,
.single-post h1.entry-title,
.single-post .post-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(28px, 5vw, 38px) !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 24px !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================
   5. ARTICLE META - CLEAN
   ============================================================ */

.single-post .entry-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    align-items: center !important;
    margin-bottom: 32px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid rgba(124, 58, 237, 0.15) !important;
}

.single-post .entry-meta span,
.single-post .entry-meta a,
.single-post .posted-on,
.single-post .byline,
.single-post .entry-author {
    color: #71717A !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
}

.single-post .entry-meta a:hover {
    color: #A78BFA !important;
}

/* Category badge */
.single-post .entry-taxonomies a,
.single-post .category-links a,
.single-post .cat-links a {
    background: rgba(124, 58, 237, 0.12) !important;
    border: 1px solid rgba(124, 58, 237, 0.25) !important;
    color: #A78BFA !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    transition: all 0.3s ease !important;
}

.single-post .entry-taxonomies a:hover {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #C4B5FD !important;
}

/* ============================================================
   6. CONTENT - HEADINGS WITH LEFT ACCENT
   ============================================================ */

.single-post .entry-content h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(22px, 3vw, 28px) !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 40px 0 20px 0 !important;
    padding-left: 20px !important;
    position: relative !important;
    border-left: 4px solid #7C3AED !important;
}

.single-post .entry-content h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(18px, 2.5vw, 22px) !important;
    font-weight: 600 !important;
    color: #F4F4F5 !important;
    margin: 32px 0 16px 0 !important;
    padding-left: 16px !important;
    border-left: 3px solid rgba(124, 58, 237, 0.5) !important;
}

.single-post .entry-content h4,
.single-post .entry-content h5 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    color: #E4E4E7 !important;
    margin: 28px 0 14px 0 !important;
}

.single-post .entry-content h4 {
    font-size: 18px !important;
}

.single-post .entry-content h5 {
    font-size: 16px !important;
}

/* ============================================================
   7. CONTENT - PARAGRAPHS
   ============================================================ */

.single-post .entry-content p {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
    color: #A1A1AA !important;
    margin-bottom: 20px !important;
}

.single-post .entry-content strong,
.single-post .entry-content b {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.single-post .entry-content em {
    color: #D4D4D8 !important;
}

/* ============================================================
   8. BLOCKQUOTES - PREMIUM
   ============================================================ */

.single-post .entry-content blockquote {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(79, 70, 229, 0.04)) !important;
    border: none !important;
    border-left: 4px solid #7C3AED !important;
    padding: 24px 28px !important;
    margin: 32px 0 !important;
    border-radius: 0 16px 16px 0 !important;
    position: relative !important;
}

.single-post .entry-content blockquote::before {
    content: '"' !important;
    position: absolute !important;
    top: 12px !important;
    left: 20px !important;
    font-size: 48px !important;
    color: rgba(124, 58, 237, 0.3) !important;
    font-family: Georgia, serif !important;
    line-height: 1 !important;
}

.single-post .entry-content blockquote p {
    font-size: 18px !important;
    font-style: italic !important;
    color: #D4D4D8 !important;
    margin-bottom: 0 !important;
    padding-left: 24px !important;
}

/* ============================================================
   9. LINKS
   ============================================================ */

.single-post .entry-content a {
    color: #A78BFA !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(167, 139, 250, 0.3) !important;
    transition: all 0.2s ease !important;
}

.single-post .entry-content a:hover {
    color: #C4B5FD !important;
    border-bottom-color: #C4B5FD !important;
}

/* ============================================================
   10. LISTS
   ============================================================ */

.single-post .entry-content ul,
.single-post .entry-content ol {
    margin: 24px 0 !important;
    padding-left: 28px !important;
}

.single-post .entry-content li {
    color: #A1A1AA !important;
    margin-bottom: 12px !important;
    line-height: 1.75 !important;
    font-size: 16px !important;
}

.single-post .entry-content ul li::marker {
    color: #7C3AED !important;
}

.single-post .entry-content ol li::marker {
    color: #7C3AED !important;
    font-weight: 600 !important;
}

/* ============================================================
   11. POST NAVIGATION
   ============================================================ */

.single-post .post-navigation,
.single-post .nav-links {
    margin-top: 40px !important;
    padding-top: 32px !important;
    border-top: 1px solid rgba(124, 58, 237, 0.15) !important;
}

.single-post .nav-links a {
    color: #A78BFA !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.single-post .nav-links a:hover {
    color: #C4B5FD !important;
}

/* ============================================================
   12. HIDE KADENCE FOOTER
   ============================================================ */

.single-post .site-footer,
.single-post #colophon,
.single-post footer.site-footer {
    display: none !important;
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .single-post .entry-content-wrap,
    .single-post article.entry {
        padding: 24px 20px !important;
        margin: 0 12px 24px 12px !important;
        border-radius: 20px !important;
    }

    .single-post article.entry::before {
        left: 20px !important;
        right: 20px !important;
    }

    .single-post .post-thumbnail.article-post-thumbnail,
    .single-post .post-thumbnail {
        max-width: 70% !important;
        width: 70% !important;
    }

    .single-post .wp-post-image,
    .single-post .post-thumbnail img {
        max-height: 160px !important;
        border-radius: 12px !important;
    }

    .single-post .post-thumbnail-inner {
        max-height: 160px !important;
    }

    .single-post .entry-title {
        font-size: 24px !important;
    }

    .single-post .entry-content h2 {
        font-size: 20px !important;
        padding-left: 16px !important;
    }

    .single-post .entry-content h3 {
        font-size: 17px !important;
        padding-left: 14px !important;
    }

    .single-post .entry-content p {
        font-size: 16px !important;
    }

    .single-post .entry-content blockquote {
        padding: 20px !important;
    }

    .single-post .entry-content blockquote::before {
        font-size: 36px !important;
        left: 12px !important;
    }
}

/* ============================================================
   14. DARK BACKGROUND CONSISTENCY
   ============================================================ */

.single-post,
.single-post body,
.single-post .site,
.single-post .site-container {
    background: #0A0A0B !important;
}

.single-post .content-area {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/* Remove any white/light backgrounds */
.single-post .content-bg,
.single-post .entry,
.single-post .entry-hero {
    background: transparent !important;
}