/* ========================================================================== RTL Overrides — Arabic Language Support Loaded only on Arabic pages (see inc/enqueue.php), after Tailwind CSS. ========================================================================== */ /** * Apply Rubik to ALL text in RTL/Arabic mode. * NOTE: The dir="rtl" attribute is on , not . * Using html[dir="rtl"] * with !important to override Tailwind utility * classes (font-heading, font-ui, font-body) applied directly on elements. * Rubik has full Arabic script support and is loaded via Google Fonts. */ html[dir="rtl"], html[dir="rtl"] * { font-family: var(--font-arabic); } .-logo-font { font-family: 'Freight Display', Georgia, serif !important; } /** * Heading refinements — Rubik Arabic looks best at heavier weights * and zero letter-spacing (English tracking looks bad in Arabic script). */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { font-weight: 700; letter-spacing: 0 !important; } /** * Form controls and interactive elements. */ html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea { letter-spacing: 0 !important; } /* Navigation alignment */ [dir="rtl"] .nav-primary { flex-direction: row-reverse; } /* Breadcrumbs arrow direction */ [dir="rtl"] .breadcrumb__separator { transform: scaleX(-1); } /* Form text alignment */ [dir="rtl"] .form-input, [dir="rtl"] .form-textarea { text-align: right; } /* Card link arrow flip */ [dir="rtl"] .card__link::after { content: '←'; } .-overlay-s { rotate: -180deg; }