/*-----------------------------------------------------------------------------------
    Arabic Font Support - Cairo Font Family (Google Fonts)
    Applied when lang="ar" is set on the HTML element
    
    IMPORTANT: letter-spacing MUST be 0 or normal for Arabic text to render correctly.
    Negative letter-spacing breaks Arabic ligatures and causes disconnected letters.
-----------------------------------------------------------------------------------*/

/* Base Arabic styles */
html[lang="ar"],
html[lang="ar"] body {
    font-family: 'Cairo', sans-serif !important;
    direction: rtl !important;
    letter-spacing: 0 !important;
}

/* Override CSS Variables for Arabic */
html[lang="ar"] {
    --tj-ff-body: 'Cairo', sans-serif;
    --tj-ff-heading: 'Cairo', sans-serif;
}

/* CRITICAL: Fix letter-spacing for ALL elements in Arabic 
   This is the most important rule - Arabic text breaks with negative letter-spacing */
html[lang="ar"] *,
html[lang="ar"] *::before,
html[lang="ar"] *::after {
    letter-spacing: 0 !important;
    word-spacing: normal !important;
}

/* Universal Font Override - Apply Cairo to ALL elements except icons */
html[lang="ar"] *:not(i):not([class^="tji-"]):not([class*=" tji-"]):not([class^="fa-"]):not([class*=" fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad):not(.fass):not(.fasr):not(.fasl) {
    font-family: 'Cairo', sans-serif !important;
}

/* IMPORTANT: Preserve Icon Fonts - Must override Arabic font for icons */
html[lang="ar"] [class^="tji-"],
html[lang="ar"] [class*=" tji-"],
html[lang="ar"] [class^="tji-"]::before,
html[lang="ar"] [class*=" tji-"]::before {
    font-family: "bexon-icons" !important;
}

/* Font Awesome 6 Pro */
html[lang="ar"] .fa,
html[lang="ar"] .fas,
html[lang="ar"] .far,
html[lang="ar"] .fal,
html[lang="ar"] .fat,
html[lang="ar"] .fa-classic,
html[lang="ar"] .fa-solid,
html[lang="ar"] .fa-regular,
html[lang="ar"] .fa-light,
html[lang="ar"] .fa-thin,
html[lang="ar"] .fa::before,
html[lang="ar"] .fas::before,
html[lang="ar"] .far::before,
html[lang="ar"] .fal::before,
html[lang="ar"] .fat::before {
    font-family: "Font Awesome 6 Pro" !important;
}

/* Font Awesome 6 Brands */
html[lang="ar"] .fab,
html[lang="ar"] .fa-brands,
html[lang="ar"] .fab::before,
html[lang="ar"] .fa-brands::before {
    font-family: "Font Awesome 6 Brands" !important;
}

/* Font Awesome 6 Duotone */
html[lang="ar"] .fad,
html[lang="ar"] .fa-duotone,
html[lang="ar"] .fad::before,
html[lang="ar"] .fa-duotone::before {
    font-family: "Font Awesome 6 Duotone" !important;
}

/* Font Awesome 6 Sharp */
html[lang="ar"] .fass,
html[lang="ar"] .fasr,
html[lang="ar"] .fasl,
html[lang="ar"] .fa-sharp,
html[lang="ar"] .fass::before,
html[lang="ar"] .fasr::before,
html[lang="ar"] .fasl::before,
html[lang="ar"] .fa-sharp::before {
    font-family: "Font Awesome 6 Sharp" !important;
}

/* Generic fa- prefix icons */
html[lang="ar"] [class^="fa-"],
html[lang="ar"] [class*=" fa-"],
html[lang="ar"] [class^="fa-"]::before,
html[lang="ar"] [class*=" fa-"]::before {
    font-family: var(--fa-style-family, "Font Awesome 6 Pro") !important;
}

/* Apply to all text elements explicitly with high specificity */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] a,
html[lang="ar"] span,
html[lang="ar"] div,
html[lang="ar"] li,
html[lang="ar"] ul,
html[lang="ar"] ol,
html[lang="ar"] label,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] button,
html[lang="ar"] select,
html[lang="ar"] option,
html[lang="ar"] td,
html[lang="ar"] th,
html[lang="ar"] .btn,
html[lang="ar"] .tj-primary-btn,
html[lang="ar"] .tj-secondary-btn {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

/* Section Headings - Very High Specificity */
html[lang="ar"] .sec-heading,
html[lang="ar"] .sec-heading *,
html[lang="ar"] .sec-heading .sec-title,
html[lang="ar"] .sec-heading .sub-title,
html[lang="ar"] .sec-heading.style-2 .sec-title,
html[lang="ar"] .sec-heading.style-3 .sec-title,
html[lang="ar"] .sec-heading.style-4 .sec-title,
html[lang="ar"] .sec-heading.style-6 .sec-title,
html[lang="ar"] .sec-heading.style-7 .sec-title,
html[lang="ar"] .sec-heading.style-8 .sec-title,
html[lang="ar"] .sec-title,
html[lang="ar"] .sub-title,
html[lang="ar"] .title,
html[lang="ar"] .title-anim,
html[lang="ar"] .text-anim,
html[lang="ar"] h2.sec-title,
html[lang="ar"] h2.title-anim,
html[lang="ar"] h2.text-anim {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

/* Slider/Hero Titles - Very High Specificity */
html[lang="ar"] .slider-title,
html[lang="ar"] .slider-title span,
html[lang="ar"] .mobile-hero-title,
html[lang="ar"] .mobile-hero-title span,
html[lang="ar"] h1.slider-title,
html[lang="ar"] h1.mobile-hero-title,
html[lang="ar"] .hero-section *,
html[lang="ar"] .slider-content *,
html[lang="ar"] .swiper-slide h1,
html[lang="ar"] .swiper-slide h2,
html[lang="ar"] .swiper-slide h3,
html[lang="ar"] .swiper-slide p,
html[lang="ar"] .swiper-slide span {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

/* Heading Wrappers */
html[lang="ar"] .heading-wrap-content,
html[lang="ar"] .heading-wrap-content *,
html[lang="ar"] .sec-heading-wrap,
html[lang="ar"] .sec-heading-wrap *,
html[lang="ar"] .sec-heading-centered,
html[lang="ar"] .sec-heading-centered * {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

/* Home Sections - Service, Team, Blog, etc */
html[lang="ar"] .h6-service *,
html[lang="ar"] .h6-service-item *,
html[lang="ar"] .h6-service-content *,
html[lang="ar"] .h6-service-title-wrap *,
html[lang="ar"] .h9-testimonial-heading *,
html[lang="ar"] .h9-testimonial-heading .sec-heading *,
html[lang="ar"] .faq-title,
html[lang="ar"] .title-area *,
html[lang="ar"] .portfolio-item *,
html[lang="ar"] .project-item *,
html[lang="ar"] .team-item *,
html[lang="ar"] .blog-item *,
html[lang="ar"] .service-item *,
html[lang="ar"] .showcase-item * {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

/* Specific component overrides */
html[lang="ar"] .tj-section-heading,
html[lang="ar"] .tj-section-heading *,
html[lang="ar"] .section-heading,
html[lang="ar"] .section-heading *,
html[lang="ar"] .heading-title,
html[lang="ar"] .widget-title,
html[lang="ar"] .menu-item,
html[lang="ar"] .nav-link,
html[lang="ar"] .dropdown-item {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

/* Header and Navigation */
html[lang="ar"] .tj-header,
html[lang="ar"] .tj-header *,
html[lang="ar"] .main-menu,
html[lang="ar"] .main-menu *,
html[lang="ar"] .mainmenu *,
html[lang="ar"] .navbar,
html[lang="ar"] .navbar *,
html[lang="ar"] .offcanvas,
html[lang="ar"] .offcanvas *,
html[lang="ar"] header,
html[lang="ar"] header * {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

/* Footer */
html[lang="ar"] .tj-footer,
html[lang="ar"] .tj-footer *,
html[lang="ar"] footer,
html[lang="ar"] footer * {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

/* Form elements */
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] input::placeholder,
html[lang="ar"] textarea::placeholder {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

/* Buttons */
html[lang="ar"] button,
html[lang="ar"] .btn,
html[lang="ar"] .btn *,
html[lang="ar"] .tj-primary-btn,
html[lang="ar"] .tj-primary-btn *,
html[lang="ar"] .tj-secondary-btn,
html[lang="ar"] .tj-secondary-btn * {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

/* Adjust line height for Arabic text */
html[lang="ar"] body {
    line-height: 1.8;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    line-height: 1.5;
}

/* Ensure proper text rendering for Arabic */
html[lang="ar"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* RTL specific adjustments */
html[lang="ar"] .text-left {
    text-align: right !important;
}

html[lang="ar"] .text-right {
    text-align: left !important;
}

/* Fix any inline styles that might have letter-spacing */
html[lang="ar"] [style*="letter-spacing"] {
    letter-spacing: 0 !important;
}

/* Preloader Text */
html[lang="ar"] .tj-preloader-text,
html[lang="ar"] #tj-weave-anim {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
    direction: rtl;
}