/*!
 * ar.css — Arabic layer, loaded only when the locale is `ar`,
 * after style.rtl.css. The Arabic sibling of fa.css: same job, same
 * position in the cascade, different typeface.
 *
 * style.rtl.css is generated by rtlcss and handles every directional
 * property (margins, floats, text-align, transforms) and even the
 * directional Unicons glyphs. This file covers only what a mechanical
 * LTR→RTL flip cannot know: the Arabic typeface and the typographic
 * adjustments Arabic script needs.
 *
 * All manual corrections belong here — never in style.rtl.css, which is
 * regenerated from the theme.
 */

/* --------------------------------------------------------------------
   1. Typeface — self-hosted, matching the site's policy on every tree.

      IBM Plex Sans Arabic, two static cuts (Regular 400, Light 300),
      mirroring the two cuts the Persian tree ships. The theme's
      font-weight: 700 and 500 rules are synthesised by the browser,
      exactly as they are on /fa; add the real SemiBold/Bold cuts from
      the same package to stop that.

      Licence is SIL OFL 1.1 — see ../fonts/plex-sans-arabic/README.md.

      No unicode-range carve-out, unlike Ravi FaNum: Plex Sans Arabic
      holds real Latin figures, so ASCII digits in the source render
      Latin on screen with no help. The fa.css digit hack exists because
      that font draws Persian numerals for ASCII code points; this one
      does not.
   -------------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/plex-sans-arabic/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/plex-sans-arabic/IBMPlexSansArabic-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------
   1b. Manrope, latin subset — for one element on the page.

      Same declaration and same reasoning as fa.css section 1b: the only
      thing that asks for this family is .footer-mark, the giant ZAMAN
      watermark motion.css pins to Manrope so every locale gets the
      identical shape and the identical bottom cut. style.rtl.css is
      generated with the Manrope @font-face blocks stripped, so the face
      must be declared again on every RTL tree that shows the footer.
      Same file the English tree serves — one cache entry across locales.
   -------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/Manrope-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------
   2. Base typography.

      The theme declares --bs-body-font-family: var(--bs-font-sans-serif)
      on :root, so overriding --bs-font-sans-serif on the same element
      re-points every font-family in the stylesheet at once.

      The size bump and looser leading carry over from fa.css: Arabic
      script, like Persian, renders visually smaller than Latin at the
      same size and needs more clearance for dots and descenders.

      --bs-root-font-size (20px) is deliberately NOT touched: every
      spacing utility in the theme is rem-based, so changing it would
      rescale the entire layout rather than just the text.
   -------------------------------------------------------------------- */
[dir="rtl"] {
  --bs-font-sans-serif: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bs-body-font-size: 0.85rem;   /* theme default: 0.8rem  */
  --bs-body-line-height: 2;       /* theme default: 1.7     */
}

[dir="rtl"] body {
  font-family: var(--bs-font-sans-serif);
}

/* Headings ship at a tight Latin line-height that clips Arabic
   descenders and the dots under ب / ج / ي. Same 1.55 the Persian tree
   settled on — the ink extents of the two scripts are near-identical. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3,
[dir="rtl"] .h4, [dir="rtl"] .h5, [dir="rtl"] .h6,
[dir="rtl"] [class^="display-"] {
  line-height: 1.55;
}

/* --------------------------------------------------------------------
   3. Tracking. Latin display type is tracked tightly; applying that to
      Arabic breaks the cursive joins between letters.

      The unqualified rule carries no !important on purpose. The five
      below exist solely to match the five !important declarations in
      style.css — a blanket `* { letter-spacing: normal !important }`
      would be an unnecessary cascade nuke.
   -------------------------------------------------------------------- */
[dir="rtl"] * {
  letter-spacing: normal;
  word-spacing: normal;
}

[dir="rtl"] .tracking-tight,
[dir="rtl"] .tracking-tighter,
[dir="rtl"] .tracking-normal,
[dir="rtl"] .tracking-wide,
[dir="rtl"] .tracking-wider {
  letter-spacing: normal !important;
}

/* --------------------------------------------------------------------
   4. Numerals. The rule is the same as the Persian tree's: a digit
      renders in the script it was written in. The Arabic content files
      use ASCII digits throughout (the Gulf convention for technical
      copy), and Plex Sans Arabic draws them as Latin lining figures
      natively — nothing to carve out.

      font-variant-numeric: lining rather than old-style, tabular so
      columns of numbers align.
   -------------------------------------------------------------------- */
[dir="rtl"] {
  font-variant-numeric: lining-nums tabular-nums;
}

/* --------------------------------------------------------------------
   5. Bidi isolation.

      Latin runs inside Arabic sentences reorder incorrectly when they
      start or end with a neutral character — "UI/UX", "Node.js",
      ".NET", "(React)". Content must wrap these in <bdi> or .ltr;
      these rules make that work.
   -------------------------------------------------------------------- */
[dir="rtl"] bdi,
[dir="rtl"] .ltr,
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] samp,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  unicode-bidi: isolate;
  direction: ltr;
}

/* Phone numbers and emails read left-to-right but should still sit on
   the right-hand side of an Arabic line. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  display: inline-block;
}

/* --------------------------------------------------------------------
   6. Known overflow points.

      The theme's underline/highlight bars are nowrap, which is safe for
      short English phrases but overflows on the longer Arabic
      equivalents. Allow them to wrap.
   -------------------------------------------------------------------- */
[dir="rtl"] .underline,
[dir="rtl"] .underline-2,
[dir="rtl"] .underline-3 {
  white-space: normal;
}

/* Arabic body copy must not be justified — the renderer stretches the
   cursive joins rather than the spaces.
   Scoped to elements that actually declare `justify`, NOT to every <p>:
   see fa.css for the .text-center regression that scoping prevents. */
[dir="rtl"] .text-justify,
[dir="rtl"] [style*="text-align: justify"] {
  text-align: start;
}

/* --------------------------------------------------------------------
   7. Directional glyphs.

      rtlcss flips boxes, not pictures. `.icon-list` bullets use
      uil-angle-right-b: a chevron that in LTR sits left of the text and
      points into it. rtlcss moves the bullet to the right edge correctly,
      but the glyph keeps pointing right — away from the text it belongs
      to. Mirror the glyph so it points back at the line, as it does in
      English.

      Scoped to .icon-list on purpose. A blanket flip of every
      uil-angle-right-b would also reverse chevrons that mean "right" in
      an absolute sense (carousel controls, which Swiper already handles
      through rtlTranslate).
   -------------------------------------------------------------------- */
[dir="rtl"] .icon-list li > i[class*="uil-angle-right"],
[dir="rtl"] .icon-list li > i[class*="uil-corner-down-right"] {
  display: inline-block;
  transform: scaleX(-1);
}