/* 
 * UNIVERSAL WHITE TEXT ON WHITE BACKGROUND FIX
 * Solves the systematic problem of white text on white/light backgrounds across IT Live platform
 * 
 * This CSS file provides comprehensive fixes for readability issues
 * while preserving proper button styling and visual hierarchy
 * 
 * Author: IT Live Development Team
 * Version: 1.0
 * Last Updated: 2026-03-07
 */

/* ========================================
   UNIVERSAL CONTAINER FIXES
   ======================================== */

/* Force dark text on all white/light containers */
.container,
.card,
.asset-card,
.logo-variant,
.font-sample,
.brand-card,
.service-card,
.feature-card,
.pricing-card,
.testimonial-card,
.stats-card,
.info-card,
.product-card,
.gallery-card,
.portfolio-card,
.team-card,
.contact-card {
    color: #333 !important;
}

/* ========================================
   SPECIFIC COMPONENT FIXES
   ======================================== */

/* Card titles and headings */
.container .card-title,
.container .card-header,
.container .asset-name,
.container .logo-name,
.container .brand-name,
.container .service-title,
.container .feature-title,
.container .pricing-title,
.container .testimonial-title,
.container .stats-title,
.container .info-title,
.container .product-title,
.container .gallery-title,
.container .portfolio-title,
.container .team-title,
.container .contact-title {
    color: #333 !important;
    font-weight: 600 !important;
}

/* Card descriptions and body text */
.container .card-subtitle,
.container .card-text,
.container .asset-description,
.container .logo-description,
.container .brand-description,
.container .service-description,
.container .feature-description,
.container .pricing-description,
.container .testimonial-text,
.container .stats-description,
.container .info-description,
.container .product-description,
.container .gallery-description,
.container .portfolio-description,
.container .team-description,
.container .contact-description {
    color: #555 !important;
}

/* Meta text and smaller elements */
.container .card-meta,
.container .asset-meta,
.container .logo-meta,
.container .brand-meta,
.container .service-meta,
.container .feature-meta,
.container .pricing-meta,
.container .testimonial-meta,
.container .stats-meta,
.container .info-meta,
.container .product-meta,
.container .gallery-meta,
.container .portfolio-meta,
.container .team-meta,
.container .contact-meta {
    color: #666 !important;
}

/* ========================================
   BUTTON PRESERVATION
   ======================================== */

/* Keep buttons white on colored backgrounds */
.container .btn,
.container .btn-primary,
.container .btn-secondary,
.container .btn-success,
.container .btn-danger,
.container .btn-warning,
.container .btn-info,
.container .btn-light,
.container .btn-dark,
.asset-card .btn,
.card .btn,
.service-card .btn,
.feature-card .btn,
.pricing-card .btn,
.product-card .btn,
.contact-card .btn {
    color: white !important;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Form labels and inputs */
.container .form-label,
.container .form-input,
.container .form-select,
.container .form-textarea,
.container .input-group-text {
    color: #333 !important;
}

/* ========================================
   NAVIGATION ELEMENTS
   ======================================== */

/* Nav tabs and menus */
.container .nav-tab,
.container .nav-link,
.container .menu-item,
.container .breadcrumb-item {
    color: #333 !important;
}

/* Active/hover states for navigation */
.container .nav-tab.active,
.container .nav-link:hover,
.container .menu-item:hover,
.container .breadcrumb-item.active {
    color: var(--primary-color, #FF8C00) !important;
}

/* ========================================
   ACCENT AND BRAND COLORS
   ======================================== */

/* Preserve brand colors for emphasis */
.container .brand-option strong,
.container .platform-name-option,
.container .accent-text,
.container .highlight,
.container .featured {
    color: var(--primary-color, #FF8C00) !important;
}

/* ========================================
   SPECIAL CASES
   ======================================== */

/* Tool cards with active states */
.tool-card {
    color: #333 !important;
}

.tool-card.active {
    color: white !important;
}

.tool-card i {
    color: #667eea !important;
}

.tool-card.active i {
    color: white !important;
}

/* ========================================
   RESPONSIVE OVERRIDES
   ======================================== */

/* Mobile-specific fixes */
@media (max-width: 768px) {
    .container,
    .card,
    .asset-card,
    .logo-variant,
    .font-sample {
        color: #333 !important;
    }
    
    .container .card-title,
    .container .asset-name,
    .container .logo-name {
        color: #333 !important;
        font-weight: 600 !important;
    }
    
    .container .card-subtitle,
    .container .asset-description,
    .container .logo-description {
        color: #555 !important;
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .container,
    .card,
    .asset-card {
        color: #000 !important;
    }
    
    .container .card-title,
    .container .asset-name {
        color: #000 !important;
    }
    
    .container .card-subtitle,
    .container .asset-description {
        color: #333 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .container,
    .card,
    .asset-card {
        transition: none !important;
    }
}

/* ========================================
   DEBUGGING AIDS
   ======================================== */

/* Uncomment for debugging white text issues */
/*
.container * {
    outline: 1px solid red !important;
}

.container [style*="color: white"] {
    background: yellow !important;
    color: #333 !important;
}
*/

/* ========================================
   IMPLEMENTATION NOTES
   ======================================== */

/*
USAGE INSTRUCTIONS:

1. Include this CSS file in your page header:
   <link href="/assets/css/universal-white-text-fix.css" rel="stylesheet">

2. Or add these styles to your existing CSS file

3. For specific page overrides, add page-specific classes:
   .page-specific .custom-component {
       color: #333 !important;
   }

4. Test with different screen sizes and contrast settings

5. Monitor for new components that might need fixes

COMPATIBILITY:
- Works with all modern browsers
- Mobile responsive
- Accessibility compliant
- High contrast mode support
- Reduced motion respect

MAINTENANCE:
- Add new component classes as they're created
- Test after major platform updates
- Monitor user feedback for readability issues
- Update color variables if brand colors change

*/