/* Blog Text Color Fixes - Override white-on-white text issues */

/* CRITICAL: Override inline styles and style tags */
.comparison-table {
    background: white !important;
}

.comparison-table td {
    background: white !important;
    color: #374151 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.comparison-table tr:hover td {
    background: #f9fafb !important;
}

/* Override any elements with inline white color styles */
[style*="color: white"],
[style*="color:white"],
[style*="color: rgba(255, 255, 255"],
[style*="color:rgba(255,255,255"] {
    color: #374151 !important;
}

/* Exception for elements that should keep white text */
.article-header [style*="color"],
.blog-header [style*="color"],
.article-cta [style*="color"],
.comparison-table th {
    color: white !important;
}

/* Blog Index Page Fixes */
.blog-main {
    color: #1f2937 !important;
}

.blog-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

.blog-card:hover {
    background: #f9fafb !important;
    border-color: #667eea !important;
}

.blog-title {
    color: #111827 !important;
}

.blog-excerpt {
    color: #4b5563 !important;
}

.blog-date {
    color: #6b7280 !important;
}

.blog-categories {
    background: #f3f4f6 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.category-btn {
    border: 2px solid #d1d5db !important;
    background: white !important;
    color: #374151 !important;
}

.category-btn:hover {
    border-color: #667eea !important;
    color: #667eea !important;
    background: #eff6ff !important;
}

.category-btn.active {
    background: #667eea !important;
    color: white !important;
    border-color: #667eea !important;
}

.pagination-btn {
    border: 2px solid #d1d5db !important;
    background: white !important;
    color: #374151 !important;
}

.pagination-btn:hover:not(:disabled) {
    border-color: #667eea !important;
    color: #667eea !important;
    background: #eff6ff !important;
}

.page-number {
    background: white !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
}

.page-number.active {
    background: #667eea !important;
    color: white !important;
}

/* Blog Post Content Fixes */
.article-content {
    background: white !important;
    color: #1f2937 !important;
}

.article-content p,
.article-content li,
.article-content span,
.article-content div {
    color: #374151 !important;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: #111827 !important;
}

.article-content a {
    color: #2563eb !important;
}

.article-content a:hover {
    color: #1d4ed8 !important;
}

/* Specific component fixes */
.article-toc {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
}

.article-toc h2,
.article-toc h3 {
    color: #111827 !important;
}

.article-toc a {
    color: #4b5563 !important;
}

.article-toc a:hover {
    color: #2563eb !important;
}

/* Line length constraints for readability */
.blog-article p,
.article-content p {
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
}

.blog-article .lead,
.article-content .lead {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* Blog excerpts and descriptions */
.blog-excerpt,
.blog-subtitle {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.community-card {
    background: #f8f9fa !important;
    color: #1f2937 !important;
}

.success-story {
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%) !important;
    color: #1f2937 !important;
}

.tip-box {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #1f2937 !important;
}

.comparison-table table {
    background: white !important;
}

.comparison-table td {
    color: #374151 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* FAQ Section */
.faq-item {
    color: #374151 !important;
}

.faq-item h3 {
    color: #111827 !important;
}

/* Sidebar */
.article-sidebar {
    color: #1f2937 !important;
}

.sidebar-toc,
.sidebar-stats,
.sidebar-newsletter,
.sidebar-popular {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
}

.sidebar-toc h3,
.sidebar-stats h3,
.sidebar-newsletter h3,
.sidebar-popular h3 {
    color: #111827 !important;
}

.sidebar-stats li {
    color: #374151 !important;
}

.toc-link {
    color: #4b5563 !important;
}

.toc-link:hover,
.toc-link.active {
    color: #2563eb !important;
    border-left-color: #2563eb !important;
}

.popular-list a {
    color: #374151 !important;
}

.popular-list a:hover {
    color: #2563eb !important;
}

.popular-list li {
    border-bottom: 1px solid #e5e7eb !important;
}

/* Related Articles */
.related-card {
    background: white !important;
    border: 1px solid #e5e7eb !important;
}

.related-card h3 {
    color: #111827 !important;
}

/* Breadcrumbs */
.breadcrumbs {
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #6b7280 !important;
}

.breadcrumb-item a:hover {
    color: #2563eb !important;
}

.breadcrumb-separator {
    color: #9ca3af !important;
}

/* Keep gradient backgrounds with white text */
.article-header,
.article-header * {
    color: white !important;
}

.article-cta,
.article-cta * {
    color: white !important;
}

.blog-header,
.blog-header * {
    color: white !important;
}

/* Code blocks */
pre code {
    color: #d4d4d4 !important;
    background: #1e1e1e !important;
}

/* Ensure form inputs are visible */
input[type="text"],
input[type="email"],
textarea,
select {
    background: white !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
}

/* Stats and highlight boxes */
.stats-box,
.stats-grid,
.stats-highlight,
.highlight-box,
.info-box,
.warning-box {
    background: #f9fafb !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}

.stats-box h3,
.highlight-box h3,
.info-box h3 {
    color: #111827 !important;
}

.stats-box p,
.highlight-box p,
.info-box p {
    color: #4b5563 !important;
}

.stat-card {
    background: white !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}

.stat-value {
    color: #667eea !important;
}

.stat-label {
    color: #6b7280 !important;
}

/* Newsletter form in sidebar */
.sidebar-newsletter {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.sidebar-newsletter h3,
.sidebar-newsletter p {
    color: white !important;
}

.sidebar-form input {
    background: white !important;
    color: #1f2937 !important;
}

.sidebar-form button {
    background: white !important;
    color: #667eea !important;
}