/* =====================================================
   Contact Page Text Visibility Override
   Forces all contact text to be visible in both themes
   ===================================================== */

/* Force contact card text visibility */
.contact-card h3 {
    color: #0f172a !important;
    /* Force black in light mode */
    font-weight: 700 !important;
    font-size: 1.5rem !important;
}

.contact-card p {
    color: #334155 !important;
    /* Force dark gray in light mode */
    font-weight: 500 !important;
}

.contact-card .contact-link,
.contact-card a {
    color: #374151 !important;
    /* Force charcoal gray */
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

/* Dark theme overrides */
:root[data-theme="dark"] .contact-card h3 {
    color: #f1f5f9 !important;
    /* Bright white in dark mode */
}

:root[data-theme="dark"] .contact-card p {
    color: #cbd5e1 !important;
    /* Light gray in dark mode */
}

:root[data-theme="dark"] .contact-card .contact-link,
:root[data-theme="dark"] .contact-card a {
    color: #fb923c !important;
    /* Bright orange in dark mode */
}

/* Form labels and text */
.form-group label {
    color: #0f172a !important;
    font-weight: 600 !important;
}

:root[data-theme="dark"] .form-group label {
    color: #f1f5f9 !important;
}

.form-header h2 {
    color: #0f172a !important;
}

:root[data-theme="dark"] .form-header h2 {
    color: #f1f5f9 !important;
}

.form-header p {
    color: #334155 !important;
}

:root[data-theme="dark"] .form-header p {
    color: #cbd5e1 !important;
}

/* Footer Text Visibility Override */
.footer {
    background: var(--bg-primary) !important;
}

.footer h4 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.footer p,
.footer li,
.footer a,
.footer-col ul li {
    color: #334155 !important;
    font-weight: 500 !important;
}

.footer-col ul li i {
    color: var(--primary-color) !important;
}

.footer-bottom p {
    color: #334155 !important;
}

/* Dark theme footer */
:root[data-theme="dark"] .footer {
    background: var(--bg-secondary) !important;
}

:root[data-theme="dark"] .footer h4 {
    color: #f1f5f9 !important;
}

:root[data-theme="dark"] .footer p,
:root[data-theme="dark"] .footer li,
:root[data-theme="dark"] .footer a,
:root[data-theme="dark"] .footer-col ul li {
    color: #cbd5e1 !important;
}

:root[data-theme="dark"] .footer-col ul li i {
    color: #fb923c !important;
}

:root[data-theme="dark"] .footer-bottom p {
    color: #cbd5e1 !important;
}

.footer a:hover {
    color: #ea580c !important;
}

:root[data-theme="dark"] .footer a:hover {
    color: #fb923c !important;
}

/* =====================================================
   Global Text Visibility Override
   Ensures all text is visible and consistent across pages
   ===================================================== */

/* CTA Section - Ensure text is visible */
.cta-section {
    color: var(--text-primary) !important;
}

.cta-content h2 {
    color: var(--text-primary) !important;
}

.cta-content p {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .cta-section {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .cta-content h2 {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .cta-content p {
    color: var(--text-secondary) !important;
}

/* Ensure all section titles use consistent colors */
.section-title {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .section-title {
    color: var(--text-primary) !important;
}

/* Ensure all card text is visible */
.card-base,
.mv-card,
.value-card,
.feature-card,
.journey-content,
.step-content,
.format-card,
.timeline-content,
.stat-card,
.player-card,
.team-card {
    color: var(--text-primary) !important;
}

.card-base p,
.mv-card p,
.value-card p,
.feature-card p,
.journey-content p,
.step-content p,
.format-card p,
.timeline-content p,
.stat-card p,
.player-card p,
.team-card p {
    color: var(--text-secondary) !important;
}

/* Ensure headings are visible */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary) !important;
}

/* Page header text - ensure black on orange background */
.page-header {
    color: #000000 !important;
}

.page-header h1,
.page-header h2,
.page-header h3,
.page-header p {
    color: #000000 !important;
}

/* Dark theme page header - use white text */
:root[data-theme="dark"] .page-header {
    color: #ffffff !important;
}

:root[data-theme="dark"] .page-header h1,
:root[data-theme="dark"] .page-header h2,
:root[data-theme="dark"] .page-header h3,
:root[data-theme="dark"] .page-header p {
    color: #ffffff !important;
}

/* Footer Mobile Spacing Fix - Applied to ALL pages */
/* This file loads LAST to ensure it overrides all other footer styles */
/* Match exactly what works on index.html (from styles.css) */
/* Using high specificity to override base styles from styles.css */
@media (max-width: 768px) {
    footer.footer .footer-grid,
    .footer .footer-grid,
    #footer .footer-grid,
    #footer-placeholder .footer-grid {
        gap: 0.25rem !important;
        row-gap: 0.25rem !important;
        margin-bottom: 1rem !important;
        margin-top: 0 !important;
    }
    
    footer.footer .footer-col,
    .footer .footer-col,
    #footer .footer-col,
    #footer-placeholder .footer-col {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    
    footer.footer .footer-col h4,
    .footer .footer-col h4,
    #footer .footer-col h4,
    #footer-placeholder .footer-col h4 {
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
    }
    
    footer.footer .footer-col p,
    .footer .footer-col p,
    #footer .footer-col p,
    #footer-placeholder .footer-col p {
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
    
    footer.footer .footer-col ul,
    .footer .footer-col ul,
    #footer .footer-col ul,
    #footer-placeholder .footer-col ul {
        margin-top: 0.25rem !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    footer.footer .footer-col ul li,
    .footer .footer-col ul li,
    #footer .footer-col ul li,
    #footer-placeholder .footer-col ul li {
        margin-bottom: 0.25rem !important;
        margin-top: 0 !important;
    }
    
    footer.footer .footer-col ul li:last-child,
    .footer .footer-col ul li:last-child,
    #footer .footer-col ul li:last-child,
    #footer-placeholder .footer-col ul li:last-child {
        margin-bottom: 0 !important;
    }
}