/* =====================================================================
   fonts.css — global typeface declarations.
   Loaded by every PHP page (home, login, admin, settings) BEFORE any
   inline <style> block, so the body font picks up the new typeface.

   Each weight ships as its own .otf file in /fonts/. Declaring them
   separately (rather than a single weight-range entry) means the
   browser uses the real glyphs for bold and extra-bold instead of
   synthesizing them from the regular weight — which always looks
   slightly off (uneven stroke widths, wrong proportions).

   font-display: optional → on the FIRST page hit before the font is
   cached, the browser gives ~100ms for the font to arrive; if it
   doesn't, the page sticks with Tahoma for that one render and the
   .otf keeps downloading silently. Every subsequent page load gets
   ITF Ghroob from the first paint because the file is in cache. This
   eliminates the visible Tahoma → Ghroob flash that font-display: swap
   produces.

   The companion <link rel="preload"> tags in each PHP page's <head>
   warm the cache for the Regular and Bold weights specifically — they
   cover the bulk of visible text so even the first-ever visit gets
   ITF Ghroob immediately on most connections.

   To shrink download size 3-5x in the future: convert the .otf files
   to .woff2 (transfonter.org / fonttools) and replace the url() lines
   below with the .woff2 paths. Keep the same file name stems.
   ===================================================================== */

@font-face {
  font-family: 'ITF Ghroob Arabic';
  src: local('ITF Ghroob Arabic Light'),
       url('fonts/ITF-Ghroob-Arabic-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'ITF Ghroob Arabic';
  src: local('ITF Ghroob Arabic'),
       url('fonts/ITF-Ghroob-Arabic-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'ITF Ghroob Arabic';
  src: local('ITF Ghroob Arabic Medium'),
       url('fonts/ITF-Ghroob-Arabic-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'ITF Ghroob Arabic';
  src: local('ITF Ghroob Arabic Bold'),
       url('fonts/ITF-Ghroob-Arabic-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'ITF Ghroob Arabic';
  src: local('ITF Ghroob Arabic ExtraBold'),
       url('fonts/ITF-Ghroob-Arabic-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: optional;
}

/* Override the body font-family across every page. Inline styles in the
   PHP files set things like `font: inherit;` on form controls, which
   means children automatically pick up whatever body uses — overriding
   here is enough.

   The selector targets <html> so it wins over any inline `body { ... }`
   rule (same specificity, but later in cascade — fonts.css is linked
   AFTER the inline <style> block in each page).

   Fallback chain: if ITF Ghroob Arabic fails to load, fall back to the
   same Tahoma/Noto-based stack the site originally used. */
html, body, input, button, textarea, select {
  font-family: 'ITF Ghroob Arabic', Tahoma, 'Noto Sans Arabic', Arial, sans-serif;
}
