/* Nafea — Arabic type. Only the Arabic pages load this file, after site.css.
   Headings: Alexandria. Text: IBM Plex Sans Arabic.
   Both are limited to Arabic characters, so Latin words and digits fall through to Funnel. */
@font-face {
  font-family: "Alexandria";
  src: url("../fonts/alexandria-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+00A0, 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: "IBM Plex Sans Arabic";
  src: url("../fonts/plex-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+00A0, 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: "IBM Plex Sans Arabic";
  src: url("../fonts/plex-arabic-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+00A0, 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;
}

html[lang="ar"] {
  --font-display: "Alexandria", "Funnel Display", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --font-text: "IBM Plex Sans Arabic", "Funnel Sans", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;

  /* Arabic letters join, so they are never tracked; and they need taller lines than Latin. */
  --track-tight: 0;
  --track-snug: 0;
  --track-fine: 0;
  --lh-1: 1.3;
  --lh-2: 1.4;
  --lh-3: 1.5;
  --lh-4: 1.6;
  --lh-text: 1.85;
  --lh-lead: 1.8;
  --lh-btn: 1.45;
}

html[lang="ar"] h1 { font-size: clamp(2.25rem, 5.2vw, 4.25rem); }
html[lang="ar"] .h2 { font-size: clamp(1.875rem, 3.6vw, 2.875rem); }
html[lang="ar"] .card--feature .card__title { font-size: clamp(2rem, 4vw, 3.125rem); }
html[lang="ar"] .tag { line-height: 1.6; }
html[lang="ar"] .field input, html[lang="ar"] .field textarea { line-height: 1.6; }
html[lang="ar"] body { font-size: 1.125rem; }
/* Sized so the home headline breaks into its two halves beside the N. */
html[lang="ar"] .hero h1 { font-size: clamp(min(2.25rem, 9.6vw), 4.9vw, 4rem); }
