/* ========================================
   PROFESSIONAL FONT IMPROVEMENT
   Modern, clean font family for better readability
   ======================================== */

/* ========================================
   1. IMPORT MODERN FONTS
   ======================================== */

/* Plus Jakarta Sans - Modern, professional heading font */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Inter - Excellent body text font (already imported, but ensuring it) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ========================================
   2. GLOBAL FONT VARIABLES
   ======================================== */

:root {
    /* Primary font for headings - Plus Jakarta Sans (modern, clean) */
    --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Primary font for body text - Inter (excellent readability) */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Fallback font stack */
    --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* ========================================
   3. BODY TEXT - Inter (Professional)
   ======================================== */

body,
html,
p,
span,
div,
li,
a,
button,
input,
textarea,
select,
label {
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ========================================
   4. HEADINGS - Plus Jakarta Sans (Modern)
   ======================================== */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ========================================
   5. HERO HEADINGS - Plus Jakarta Sans
   ======================================== */

.modern-hero-heading,
.hero-title,
.page-title,
.home-hero-section h1,
.accounting-hero-section h1,
.pos-hero-section h1 {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Hero heading second line */
.modern-hero-heading .hero-heading-second-line {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
}

/* ========================================
   6. SECTION HEADINGS - Plus Jakarta Sans
   ======================================== */

.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.testimonials-heading,
.benefits-wrapper-modern h2,
.empowering-businesses-section h2 {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* ========================================
   7. CARD TITLES - Plus Jakarta Sans
   ======================================== */

.modern-card-title,
.mp-products-card__title,
.why-card-title,
.product-card-title,
.benefit-card-title,
.testimonial-card-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

/* ========================================
   8. NAVIGATION - Inter (Clean)
   ======================================== */

.nav-link,
.nav-link-modern,
.navbar-nav .nav-link,
.navbar-brand {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   9. BUTTONS - Inter (Professional)
   ======================================== */

.btn,
.btn-premium,
.btn-primary,
.btn-secondary,
button {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   10. FORMS - Inter (Readable)
   ======================================== */

.form-label,
.form-control,
input,
textarea,
select {
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   11. MOBILE NAVIGATION - Inter
   ======================================== */

.nav-link-mobile,
.accordion-button.mobile-nav-section-btn {
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   12. OVERRIDE OLD FONT DECLARATIONS
   ======================================== */

/* Replace Montserrat with Plus Jakarta Sans */
*[style*="font-family: Montserrat"],
*[style*="font-family: 'Montserrat'"] {
    font-family: var(--font-heading) !important;
}

/* Replace Poppins with Inter for body text */
*[style*="font-family: Poppins"],
*[style*="font-family: 'Poppins'"] {
    font-family: var(--font-body) !important;
}

/* ========================================
   13. SPECIFIC ELEMENT FIXES
   ======================================== */

/* Hero text - Inter */
.modern-hero-text,
.hero-text,
.hero-description {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

/* Section descriptions - Inter */
.section-subtitle,
.section-description {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
}

/* Card text - Inter */
.modern-card-text,
.mp-products-card__description,
.why-card-text {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
}

/* ========================================
   14. FONT WEIGHT OPTIMIZATION
   ======================================== */

/* Headings - Bold weights */
h1, .h1 { font-weight: 800 !important; }
h2, .h2 { font-weight: 700 !important; }
h3, .h3 { font-weight: 700 !important; }
h4, .h4 { font-weight: 600 !important; }
h5, .h5 { font-weight: 600 !important; }
h6, .h6 { font-weight: 600 !important; }

/* Body text - Regular weight */
p, body, span, div, li {
    font-weight: 400 !important;
}

/* Strong text */
strong, b {
    font-weight: 600 !important;
}

/* ========================================
   15. LETTER SPACING IMPROVEMENTS
   ======================================== */

/* Headings - Tighter spacing for modern look */
h1, .h1, .modern-hero-heading {
    letter-spacing: -0.03em !important;
}

h2, .h2, .section-title {
    letter-spacing: -0.02em !important;
}

h3, .h3 {
    letter-spacing: -0.01em !important;
}

/* Body text - Normal spacing for readability */
p, body, span, div, li {
    letter-spacing: -0.01em !important;
}

/* Buttons - Slight spacing */
.btn, button {
    letter-spacing: 0.01em !important;
}

/* ========================================
   16. LINE HEIGHT OPTIMIZATION
   ======================================== */

/* Headings - Tighter line height */
h1, .h1, .modern-hero-heading {
    line-height: 1.2 !important;
}

h2, .h2 {
    line-height: 1.3 !important;
}

h3, .h3 {
    line-height: 1.3 !important;
}

/* Body text - Comfortable reading */
p, body, span, div, li {
    line-height: 1.7 !important;
}

/* ========================================
   17. FONT SMOOTHING (All Elements)
   ======================================== */

* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ========================================
   18. FALLBACK FONTS
   ======================================== */

/* Ensure system fonts as fallback */
body {
    font-family: var(--font-body), var(--font-fallback) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading), var(--font-fallback) !important;
}

/* ========================================
   19. RESPONSIVE FONT OPTIMIZATION
   ======================================== */

/* Mobile - Slightly tighter letter spacing */
@media (max-width: 767px) {
    h1, .h1, .modern-hero-heading {
        letter-spacing: -0.02em !important;
    }
    
    h2, .h2 {
        letter-spacing: -0.01em !important;
    }
}

/* ========================================
   20. SPECIAL ELEMENTS
   ======================================== */

/* Typewriter text */
#typewriter-text {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
}

/* Dropdown titles */
.dropdown-title {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
}

/* Feature titles */
.feature-title,
.benefit-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
}

/* ========================================
   21. PERFORMANCE OPTIMIZATION
   ======================================== */

/* Preload fonts for better performance */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    font-display: swap;
}