/* ========================================
   PROFESSIONAL FIX - Text, Images & Colors
   Comprehensive fix for oversized text, image sizing, and color improvements
   ======================================== */

/* ========================================
   1. HERO HEADING SIZE REDUCTION
   ======================================== */

/* Reduce hero heading size - Professional scale */
.modern-hero-heading,
.hero-title,
.page-title,
.home-hero-section h1,
.accounting-hero-section h1,
.pos-hero-section h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important; /* Reduced from 3rem */
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important; /* Dark slate - not black */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

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

/* Typewriter text styling */
#typewriter-text {
    color: #1E5CAA !important;
    font-weight: 800 !important;
}

/* Typewriter cursor */
.typewriter-cursor {
    color: #1E5CAA !important;
    animation: blink 1s infinite !important;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

/* Mobile hero heading - Reduced */
@media (max-width: 576px) {
    .modern-hero-heading,
    .hero-title,
    .page-title {
        font-size: clamp(1.5rem, 7vw, 2rem) !important; /* Reduced from 2.25rem */
        line-height: 1.3 !important;
    }
}

/* Tablet hero heading */
@media (min-width: 577px) and (max-width: 768px) {
    .modern-hero-heading {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important; /* Reduced */
    }
}

/* Desktop hero heading */
@media (min-width: 992px) {
    .modern-hero-heading {
        font-size: clamp(2rem, 3.5vw, 2.5rem) !important; /* Reduced from 3rem */
    }
}

/* ========================================
   2. HERO TEXT SIZE REDUCTION
   ======================================== */

/* Reduce hero text size */
.modern-hero-text,
.hero-text,
.hero-description {
    font-size: clamp(0.9375rem, 1.5vw, 1.125rem) !important; /* Reduced */
    line-height: 1.7 !important;
    font-weight: 400 !important;
    color: #475569 !important; /* Professional grey */
    max-width: 32rem !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Mobile hero text */
@media (max-width: 576px) {
    .modern-hero-text {
        font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
        line-height: 1.65 !important;
    }
}

/* ========================================
   3. SECTION HEADINGS SIZE REDUCTION
   ======================================== */

/* Reduce section heading sizes */
.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.testimonials-heading,
.benefits-wrapper-modern h2,
.empowering-businesses-section h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important; /* Reduced from 2.5rem */
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Mobile section headings */
@media (max-width: 767px) {
    .section-title,
    .products-section-heading,
    .trusted-by-heading,
    .why-moneypex-heading {
        font-size: clamp(1.375rem, 6vw, 1.875rem) !important; /* Reduced */
    }
}

/* ========================================
   4. FIX ALL LARGE TEXT SIZES
   ======================================== */

/* Fix any 3rem+ font sizes */
h1, .h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important; /* Max 2.5rem instead of 3rem+ */
}

h2, .h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important; /* Max 2.25rem */
}

/* Fix specific large text instances */
@media (max-width: 991px) {
    /* Reduce any oversized text on mobile/tablet - handled by clamp() values above */
}

/* ========================================
   5. HERO IMAGE SIZING FIXES
   ======================================== */

/* Hero image container */
.hero-image-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Hero main image - Professional sizing */
.hero-main-image,
.home-hero-image,
.hero-dashboard-image {
    width: 100% !important;
    max-width: 600px !important; /* Limit max width */
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px -15px rgba(15, 23, 42, 0.15) !important;
    transition: transform 0.3s ease !important;
}

/* Hero image hover effect */
.hero-main-image:hover,
.home-hero-image:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 25px 70px -15px rgba(15, 23, 42, 0.2) !important;
}

/* Mobile hero image */
@media (max-width: 767px) {
    .hero-main-image,
    .home-hero-image {
        max-width: 100% !important;
        max-height: 300px !important; /* Limit height on mobile */
        object-fit: contain !important;
    }
}

/* Tablet hero image */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-main-image,
    .home-hero-image {
        max-width: 500px !important;
    }
}

/* Desktop hero image */
@media (min-width: 992px) {
    .hero-main-image,
    .home-hero-image {
        max-width: 600px !important;
    }
}

/* ========================================
   6. COLOR IMPROVEMENTS - Professional Palette
   ======================================== */

/* Primary Brand Color - Professional Blue */
:root {
    --primary-blue: #1E5CAA;
    --primary-blue-dark: #164a8a;
    --primary-blue-light: #2563eb;
    --text-primary: #0f172a;
    --text-secondary: #1e293b;
    --text-tertiary: #475569;
    --text-muted: #64748b;
    --bg-light: #f8fafc;
    --border-color: #e2e8f0;
}

/* Hero heading colors - Professional */
.modern-hero-heading {
    color: #0f172a !important; /* Dark slate - not black */
}

.modern-hero-heading .hero-heading-second-line {
    color: #1e293b !important; /* Professional dark gray - not black */
}

/* Hero text color - Professional grey */
.modern-hero-text {
    color: var(--text-tertiary) !important;
}

/* Section headings - Professional dark */
.section-title,
.products-section-heading,
.why-moneypex-heading {
    color: var(--text-primary) !important;
}

/* Section descriptions - Professional grey */
.section-subtitle,
.section-description {
    color: var(--text-muted) !important;
}

/* Links - Professional blue */
a,
.link,
.nav-link-modern {
    color: var(--primary-blue) !important;
}

a:hover,
.link:hover {
    color: var(--primary-blue-dark) !important;
}

/* Buttons - Professional styling matching design */
.btn-premium,
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1E5CAA 100%) !important;
    color: #1e293b !important; /* Dark gray/charcoal text as shown in design */
    border: none !important;
    border-radius: 9999px !important; /* Fully rounded */
    padding: 0.875rem 2rem !important;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.625rem !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(30, 92, 170, 0.2), 0 2px 4px rgba(30, 92, 170, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
}

/* Button text styling */
.btn-premium span,
.btn-primary span {
    color: #1e293b !important; /* Dark gray/charcoal */
    font-weight: 600 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Button SVG icon - White arrow */
.btn-premium svg,
.btn-primary svg {
    color: #ffffff !important; /* White arrow icon */
    width: 1.125rem !important;
    height: 1.125rem !important;
    stroke-width: 2.5 !important;
    position: relative !important;
    z-index: 2 !important;
    transition: transform 0.3s ease !important;
}

/* Button hover state */
.btn-premium:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #164a8a 100%) !important;
    box-shadow: 0 6px 16px rgba(30, 92, 170, 0.3), 0 4px 6px rgba(30, 92, 170, 0.15) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

/* Button hover - text stays dark */
.btn-premium:hover span,
.btn-primary:hover span {
    color: #1e293b !important; /* Keep dark text on hover */
}

/* Button hover - arrow moves right */
.btn-premium:hover svg,
.btn-primary:hover svg {
    transform: translateX(4px) !important;
    color: #ffffff !important; /* Keep white arrow */
}

/* Button active state */
.btn-premium:active,
.btn-primary:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(30, 92, 170, 0.2) !important;
}

/* Hero section button specific styling */
.hero-button-animate .btn-premium,
.home-hero-section .btn-premium {
    padding: 0.875rem 2rem !important;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem) !important;
    min-height: 48px !important;
}

/* Mobile button adjustments */
@media (max-width: 767px) {
    .btn-premium,
    .btn-primary {
        padding: 0.875rem 1.75rem !important;
        font-size: clamp(0.9375rem, 4vw, 1.0625rem) !important;
        width: auto !important;
        min-width: 160px !important;
    }
}

/* ========================================
   7. CARD & COMPONENT COLORS
   ======================================== */

/* Card titles - Professional */
.modern-card-title,
.mp-products-card__title,
.why-card-title {
    color: var(--text-primary) !important;
}

/* Card text - Professional grey */
.modern-card-text,
.mp-products-card__description,
.why-card-text {
    color: var(--text-tertiary) !important;
}

/* Card borders - Subtle */
.modern-card,
.mp-products-card,
.why-card {
    border-color: var(--border-color) !important;
}

/* ========================================
   8. BACKGROUND COLORS - Professional
   ======================================== */

/* Hero section background */
.modern-hero-section,
.home-hero-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

/* Section backgrounds */
.section-modern {
    background: #ffffff !important;
}

.section-modern-alt {
    background: var(--bg-light) !important;
}

/* ========================================
   9. FIX SPECIFIC LARGE TEXT INSTANCES
   ======================================== */

/* Fix any remaining 3rem font sizes */
*[style*="font-size: 3rem"],
*[style*="font-size: 4rem"] {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
}

/* Fix clamp values that are too large */
*[style*="clamp"][style*="3rem"],
*[style*="clamp"][style*="4rem"] {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
}

/* ========================================
   10. IMAGE OPTIMIZATION
   ======================================== */

/* All images - Professional sizing */
img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Hero images specifically */
.hero-image-wrapper img,
.hero-main-image,
.home-hero-image {
    max-width: 600px !important;
    width: 100% !important;
    height: auto !important;
}

/* Product images */
.product-image,
.mp-products-card img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* ========================================
   11. RESPONSIVE TEXT SIZE LIMITS
   ======================================== */

/* Prevent text from being too large on any screen */
@media (max-width: 767px) {
    h1, .h1, .modern-hero-heading {
        font-size: clamp(1.5rem, 7vw, 2rem) !important; /* Max 2rem on mobile */
    }
    
    h2, .h2 {
        font-size: clamp(1.375rem, 6vw, 1.875rem) !important; /* Max 1.875rem */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    h1, .h1, .modern-hero-heading {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important; /* Max 2.25rem on tablet */
    }
}

@media (min-width: 992px) {
    h1, .h1, .modern-hero-heading {
        font-size: clamp(2rem, 3.5vw, 2.5rem) !important; /* Max 2.5rem on desktop */
    }
}

/* ========================================
   12. PROFESSIONAL SPACING
   ======================================== */

/* Hero section spacing */
.modern-hero-section {
    padding-top: clamp(3rem, 8vh, 5rem) !important;
    padding-bottom: clamp(2rem, 6vh, 4rem) !important;
}

/* Section spacing */
.section-modern {
    padding-top: clamp(3rem, 6vh, 4.5rem) !important;
    padding-bottom: clamp(3rem, 6vh, 4.5rem) !important;
}

/* ========================================
   13. TYPEWRITER TEXT COLOR FIX
   ======================================== */

/* Typewriter text - Professional blue */
#typewriter-text {
    color: var(--primary-blue) !important;
    font-weight: 800 !important;
}

/* Typewriter cursor - Matching blue */
.typewriter-cursor {
    color: var(--primary-blue) !important;
    font-weight: 800 !important;
}

/* ========================================
   14. OVERALL TEXT SIZE REDUCTION
   ======================================== */

/* Reduce all large headings globally */
h1, .h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important; /* Reduced from 3rem+ */
}

h2, .h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important; /* Reduced */
}

h3, .h3 {
    font-size: clamp(1.25rem, 3vw, 1.875rem) !important;
}

/* ========================================
   15. FINAL PROFESSIONAL TOUCHES
   ======================================== */

/* Smooth transitions */
* {
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

/* Professional shadows */
.modern-card,
.mp-products-card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

/* Professional borders */
.modern-card,
.mp-products-card {
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
}

/* ========================================
   16. MOBILE SPECIFIC FIXES
   ======================================== */

@media (max-width: 767px) {
    /* Ensure text is never too large on mobile */
    .modern-hero-heading {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }
    
    .modern-hero-text {
        font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
    }
    
    /* Images should not overflow */
    .hero-main-image,
    .home-hero-image {
        max-height: 250px !important;
        width: 100% !important;
    }
}

/* ========================================
   17. DESKTOP OPTIMIZATIONS
   ======================================== */

@media (min-width: 992px) {
    /* Optimal sizes for desktop */
    .modern-hero-heading {
        font-size: clamp(2rem, 3.5vw, 2.5rem) !important; /* Professional size */
    }
    
    .modern-hero-text {
        font-size: 1.125rem !important; /* Optimal reading size */
    }
    
    /* Hero images - Professional max size */
    .hero-main-image,
    .home-hero-image {
        max-width: 600px !important;
    }
}