/* Right-to-left pages (Arabic, 2026-11-11). Loaded only on a page with <html dir="rtl">, after every other sheet.

   How a right-to-left page gets its layout (app/routes/middleware/locale-routing.js):
   1. dir="rtl" on <html>: flex and grid mirror on their own.
   2. Every stylesheet the page links is served mirrored (/ar/_css/..., modules/css-rtl.js): margins, floats,
      offsets, text-align and the rest swap sides in place. Inline <style> and style="" are mirrored in the page.
   3. This file, served as written (never mirrored): only what a mechanical swap cannot know. Type rules Arabic
      script needs, things that stay left to right, photos composed for left-hand text, arrows.
   Check with: node scripts/locales/visual-qa.js --langs ar */

/* ── Type ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* Arabic letters join. Tracking pulls the joins apart, and the tight Latin line heights clip the marks above
   and below the line. Inter has no Arabic letters, so each Arabic glyph falls to the system face behind it. */
html[dir="rtl"] body,
html[dir="rtl"] body *:not(code):not(pre):not(kbd):not(samp) { letter-spacing: 0 !important; }
html[dir="rtl"] body :is(h1, h2, h3, h4) { line-height: 1.3 !important; }
html[dir="rtl"] body :is(p, li, dd, td, th, summary, label, figcaption, blockquote) { line-height: 1.75; }

/* ── Things that stay left to right ───────────────────────────────────────────────────────────────────── */
/* An address, an email, a phone number, a hex colour, code: typed and read left to right in every language. */
html[dir="rtl"] :is(code, pre, kbd, samp, .my-ltr),
html[dir="rtl"] input:is([type="url"], [type="email"], [type="tel"], [type="number"], [inputmode="url"], [inputmode="numeric"], [inputmode="email"], [inputmode="tel"]),
html[dir="rtl"] input:is([name*="url" i], [name*="link" i], [name*="email" i], [name*="phone" i], [name*="color" i], [name*="colour" i], [id*="url" i], [id*="link" i], [id*="email" i], [id*="phone" i], [id*="hex" i], [id*="color" i], [id*="colour" i]) {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}
html[dir="rtl"] pre { text-align: left; }
/* The "more.you/yourname" field reads as one address: prefix, name, then the button. Its padding is restated
   because the mirrored sheet swapped it for a right-to-left row. */
html[dir="rtl"] .ed-field { direction: ltr; padding-left: 14px; padding-right: 5px; }
@media (max-width: 480px) { html[dir="rtl"] .ed-field { padding: 8px; } }
html[dir="rtl"] .ed-field .ed-btn { direction: rtl; }
html[dir="rtl"] .ed-field input { text-align: left; }

/* ── Photos and arrows ────────────────────────────────────────────────────────────────────────────────── */
/* The home hero photo leaves its empty side for the words. The words now sit on the right, so the photo and
   the shade over it flip. */
html[dir="rtl"] :is(.ed-hero__img, .ed-hero__shade) { transform: scaleX(-1); }
/* Arrows that mean "go on" point left. Arrows typed inside a sentence ("All tools ←") are the translators'
   job; these are drawn by CSS or sit in their own element. */
html[dir="rtl"] .ed-announce__cta::after { content: "\2190"; }
/* No rule for .ed-announce__body::after: English draws no arrow after the sentence any more (editorial.css sets
   content:none), and an override here drew a second arrow in Arabic at every width until 2026-11-11. */
html[dir="rtl"] .my-feat-cta::after { content: "\2196"; }
html[dir="rtl"] :is(.ed-co-go, .ed-arrow) { display: inline-block; transform: scaleX(-1); }
/* The Product menu's "move from Linktree" drawing: the old page sits on the right, so the arrow points left. */
html[dir="rtl"] .pm-arrow { transform: scaleX(-1); }