/* ---------------------------------------------------------------------------
   Right to left overrides. Loaded only when <html dir="rtl">, so an English page
   downloads none of this.

   Most of the layout needs nothing: flexbox and grid already follow the document
   direction, so rows reverse by themselves. What does need fixing is everything
   that was written with a hard left or right in it, every text-align, and the
   icons that point somewhere.

   Arabic is also visually denser than Latin at the same point size, so the body
   gets a touch more line height and the headings a touch less weight.
   --------------------------------------------------------------------------- */

:root[dir="rtl"] body,
[dir="rtl"] body {
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
    line-height: 1.85;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .btn, [dir="rtl"] .eyebrow, [dir="rtl"] .nav .lk {
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
}

/* Arabic headlines read heavy at the Latin weights, so they come down a step. */
[dir="rtl"] h1 { font-weight: 700; line-height: 1.35; }
[dir="rtl"] h2 { font-weight: 700; line-height: 1.4; }

/* Justified Arabic stretches badly because the script joins. Start-aligned reads
   far better, and the shared views set justify for Latin. */
[dir="rtl"] p,
[dir="rtl"] .cy-lede,
[dir="rtl"] .cy-step p,
[dir="rtl"] .cy-svc p,
[dir="rtl"] .cy-faq p,
[dir="rtl"] .cy-working p,
[dir="rtl"] .card p,
[dir="rtl"] .bl-body p {
    text-align: start;
}

/* Anything positioned with a hard left or right has to be mirrored by hand. */
[dir="rtl"] .cy-faq summary { padding-right: 0; padding-left: 30px; }
[dir="rtl"] .cy-faq summary:after { right: auto; left: 6px; }

[dir="rtl"] .bl-badge { left: auto; right: 14px; }

[dir="rtl"] .cy-chip i,
[dir="rtl"] .ai-chip i { margin-right: 0; margin-left: 7px; }

[dir="rtl"] .cy-working,
[dir="rtl"] .ai-honest { text-align: right; }
[dir="rtl"] .cy-working h2,
[dir="rtl"] .ai-honest h2 { text-align: right; }

[dir="rtl"] .ai-honest li { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .ai-honest li:before { left: auto; right: 0; }

[dir="rtl"] footer .footer-countries span { margin-right: 0; margin-left: 4px; }

/* Arrows point the other way when the page does. */
[dir="rtl"] .cy-more i,
[dir="rtl"] .cy-other i { transform: scaleX(-1); }

/* The breadcrumb separator and the hero crumb. */
[dir="rtl"] .crumb { direction: rtl; }

/* Numerals inside the process badges stay Latin so 01 does not become ٠١ in a
   place where it reads as decoration rather than as a number. */
[dir="rtl"] .cy-step b,
[dir="rtl"] .ai-step b { direction: ltr; unicode-bidi: embed; }