/**
 * Tajawal Arabic Font - COMPREHENSIVE FIX
 * For Ali Yosef - aliyosef.online
 */

/* Import Tajawal font */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

/* Apply Tajawal font to Arabic content */
html[lang="ar"] :not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-brands):not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-thin):not(.fa-duotone),
html[lang="ar"] *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-brands):not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-thin):not(.fa-duotone),
body[dir="rtl"] :not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-brands):not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-thin):not(.fa-duotone),
body[dir="rtl"] *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-brands):not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-thin):not(.fa-duotone) {
    font-family: 'Tajawal', 'Inter', sans-serif !important;
}

/* Explicitly restore FontAwesome font family for icon classes */
html[lang="ar"] .fa,
html[lang="ar"] .fas,
html[lang="ar"] .far,
html[lang="ar"] .fal,
html[lang="ar"] .fab,
html[lang="ar"] .fa-brands,
html[lang="ar"] .fa-solid,
html[lang="ar"] .fa-regular,
html[lang="ar"] .fa-light,
html[lang="ar"] .fa-thin,
html[lang="ar"] .fa-duotone,
body[dir="rtl"] .fa,
body[dir="rtl"] .fas,
body[dir="rtl"] .far,
body[dir="rtl"] .fal,
body[dir="rtl"] .fab,
body[dir="rtl"] .fa-brands,
body[dir="rtl"] .fa-solid,
body[dir="rtl"] .fa-regular,
body[dir="rtl"] .fa-light,
body[dir="rtl"] .fa-thin,
body[dir="rtl"] .fa-duotone {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}

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

/* CRITICAL: Keep Arabic letters connected */
html[lang="ar"] *,
body[dir="rtl"] * {
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

/* Proper text rendering */
html[lang="ar"],
body[dir="rtl"] {
    direction: rtl;
    text-align: right;
    text-rendering: optimizeLegibility;
}

/* If any char/word spans exist, make them invisible and show parent text */
html[lang="ar"] .char,
html[lang="ar"] .word,
html[lang="ar"] .tp-letter-span,
html[lang="ar"] .tp-word-span,
body[dir="rtl"] .char,
body[dir="rtl"] .word,
body[dir="rtl"] .tp-letter-span,
body[dir="rtl"] .tp-word-span {
    display: none !important;
}

/* Ensure parent elements show their text content */
html[lang="ar"] .tp-char-animation::before,
html[lang="ar"] .tp_text_anim::before,
html[lang="ar"] .tp-text-perspective::before,
html[lang="ar"] .tp_reveal_anim::before,
html[lang="ar"] .text-scale-anim::before,
body[dir="rtl"] .tp-char-animation::before,
body[dir="rtl"] .tp_text_anim::before,
body[dir="rtl"] .tp-text-perspective::before,
body[dir="rtl"] .tp_reveal_anim::before,
body[dir="rtl"] .text-scale-anim::before {
    content: attr(data-text);
}

/* Remove any transforms on text elements */
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"] span:not(.tp-btn-black-radius span):not(.tp-btn-black span):not(.tp-btn-black-square span):not(.tp-btn-black-circle span):not(.tp-btn-green-border span):not(.tp-btn-yellow-green span),
body[dir="rtl"] span:not(.tp-btn-black-radius span):not(.tp-btn-black span):not(.tp-btn-black-square span):not(.tp-btn-black-circle span):not(.tp-btn-green-border span):not(.tp-btn-yellow-green span) {
    transform: none !important;
}