/* ============================================
   EMERGENCY MOBILE READABILITY PATCH
   Fixes all dark background and contrast issues
   ============================================ */

/* CRITICAL: Fix all dark sections on mobile */
@media (max-width: 768px) {
    
    /* Override ALL dark backgrounds that cause readability issues */
    .bg-primary,
    .bg-dark,
    .bg-secondary,
    section.bg-primary,
    section.bg-dark,
    section.bg-secondary,
    .card.bg-primary,
    .card.bg-dark,
    .card.bg-secondary {
        background-color: #f8f9fa !important;
        color: #000000 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
    }
    
    /* Specifically fix newsletter sections */
    section.py-5.bg-primary.text-white,
    section.bg-primary.text-white {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
        color: #000000 !important;
        border: 2px solid #e3f2fd !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
        margin: 20px 16px !important;
    }
    
    /* Fix all white text on dark backgrounds */
    .text-white {
        color: #000000 !important;
        font-weight: 500 !important;
    }
    
    .text-white-75 {
        color: #4a5568 !important;
        font-weight: 400 !important;
    }
    
    /* Fix hero sections and CTAs */
    .hero-section,
    .cta-section,
    .newsletter-section {
        background-color: #ffffff !important;
        color: #000000 !important;
        padding: 32px 20px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        margin: 16px !important;
    }
    
    /* Fix badge readability */
    .badge {
        background-color: #e3f2fd !important;
        color: #1976d2 !important;
        border: 1px solid #bbdefb !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
    }
    
    .badge.bg-primary {
        background-color: #e3f2fd !important;
        color: #1976d2 !important;
        border: 1px solid #bbdefb !important;
    }
    
    .badge.bg-secondary {
        background-color: #f5f5f5 !important;
        color: #424242 !important;
        border: 1px solid #e0e0e0 !important;
    }
    
    /* Fix article page specifically */
    .article-detail {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    
    .article-header,
    .article-content,
    .article-footer {
        background-color: #ffffff !important;
        color: #000000 !important;
        padding: 20px !important;
        border-radius: 12px !important;
        margin-bottom: 20px !important;
    }
    
    /* Fix category page dark sections */
    .category-header.bg-primary {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
        color: #000000 !important;
        border: 1px solid #e2e8f0 !important;
    }
    
    /* Fix forms in dark sections */
    .bg-primary .form-control,
    .bg-dark .form-control {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #ced4da !important;
        border-radius: 8px !important;
    }
    
    .bg-primary .btn,
    .bg-dark .btn {
        background-color: #ffffff !important;
        color: #1976d2 !important;
        border: 2px solid #1976d2 !important;
        font-weight: 500 !important;
    }
    
    .bg-primary .btn:hover,
    .bg-dark .btn:hover {
        background-color: #1976d2 !important;
        color: #ffffff !important;
    }
}

/* Extra small mobile specific fixes */
@media (max-width: 576px) {
    
    /* Container spacing for readability */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Section spacing */
    section {
        margin: 16px 0 !important;
        padding: 24px 16px !important;
    }
    
    /* Newsletter sections specific mobile fix */
    section.bg-primary {
        margin: 20px 12px !important;
        padding: 32px 20px !important;
        border-radius: 16px !important;
        box-shadow: 0 6px 24px rgba(0,0,0,0.1) !important;
    }
    
    /* Text readability */
    h1, h2, h3, h4, h5, h6 {
        color: #000000 !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }
    
    p, div, span {
        color: #2d3748 !important;
        line-height: 1.6 !important;
    }
    
    .text-muted {
        color: #6c757d !important;
    }
    
    small, .small {
        color: #6c757d !important;
        font-size: 0.875rem !important;
    }
}