/* ============================================================
   Sahar Sabouri — Persian / right-to-left layer
   Loaded always, but every rule is scoped to [dir="rtl"], so it
   costs nothing in Italian and English.
   ============================================================ */

/* ---------- 1. Type ---------- */
:root[dir="rtl"] {
  /* Fraunces and Inter have no Persian coverage; Vazirmatn is the
     modern standard for both display and body in Persian. */
  --font-display: "Vazirmatn", "IRANSans", "Iranian Sans", Tahoma, system-ui, sans-serif;
  --font-sans:    "Vazirmatn", "IRANSans", "Iranian Sans", Tahoma, system-ui, sans-serif;
}
[dir="rtl"] body { line-height: 1.9; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  /* Arabic-script letterforms need room to breathe and must not be
     tracked in or given optical-size axes they do not have. */
  line-height: 1.42;
  letter-spacing: 0;
  font-variation-settings: normal;
  font-weight: 600;
}
[dir="rtl"] .h-xl, [dir="rtl"] .h-lg { line-height: 1.34; }
/* Persian sets wider than Latin at the same size: one step down keeps the
   hero headline to two lines instead of orphaning a word. */
[dir="rtl"] .hero h1 { font-size: var(--step-4); }
[dir="rtl"] .interlude__line { font-size: var(--step-3); max-width: 22ch; }
[dir="rtl"] .hero h1 em,
[dir="rtl"] .about__quote,
[dir="rtl"] .interlude__line,
[dir="rtl"] .constellation__core span,
[dir="rtl"] .step__num,
[dir="rtl"] .svc__no,
[dir="rtl"] .trustbar__item dt,
[dir="rtl"] .faq summary,
[dir="rtl"] .brand__name,
[dir="rtl"] .stat__num,
[dir="rtl"] .figure-sticky__cap strong {
  font-variation-settings: normal;
  font-style: normal;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .brand__role,
[dir="rtl"] .interlude__sub,
[dir="rtl"] .footer h4,
[dir="rtl"] .contact-list .contact-txt > span,
[dir="rtl"] .step-card__no,
[dir="rtl"] .pin__hint,
[dir="rtl"] .hero__cue {
  letter-spacing: 0;
  text-transform: none;
}
[dir="rtl"] .lead, [dir="rtl"] .hero__lead { line-height: 1.85; }

/* Latin runs inside Persian text: emails, phone numbers, names,
   institution names. Isolate them so bidi cannot reorder the pieces. */
[dir="rtl"] .contact-list strong,
[dir="rtl"] [dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}
[dir="rtl"] .contact-list .contact-txt { text-align: start; }

/* ---------- 2. Chrome ---------- */
[dir="rtl"] .progress__bar { transform-origin: 100% 50%; }
[dir="rtl"] .rail { left: auto; right: clamp(1rem, .3rem + 1.4vw, 2rem); }
[dir="rtl"] .rail__label { transform: translateX(6px); }
[dir="rtl"] .rail a:hover .rail__label,
[dir="rtl"] .rail a.is-active .rail__label { transform: translateX(0); }
[dir="rtl"] .to-top { right: auto; left: clamp(1rem, .6rem + 1vw, 2rem); }

/* Arrow glyphs and arrow icons point the other way in RTL. */
[dir="rtl"] .link-arrow::after { content: "←"; }
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-4px); }
[dir="rtl"] .btn svg { transform: scaleX(-1); }
[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .contact-list a:hover { transform: translateX(-3px); }
[dir="rtl"] .footer__top, [dir="rtl"] .to-top svg { transform: none; }

/* ---------- 3. Hero ---------- */
[dir="rtl"] .portrait::before { inset: -14px 22px 34px -14px; }
[dir="rtl"] .portrait__card { left: auto; right: -8%; }
@media (max-width: 900px) {
  [dir="rtl"] .portrait__card { right: auto; left: -6%; }
}
@media (max-width: 430px) {
  [dir="rtl"] .portrait__card { left: auto; right: auto; }
}

/* ---------- 4. Cards, quote, FAQ, form ---------- */
[dir="rtl"] .step-card { transform-origin: right center; }
[dir="rtl"] .about__quote {
  border-left: 0;
  border-right: 2px solid var(--brand);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
[dir="rtl"] .faq summary { padding: 1.4rem 0 1.4rem 3rem; }
[dir="rtl"] .faq summary::after { right: auto; left: .35rem; }
[dir="rtl"] .faq__body { padding: 0 0 1.6rem 3rem; }
[dir="rtl"] .field select { background-position: left 1rem center; padding-right: .9rem; padding-left: 2.4rem; }
[dir="rtl"] .form__note, [dir="rtl"] .form__status { text-align: center; }

/* ---------- 5. Pinned horizontal track ---------- */
/* The flex row lays out right-to-left on its own; the JS flips the sign
   of the scroll-driven translate to match (see main.js → updatePin). */
[dir="rtl"] .pin__hint-bar { transform-origin: 100% 50%; }

/* ---------- 6. The drawn path ---------- */
/* Keep SVG label anchoring left-to-right: Persian still shapes correctly
   inside the run, and the labels stay beside their knots instead of
   running back over them. */
[dir="rtl"] .path-svg text { direction: ltr; }
[dir="rtl"] .path-svg .knot-label { font-size: 12px; }

/* ---------- 7. Mobile navigation ---------- */
[dir="rtl"] .nav__toggle span::before,
[dir="rtl"] .nav__toggle span::after { left: 0; right: auto; }