/*
 * Arabic pages only. Linked from the <head> of /ar/ pages by the translation
 * step (src/i18n/build/integration.mjs), so English and the other languages
 * never download it.
 *
 * Layout mirroring comes from dir="rtl" on <html> and the logical utilities
 * (ms-, pe-, text-start, border-s) used throughout the components. This file
 * adds what that cannot: Arabic glyphs, and undoing typographic habits that
 * are right for Latin script and wrong for Arabic.
 *
 * IBM Plex Sans Arabic, SIL Open Font License 1.1 (fonts/IBM-Plex-Sans-Arabic-OFL.txt).
 * The unicode-range limits each face to Arabic code points, so Latin text on
 * the page (product names, figures) keeps rendering in the site's own faces.
 */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/i18n/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-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';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/i18n/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-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';
  font-style: normal;
  font-display: swap;
  font-weight: 600 700;
  src: url('/i18n/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-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: 'IBM Plex Sans Arabic', 'Poppins', 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans Arabic', 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'IBM Plex Sans Arabic', ui-monospace, monospace;
}
html[lang='ar'] body,
html[lang='ar'] h1,
html[lang='ar'] h2,
html[lang='ar'] h3,
html[lang='ar'] h4,
html[lang='ar'] h5,
html[lang='ar'] h6 {
  font-family: var(--font-sans);
}

/* Letter-spacing pulls Arabic letters apart and breaks their joins, and tight
   negative tracking on display type crushes them. Arabic has no capitals, so
   uppercase eyebrows simply read as normal text. */
html[lang='ar'] * {
  letter-spacing: normal !important;
}
/* Arabic needs more line height than Latin display type was tuned for. */
html[lang='ar'] :is(h1, h2, h3, h4) {
  line-height: 1.35;
}
/* The product heroes open their h1 with the category pill and set the display
   line in a span after it. That span's type scale carries its own line height,
   which beats the one it would inherit from the h1, so it is named here.
   :where() keeps this exactly as strong as the rule above, so a page whose
   own heading style already outranked that rule still does. */
html[lang='ar'] h1 > :where(span[data-reveal]:last-child) {
  line-height: 1.35;
}

/* Arrows that point "forward" point the other way in a right-to-left page. */
[dir='rtl'] .rtl-flip {
  scale: -1 1;
}

/* Code, hostnames and figures stay left to right inside Arabic sentences. */
html[lang='ar'] :is(code, kbd, samp, .font-mono .numeric) {
  unicode-bidi: isolate;
}