/* =====================================================================
   Right-to-left layer for the public site (templates/site/), loaded only
   when the page language is RTL (Arabic) — see base.html.

   1. Fonts: the Latin faces keep the Latin glyphs; Arabic falls through to
      IBM Plex Sans Arabic (text) and Noto Naskh Arabic (headings), loaded
      with the page. No letter-spacing or synthetic italics on Arabic.
   2. Grid and flex rows already mirror under dir="rtl". This file only
      flips what's positioned physically (left/right) and the arrows.
   ===================================================================== */
[dir="rtl"] {
  --sans: Inter, "IBM Plex Sans Arabic", system-ui, sans-serif;
  --serif: "Instrument Serif", "Noto Naskh Arabic", Georgia, serif;
  --mono: "JetBrains Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
}
[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] em, [dir="rtl"] .hx-band > h4, [dir="rtl"] .hx-day b, [dir="rtl"] .hx-bridge > span, [dir="rtl"] .hx-table tr.grp th { font-style: normal; }
[dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3, [dir="rtl"] .hx-h1 .big, [dir="rtl"] .hx-final h2, [dir="rtl"] .foot-tag { line-height: 1.35; }
[dir="rtl"] .hx-h1 .big { font-size: clamp(34px, 4.4vw, 60px); }
[dir="rtl"] .faq summary { line-height: 1.45; }

/* text alignment */
[dir="rtl"] .hx-demo, [dir="rtl"] .hx-in, [dir="rtl"] .hx-day, [dir="rtl"] .hx-table th, [dir="rtl"] .hx-table td { text-align: right; }

/* list dashes and indents */
[dir="rtl"] .hx-band li { padding: 1px 14px 1px 0; }
[dir="rtl"] .hx-band li::before { left: auto; right: 0; }
[dir="rtl"] .hx-dates li { padding-right: 0; }
[dir="rtl"] .micro li::before { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .hx-plan .amt small { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .hx-blank .caret { margin-left: 0; margin-right: 4px; }

/* dividers that sit on one side */
[dir="rtl"] .hx-kv div { border-left: 0; border-right: 1px solid var(--rule); }
[dir="rtl"] .hx-kv div:first-child { border-right: 0; }
[dir="rtl"] .hx-pairs-l, [dir="rtl"] .hx-cl-l { border-right: 0; border-left: 1px solid var(--rule); }
[dir="rtl"] .hx-draft { padding: 4px 14px 4px 0; border-left: 0; border-right: 2px solid var(--ink); }
[dir="rtl"] .msg { border-radius: 12px 12px 4px 12px; }
[dir="rtl"] .hx-day { padding: 14px 0 0 12px; }
[dir="rtl"] .hx-days::before { left: auto; right: 0; }

/* things pinned to a corner */
[dir="rtl"] .hx-badge { right: auto; left: 22px; }
[dir="rtl"] .hx-demo .replay, [dir="rtl"] .replay { right: auto; left: 16px; }
[dir="rtl"] .langdd-menu { right: auto; left: 0; }

/* arrows point the reading direction */
[dir="rtl"] .btn svg, [dir="rtl"] .link svg, [dir="rtl"] .i-arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover svg, [dir="rtl"] .link:hover svg { transform: scaleX(-1) translateX(3px); }

/* mixed Arabic and Latin (a URL, a file name): let each line pick its own direction */
[dir="rtl"] .hx-hand span, [dir="rtl"] .hx-in small, [dir="rtl"] .hx-raw > span:last-child { unicode-bidi: plaintext; }

@media (max-width: 900px) {
  [dir="rtl"] .hx-pairs-l, [dir="rtl"] .hx-cl-l { border-left: 0; }
  [dir="rtl"] .hx-badge { left: 18px; }
  [dir="rtl"] .hx-in { padding: 8px 8px 8px 12px; }
  [dir="rtl"] .hx-h1 .big { font-size: clamp(32px, 9vw, 44px); }
}