/* =====================================================================
   Local Arabic fonts — preferred for fast loading + privacy.
   To use fully self-hosted fonts:
     1. Download .woff2 files from Google Fonts (Cairo, Tajawal, IBM Plex Sans Arabic)
     2. Place them in /assets/fonts/ with the names declared below
     3. Done — this stylesheet will pick them up automatically.
   If a font file is missing, the next declaration is used (CDN fallback),
   and finally the device's system Arabic font.
   ===================================================================== */

/* ---------- Cairo ---------- */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Cairo Regular"),
       local("Cairo-Regular"),
       url("../fonts/Cairo-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Cairo SemiBold"),
       local("Cairo-SemiBold"),
       url("../fonts/Cairo-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Cairo Bold"),
       local("Cairo-Bold"),
       url("../fonts/Cairo-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local("Cairo ExtraBold"),
       local("Cairo-ExtraBold"),
       url("../fonts/Cairo-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local("Cairo Black"),
       local("Cairo-Black"),
       url("../fonts/Cairo-Black.woff2") format("woff2");
}

/* ---------- Tajawal ---------- */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Tajawal Regular"),
       local("Tajawal-Regular"),
       url("../fonts/Tajawal-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Tajawal Bold"),
       local("Tajawal-Bold"),
       url("../fonts/Tajawal-Bold.woff2") format("woff2");
}

/* ---------- IBM Plex Sans Arabic ---------- */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("IBM Plex Sans Arabic Regular"),
       local("IBMPlexSansArabic-Regular"),
       url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("IBM Plex Sans Arabic Bold"),
       local("IBMPlexSansArabic-Bold"),
       url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
}

/* ---------- CDN fallback (only if local woff2 are missing) ---------- */
/* These are scoped to override earlier declarations only when the local
   files don't exist. Browsers that load the local @font-face won't request
   these, because the local source was specified first. They act purely as
   graceful degradation so the site never falls back to a Latin system font. */