/**
 * Text Visibility Fixes for HIPAA Auditors Website
 * Overrides Bootstrap's low-contrast text classes to meet WCAG AA standards
 * 
 * This file addresses visibility issues with text-muted, lead, and other
 * low-contrast text elements throughout the website.
 */

/* ==========================================================================
   BOOTSTRAP TEXT CLASS OVERRIDES
   ========================================================================== */

/* Fix Bootstrap's text-muted class - improve contrast from ~3:1 to 4.5:1 */
.text-muted {
    color: #4a5568 !important; /* Improved from Bootstrap's default #6c757d */
}

/* Fix lead text visibility */
.lead {
    color: #2d3748 !important; /* Darker color for better readability */
    font-weight: 400;
}

/* Fix any other low-contrast text elements */
.text-secondary {
    color: #4a5568 !important; /* Ensure good contrast */
}

/* ==========================================================================
   SPECIFIC PAGE FIXES
   ========================================================================== */

/* Services page hero text */
.services-container .hero-section .lead {
    color: rgba(255, 255, 255, 0.95) !important; /* Better contrast on dark background */
}

/* Services page service overview text */
.services-container .text-muted {
    color: #4a5568 !important; /* Better contrast for service descriptions */
}

/* Pricing page text */
.pricing-page .hero-content p {
    color: #2d3748 !important; /* Improve pricing description visibility */
}

/* Home page text elements */
.hero-subtitle {
    color: #2d3748 !important; /* Better contrast for hero subtitle */
}

/* ==========================================================================
   SPECIFIC TEXT FIXES FOR USER-REPORTED ISSUES
   ========================================================================== */

/* Fix the specific text mentioned in the user query */
/* "Comprehensive HIPAA compliance solutions designed to protect your healthcare organization and ensure regulatory compliance." */
.services-container .hero-section p.lead {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 400;
}

/* "Choose the perfect HIPAA compliance plan for your organization. All plans include our core features with no hidden fees." */
.pricing-page .hero-content p {
    color: #2d3748 !important;
    font-weight: 400;
}

/* "Our HIPAA compliance experts are here to help you achieve and maintain compliance. Contact us today for personalized assistance." */
/* This text appears in contact sections and CTAs */
.cta-content p,
.contact-section p,
.contact-form p {
    color: #2d3748 !important;
    font-weight: 400;
}

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

/* Service cards text */
.service-card p {
    color: #4a5568 !important; /* Better contrast for service descriptions */
}

/* Benefit cards text */
.benefit-card p {
    color: #4a5568 !important; /* Better contrast for benefit descriptions */
}

/* Contact form labels and help text */
.contact-form label,
.form-text,
.form-help {
    color: #4a5568 !important; /* Better contrast for form labels */
}

/* ==========================================================================
   FOOTER VISIBILITY FIXES
   ========================================================================== */

/* Footer text visibility improvements */
.footer p {
    color: #e5e7eb !important; /* Better contrast for footer paragraph text */
}

.footer .footer-section p {
    color: #d1d5db !important; /* Better contrast for footer description text */
}

/* Footer bottom text */
.footer-bottom p {
    color: #9ca3af !important; /* Maintain existing footer bottom color */
}

/* Specific fix for the footer description text */
.footer .footer-section:first-child p {
    color: #e5e7eb !important; /* "Comprehensive HIPAA compliance platform for healthcare organizations." */
    font-weight: 400;
    line-height: 1.6;
}

/* Footer links visibility */
.footer-section ul li a {
    color: #d1d5db !important; /* Better contrast for footer links */
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #667eea !important; /* Maintain hover color */
}

/* Footer headings */
.footer-section h4 {
    color: #ffffff !important; /* Ensure footer headings are clearly visible */
}

/* Fix for other instances of the footer text in different pages */
.mb-0 {
    color: #2d3748 !important; /* Better contrast for small text elements */
}

/* Fix for any other low-contrast text in various pages */
.text-muted.mb-0,
p.mb-0 {
    color: #4a5568 !important; /* Better contrast for muted text */
}

/* Specific fix for Bootstrap footer in hipaa-controls-clean.php */
.bg-dark .mb-0 {
    color: #e5e7eb !important; /* Better contrast for dark background footer text */
}

.bg-dark p {
    color: #d1d5db !important; /* Better contrast for dark background paragraphs */
}

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

/* Ensure all paragraph text has good contrast */
p {
    color: #2d3748 !important; /* Default paragraph color */
}

/* Fix any remaining low-contrast elements */
small,
.small {
    color: #4a5568 !important; /* Better contrast for small text */
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Ensure text remains visible on different screen sizes */
@media (max-width: 768px) {
    .text-muted,
    .lead,
    .text-secondary {
        color: #2d3748 !important; /* Even better contrast on mobile */
    }
}

/* ==========================================================================
   DARK MODE CONSIDERATIONS
   ========================================================================== */

/* If dark mode is implemented, ensure text remains visible */
@media (prefers-color-scheme: dark) {
    .text-muted {
        color: #a0aec0 !important; /* Light color for dark backgrounds */
    }
    
    .lead {
        color: #e2e8f0 !important; /* Light color for dark backgrounds */
    }
    
    p {
        color: #e2e8f0 !important; /* Light color for dark backgrounds */
    }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

/* Support for high contrast mode */
@media (prefers-contrast: high) {
    .text-muted {
        color: #000000 !important; /* Maximum contrast */
    }
    
    .lead {
        color: #000000 !important; /* Maximum contrast */
    }
    
    p {
        color: #000000 !important; /* Maximum contrast */
    }
}