/* =========================================================
   PUIUX Elsafia Custom Fonts - FINAL
   Arabic:
     - Headers: Kufyan
     - Body: Cairo
   English:
     - Headers: Philosopher
     - Body: Roboto Serif (Thin)
   ========================================================= */


/* =========================================================
   1) Font Faces
   ========================================================= */

/* ---------- Kufyan (Arabic Headers) ---------- */
@font-face {
    font-family: "Kufyan";
    src: url("../fonts/KufyanArabic-Black.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Kufyan";
    src: url("../fonts/KufyanArabic-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* Kufyan weight mapping (so browser doesn't fall back) */
@font-face {
    font-family: "Kufyan";
    src: url("../fonts/KufyanArabic-Medium.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Kufyan";
    src: url("../fonts/KufyanArabic-Medium.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Kufyan";
    src: url("../fonts/KufyanArabic-Black.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* ---------- Cairo (Arabic Body) ---------- */
@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Optional: Cairo Variable Font (kept because you have it) */
@font-face {
    font-family: "Cairo Variable";
    src: url("../fonts/Cairo-VariableFont_slnt,wght.ttf") format("truetype");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Philosopher (English Headers) ---------- */
@font-face {
    font-family: "Philosopher";
    src: url("../fonts/Philosopher-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Philosopher";
    src: url("../fonts/Philosopher-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Philosopher";
    src: url("../fonts/Philosopher-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Philosopher";
    src: url("../fonts/Philosopher-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ---------- Roboto Serif (English Body) ---------- */
@font-face {
    font-family: "Roboto Serif";
    src: url("../fonts/Mulish-Regular.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Roboto Serif";
    src: url("../fonts/RobotoSerif-ThinItalic.ttf") format("truetype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* Optional extra weights (kept if you need them later - safe to keep) */
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

/* ---------- Legacy fonts kept (if used somewhere else) ---------- */
@font-face {
    font-family: sakrsoft;
    src: url("../fonts/SAKRSOFT-REGULAR.TTF") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   2) Font Variables
   ========================================================= */
:root{
    --ar-header-font: "Kufyan";
    --ar-body-font: "Cairo";
    --en-header-font: "Philosopher";
    --en-body-font: "Roboto Serif";
}


/* =========================================================
   3) Language Targeting
   ========================================================= */

/* Arabic language codes used commonly in WP */
html[lang="ar"],
html[lang="ar-SA"] {
    direction: rtl;
}

/* Avoid browser auto-scaling issues */
* {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* =========================================================
   4) Arabic Typography
   ========================================================= */

/* Arabic body (Cairo) */
html[lang="ar"] body,
html[lang="ar-SA"] body {
    font-family: var(--ar-body-font), Tahoma, Arial, sans-serif !important;
    font-weight: 400;
    line-height: 1.9;
}

/* Arabic content inheritance for Elementor text widgets */
html[lang="ar"] .elementor-widget-text-editor,
html[lang="ar-SA"] .elementor-widget-text-editor,
html[lang="ar"] .elementor-widget-text-editor *,
html[lang="ar-SA"] .elementor-widget-text-editor *,
html[lang="ar"] .elementor-text-editor,
html[lang="ar-SA"] .elementor-text-editor,
html[lang="ar"] .elementor-text-editor *,
html[lang="ar-SA"] .elementor-text-editor * {
    font-family: var(--ar-body-font), Tahoma, Arial, sans-serif !important;
    font-weight: 400;
}

/* Arabic headings (Kufyan) */
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-SA"] h1, html[lang="ar-SA"] h2, html[lang="ar-SA"] h3,
html[lang="ar-SA"] h4, html[lang="ar-SA"] h5, html[lang="ar-SA"] h6,
html[lang="ar"] .elementor-heading-title,
html[lang="ar-SA"] .elementor-heading-title,
html[lang="ar"] .elementor-widget-heading h1,
html[lang="ar"] .elementor-widget-heading h2,
html[lang="ar"] .elementor-widget-heading h3,
html[lang="ar"] .elementor-widget-heading h4,
html[lang="ar"] .elementor-widget-heading h5,
html[lang="ar"] .elementor-widget-heading h6,
html[lang="ar-SA"] .elementor-widget-heading h1,
html[lang="ar-SA"] .elementor-widget-heading h2,
html[lang="ar-SA"] .elementor-widget-heading h3,
html[lang="ar-SA"] .elementor-widget-heading h4,
html[lang="ar-SA"] .elementor-widget-heading h5,
html[lang="ar-SA"] .elementor-widget-heading h6 {
    font-family: var(--ar-header-font), Tahoma, Arial, sans-serif !important;
    font-weight: 800;
}


/* =========================================================
   5) English Typography
   ========================================================= */

/* English body (Roboto Serif Thin) */
html[lang="en"] body,
html[lang="en-US"] body {
    font-family: var(--en-body-font), "Times New Roman", serif !important;
    font-weight: 100; /* Thin */
    line-height: 1.8;
}

/* English content inheritance for Elementor text widgets */
html[lang="en"] .elementor-widget-text-editor,
html[lang="en-US"] .elementor-widget-text-editor,
html[lang="en"] .elementor-widget-text-editor *,
html[lang="en-US"] .elementor-widget-text-editor *,
html[lang="en"] .elementor-text-editor,
html[lang="en-US"] .elementor-text-editor,
html[lang="en"] .elementor-text-editor *,
html[lang="en-US"] .elementor-text-editor * {
    font-family: var(--en-body-font), "Times New Roman", serif !important;
    font-weight: 100;
}

/* English headings (Philosopher) */
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6,
html[lang="en-US"] h1, html[lang="en-US"] h2, html[lang="en-US"] h3,
html[lang="en-US"] h4, html[lang="en-US"] h5, html[lang="en-US"] h6,
html[lang="en"] .elementor-heading-title,
html[lang="en-US"] .elementor-heading-title,
html[lang="en"] .elementor-widget-heading h1,
html[lang="en"] .elementor-widget-heading h2,
html[lang="en"] .elementor-widget-heading h3,
html[lang="en"] .elementor-widget-heading h4,
html[lang="en"] .elementor-widget-heading h5,
html[lang="en"] .elementor-widget-heading h6,
html[lang="en-US"] .elementor-widget-heading h1,
html[lang="en-US"] .elementor-widget-heading h2,
html[lang="en-US"] .elementor-widget-heading h3,
html[lang="en-US"] .elementor-widget-heading h4,
html[lang="en-US"] .elementor-widget-heading h5,
html[lang="en-US"] .elementor-widget-heading h6 {
    font-family: var(--en-header-font), Georgia, serif !important;
    font-weight: 700;
}


/* =========================================================
   6) Editor Safety (Elementor)
   ========================================================= */

.elementor-editor-active html[lang="ar"] body,
.elementor-editor-active html[lang="ar-SA"] body {
    font-family: var(--ar-body-font), Tahoma, Arial, sans-serif !important;
}
.elementor-editor-active html[lang="en"] body,
.elementor-editor-active html[lang="en-US"] body {
    font-family: var(--en-body-font), "Times New Roman", serif !important;
    font-weight: 100;
}