/*
 * INSPIRE WOMEN TYPOGRAPHY AND FONT-LOADING CONTRACT
 *
 * PERFORMANCE CAP: four downloadable font files for the entire build:
 * Montserrat 400/700 (Latin) and Cairo 400/700 (Arabic). Never add another
 * weight. Values such as 500 and 600 resolve to the nearest loaded face, and
 * font-synthesis-weight prevents the browser from inventing a faux weight.
 *
 * The INSPIRE family names are intentionally independent of the vendor. When
 * licensed FF Shamel webfonts arrive, replace only the two Arabic src URLs
 * below. Tokens, selectors, and component styles must remain unchanged.
 *
 * PRELOAD CONTRACT: each document may preload at most two files, and only the
 * faces used above the fold. The current component gallery preloads Montserrat
 * 400 and 700 because its first viewport is English. An Arabic-first route
 * must replace those links with the two critical files for that route; it must
 * not append Arabic preloads to the Latin pair. Keep each preload href exactly
 * equal to its @font-face src so the browser reuses the response.
 *
 * The ranges deliberately do not overlap across scripts. A page containing
 * only English glyphs never requests Cairo, and Arabic text requests Cairo
 * only for Arabic glyphs. Latin brand names embedded in Arabic copy fall
 * through to INSPIRE Latin without a wrapper or JavaScript.
 */

@font-face {
  font-family: "INSPIRE Latin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

@font-face {
  font-family: "INSPIRE Latin";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM73w5aXo.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

@font-face {
  font-family: "INSPIRE Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hOA-a1biLD-H.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "INSPIRE Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hAc5a1biLD-H.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

/*
 * METRIC-COMPATIBLE FALLBACKS
 *
 * These values were calculated per weight from the downloaded WOFF2 and the
 * Windows Arial/Tahoma fallback binaries. size-adjust is:
 *
 *   (webfont OS/2 xAvgCharWidth / webfont unitsPerEm)
 *   --------------------------------------------------
 *   (fallback OS/2 xAvgCharWidth / fallback unitsPerEm)
 *
 * ascent-override and descent-override are the webfont hhea ascent/descent as
 * a percentage of its em, divided by size-adjust. Source metrics were:
 * Montserrat 400: 564 avg, 968/-251 hhea; Montserrat 700: 588, 968/-251;
 * Cairo 400: 766, 1303/-571; Cairo 700: 832, 1303/-571 (all 1000 UPM).
 * Arial 400/700 average widths are 904/980 at 2048 UPM; Tahoma 400/700 are
 * 910/1036 at 2048 UPM. Both webfonts have a zero hhea line gap.
 *
 * This makes fallback line boxes and typical line wrapping closely match the
 * final faces during font-display: swap. Expected CLS from each font swap is
 * negligible (target: no measurable layout shift); remeasure with production
 * copy, and recalculate the Arabic values when FF Shamel replaces Cairo.
 */

@font-face {
  font-family: "INSPIRE Latin Fallback";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Arial");
  size-adjust: 127.7735%;
  ascent-override: 75.7591%;
  descent-override: 19.6441%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

@font-face {
  font-family: "INSPIRE Latin Fallback";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Arial Bold");
  size-adjust: 122.8800%;
  ascent-override: 78.7760%;
  descent-override: 20.4264%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

@font-face {
  font-family: "INSPIRE Arabic Fallback";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Tahoma");
  size-adjust: 172.3921%;
  ascent-override: 75.5835%;
  descent-override: 33.1222%;
  line-gap-override: 0%;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "INSPIRE Arabic Fallback";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Tahoma Bold");
  size-adjust: 164.4726%;
  ascent-override: 79.2229%;
  descent-override: 34.7170%;
  line-gap-override: 0%;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --font-arabic: "INSPIRE Arabic", "INSPIRE Arabic Fallback", "INSPIRE Latin", "INSPIRE Latin Fallback", sans-serif;
  --font-latin: "INSPIRE Latin", "INSPIRE Latin Fallback", "INSPIRE Arabic", "INSPIRE Arabic Fallback", sans-serif;
}

[lang="ar"] {
  font-family: var(--font-arabic);
  font-synthesis-weight: none;
  line-height: 1.7;
}

[lang="en"] {
  font-family: var(--font-latin);
  font-synthesis-weight: none;
  line-height: 1.6;
}

body {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-surface);
}

:where(h1, h2, h3, h4, h5, h6) {
  margin-block: 0 var(--space-4);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-4xl);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-base);
}

:where(p, ul, ol) {
  margin-block: 0 var(--space-4);
  font-size: var(--text-base);
  text-wrap: pretty;
}

:where(p, li, dd):lang(ar) {
  max-inline-size: 46ch;
}

:where(p, li, dd):lang(en) {
  max-inline-size: 46ch;
}

:where(ul, ol) {
  padding-inline-start: var(--space-6);
}

small {
  font-size: var(--text-sm);
  text-wrap: pretty;
}

strong {
  font-size: inherit;
  font-weight: 700;
}

bdi {
  direction: ltr;
  unicode-bidi: isolate;
}

.no-wrap {
  white-space: nowrap;
}

:where(input[type="email"], input[type="tel"], input[type="url"], time) {
  direction: ltr;
  unicode-bidi: isolate;
}

a {
  font-size: inherit;
  color: var(--color-action-primary);
  text-decoration-thickness: var(--border-width-hairline);
  text-underline-offset: var(--space-1);
}