/*
 * GLASSMORPHIC DESIGN SYSTEM
 * This CSS file eliminates ALL white backgrounds and black/gray text
 * by implementing a consistent glassmorphic design throughout.
 *
 * DESIGN PRINCIPLE: Only white text on dark/transparent backgrounds
 * NO WHITE BACKGROUNDS + NO BLACK/GRAY TEXT = NO CONTRAST ISSUES
 */

/* FORCE WHITE TEXT ON ALL GRADIENT BACKGROUNDS */

/* Blog Hero Sections - ALWAYS WHITE TEXT */
.blog-hero,
.blog-hero *,
.hero-section,
.hero-section * {
    color: #ffffff !important;
}

/* Blog CTA Sections - ALWAYS WHITE TEXT */
.blog-cta-section,
.blog-cta-section *,
.cta-section,
.cta-section * {
    color: #ffffff !important;
}

/* Any element with gradient background - FORCE WHITE TEXT */
[style*="linear-gradient"],
[style*="linear-gradient"] *,
.gradient-bg,
.gradient-bg *,
.gradient-background,
.gradient-background * {
    color: #ffffff !important;
}

/* Specific gradient classes that need white text */
.purple-gradient,
.purple-gradient *,
.blue-gradient,
.blue-gradient *,
.gradient-container,
.gradient-container * {
    color: #ffffff !important;
}

/* Blog post content on gradient backgrounds - HIGHEST PRIORITY */
.blog-post-container [style*="background: linear-gradient"],
.blog-post-container [style*="background: linear-gradient"] *,
.blog-post-container [style*="background:linear-gradient"],
.blog-post-container [style*="background:linear-gradient"] *,
.blog-post-content [style*="linear-gradient"],
.blog-post-content [style*="linear-gradient"] *,
body [style*="linear-gradient"] .blog-post-content,
body [style*="linear-gradient"] .blog-post-content *,
html [style*="linear-gradient"] .blog-post-content,
html [style*="linear-gradient"] .blog-post-content * {
    color: #ffffff !important;
}

/* OVERRIDE SPECIFIC PROBLEMATIC RULES */
.blog-post-content p[style*="linear-gradient"],
.blog-post-content h1[style*="linear-gradient"],
.blog-post-content h2[style*="linear-gradient"],
.blog-post-content h3[style*="linear-gradient"],
.blog-post-content h4[style*="linear-gradient"],
.blog-post-content li[style*="linear-gradient"],
.blog-post-content span[style*="linear-gradient"],
.blog-post-content div[style*="linear-gradient"],
[style*="linear-gradient"] .blog-post-content p,
[style*="linear-gradient"] .blog-post-content h1,
[style*="linear-gradient"] .blog-post-content h2,
[style*="linear-gradient"] .blog-post-content h3,
[style*="linear-gradient"] .blog-post-content h4,
[style*="linear-gradient"] .blog-post-content li,
[style*="linear-gradient"] .blog-post-content span,
[style*="linear-gradient"] .blog-post-content div {
    color: #ffffff !important;
}

/* Page content with gradient backgrounds */
.page-content [style*="linear-gradient"],
.page-content [style*="linear-gradient"] * {
    color: #ffffff !important;
}

/* OVERRIDE COMMON PROBLEMATIC CLASSES */

/* Override any dark text classes on gradients */
.gradient-bg .text-gray-900,
.gradient-bg .text-gray-800,
.gradient-bg .text-gray-700,
.gradient-bg .text-black,
.blog-hero .text-gray-900,
.blog-hero .text-gray-800,
.blog-hero .text-gray-700,
.blog-hero .text-black,
.hero-section .text-gray-900,
.hero-section .text-gray-800,
.hero-section .text-gray-700,
.hero-section .text-black {
    color: #ffffff !important;
}

/* SPECIFIC ELEMENT OVERRIDES */

/* Headlines on gradients */
h1, h2, h3, h4, h5, h6 {
    &.on-gradient,
    .gradient-bg &,
    .blog-hero &,
    .hero-section &,
    .blog-cta-section &,
    [style*="linear-gradient"] & {
        color: #ffffff !important;
    }
}

/* Paragraphs on gradients */
p, span, div, li, a {
    .gradient-bg &,
    .blog-hero &,
    .hero-section &,
    .blog-cta-section &,
    [style*="linear-gradient"] & {
        color: rgba(255, 255, 255, 0.9) !important;
    }
}

/* Links on gradients - keep them visible but white-based */
a {
    .gradient-bg &,
    .blog-hero &,
    .hero-section &,
    .blog-cta-section & {
        color: #4ade80 !important; /* Light green for links */
    }
}

/* Buttons on gradients */
.btn, .button, button {
    .gradient-bg &,
    .blog-hero &,
    .hero-section &,
    .blog-cta-section & {
        &:not(.btn-primary):not(.button-primary) {
            color: #ffffff !important;
            border-color: #ffffff !important;
        }
    }
}

/* NUCLEAR OVERRIDES - Target specific problematic CSS rules */
body [style*="linear-gradient"] .blog-post-content p,
html [style*="linear-gradient"] .blog-post-content p,
[style*="linear-gradient"] .blog-post-content p,
.blog-post-content p {
    color: rgba(255, 255, 255, 0.9) !important;
}

body [style*="linear-gradient"] .blog-post-content h1,
body [style*="linear-gradient"] .blog-post-content h2,
body [style*="linear-gradient"] .blog-post-content h3,
body [style*="linear-gradient"] .blog-post-content h4,
html [style*="linear-gradient"] .blog-post-content h1,
html [style*="linear-gradient"] .blog-post-content h2,
html [style*="linear-gradient"] .blog-post-content h3,
html [style*="linear-gradient"] .blog-post-content h4,
[style*="linear-gradient"] .blog-post-content h1,
[style*="linear-gradient"] .blog-post-content h2,
[style*="linear-gradient"] .blog-post-content h3,
[style*="linear-gradient"] .blog-post-content h4,
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
    color: #ffffff !important;
}

/* EMERGENCY OVERRIDE - Nuclear option for any missed cases */
.force-white-text,
.force-white-text * {
    color: #ffffff !important;
}

.force-white-text-transparent,
.force-white-text-transparent * {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ULTIMATE OVERRIDE - When everything else fails */
html body [style*="linear-gradient"] *,
html body .blog-hero *,
html body .hero-section *,
html body .blog-cta-section * {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* BODY-LEVEL GRADIENT PROTECTION */
body[style*="linear-gradient"],
body[style*="linear-gradient"] * {
    color: #ffffff !important;
}

/* HTML-LEVEL GRADIENT PROTECTION */
html[style*="linear-gradient"],
html[style*="linear-gradient"] * {
    color: #ffffff !important;
}

/*
 * GLASSMORPHIC BACKGROUND SYSTEM
 * Replace ALL white backgrounds with glassmorphic styling
 */

/* Replace white/light backgrounds with glassmorphic */
.content-section,
.tool-card,
.category-section,
.blog-card,
.highlight-box,
.info-box,
.author-bio,
.related-post-card,
.related-posts,
.quick-nav,
table,
.comparison-table,
.feature-comparison,
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[class*="bg-white"],
[class*="background-white"] {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
    transition: transform 0.2s, border-color 0.3s !important;
}

/* Special padding for specific elements */
.highlight-box,
.info-box,
.author-bio {
    padding: 2rem !important;
}

.related-post-card {
    padding: 1.5rem !important;
}

.tool-card {
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
}

/* Enhanced hover effects for glassmorphic elements */
.content-section:hover,
.tool-card:hover,
.blog-card:hover,
.related-post-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

/* Ensure all text in glassmorphic containers is white */
.content-section,
.content-section *,
.tool-card,
.tool-card *,
.category-section,
.category-section *,
.blog-card,
.blog-card *,
.author-bio,
.author-bio *,
.related-post-card,
.related-post-card *,
.quick-nav,
.quick-nav * {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Headers in glassmorphic containers */
.content-section h1,
.content-section h2,
.content-section h3,
.content-section h4,
.tool-card h1,
.tool-card h2,
.tool-card h3,
.tool-card h4,
.category-section h1,
.category-section h2,
.category-section h3,
.category-section h4,
.blog-card h1,
.blog-card h2,
.blog-card h3,
.blog-card h4,
.author-bio h1,
.author-bio h2,
.author-bio h3,
.author-bio h4,
.related-post-card h1,
.related-post-card h2,
.related-post-card h3,
.related-post-card h4,
.quick-nav h1,
.quick-nav h2,
.quick-nav h3,
.quick-nav h4 {
    color: #ffffff !important;
}

/* Links in glassmorphic containers */
.content-section a,
.tool-card a,
.category-section a,
.blog-card a,
.author-bio a,
.related-post-card a,
.quick-nav a {
    color: #4ade80 !important;
}

/* ULTRA HIGH SPECIFICITY TABLE STYLING - OVERRIDE INLINE STYLES */
html body .blog-post-content .comparison-table,
html body .content-section .comparison-table,
html body .comparison-table,
html body table,
.content-section table,
.blog-post-content table {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Force table cells to have glassmorphic background */
html body .comparison-table table,
html body .comparison-table th,
html body .comparison-table td,
html body .content-section table,
html body .content-section th,
html body .content-section td,
html body table th,
html body table td {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Force table headers */
html body .comparison-table th,
html body .content-section th,
html body table th {
    background: rgba(102, 126, 234, 0.3) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Force hover states */
html body .comparison-table tr:hover td,
html body .content-section tr:hover td,
html body table tr:hover td {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Override any white backgrounds in table wrapper */
html body .comparison-table,
html body [class*="comparison"],
html body [class*="table-container"],
html body [class*="table-wrapper"] {
    background: transparent !important;
}

/* Remove duplicate glassmorphic background from content sections containing tables */
.content-section:has(table),
.content-section:has(.comparison-table),
.content-section:has(.feature-comparison) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    padding: 2rem 0 !important;
}

/* ELIMINATE ALL BLACK/GRAY TEXT */
.text-black,
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-gray-500,
.text-dark,
[style*="color: black"],
[style*="color: #000"],
[style*="color: #333"],
[style*="color: #666"],
[style*="color: #999"],
[style*="color: gray"],
[style*="color: grey"] {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* PRINT MEDIA - Ensure contrast in print as well */
@media print {
    .gradient-bg,
    .blog-hero,
    .hero-section,
    .blog-cta-section,
    [style*="linear-gradient"] {
        background: #333 !important;
        color: #ffffff !important;
    }
}