/* Accessibility Contrast Fix - WCAG 2.1 AA Compliance */
/* 
 * This file fixes text contrast issues across all landing pages
 * Replaces light gray text with darker colors for better readability
 * Ensures minimum 4.5:1 contrast ratio against white backgrounds
 */

/* Fix for text-gray-600 - Change from #4B5563 to #374151 (darker) */
.text-gray-600 {
    color: #374151 !important; /* text-gray-700 equivalent - better contrast */
}

/* Fix for text-gray-500 - Change from #6B7280 to #374151 (much darker) */
.text-gray-500 {
    color: #374151 !important; /* text-gray-700 equivalent - better contrast */
}

/* Fix for text-gray-400 - Change from #9CA3AF to #4B5563 (much darker) */
.text-gray-400 {
    color: #4B5563 !important; /* text-gray-600 equivalent - better contrast */
}

/* Special case: Footer links on dark background - keep original gray-400 */
footer .text-gray-400 {
    color: #9CA3AF !important; /* Original gray-400 is fine on dark background */
}

/* Footer headings - ensure proper contrast on dark background (WCAG 2.1 AA) */
/* Fix for potential text-gray-800 on bg-gray-900 (1.2:1 ratio - FAILS) */
/* Update to text-gray-400 (#9CA3AF) on bg-gray-900 (#111827) = 8.6:1 ratio - PASSES */
footer.bg-gray-900 h3,
footer.bg-gray-900 h2,
footer.bg-gray-900 h1 {
    color: #9CA3AF !important; /* text-gray-400 - ensures 8.6:1 contrast ratio */
}

/* Ensure footer headings inherit proper color even if they have text-white class */
footer.bg-gray-900 h3.text-lg,
footer.bg-gray-900 h2.text-lg,
footer.bg-gray-900 h1.text-lg {
    color: #FFFFFF !important; /* Keep white for better visibility - 15.3:1 contrast ratio */
}

/* Ensure proper contrast for specific elements */
.pricing-card .text-gray-600,
.feature-card .text-gray-600,
.about-section .text-gray-600 {
    color: #1F2937 !important; /* text-gray-800 for maximum readability */
}

/* FAQ section text - ensure high contrast */
.faq-section .text-gray-600 {
    color: #1F2937 !important; /* text-gray-800 for maximum readability */
}

/* Feature list items - ensure high contrast */
ul.space-y-2 .text-gray-600 {
    color: #1F2937 !important; /* text-gray-800 for maximum readability */
}

/* Contact page text improvements */
.contact-info .text-gray-600 {
    color: #374151 !important; /* text-gray-700 for good readability */
}

/* Hero subtitle improvements */
.hero-subtitle.text-gray-600 {
    color: #4B5563 !important; /* text-gray-600 equivalent with better contrast */
}

/* Ensure all paragraph text in cards has good contrast */
.bg-white p.text-gray-600 {
    color: #1F2937 !important; /* text-gray-800 for maximum readability on white cards */
}

/* Pricing plan descriptions */
.pricing-plan p.text-gray-600 {
    color: #1F2937 !important; /* text-gray-800 for maximum readability */
}

/* Feature descriptions */
.feature-description.text-gray-600 {
    color: #1F2937 !important; /* text-gray-800 for maximum readability */
}

/* About page value descriptions */
.value-card p.text-gray-600 {
    color: #1F2937 !important; /* text-gray-800 for maximum readability */
}

/* HERO SECTIONS - Dark text on gradient backgrounds with better spacing */

/* About page hero section - change from white text to dark blue */
.bg-gradient-to-r.from-blue-600.to-blue-700 {
    background: linear-gradient(135deg, #E0F2FE 0%, #F0F9FF 100%) !important; /* Light blue gradient instead */
}

.bg-gradient-to-r.from-blue-600.to-blue-700 h1,
.bg-gradient-to-r.from-blue-600.to-blue-700 h2,
.bg-gradient-to-r.from-blue-600.to-blue-700 p,
.bg-gradient-to-r.from-blue-600.to-blue-700 span {
    color: #1E3A8A !important; /* Dark blue text instead of white */
    text-shadow: none !important; /* Remove text shadow */
    font-weight: 700 !important; /* Make text bolder for better contrast */
}

/* Features page hero section - change from white text to dark blue */
.bg-gradient-to-r.from-blue-600.to-blue-700 .md\\:w-1\\/2 {
    padding: 2rem !important; /* Increase padding for better spacing */
}

/* Increase indentation/padding for both hero sections */
.bg-gradient-to-r.from-blue-600.to-blue-700 {
    padding: 3rem !important; /* Increase from p-8 (2rem) to 3rem */
}

.bg-gradient-to-r.from-blue-600.to-blue-700 .md\\:pr-8 {
    padding-right: 3rem !important; /* Increase right padding */
}

/* Ensure list items also have dark text */
.bg-gradient-to-r.from-blue-600.to-blue-700 ul li {
    color: #1E3A8A !important; /* Dark blue for list items */
    font-weight: 600 !important; /* Semi-bold for better readability */
}

.bg-gradient-to-r.from-blue-600.to-blue-700 ul li i {
    color: #059669 !important; /* Green for check icons */
}

/* Hero section visual elements - brain icon and animated dots - MAKE 3X BIGGER */
.bg-gradient-to-r.from-blue-600.to-blue-700 .fa-brain {
    color: #1E3A8A !important; /* Dark blue brain icon */
    font-size: 18rem !important; /* 3x bigger: was 6xl (6rem), now 18rem */
}

.bg-gradient-to-r.from-blue-600.to-blue-700 .bg-blue-300 {
    background-color: #1E3A8A !important; /* Dark blue animated dots */
    width: 1.5rem !important; /* 3x bigger: was 0.5rem, now 1.5rem */
    height: 1.5rem !important; /* 3x bigger: was 0.5rem, now 1.5rem */
}

/* Adjust spacing for larger brain icon */
.bg-gradient-to-r.from-blue-600.to-blue-700 .fa-brain.mb-4 {
    margin-bottom: 3rem !important; /* Increase margin for larger icon */
}

/* Adjust container height for larger brain */
.bg-gradient-to-r.from-blue-600.to-blue-700 .h-64 {
    height: 24rem !important; /* Increase height to accommodate larger brain */
}

/* ABOUT PAGE SPECIFIC FIXES */

/* Fix 1: Center mission/vision cards content and ensure dark text on white background */
.bg-white.rounded-lg.shadow-md h2,
.bg-white.rounded-lg.shadow-md h3,
.bg-white.rounded-lg.shadow-md p {
    color: #1F2937 !important; /* Dark text for white background */
    text-align: center !important;
}

/* Mission & Vision cards - center content */
section .bg-white.rounded-lg.shadow-md {
    text-align: center !important;
}

/* Core Values cards - already centered, just ensure dark text */
.bg-white.rounded-lg.shadow-md.text-center h3,
.bg-white.rounded-lg.shadow-md.text-center p {
    color: #1F2937 !important; /* Dark text for white background */
}

/* What Makes Us Different section - center content */
.bg-white.rounded-lg.shadow-md .space-y-6 h3,
.bg-white.rounded-lg.shadow-md .space-y-6 p {
    color: #1F2937 !important; /* Dark text for white background */
    text-align: center !important;
}

/* Fix 2: CTA section - ensure proper contrast for white text on gradient background */
.bg-gradient-to-r.from-blue-600.to-blue-700 .text-white,
.bg-gradient-to-r.from-blue-600.to-blue-700 h2,
.bg-gradient-to-r.from-blue-600.to-blue-700 p {
    color: #FFFFFF !important; /* Ensure white text is visible on gradient */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important; /* Strong shadow for better readability */
    background: transparent !important; /* Remove any white backgrounds */
}

/* FEATURES PAGE SPECIFIC FIXES */

/* Fix 1: Center feature cards content and ensure dark text on white background */
.bg-white.rounded-lg.shadow-md {
    text-align: center !important;
}

.bg-white.rounded-lg.shadow-md h3,
.bg-white.rounded-lg.shadow-md p {
    color: #1F2937 !important; /* Dark text for white background */
    text-align: center !important;
}

.bg-white.rounded-lg.shadow-md ul {
    text-align: left !important; /* Keep lists left-aligned for readability */
    display: inline-block !important; /* Center the list block itself */
    color: #1F2937 !important; /* Dark text for list items */
}

.bg-white.rounded-lg.shadow-md ul li {
    color: #1F2937 !important; /* Dark text for list items */
}

/* Fix 2: CTA section - Fix white text visibility on gradient background */
.bg-gradient-to-r.from-blue-600.to-purple-600 h2,
.bg-gradient-to-r.from-blue-600.to-purple-600 p {
    color: #FFFFFF !important; /* Ensure white text is visible */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important; /* Strong shadow for better readability */
}

/* Fix 3: Bottom part - Remove white background, make transparent */
.bg-gradient-to-r.from-blue-600.to-purple-600 .text-white.opacity-90 {
    background: transparent !important; /* Remove any white background */
    color: #FFFFFF !important; /* Ensure white text */
    opacity: 1 !important; /* Full opacity */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important; /* Strong shadow */
}

/* Target the specific bottom text element */
.bg-gradient-to-r.from-blue-600.to-purple-600 .text-sm {
    background: transparent !important; /* Remove white background */
    color: #FFFFFF !important; /* White text */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important; /* Strong shadow */
}

/* Ensure all text in CTA section is white with strong shadow */
.bg-gradient-to-r.from-blue-600.to-purple-600 * {
    background: transparent !important; /* Remove any white backgrounds */
}

.bg-gradient-to-r.from-blue-600.to-purple-600 .text-white {
    color: #FFFFFF !important; /* Force white text */
    background: transparent !important; /* Remove white background */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important; /* Strong shadow */
}

/* Ensure CTA buttons have proper contrast */
.bg-gradient-to-r.from-blue-600.to-purple-600 .bg-white {
    background-color: #FFFFFF !important;
    color: #1F2937 !important; /* Dark text on white button */
}

.bg-gradient-to-r.from-blue-600.to-purple-600 .bg-blue-800 {
    background-color: #1E3A8A !important;
    color: #FFFFFF !important; /* White text on dark blue button */
}

/* Accessibility note for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-gray-600,
    .text-gray-500,
    .text-gray-400 {
        color: #000000 !important; /* Pure black for high contrast mode */
    }
    
    footer .text-gray-400 {
        color: #FFFFFF !important; /* Pure white for footer on dark background */
    }
    
    .bg-gradient-to-r.from-blue-600.to-purple-600 .text-white {
        color: #FFFFFF !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    }
}

/* Print styles - ensure good contrast when printed */
@media print {
    .text-gray-600,
    .text-gray-500,
    .text-gray-400 {
        color: #000000 !important; /* Pure black for printing */
    }
    
    .bg-gradient-to-r.from-blue-600.to-purple-600 {
        background: #FFFFFF !important; /* White background for printing */
        color: #000000 !important; /* Black text for printing */
    }
}