/* ========================================================================= RTL overrides — loaded ONLY when the active language is right-to-left (currently Arabic), via a conditional in base.html. When this file is not loaded the LTR layout in app.css is byte-for-byte unchanged. The base layout is mostly flexbox/grid, which mirrors automatically once is set, so this sheet only needs to: 1. apply an Arabic-appropriate webfont (Cairo) to the UI, 2. keep the CV document/preview itself LTR (we localise the app UI, not the user's CV), and 3. flip the handful of hard-coded physical directions in app.css. ========================================================================= */ /* 1. Arabic UI font. Cairo renders Arabic cleanly; Latin fragments fall back to Plus Jakarta Sans. The CV document sets its own font (resume.css), so it is unaffected. */ [dir="rtl"] body { font-family: "Cairo", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* 2. Keep the rendered CV / live preview / gallery thumbnails left-to-right. The CV is the user's document — its layout (sidebar side, alignment) must look identical regardless of the surrounding UI language. Without this the resume would inherit `direction: rtl` and mirror its flex/text. */ [dir="rtl"] .resume, [dir="rtl"] .resume-page, [dir="rtl"] #resume-preview, [dir="rtl"] .tpl-preview, [dir="rtl"] .tpl-preview-scaler { direction: ltr; text-align: left; } /* 3. Flip the physical directions that CSS logical properties / flexbox don't handle on their own. */ /* Template "Popular in …" badge sits in the top corner. */ [dir="rtl"] .tpl-badge { right: auto; left: 10px; } /* Pricing "Best value" badge + the ✓ bullets. */ [dir="rtl"] .pricing-badge { right: auto; left: 16px; } [dir="rtl"] .pricing-list li { padding: 6px 24px 6px 0; } [dir="rtl"] .pricing-list li::before { left: auto; right: 0; } [dir="rtl"] .pricing-period { margin-left: 0; margin-right: 6px; } /* Country cards + prose lists + tables read from the right. */ [dir="rtl"] .country-card { text-align: right; } [dir="rtl"] .info-prose ul, [dir="rtl"] .info-prose ol, [dir="rtl"] .article-body ul, [dir="rtl"] .article-body ol { padding-left: 0; padding-right: 22px; } [dir="rtl"] .article-body table th, [dir="rtl"] .article-body table td { text-align: right; } /* Editor: the import-help toggle spacing + the live-preview pane divider. */ [dir="rtl"] .import-help-toggle { margin-left: 0; margin-right: 8px; } [dir="rtl"] .preview-pane { border-left: none; border-right: 1px solid var(--line); }