/* ToolKey AI — RTL patch. Loaded on every page (see functions.php::toolkeyai_scripts()), but every rule here is scoped under html[dir="rtl"], so it has zero effect on LTR pages (English, Turkish) — only Persian, once dir="rtl" is on (WordPress sets that automatically via language_attributes() in header.php, based on the current language's text direction — Polylang's fa_IR language is RTL out of the box, no extra config needed). Why this file is short: the theme's layout leans almost entirely on flexbox `display:flex` with `gap` (not hardcoded left/right offsets), and flexbox's default `row` direction already follows the browser's native `dir` handling — so most of the site mirrors correctly for free. The rules below patch the specific spots that don't: one stylesheet rule that hardcodes the whole page to LTR, a Latin-only font stack that doesn't cover Persian glyphs, a couple of hardcoded left/right offsets, and the directional arrow icons (which need to visually flip so "forward" still reads as forward in a right-to-left layout). */ /* assets/css/style.css hardcodes `body { direction: ltr; text-align: left; }` for the base design — this is the one rule that would otherwise break RTL entirely, since every other direction-dependent rule in this file only works once the page is actually flowing right-to-left. */ html[dir="rtl"] body { direction: rtl; text-align: right; } /* Sora + JetBrains Mono (enqueued in functions.php) don't include Arabic- script glyphs, so Persian text would silently fall through to whatever generic font the browser picks. Use a solid native-Persian stack instead — Latin characters/numerals mixed into Persian copy still render fine. */ html[dir="rtl"] body { font-family: Tahoma, 'Segoe UI', Vazirmatn, system-ui, -apple-system, sans-serif; } /* Bullet-list indent: mirror the hardcoded padding-left in style.css. */ html[dir="rtl"] .form-message ul, html[dir="rtl"] .article-body ul { padding-left: 0; padding-right: 20px; } /* Prompt Library "BEFORE / AFTER" badge: pinned to the visual's left edge in the base design — move it to the leading edge in RTL instead. */ html[dir="rtl"] .visual-label { left: auto; right: 12px; } /* Directional arrow icons (link-arrow CTAs, prev/next pagination, the chat send button) point right by default to mean "forward" — flip them so they still point toward "forward" when the page reads right-to-left. Icons that aren't directional (checkmarks, the hamburger/close menu icons, the copy icon, info circle) are outside these selectors, so they're untouched. */ html[dir="rtl"] .link-arrow svg, html[dir="rtl"] .filter-tab svg, html[dir="rtl"] .chat-send-btn svg { transform: scaleX(-1); } /* The hero badge's small accent dot and a few similar inline-styled spacers use a hardcoded margin-right in the templates (not this stylesheet) to sit before their label text — swap the gap side in RTL. */ html[dir="rtl"] .tag > span:first-child[style*="margin-right"] { margin-right: 0 !important; margin-left: 8px !important; }