/* ─────────────────────────────────────────────────────────────────────────────
   Self-hosted Cairo & Tajawal fonts — eliminates Google Fonts render-blocking.
   Files are served from /fonts/ (same origin) so no external TCP handshake.

   ── CLS: font-metric overrides (perf/cwv-development, 2026-06-11) ───────────
   Field CrUX CLS was POOR (home 0.30 / series 0.26) while the single lab load
   scored 0 — the classic font-swap reflow that only shows up on real loads
   where the web font swaps in OVER the `system-ui` fallback (the fallback for
   ALL three families per tailwind.config.js fontFamily). The differing line
   metrics reflow every block of text → cumulative shift.

   Fix: `size-adjust` + `ascent-override` / `descent-override` /
   `line-gap-override` make the FALLBACK occupy the same vertical box as the
   web font, so the swap is metrically invisible (no reflow). Values below are
   a reasonable starting point measured against the system-ui/Arabic fallback;
   they may need empirical tuning (DevTools Performance "Layout Shift" entries
   on a throttled reload) — but any sane override is strictly better than the
   previous bare `font-display: swap` with NO metrics. The `src` + `unicode-range`
   of every block are UNCHANGED.

   Changa (the hero/display face — largest text, so the biggest single shift)
   instead uses `font-display: optional`: after first paint it NEVER swaps, so
   it contributes ZERO shift. It either loads inside the ~100ms block period
   (it's preloaded in index.html so it usually does) or the fallback is kept
   for that view. The metric overrides on Changa keep that fallback box correct
   too, in case `optional` falls back.
───────────────────────────────────────────────────────────────────────────── */

/* ── Cairo (Arabic headings) ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/cairo-arabic.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/cairo-latin-ext.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/cairo-latin.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cairo 900 uses the same Arabic file as 700 (Google CDN serves identical bytes) */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/cairo-arabic.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/cairo-latin-ext.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/cairo-latin.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tajawal 400 (body text) ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tajawal-400-arabic.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tajawal-400-latin.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tajawal 500 ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/tajawal-500-arabic.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/tajawal-500-latin.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tajawal 700 (bold body) ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/tajawal-700-arabic.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/tajawal-700-latin.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Changa (hero / display titles) ──────────────────────────────────────────
   Self-hosted ExtraBold display face for hero headlines. Google serves the
   same static woff2 for the 700–800 range, so one Arabic file + one Latin
   file (digits/latin) cover the weights we use. Used only on hero titles via
   the `font-hero` Tailwind token — NOT a body/heading default.

   `font-display: optional` (NOT swap): the hero title is the single largest
   text on the page, so a swap-in reflow there dominates field CLS. `optional`
   means the browser uses the web font ONLY if it's ready within the short
   block window (it's preloaded in index.html, so it usually is) and otherwise
   keeps the fallback for that page view WITHOUT ever swapping → zero shift.
   The metric overrides keep the fallback box correct on the rare miss. */
@font-face {
  font-family: 'Changa';
  font-style: normal;
  font-weight: 700 800;
  font-display: optional;
  src: url('/fonts/changa-arabic.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Changa';
  font-style: normal;
  font-weight: 700 800;
  font-display: optional;
  src: url('/fonts/changa-latin.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}