/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * site.rtl.css — right-to-left corrections for Arabic.
 *
 * STATUS: WIRED 2026-08-28, loaded for RTL locales only — `stylesheetsFor()` in
 * `components/RootShell.tsx` appends it after `production-overrides.css`, which is the only position
 * where its overrides beat the physical declarations in `site.css`. D-22 (the Cairo latin-ext
 * subset) closed the same day on direct cmap inspection of the deployed font files.
 *
 * Written 2026-08-27 from a MECHANICAL audit of the 36 physical-direction declarations in the
 * shipped stylesheets — which is exactly why each rule below carries a `site.css:NNN` reference and
 * why none of them was trustworthy on the strength of that audit alone. A mechanical sweep can tell
 * you a `margin-left` exists; it cannot tell you whether flipping it improves the rendered page.
 * VERIFICATION STATE: pending. Each rule is checked against a rendered Arabic route at 1280 and
 * 375 as part of the AR ship, and this line records the result when that is done. Until it says
 * otherwise, treat every rule below as an INFERENCE from the LTR stylesheet, not a measurement.
 *
 * WHY A SEPARATE FILE RATHER THAN LOGICAL PROPERTIES AT SOURCE
 * The correct fix is `margin-inline-start` instead of `margin-left` in `site.css` itself. That is not
 * available: `site.css`, `tokens.css` and `animations.css` are byte-identity-protected (DEBT_LEDGER
 * D-10) because they must match the ratified design source exactly. So the conversion lives here, as
 * `[dir="rtl"]`-scoped overrides. Every rule is inert on an LTR page by construction, which is why
 * this file is safe to load sitewide once it is wired.
 *
 * ───────────────────────────────────────────────────────────────────────────────────────────────
 * THE THINGS THAT MUST NEVER MIRROR
 *
 * "RTL" invites a blanket transform, and the exceptions are what break. Each of these is a real
 * defect if flipped, not a preference:
 *
 *   1. THE WORDMARK. `VERBITIR` is a Latin-script logotype. Mirroring it produces a broken brand
 *      asset, not a localised one. The mark and the wordmark stay LTR, always.
 *   2. APP STORE / GOOGLE PLAY BADGES. Vendor-supplied assets with their own brand guidelines that
 *      forbid alteration. (Currently deleted from the build — the app does not exist — but the rule
 *      stands for when they return.)
 *   3. PHONE NUMBERS. `+90 212 …` is read left-to-right in every locale. Arabic bidi will happily
 *      reorder a bare phone number in a mixed-direction paragraph; isolate it.
 *   4. THE LIRA SYMBOL BEFORE A NUMERAL. `₺1.000` is the Turkish convention and is locked by the
 *      brand (`₺1.000`, never `1.000₺`, never `%15` reversed to `15%`). In an RTL paragraph the
 *      Unicode bidi algorithm will move a leading currency symbol to the other side of the number
 *      unless the run is isolated. This is the single most likely RTL defect on the pricing page,
 *      and it is invisible to anyone who does not read Arabic.
 *   5. THE CHECKMARK GLYPH. `.vb-checkbox-row input:checked::after` is a tick drawn from two borders
 *      rotated 45°. Flipping its `left` and its `border-right` yields a backwards tick. It is a
 *      glyph, not layout.
 *   6. THE QR CODE, and any scannable or diagrammatic art.
 *   7. PROGRESS AND NUMBERED STEPS remain in logical order — the numerals lay out RTL naturally; do
 *      not additionally reverse the DOM order, or the sequence runs backwards twice and comes out
 *      forwards.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Isolation for runs that must stay LTR inside RTL text ─────────────────────────────────
 * `unicode-bidi: isolate` tells the bidi algorithm to treat the element as a single neutral run,
 * which stops a leading `₺` or a `+90` from being pulled across the number. Applied by class so it
 * is explicit at the call site rather than guessed from content. */
/*
 * MEASURED 2026-08-28, and four of these six selectors matched nothing.
 *
 * `.vb-ltr`, `.price`, `.tier-price`, `.phone` and `.footer-contact` do not exist in the markup —
 * they were written from a guess at what the classes would be called. `.vb-wordmark` is real and it
 * worked: the topbar wordmark computed `direction: ltr; unicode-bidi: isolate`. The DRAWER wordmark
 * did not, because it is `<span class="notranslate">` with no `.vb-wordmark`, and it computed
 * `direction: rtl`. One of two instances of the same brand asset was isolated. Reading this file
 * could not have told anyone that; only rendering it did.
 *
 * `.notranslate` replaces the guessed class list because it is the marker the components ACTUALLY
 * carry, and it means the right thing: a run that is not translatable text — the wordmark, an email
 * address, a domain — is exactly the run that must not be reordered by the bidi algorithm.
 *
 * THE CURRENCY RUN IS NOT FIXABLE FROM HERE, and a rule that tried was removed rather than left in
 * looking useful. `+ ₺499 لكل فرع إضافي` mixes scripts and the bidi algorithm moves the `₺` to the
 * RIGHT of its digits. `[dir="rtl"] .vb-tier-card span { direction: ltr; unicode-bidi: isolate }`
 * was tried and MEASURED: still reordered, because isolating the whole span does not isolate the
 * currency run WITHIN it — and it additionally forces LTR onto a mostly-Arabic sentence, so it was
 * harmful as well as ineffective. Isolation needs an element around `₺499` alone, and the string
 * comes from one seed field with no markup in it. The fix is therefore U+2066/U+2069 (LRI/PDI)
 * inside the string itself, in `content/seed/hero.ar.json` — see the note on that block. Four
 * candidate fixes were rendered side by side before choosing; two worked and this was the one
 * available.
 *
 * Standalone `₺1.000` needs nothing: a run with no Arabic in it is never reordered.
 */
[dir="rtl"] .vb-ltr,
[dir="rtl"] .notranslate,
[dir="rtl"] .vb-wordmark {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* ── 2. Topbar ───────────────────────────────────────────────────────────────────────────────── */

/* site.css:48 — `margin-left: auto` pushes the nav away from the mark. In RTL the same physical
 * margin pushes it the wrong way; the logical equivalent is the start side. */
[dir="rtl"] .vb-topbar .nav-center { margin-left: 0; margin-right: auto; }

/* site.css:186 */
[dir="rtl"] .vb-topbar .login-link { margin-left: 0; margin-right: 20px; }

/* site.css:867 and :1230 — the hamburger sits at the visual END of the bar. */
[dir="rtl"] .vb-hamburger { margin-left: 0; margin-right: auto; }
[dir="rtl"] .vb-topbar .vb-hamburger { right: auto; left: 16px; margin-right: 0; }

/* ── 3. Overlays and drawers ─────────────────────────────────────────────────────────────────── */

/* site.css:896 — the drawer enters from the END side.
 *
 * THE ANCHOR WAS FLIPPED AND THE TRANSFORM WAS NOT, and the transform is what hides it.
 * `site.css:902` closes the drawer with `transform: translateX(100%)` — a positive, RIGHTWARD
 * offset, which pushes it off-screen only because LTR anchors it at `right: 0`. Re-anchoring to
 * `left: 0` for RTL left that push pointing INTO the viewport.
 *
 * Measured at 390px before the fix, /ar/ against / as the reference:
 *     TR closed   x=390  right=710   entirely off-screen        correct
 *     AR closed   x=320  right=640   70px of drawer ON SCREEN   the empty panel Mohamed reported
 *
 * `translateX(100%)` is DIRECTIONAL BUT NOT A PHYSICAL-DIRECTION PROPERTY, which is why the
 * mechanical audit of `margin-left`/`right`/`left` never saw it — the third property class it has
 * missed, after `letter-spacing` and inline styles. Unlike those two this one is FUNCTIONAL: a
 * mobile Arabic visitor sees a blank panel wedged over the page.
 *
 * The `.is-open` rule (`site.css:908`, `.vb-drawer-backdrop.is-open .vb-drawer { translateX(0) }`)
 * needs no RTL twin: it is specificity (0,3,0) against this rule's (0,2,0), so it still wins when
 * the drawer opens, and `translateX(0)` is direction-neutral.
 *
 * NOT A DEFECT, checked because it was predicted to be one: when the drawer is OPEN it covers the
 * hamburger, and the hamburger is not hit-testable. That is identical in Turkish — TR open drawer
 * x=70..390 with the hamburger at x=330, also covered. The close control is reachable in both
 * (AR x=20, TR x=326, both hit-testable). Symmetric behaviour is the design, not an RTL break.
 */
[dir="rtl"] .vb-drawer { right: auto; left: 0; transform: translateX(-100%); }

/* site.css:779 and :1106 — the modal close control sits at the END corner. */
[dir="rtl"] .vb-modal .close-x { right: auto; left: 16px; }
@media (max-width: 640px) {
  [dir="rtl"] .vb-modal .close-x { right: auto; left: 8px; }
}

/* ── 4. Typography that is not directional at all, and breaks anyway ──────────────────────────
 *
 * NOT FOUND BY THE MECHANICAL AUDIT, because the audit looked for physical-direction declarations
 * and this is neither physical nor directional. It is the largest RTL defect on the site by count:
 * ten elements across every route, at both widths.
 *
 * ARABIC LETTERS JOIN. `letter-spacing` inserts space between them and the joins break, so a word
 * renders as disconnected fragments — not "loose tracking", visibly broken text. The affected
 * elements are the small-caps labels: `.band-eyebrow`, `.footer-col-title`, `.kpi-label` and the
 * tier "recommended" badge. Every one pairs `letter-spacing: var(--tracking-caps)` with
 * `text-transform: uppercase`, which is the standard Latin label treatment — and on Arabic the
 * uppercase half is a silent no-op while the tracking half is destructive.
 *
 * Fixed at the TOKEN rather than at the five selectors. `--tracking-caps` has exactly five
 * consumers across tokens.css, site.css and production-overrides.css; redefining it for RTL fixes
 * all of them — including the tier badge, whose selector is structural (a bare `div` inside
 * `.vb-tier-card.popular`) and would have been fragile to target, and including any consumer added
 * later. `--tracking-pixel` is deliberately NOT touched: it belongs to the Pixelify wordmark, which
 * is Latin and stays LTR.
 */
[dir="rtl"] {
  --tracking-caps: normal;
}

/*
 * The tier "recommended" badge needs its own rule and `!important`, which nothing else here does.
 * Its tracking is an INLINE style on the element (`letter-spacing:.08em` in the JSX), and an inline
 * declaration beats any stylesheet selector regardless of specificity — so the token fix above
 * cannot reach it. Inline styles were invisible to the mechanical audit for the same reason: the
 * audit read the three stylesheets, and this declaration is not in them.
 *
 * `left: 32px` is inline too, and it is a physical inset on an absolutely-positioned badge: in RTL
 * it pins the badge to the visual END of the card instead of its start. Mirrored here for the same
 * reason `.vb-hamburger`, `.vb-drawer` and `.vb-modal .close-x` are.
 */
[dir="rtl"] .vb-tier-card.popular > div[style] {
  letter-spacing: normal !important;
  left: auto !important;
  right: 32px !important;
}


/* ── 5. Small directional spacing ────────────────────────────────────────────────────────────── */

/* site.css:403 — the dot precedes its label, so the gap belongs on the END side. */
[dir="rtl"] .vb-hero .social-row .dot { margin-right: 0; margin-left: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * DELIBERATELY NOT OVERRIDDEN — each was inspected and is correct as it stands.
 *
 *   · `margin-left: auto` PAIRED WITH `margin-right: auto` — .vb-cognito-chip (732/733),
 *     .vb-hero .sub (1018), .vb-footer .footer-tagline (1068), .vb-footer .wa-chip (1070),
 *     .vb-hero-art (1182/1183), .vb-hero-art-stage (1188/1189). Symmetric centering is
 *     direction-neutral; "converting" these to logical properties would change nothing and add
 *     six rules that must be kept in sync with a protected file.
 *   · `left: 0` PAIRED WITH `right: 0` — .vb-topbar .nav-center a.active::after (67), and the
 *     lang-pill underline in animations.css:193 / production-overrides.css:557. Symmetric inset.
 *   · `left: 50%` WITH `translateX(-50%)` — .vb-more-menu (112), .vb-topbar > div:first-child
 *     (1221). Centring, not alignment. The transform's sign is symmetric about the centre, so this
 *     is correct in both directions.
 *   · `.vb-checkbox-row input:checked::after` (583/587) — the tick GLYPH. See rule 5 above.
 *   · animations.css:121-123, the decorative hero coins at 67%/50.6%/65.3%. Illustration placement,
 *     not layout. Mirroring decorative art is a design decision and belongs to Designer, not to a
 *     mechanical RTL sweep — raised rather than assumed.
 *   · `.vb-screen-label` (822/840) — a canvas artefact. It is banned from the bundle entirely by
 *     scripts/verify-no-canvas-artifacts.mjs, so it will never render and needs no RTL rule.
 *
 * NOT COVERED BY THIS FILE — stated so nobody reads its scope as wider than it is.
 *
 *   · THE CONSENT BANNER. `components/ConsentBanner.tsx` is React-owned markup that did not exist
 *     when the 36 declarations were audited, so no rule here touches it. It renders inside the RTL
 *     document like everything else and was checked by screenshot rather than by this file.
 *   · THE TALLY EMBED. It is a cross-origin iframe. Its direction comes from the FORM's own
 *     `direction: rtl` setting, which is server-side configuration in Tally and completely outside
 *     this stylesheet's reach — see `scripts/verify-form-parity.mjs`, which asserts the computed
 *     direction of the rendered form precisely because nothing in this repository controls it.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */