/* ─────────────────────────────────────────────────────────────────────────
   RTL + Persian typography layer for MonaMeta.

   Loaded by base.html only when the active language is right-to-left (fa).
   It does not rewrite style.css — it overrides the few physical-direction
   properties that don't mirror automatically, and swaps the brand fonts for
   Vazirmatn (a geometric Persian face that pairs with the Latin Jost).
   ───────────────────────────────────────────────────────────────────────── */

/* ── Fonts: every component reads these variables, so one override flips all ── */
[dir="rtl"] {
  --font-heading: 'Vazirmatn', 'Jost', sans-serif;
  --font-body:    'Vazirmatn', 'Kumbh Sans', sans-serif;
}

[dir="rtl"] body {
  font-family: var(--font-body);
  /* Persian script benefits from a touch more leading. */
  line-height: 1.85;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: var(--font-heading);
  line-height: 1.5;
}

/* Default paragraph alignment in RTL flows from the right. */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] .hero__sub,
[dir="rtl"] .about-page__intro,
[dir="rtl"] .svc-sub,
[dir="rtl"] .svc-hero-desc {
  text-align: right;
}

/* ── Nav: keep the Latin "MONAMETA" wordmark pinned on the LEFT (it does not
   move with the language), but let the Persian tabs read right-to-left. The nav
   row stays LTR for placement (logo left, tabs pushed to the right by the
   existing margin-left:auto on .nav__links); the tab group itself is RTL so the
   first tab (خانه) sits on the right and the menu reads naturally in Persian. ── */
[dir="rtl"] .nav { direction: ltr; }
[dir="rtl"] .nav__links { direction: rtl; }
/* Keep the EN | فارسی switch in a stable left-to-right order. */
[dir="rtl"] .nav__lang { direction: ltr; margin-left: 0; margin-right: 0.5rem; }

/* ── Hero: the "View Portfolio" button uses an inline margin-left ── */
[dir="rtl"] .hero__text .btn--outline {
  margin-left: 0 !important;
  margin-right: 0.75rem;
}

/* Inline-spaced arrows/links that used margin-left in style.css. */
[dir="rtl"] .section-label { margin-left: 0; margin-right: 0; }

/* ── Case-study prev / next nav (explicitly aligned in style.css) ── */
[dir="rtl"] .case-nav__prev { text-align: right; }
[dir="rtl"] .case-nav__next { text-align: left; }

/* ── Forms: labels and inputs read right-to-left ── */
[dir="rtl"] .form-input,
[dir="rtl"] .form-label,
[dir="rtl"] .bk-field label,
[dir="rtl"] .bk-field input,
[dir="rtl"] .bk-field select,
[dir="rtl"] .bk-field textarea {
  text-align: right;
}
[dir="rtl"] .form-input::placeholder { text-align: right; }

/* Tables (account / admin) align headers and cells from the right. */
[dir="rtl"] .bk-table th,
[dir="rtl"] .bk-table td { text-align: right; }

/* ── Floating chat widget: keep it identical to the English version —
   bottom-right, bot bubbles on the left, user bubbles on the right. The widget
   itself stays LTR (it is anchored independently of page direction). ── */

/* Numerals stay legible; keep brand Latin numerals in mixed contexts. */
[dir="rtl"] .pf-card__stat,
[dir="rtl"] .case-hero__stat { text-align: right; }