/* =================================================================== RTL overrides for Urdu (ur) pages. Loaded AFTER assets/style.css. Base direction is handled by ; this file fixes the handful of rules that don't auto-flip with dir alone (flexbox order, hardcoded left/right, directional arrow glyphs). =================================================================== */ html[dir="rtl"] body { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Sans Arabic", serif; text-align: right; } /* Headings/labels that use Latin-script brand fonts stay LTR-shaped internally but the surrounding layout still flows RTL */ html[dir="rtl"] .eyebrow, html[dir="rtl"] .qa-label, html[dir="rtl"] .tag, html[dir="rtl"] .meta, html[dir="rtl"] .brand-name small { direction: rtl; } /* Header / nav */ html[dir="rtl"] .site-header .wrap, html[dir="rtl"] .primary-nav ul { flex-direction: row-reverse; } html[dir="rtl"] .brand { flex-direction: row-reverse; } html[dir="rtl"] .brand-name { text-align: right; } /* Breadcrumb */ html[dir="rtl"] .breadcrumb { direction: rtl; } html[dir="rtl"] .breadcrumb .sep::before { content: "\\"; } /* Hero / grid layouts: let content reflow naturally RTL rather than forcing a mirrored grid, since two-column reading order in RTL UIs commonly keeps primary content first (right) without remapping source order */ html[dir="rtl"] .hero-inner, html[dir="rtl"] .footer-grid, html[dir="rtl"] .grid-2, html[dir="rtl"] .grid-3 { direction: rtl; } /* Card / list arrows: mirror the "→" used throughout practice-list, court-list, card-link etc. to point left (toward reading direction) */ html[dir="rtl"] .arrow, html[dir="rtl"] .card-link { display: inline-block; transform: scaleX(-1); } /* CTA button rows */ html[dir="rtl"] .cta-row { flex-direction: row-reverse; } /* Key-facts / quick-answer card accent bar: sits on the right in RTL */ html[dir="rtl"] .key-facts-card svg rect[width="5"] { transform: scaleX(-1); transform-origin: center; } /* Forms */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } /* Translation notice banner + referral box already center-align, no change needed */