/* 
   EMERGENCY OVERRIDES - CONTRAST & VISIBILITY FIXES 
   Loaded last to ensure priority.
*/

/* 0. Compact Breadcrumb Sections - Remove giant padding from sections containing only breadcrumbs */
.section:has(> .container > nav.breadcrumbs),
.section:has(> .container > .breadcrumbs),
.section:has(> .container > nav.breadcrumb),
.section:has(> .container > .breadcrumb),
section:has(> .container > nav.breadcrumbs),
section:has(> .container > nav.breadcrumb) {
    padding: var(--spacing-4) 0 !important;
}

/* Also catch breadcrumbs rendered directly inside sections (not wrapped in .container) */
.section:has(> nav.breadcrumbs),
.section:has(> nav.breadcrumb),
section:has(> nav.breadcrumbs),
section:has(> nav.breadcrumb) {
    padding: var(--spacing-4) 0 !important;
}

/* Standalone breadcrumb containers (service pages pattern) - reduce margin on next section */
.container:has(nav.breadcrumbs) + section,
.container:has(nav.breadcrumbs) + .section,
div:has(nav.breadcrumbs) + section,
div:has(nav.breadcrumbs) + .section {
    margin-top: 0 !important;
}

/* Breadcrumbs wrapper itself - keep compact */
.breadcrumbs {
    padding: var(--spacing-3) 0 !important;
}

/* 1. Global Blog Post Readability (White bg, Dark text) */
body .blog-content,
body .article-content,
body .wiki-content,
body article.section,
body article.blog-post {
    background-color: #ffffff !important;
    color: #1e293b !important;
    /* Slate-800 */
}

/* 2. Text Elements within Blog Posts - Force Dark */
body .blog-content p,
body .blog-content li,
body .blog-content td,
body .blog-content th,
body .article-content p,
body article.section p {
    color: #334155 !important;
    /* Slate-700 */
}

body .blog-content h1,
body .blog-content h2,
body .blog-content h3,
body .blog-content h4,
body .blog-content strong,
body .blog-content b {
    color: #0f172a !important;
    /* Slate-900 */
}

/* 3. CTA BOXES & ARTICLE HEADERS - High Contrast for Dark Backgrounds */
body .blog-content .cta-box,
body article .cta-box,
body .cta-box,
body .article-header {
    background-color: #0f172a !important;
    color: #ffffff !important;
}

/* Force White Text for children of dark containers - High Specificity */
body .blog-content .cta-box *:not(.btn),
body .blog-content .article-header *,
body .article-header *,
body .cta-box *:not(.btn),
body [style*="background: #1e3a8a"] *,
body [style*="background: #1e40af"] * {
    color: #ffffff !important;
}

/* FORCE White Text for ALL children of CTA box EXCEPT buttons */
body article .cta-box *:not(.btn),
body .cta-box *:not(.btn) {
    color: #ffffff !important;
}

body .blog-content .cta-box a:not(.btn),
body article .cta-box a:not(.btn),
body .cta-box a:not(.btn) {
    color: #ffffff !important;
}

body .blog-content .cta-box a:not(.btn):visited,
body article .cta-box a:not(.btn):visited,
body .cta-box a:not(.btn):visited {
    color: #ffffff !important;
}

/* Internal links inside dark boxes should be bright and visible */
body .cta-box .internal-link,
body [style*="background: #0f172a"] .internal-link,
body [style*="background: #1e3a8a"] .internal-link {
    color: #38bdf8 !important;
    /* Sky-400 - Bright Blue */
    text-decoration: underline !important;
}

/* Slightly dim paragraph text in CTA for hierarchy, but lighter than slate-400 */
body .blog-content .cta-box p,
body article .cta-box p,
body .cta-box p {
    color: #e2e8f0 !important;
    /* Slate-200 - Very Light Grey */
}

/* Buttons inside CTA - white bg with dark text for contrast */
body .blog-content .cta-box .btn,
body article .cta-box .btn,
body .cta-box .btn {
    background: white !important;
    color: #1e40af !important;
    text-decoration: none !important;
}

body .blog-content .cta-box .btn:visited,
body article .cta-box .btn:visited,
body .cta-box .btn:visited {
    color: #1e40af !important;
}

body .blog-content .cta-box .btn:hover,
body article .cta-box .btn:hover,
body .cta-box .btn:hover {
    background: #f0f4ff !important;
    color: #1e3a8a !important;
}

/* Buttons inside CTA must represent their own colors */
body .blog-content .cta-box .btn-primary,
body .cta-box .btn-primary {
    background: #2563eb !important;
    /* Ensure button contrast */
    border: none !important;
}

/* Fix for Secondary Buttons in Dark CTA (White-on-White issue) */
body .blog-content .cta-box .btn-secondary,
body article .cta-box .btn-secondary,
body .cta-box .btn-secondary {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

body .blog-content .cta-box .btn-secondary:hover,
body article .cta-box .btn-secondary:hover,
body .cta-box .btn-secondary:hover {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* 4. Pricing Table Specifics */
/* White background for the table wrapper/cells */
body .comparison-table table,
body .comparison-table th,
body .comparison-table td {
    color: #1e293b !important;
}

/* Header Specifics */
body .comparison-table thead th {
    color: #0f172a !important;
}

/* PSA Header specific override */
body .comparison-table thead th:nth-child(3) {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* ============================================
   HOMEPAGE TEXT READABILITY FIXES
   ============================================ */

/* Fix 1: Card Type Showcase Labels - Force Dark Background for LEGIBILITY */
/* Target the specific container for the text labels inside the grid items */
/* We target the div that has the white background style and force it to be dark */
body .section .grid-4>div[style*="background: white"] {
    background: #0f172a !important;
    /* Force Dark Slate Background */
}

/* Ensure text in card labels is WHITE and visible */
body .section .grid-4>div div[style*="font-weight: 700"],
body .section .grid-4>div div[style*="font-size: var(--font-size-sm)"] {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Fix 2: Statistics Section - Improve Text Contrast */
body .card ul li {
    color: #334155 !important;
}

body .card ul li strong {
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* Fix 3: Comparison Table Headers - High Contrast Fix */
body .comparison-table thead th {
    font-weight: 800 !important;
    padding: 16px !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

body .comparison-table thead th:nth-child(1) {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

body .comparison-table thead th:nth-child(2) {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

body .comparison-table thead th:nth-child(3) {
    background-color: #f8fafc !important;
    color: #334155 !important;
}

body .comparison-table tbody td {
    color: #334155 !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body .comparison-table tbody td strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

body .section .grid-4 .card p {
    color: #475569 !important;
}

body .section .grid-4 .card div[style*="font-weight: 800"] {
    color: #0f172a !important;
}

/* Exception: dark-background stat cards should keep white text */
body .section .grid-4 .card[style*="background: #0f2952"] p,
body .section .grid-4 .card[style*="background: #0f172a"] p,
body .section .grid-4 div[style*="background: #0f2952"] p,
body .section .grid-4 div[style*="background: #0f172a"] p {
    color: rgba(255,255,255,0.9) !important;
}

body .section .grid-4 .card[style*="background: #0f2952"] div,
body .section .grid-4 .card[style*="background: #0f172a"] div,
body .section .grid-4 div[style*="background: #0f2952"] div,
body .section .grid-4 div[style*="background: #0f172a"] div {
    color: white !important;
}

body .section .grid-4 .card div[style*="font-weight: 800"] {
    color: #0f172a !important;
}

body .section .grid-4 .card[style*="background: #0f2952"] div[style*="font-weight: 800"],
body .section .grid-4 .card[style*="background: #0f172a"] div[style*="font-weight: 800"],
body .section .grid-4 .card[style*="background: #0f2952"] div[style*="font-weight: 900"],
body .section .grid-4 .card[style*="background: #0f172a"] div[style*="font-weight: 900"],
body .section .grid-4 div[style*="background: #0f2952"] div[style*="font-weight: 800"],
body .section .grid-4 div[style*="background: #0f2952"] div[style*="font-weight: 900"] {
    color: white !important;
}

/* ============================================
   PODCASTS PAGE FIXES
   ============================================ */
/* Force full image visibility */
.pod-cover {
    height: 140px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #000000 !important;
}

/* ============================================
   BLOG TAG FIXES
   ============================================ */
/* Ensure tags intended to be white are actually white (fix overrides) */
header>span[style*="color: white"],
header>span[style*="color: #fff"],
.featured-content>span[style*="color: white"],
.blog-category,
span[style*="text-transform: uppercase"][style*="color: white"],
span[style*="text-transform: uppercase"][style*="color: #fff"] {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    font-weight: 700 !important;
}

/* ============================================
   DARK BACKGROUND TEXT FIXES (Forensic Warnings)
   ============================================ */
/* Force white text in any container with dark slate background */
div[style*="background: #0f172a"] p,
div[style*="background: #0f172a"] li,
div[style*="background: #0f172a"] div {
    color: #ffffff !important;
    opacity: 0.95 !important;
}

/* ============================================
   LIGHT THEME OVERRIDES (Fix for White Text on Light Backgrounds)
   ============================================ */
body .blog-content .cta-box.light-theme,
body article .cta-box.light-theme {
    background-color: #f8fafc !important;
    /* Force Light Background */
    color: #0f172a !important;
    /* Force Dark Slate Text */
    border: 1px solid #cbd5e1 !important;
}

/* Aggressive override for all children in light theme */
body .blog-content .cta-box.light-theme *,
body article .cta-box.light-theme * {
    color: #0f172a !important;
    text-shadow: none !important;
}

/* Specific Mermaid/SVG Text Fixes for Light Theme */
.cta-box.light-theme .mermaid svg text,
.cta-box.light-theme .mermaid svg .legendText,
.cta-box.light-theme .mermaid svg .legend text,
.cta-box.light-theme .mermaid .label,
.cta-box.light-theme .mermaid .labelText,
.cta-box.light-theme .mermaid .edgeLabel {
    fill: #0f172a !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

body .blog-content .cta-box.light-theme h3,
body article .cta-box.light-theme h3 {
    color: #1e3a8a !important;
    /* Keep headers blue */
    border-color: #cbd5e1 !important;
}

/* Fix for buttons inside light theme CTA */
body .blog-content .cta-box.light-theme .btn-primary,
body article .cta-box.light-theme .btn-primary {
    color: #ffffff !important;
    /* Button text stays white */
}