/*
* RTL overrides for built Arabic (and future RTL) locale pages.
*
* Injected by tools/build-locale-pages.mjs into the of any locale
* with rtl: true. Targets the most visible LTR-only patterns in the source
* inline CSS so the page reads naturally right-to-left without a full
* physical→logical CSS rewrite of the source pages.
*
* Scoped to [dir="rtl"] only — does not affect LTR builds.
*/
/* ============================================================
* Base: ensure Arabic font fallback and natural text flow.
* ============================================================ */
[dir="rtl"] body {
font-family: 'Cairo', 'Segoe UI', 'Tahoma', system-ui, sans-serif;
text-align: right;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] dt,
[dir="rtl"] dd,
[dir="rtl"] blockquote,
[dir="rtl"] label,
[dir="rtl"] th,
[dir="rtl"] td {
text-align: start;
}
/* Keep visibly centered things centered (heroes, CTAs, stats). */
[dir="rtl"] .hero,
[dir="rtl"] .center,
[dir="rtl"] [class*="hero"],
[dir="rtl"] [class*="center"],
[dir="rtl"] [class*="stat"],
[dir="rtl"] [class*="cta"] {
text-align: center;
}
/* Form controls follow the writing direction. */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
text-align: right;
direction: rtl;
}
/* But always keep numeric / email / URL / password inputs LTR — they read
* left-to-right even in RTL languages. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[inputmode="numeric"] {
direction: ltr;
text-align: right;
}
/* ============================================================
* Flex & grid: rows flow right-to-left automatically. Make sure
* order stays visually consistent for navbars/footers.
* ============================================================ */
[dir="rtl"] nav,
[dir="rtl"] header,
[dir="rtl"] footer,
[dir="rtl"] .nav,
[dir="rtl"] .header,
[dir="rtl"] .footer {
direction: rtl;
}
/* ============================================================
* Mirror direction-sensitive icons and arrows.
*
* Anything with an "arrow", "chevron", or "caret" class — flip
* horizontally so → becomes ← visually. Skip checkmarks, close,
* and language flags (🌐) which are direction-neutral.
* ============================================================ */
[dir="rtl"] [class*="arrow"]:not([class*="up"]):not([class*="down"]),
[dir="rtl"] [class*="chevron"]:not([class*="up"]):not([class*="down"]),
[dir="rtl"] [class*="caret"]:not([class*="up"]):not([class*="down"]),
[dir="rtl"] .icon-back,
[dir="rtl"] .icon-forward,
[dir="rtl"] .icon-next,
[dir="rtl"] .icon-prev {
transform: scaleX(-1);
}
/* ============================================================
* Inline-margin / padding utilities: when an author wrote
* margin-left or margin-right hoping it meant "start" or "end",
* common patterns are caught here. These cover the most-used
* spacings (sidebar gaps, nav-item gaps).
* ============================================================ */
/* Pill / chip / badge gaps */
[dir="rtl"] [class*="badge"],
[dir="rtl"] [class*="chip"],
[dir="rtl"] [class*="pill"],
[dir="rtl"] [class*="tag"] {
margin-inline-start: 0;
margin-inline-end: 6px;
}
/* ============================================================
* Brand "Briefed" mark — keep it Latin and LTR even mid-Arabic.
* The HTML has Briefed split into
* two spans; make sure the whole logo reads B-r-i-e-f-e-d in order.
* ============================================================ */
[dir="rtl"] .nav-logo,
[dir="rtl"] .nav-logo-text,
[dir="rtl"] [class*="logo"] {
direction: ltr;
unicode-bidi: isolate;
}
/* Same for any element containing the brand name as text content.
* , , often hold LTR tokens (German terms,
* code identifiers, file paths) that should not flip. */
[dir="rtl"] code,
[dir="rtl"] var,
[dir="rtl"] kbd,
[dir="rtl"] samp,
[dir="rtl"] .ltr {
direction: ltr;
unicode-bidi: isolate;
display: inline-block;
}
/* ============================================================
* Tables: header alignment and cell direction.
* ============================================================ */
[dir="rtl"] table {
direction: rtl;
}
[dir="rtl"] th:first-child,
[dir="rtl"] td:first-child {
text-align: start;
}
/* ============================================================
* Lists: bullets / numbering on the correct side.
* ============================================================ */
[dir="rtl"] ul,
[dir="rtl"] ol {
padding-inline-start: 24px;
padding-inline-end: 0;
}
/* ============================================================
* Common app-shell patterns: sidebar lives on the right in RTL.
* If the source uses