/* Font Definitions and Loading for X-Elevator Website */

/* Import Google Fonts with display swap for better performance */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Font Face Declarations with Fallbacks */
@font-face {
    font-family: 'CairoFallback';
    src: local('Cairo'), local('Segoe UI Arabic'), local('Tahoma');
    font-display: swap;
}

@font-face {
    font-family: 'InterFallback';
    src: local('Inter'), local('Segoe UI'), local('Helvetica Neue'), local('Arial');
    font-display: swap;
}

/* Base Font Variables */
:root {
    --font-primary-ar: 'Cairo', 'CairoFallback', 'Segoe UI Arabic', 'Arabic Typesetting', 'Tahoma', sans-serif;
    --font-primary-en: 'Inter', 'InterFallback', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif;
}

/* Universal Font Loading State */
.fonts-loading {
    visibility: hidden;
}

.fonts-loaded {
    visibility: visible;
}

/* Arabic Font Application */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] *,
.arabic-text,
.arabic-text *,
body.rtl-mode,
body.rtl-mode * {
    font-family: var(--font-primary-ar) !important;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* English Font Application */
html[lang="en"],
html[lang="en"] body,
html[lang="en"] *,
.english-text,
.english-text *,
body.ltr-mode,
body.ltr-mode * {
    font-family: var(--font-primary-en) !important;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override for specific elements */
.navbar-brand,
.nav-link,
.btn,
.card-title,
.section-title,
.hero-title,
.hero-subtitle,
.feature-title,
.testimonial-text,
.download-title,
.faq-question,
.form-label,
.form-control,
.accordion-button,
.modal-title,
.modal-body,
.footer-title,
.language-switcher {
    font-family: inherit !important;
}

/* Font Weight Adjustments for Arabic */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
.arabic-text h1,
.arabic-text h2,
.arabic-text h3,
.arabic-text h4,
.arabic-text h5,
.arabic-text h6,
body.rtl-mode h1,
body.rtl-mode h2,
body.rtl-mode h3,
body.rtl-mode h4,
body.rtl-mode h5,
body.rtl-mode h6 {
    font-weight: 700 !important;
}

/* Font Weight Adjustments for English */
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6,
.english-text h1,
.english-text h2,
.english-text h3,
.english-text h4,
.english-text h5,
.english-text h6,
body.ltr-mode h1,
body.ltr-mode h2,
body.ltr-mode h3,
body.ltr-mode h4,
body.ltr-mode h5,
body.ltr-mode h6 {
    font-weight: 600 !important;
}

/* Critical Text Elements - Always Load Fonts */
.hero-title,
.section-title,
.navbar-brand,
.sticky-cta {
    font-display: block !important;
}

@media (max-width: 768px) {

    /* Smaller font sizes for mobile to ensure readability */
    html[lang="ar"] body,
    .arabic-text,
    body.rtl-mode {
        font-size: 14px;
        line-height: 1.6;
    }

    html[lang="en"] body,
    .english-text,
    body.ltr-mode {
        font-size: 14px;
        line-height: 1.5;
    }
}