/* ==========================================================================
   MUKOUN — GLOBAL BILINGUAL TYPOGRAPHY POLICY
   Arabic  : Tajawal
   English : DM Sans

   Important:
   - Typography only. No layout, grid, image, color, spacing or animation changes.
   - Font Awesome / icon fonts are intentionally excluded.
   - Tajawal files are expected at: public/assets/fonts/tajawal/
   - DM Sans is the existing/original English font referenced by the theme.
   ========================================================================== */

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-ExtraBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/Tajawal-Black.ttf") format("truetype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

:root {
    --mukoun-font-ar: "Tajawal", Arial, sans-serif;
    --mukoun-font-en: "DM Sans", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Arabic
   -------------------------------------------------------------------------- */
html[lang^="ar"] body.mukoun-font-policy.mukoun-lang-ar[data-font-policy="mukoun"] {
    font-family: var(--mukoun-font-ar) !important;
}

html[lang^="ar"] body.mukoun-font-policy.mukoun-lang-ar[data-font-policy="mukoun"]
:is(
    h1, h2, h3, h4, h5, h6,
    p, a, li, label, button,
    input, textarea, select, option,
    b, strong, small, em, blockquote,
    td, th,
    span:not([class*="fa-"]):not([class*="icon"]):not(.fa):not(.fas):not(.far):not(.fab)
) {
    font-family: var(--mukoun-font-ar) !important;
    font-synthesis: none;
}

/* Arabic connected letters: never inherit Latin tracking. */
html[lang^="ar"] body.mukoun-font-policy.mukoun-lang-ar[data-font-policy="mukoun"]
:is(h1, h2, h3, h4, h5, h6, p, a, li, label, button, b, strong, small) {
    letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   English
   -------------------------------------------------------------------------- */
html[lang^="en"] body.mukoun-font-policy.mukoun-lang-en[data-font-policy="mukoun"] {
    font-family: var(--mukoun-font-en) !important;
}

html[lang^="en"] body.mukoun-font-policy.mukoun-lang-en[data-font-policy="mukoun"]
:is(
    h1, h2, h3, h4, h5, h6,
    p, a, li, label, button,
    input, textarea, select, option,
    b, strong, small, em, blockquote,
    td, th,
    span:not([class*="fa-"]):not([class*="icon"]):not(.fa):not(.fas):not(.far):not(.fab)
) {
    font-family: var(--mukoun-font-en) !important;
    font-synthesis: none;
}

/* --------------------------------------------------------------------------
   Keep icon fonts intact.
   IMPORTANT:
   Do not set font-family on Font Awesome / icon classes here.
   The Font Awesome stylesheet must remain the authority for .fas, .far, .fab,
   .fa-solid, .fa-regular, .fa-brands, etc.

   The previous rule used `font-family: revert;`, which overrode Font Awesome's
   own font-family and caused glyphs to render as empty/square symbols.
   -------------------------------------------------------------------------- */