/* Mashhor Hub — self-hosted Tajawal (Arabic).
 *
 * The site previously pulled Tajawal and Cairo from fonts.googleapis.com. That
 * costs a DNS + TLS handshake to a second origin, then a CSS round trip, and only
 * THEN the font file — so the text paints in a fallback and re-flows when the real
 * font finally lands. Lighthouse attributed the homepage layout shift to exactly
 * that: two fonts.gstatic.com woff2 files listed as layout-shift culprits.
 *
 * Serving the files from our own origin removes the whole third-party chain: the
 * connection is already open, so the font usually arrives before first paint and
 * there is nothing left to shift.
 *
 * Weights match the class names the owner supplied (extralight 200 … black 900).
 * Note Tajawal-ExtraLight.ttf declares usWeightClass 275 internally; Google — and
 * the owner's CSS — address it as 200, and the value declared HERE is what the
 * browser matches on, so 200 is correct.
 *
 * WOFF2 first (what every current browser takes, 64% smaller than the TTF), with
 * the original TTF as a fallback so the files already in the repo stay useful
 * rather than dead weight.
 *
 * font-display: swap is kept deliberately. `optional` would remove the last of the
 * shift but can leave a first-time visitor on a slow connection without the brand
 * font entirely — that is a brand decision, not a performance one.
 */

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fonts/Tajawal/Tajawal-ExtraLight.woff2') format('woff2'),
       url('../fonts/Tajawal/Tajawal-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Tajawal/Tajawal-Light.woff2') format('woff2'),
       url('../fonts/Tajawal/Tajawal-Light.ttf') format('truetype');
}

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

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

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

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

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

/* ── Convenience classes, exactly as supplied ──────────────────────────────── */
.tajawal-extralight { font-family: 'Tajawal', sans-serif; font-weight: 200; font-style: normal; }
.tajawal-light      { font-family: 'Tajawal', sans-serif; font-weight: 300; font-style: normal; }
.tajawal-regular    { font-family: 'Tajawal', sans-serif; font-weight: 400; font-style: normal; }
.tajawal-medium     { font-family: 'Tajawal', sans-serif; font-weight: 500; font-style: normal; }
.tajawal-bold       { font-family: 'Tajawal', sans-serif; font-weight: 700; font-style: normal; }
.tajawal-extrabold  { font-family: 'Tajawal', sans-serif; font-weight: 800; font-style: normal; }
.tajawal-black      { font-family: 'Tajawal', sans-serif; font-weight: 900; font-style: normal; }

/* ── Cairo (Arabic headings) ───────────────────────────────────────────────────
 * Supplied as a VARIABLE font, so one file covers the whole 200-1000 weight range
 * instead of eight static files — 345 KB of TTF becomes 137 KB of WOFF2, and a
 * page that mixes several heading weights still downloads only this one file.
 *
 * The bundle's html[dir=rtl]{--fh:'Cairo'} has been asking for this on every
 * Arabic page with nothing to satisfy it, exactly as --fb:'Tajawal' was.
 *
 * The weight RANGE in font-weight is what tells the browser this is variable and
 * lets it instance any weight; the static/ TTFs shipped alongside are not
 * referenced and are kept only as the original download.
 */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/Cairo/Cairo-Variable.woff2') format('woff2'),
       url('../fonts/Cairo/Cairo-VariableFont_slnt,wght.ttf') format('truetype');
}

/* Cairo carries a slant axis; pin it upright so a browser can never lean the
 * Arabic text, and let optical sizing apply where supported. */
.cairo, [lang^='ar'] .cairo { font-optical-sizing: auto; font-variation-settings: 'slnt' 0; }
.cairo-extralight { font-family: 'Cairo', sans-serif; font-weight: 200; font-style: normal; font-optical-sizing: auto; font-variation-settings: 'slnt' 0; }
.cairo-light      { font-family: 'Cairo', sans-serif; font-weight: 300; font-style: normal; font-optical-sizing: auto; font-variation-settings: 'slnt' 0; }
.cairo-regular    { font-family: 'Cairo', sans-serif; font-weight: 400; font-style: normal; font-optical-sizing: auto; font-variation-settings: 'slnt' 0; }
.cairo-medium     { font-family: 'Cairo', sans-serif; font-weight: 500; font-style: normal; font-optical-sizing: auto; font-variation-settings: 'slnt' 0; }
.cairo-semibold   { font-family: 'Cairo', sans-serif; font-weight: 600; font-style: normal; font-optical-sizing: auto; font-variation-settings: 'slnt' 0; }
.cairo-bold       { font-family: 'Cairo', sans-serif; font-weight: 700; font-style: normal; font-optical-sizing: auto; font-variation-settings: 'slnt' 0; }
.cairo-extrabold  { font-family: 'Cairo', sans-serif; font-weight: 800; font-style: normal; font-optical-sizing: auto; font-variation-settings: 'slnt' 0; }
.cairo-black      { font-family: 'Cairo', sans-serif; font-weight: 900; font-style: normal; font-optical-sizing: auto; font-variation-settings: 'slnt' 0; }

/* ── Alexandria + Space Grotesk (the Latin faces) ─────────────────────────────
 * These were the last two families still coming from Google, on 1090 pages, via
 * an async stylesheet. That chain — DNS + TLS to fonts.googleapis.com, a CSS
 * round trip, then a second origin for the font file — is why text painted in a
 * fallback and re-flowed when the real face finally arrived. Lighthouse listed two
 * fonts.gstatic.com woff2 files as the culprits behind the desktop layout shift.
 *
 * Both are variable, so one file each covers every weight the site asks for
 * (Alexandria 300/400/500/700/800 all sit inside 100-900; Space Grotesk
 * 400/500/700 inside 300-700).
 *
 * Note Space Grotesk's file names itself "Space Grotesk Light" internally, because
 * its default instance is 300. The family declared HERE is what the browser
 * matches on, so 'Space Grotesk' is correct.
 */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Alexandria/Alexandria-Variable.woff2') format('woff2'),
       url('../fonts/Alexandria/Alexandria-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Space_Grotesk/SpaceGrotesk-Variable.woff2') format('woff2'),
       url('../fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}

.alexandria-thin       { font-family: 'Alexandria', sans-serif; font-weight: 100; font-style: normal; font-optical-sizing: auto; }
.alexandria-extralight { font-family: 'Alexandria', sans-serif; font-weight: 200; font-style: normal; font-optical-sizing: auto; }
.alexandria-light      { font-family: 'Alexandria', sans-serif; font-weight: 300; font-style: normal; font-optical-sizing: auto; }
.alexandria-regular    { font-family: 'Alexandria', sans-serif; font-weight: 400; font-style: normal; font-optical-sizing: auto; }
.alexandria-medium     { font-family: 'Alexandria', sans-serif; font-weight: 500; font-style: normal; font-optical-sizing: auto; }
.alexandria-semibold   { font-family: 'Alexandria', sans-serif; font-weight: 600; font-style: normal; font-optical-sizing: auto; }
.alexandria-bold       { font-family: 'Alexandria', sans-serif; font-weight: 700; font-style: normal; font-optical-sizing: auto; }
.alexandria-extrabold  { font-family: 'Alexandria', sans-serif; font-weight: 800; font-style: normal; font-optical-sizing: auto; }
.alexandria-black      { font-family: 'Alexandria', sans-serif; font-weight: 900; font-style: normal; font-optical-sizing: auto; }