/* ========================================
   COLOR FIX - Remove All Black Text
   Replace pure black (#000) with professional dark gray
   ======================================== */

/* ========================================
   1. GLOBAL BLACK TEXT REPLACEMENT
   ======================================== */

/* Force override any black colors - Don't use global inherit as it hides text */
*[style*="color: #000"],
*[style*="color: #000000"],
*[style*="color: black"],
*[style*="color:Black"] {
    color: #0f172a !important; /* Professional dark slate instead of black */
}

/* ========================================
   2. HEADINGS - Professional Dark Gray
   ======================================== */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    color: #0f172a !important; /* Dark slate - not black */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   3. HERO HEADINGS - Professional Color
   ======================================== */

.modern-hero-heading,
.hero-title,
.page-title,
.home-hero-section h1,
.accounting-hero-section h1,
.pos-hero-section h1 {
    color: #0f172a !important; /* Dark slate instead of black */
}

/* Hero heading second line */
.modern-hero-heading .hero-heading-second-line {
    color: #1e293b !important; /* Slightly lighter for hierarchy */
}

/* Hero heading and all children - explicit colors */
.modern-hero-heading {
    color: #0f172a !important;
}

.modern-hero-heading * {
    color: inherit !important; /* Only for children of hero heading */
}

/* Ensure typewriter text is visible */
#typewriter-text {
    color: #1E5CAA !important;
}

.typewriter-cursor {
    color: #1E5CAA !important;
}

/* ========================================
   4. SECTION HEADINGS - Professional Color
   ======================================== */

.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.testimonials-heading,
.benefits-wrapper-modern h2,
.empowering-businesses-section h2 {
    color: #0f172a !important; /* Dark slate */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   5. CARD TITLES - Professional Color
   ======================================== */

.modern-card-title,
.mp-products-card__title,
.why-card-title,
.product-card-title,
.benefit-card-title,
.testimonial-card-title {
    color: #0f172a !important; /* Dark slate */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   6. BODY TEXT - Professional Gray
   ======================================== */

/* Body text - ensure visibility */
body {
    color: #1e293b !important; /* Professional dark gray - not black */
}

/* Default text elements - visible */
p,
span,
div,
li {
    color: #1e293b !important; /* Professional dark gray - not black */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Paragraphs - ensure visibility */
p {
    color: #475569 !important; /* Medium gray for readability */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   7. NAVIGATION - Professional Color
   ======================================== */

.nav-link,
.nav-link-modern,
.navbar-nav .nav-link {
    color: #1e293b !important; /* Dark gray - not black */
}

.nav-link:hover {
    color: #1E5CAA !important;
}

.navbar-brand {
    color: #0f172a !important; /* Dark slate */
}

/* ========================================
   8. BUTTONS - Professional Text Color
   ======================================== */

.btn-premium span,
.btn-primary span {
    color: #1e293b !important; /* Dark gray text on button */
}

/* ========================================
   9. LINKS - Professional Color
   ======================================== */

a,
.link,
.link-modern {
    color: #1E5CAA !important; /* Brand blue */
}

a:hover,
.link:hover {
    color: #164a8a !important; /* Darker blue on hover */
}

/* ========================================
   10. FORMS - Professional Color
   ======================================== */

.form-label,
label {
    color: #1e293b !important; /* Dark gray - not black */
}

.form-control,
input,
textarea,
select {
    color: #0f172a !important; /* Dark slate for input text */
}

/* ========================================
   11. MOBILE NAVIGATION - Professional Color
   ======================================== */

.nav-link-mobile {
    color: #1e293b !important; /* Dark gray - not black */
}

.nav-link-mobile:hover {
    color: #1E5CAA !important;
}

.accordion-button.mobile-nav-section-btn {
    color: #0f172a !important; /* Dark slate */
}

/* ========================================
   12. SPECIFIC ELEMENT FIXES
   ======================================== */

/* Fix any remaining black in design-system.css */
.modern-hero-heading {
    color: #0f172a !important; /* Override black */
}

/* Fix any black in home.css */
.modern-hero-heading .hero-heading-second-line {
    color: #1e293b !important; /* Override black */
}

/* Text dark class - use professional color */
.text-dark {
    color: #1e293b !important; /* Dark gray instead of black */
}

/* ========================================
   13. OVERRIDE INLINE STYLES
   ======================================== */

/* Target elements with inline black styles */
[style*="color: #000"],
[style*="color: #000000"],
[style*="color: black"] {
    color: #0f172a !important;
}

/* ========================================
   14. CARDS & COMPONENTS
   ======================================== */

/* Card text */
.modern-card-text,
.mp-products-card__description,
.why-card-text {
    color: #475569 !important; /* Medium gray */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Feature titles */
.feature-title,
.benefit-title {
    color: #0f172a !important; /* Dark slate */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   15. DROPDOWN & MENU ITEMS
   ======================================== */

.dropdown-title {
    color: #0f172a !important; /* Dark slate */
    visibility: visible !important;
    opacity: 1 !important;
}

.dropdown-item-modern {
    color: #1e293b !important; /* Dark gray */
    visibility: visible !important;
    opacity: 1 !important;
}

.dropdown-item-modern:hover {
    color: #1E5CAA !important;
}

/* ========================================
   16. FOOTER & SECONDARY TEXT - ENSURE VISIBILITY
   ======================================== */

/* Modern Footer - Ensure it's visible */
.modern-footer {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}

.modern-footer * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Footer text colors - ensure visibility */
footer,
.footer {
    color: #f8fafc !important; /* Light text for dark background */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Footer headings */
.footer-heading,
footer h3,
footer h4,
footer h5 {
    color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Footer links */
footer a,
.footer-link {
    color: #cbd5e1 !important; /* Light gray for links */
    visibility: visible !important;
    opacity: 1 !important;
}

footer a:hover,
.footer-link:hover {
    color: #60a5fa !important; /* Blue on hover */
}

/* Footer text */
.footer-text,
.footer-description,
footer p {
    color: #94a3b8 !important; /* Light gray for descriptions */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Footer content container */
.footer-content,
.modern-footer-container {
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ========================================
   17. UTILITY CLASSES
   ======================================== */

/* Text color utilities */
.text-black {
    color: #0f172a !important; /* Use dark slate instead of black */
}

.text-dark {
    color: #1e293b !important; /* Professional dark gray */
}

.text-gray-900 {
    color: #0f172a !important;
}

.text-gray-800 {
    color: #1e293b !important;
}

.text-gray-700 {
    color: #334155 !important;
}

/* ========================================
   18. SPECIFIC PAGE FIXES
   ======================================== */

/* Hero section - explicit colors for all elements */
.home-hero-section .modern-hero-heading {
    color: #0f172a !important;
}

.home-hero-section .modern-hero-text {
    color: #475569 !important;
}

.home-hero-section p {
    color: #475569 !important;
}

.home-hero-section span {
    color: inherit !important; /* Allow spans to inherit from parent */
}

.home-hero-section #typewriter-text {
    color: #1E5CAA !important;
}

.home-hero-section .typewriter-cursor {
    color: #1E5CAA !important;
}

/* ========================================
   19. FORCE OVERRIDE BLACK IN ALL CSS FILES
   ======================================== */

/* Override any black from home.css */
.modern-hero-heading {
    color: #0f172a !important;
}

/* Override any black from design-system.css */
.modern-hero-heading {
    color: #0f172a !important;
}

/* ========================================
   20. FINAL GLOBAL OVERRIDE - ENSURE VISIBILITY
   ======================================== */

/* Ensure base text is visible */
body {
    color: #1e293b !important; /* Professional dark gray */
}

html {
    color: #1e293b !important;
}

/* Headings should be darker but not black - ensure visibility */
h1, h2, h3, h4, h5, h6 {
    color: #0f172a !important; /* Dark slate - professional alternative to black */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure all text elements are visible */
p, span, div, li, a, label {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure headings are visible */
.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.modern-hero-heading,
h1, h2, h3, h4, h5, h6 {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}