/* ─────────────────────────────────────────────────────────────
 *  RIGHT-TO-LEFT — Arabic and Persian.
 *
 *  Loaded only when <html dir="rtl">, on top of styles.css.
 *
 *  Most of the site needs nothing here: it is built on flexbox, grid and
 *  logical properties (margin-inline, padding-block, inset-inline-*), all of
 *  which mirror themselves when the document direction flips. What is left is
 *  the handful of places that had to name a physical side — a chat bubble's
 *  tail, a notification badge, an arrow that means "forward" — plus the things
 *  that must NOT flip, like a phone number.
 *
 *  Rule of thumb when adding to the site: reach for margin-inline-start before
 *  margin-left, and this file stays short.
 * ───────────────────────────────────────────────────────────── */

/* ── Line length ──────────────────────────────────────────────
   Every measure on the site is written as calc(N * var(--ch)). In Latin faces
   `1ch` — the width of the "0" glyph — is about 0.7em. In Noto Sans Arabic and
   Vazirmatn it is about 0.5em, so leaving `--ch` at `1ch` would hand Arabic and
   Persian a box roughly a third narrower than the English one, and headings
   that read as two lines in English break onto three or four.

   Pinning it to the Latin ratio gives every measure the same width it has in
   English, which is what the script actually needs. One value, because the
   problem is one value. */
:root { --ch: 0.7em; }

/* ── Directional arrows ───────────────────────────────────────
   An arrow that means "onward" points left in an RTL page. Flipping the glyph
   is right; flipping the icons that are pictures of things (a phone, a star,
   a check) would be wrong, so this is deliberately narrow. */
[dir='rtl'] .btn .arrow,
[dir='rtl'] .hero-link .arrow,
[dir='rtl'] .rating-cap svg,
[dir='rtl'] .graph-replay svg { transform: scaleX(-1); }
[dir='rtl'] .btn:hover .arrow { transform: scaleX(-1) translateX(3px); }

/* ── Skip link ────────────────────────────────────────────── */
[dir='rtl'] .skip { left: auto; right: -9999px; border-radius: 0 0 0 var(--r-sm); }
[dir='rtl'] .skip:focus { right: 0; }

/* ── Nav dropdown ─────────────────────────────────────────── */
[dir='rtl'] .nav.is-open .nav-links { left: var(--gutter); right: var(--gutter); }

/* ── Honeypot ─────────────────────────────────────────────── */
/* Stays off-screen on the correct side, or it appears in the layout. */
[dir='rtl'] .hp { left: auto; right: -9999px; }

/* ── Chat mock-ups in the workflow graph ──────────────────── */
/* The tails point at the speaker, so they swap sides with the bubbles. */
[dir='rtl'] .toast-in .toast-body::after {
  left: auto; right: -6px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
[dir='rtl'] .toast-out .toast-body::after {
  right: auto; left: -6px;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
[dir='rtl'] .toast[data-ch='whatsapp'].toast-out .toast-body { padding-right: 1.05rem; padding-left: 2.6rem; }
[dir='rtl'] .ticks { right: auto; left: .7rem; }
[dir='rtl'] .ticks svg { margin-left: 0; margin-right: -7px; }
[dir='rtl'] .bars { margin-right: 0; margin-left: .1rem; }
[dir='rtl'] .mail-time { margin-left: 0; margin-right: auto; }
[dir='rtl'] .toast-out .toast-inner.mail { border-left: 0; border-right: 3px solid var(--grad-c); }

/* ── Graph nodes ──────────────────────────────────────────── */
[dir='rtl'] .gtime { right: auto; left: .6rem; }
[dir='rtl'] .gnode.is-ringing::after { left: auto; right: 2.45rem; }
@media (max-width: 819px) {
  [dir='rtl'] .gnode.is-ringing:not([data-node='phone'])::after { right: auto; left: .5rem; }
}
[dir='rtl'] .gcall-info { text-align: right; }

/* ── Section rail ─────────────────────────────────────────── */
/* The rail sits at the inline end, so its labels slide in from the left. */
[dir='rtl'] .pager-label { translate: -8px 0; }
[dir='rtl'] .pager a:hover .pager-label, [dir='rtl'] .pager a:focus-visible .pager-label { translate: 0 0; }

/* ── Charts ───────────────────────────────────────────────── */
/* The live marker is positioned by percentage from the left edge in JS; the
   flag centres on it, so only the centring transform mirrors. */
[dir='rtl'] .live-flag { transform: translateX(50%); }

/* ── Scorecard ────────────────────────────────────────────── */
[dir='rtl'] .opt { text-align: right; }
[dir='rtl'] .opt:hover { transform: translateX(-3px); }
[dir='rtl'] .q-step { animation-name: qin-rtl; }
@keyframes qin-rtl { from { opacity: 0; transform: translateX(-12px); } }

/* ── Typography ───────────────────────────────────────────── */
/* Arabic and Persian have no capitals and their letterforms are taller and
   more connected than Latin ones: the tight tracking and uppercase treatment
   the Latin design uses turn into noise here. */
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3, [dir='rtl'] h4,
[dir='rtl'] .h1, [dir='rtl'] .h2, [dir='rtl'] .h3 { letter-spacing: 0; line-height: 1.35; }
[dir='rtl'] .eyebrow, [dir='rtl'] .feed-live { letter-spacing: .04em; text-transform: none; }
[dir='rtl'] body { line-height: 1.85; }
[dir='rtl'] .lead { line-height: 1.8; }

/* The wordmark is a logo, not a word: it stays Latin, left-to-right, always. */
[dir='rtl'] .wordmark { direction: ltr; }