/* ==========================================================================
   KATI right-to-left layer (Arabic, Sorani Kurdish)
   Pages in an RTL language load the mirrored stylesheets (*.rtl.css, `npm run rtl`)
   and then this file, for what mirroring alone can't do. Written for RTL directly:
   it is not mirrored itself. Selectors start with html[dir="rtl"] so they win
   over the dashboard stylesheets that load after kati-head.
   ========================================================================== */

html[dir="rtl"] {
  /* Latin stays in Cormorant/Inter; Arabic script falls through to the Noto faces */
  --kati-display: 'Cormorant Garamond', 'Noto Naskh Arabic', 'Noto Sans Arabic', serif;
}

/* Tracking breaks up Arabic letters, which join */
html[dir="rtl"] body * { letter-spacing: 0 !important; }

/* Naskh needs more room above and below than Cormorant */
html[dir="rtl"] :is(h1, h2, h3, .kati-display, .k-display, .k-h1, .k-h2) { line-height: 1.35 !important; }

/* Icons that point along the reading direction */
html[dir="rtl"] :is(
  .bi-arrow-right, .bi-arrow-left, .bi-arrow-right-short, .bi-arrow-left-short,
  .bi-arrow-up-right, .bi-arrow-up-left, .bi-arrow-right-circle, .bi-arrow-left-circle,
  .bi-chevron-right, .bi-chevron-left, .bi-chevron-double-right, .bi-chevron-double-left,
  .bi-caret-right, .bi-caret-left, .bi-caret-right-fill, .bi-caret-left-fill,
  .bi-box-arrow-right, .bi-box-arrow-left, .bi-box-arrow-in-right, .bi-box-arrow-up-right,
  .bi-arrow-return-left, .bi-arrow-return-right, .bi-reply, .bi-send
)::before { transform: scaleX(-1); }

/* A half star fills from the start of the row, which is the right in RTL */
html[dir="rtl"] .bi-star-half::before { transform: scaleX(-1); }

/* Emails, phone numbers and links are typed left to right */
html[dir="rtl"] :is(input[type="email"], input[type="tel"], input[type="url"], .k-ltr) { direction: ltr; text-align: right; }
html[dir="rtl"] :is(input[type="email"], input[type="tel"], input[type="url"])::placeholder { direction: rtl; }

/* Back arrows drawn as inline SVG (sign-in pages) point the other way */
html[dir="rtl"] .back-arrow svg { transform: scaleX(-1); }

/* Arabic script has no italic; browsers slant it artificially. Emphasis keeps its colour instead. */
html[dir="rtl"] :is(em, i:not(.bi), .k-quote p) { font-style: normal; }