/* Right-to-left layout overrides (v2.9.8).
 *
 * Loaded last, on every page, and scoped entirely to [dir="rtl"]. Nothing here
 * can affect the five left-to-right locales.
 *
 * Why an override sheet rather than converting the existing CSS to logical
 * properties: styles.css, r17-premium.css, r18-qa.css and r23-experience.css
 * are minified and concatenated, and several of their rules carry !important.
 * Rewriting 39 physical-direction declarations inside minified files to add one
 * locale is a large blast radius for no benefit to the locales that already
 * work. This sheet mirrors exactly the declarations that are directionally
 * wrong in RTL, and each block says what it is fixing.
 *
 * Things that need no override, for the record:
 *   - CSS grid and flex reverse automatically under dir="rtl", so
 *     .rg-section-disclaimer (grid-template-columns: auto 1fr auto), the nav
 *     and the stepper mirror on their own.
 *   - Symmetric rules (left:12px; right:12px) are already direction-neutral.
 *   - Percentages, currency and dates are pinned to Latin digits in
 *     src/i18n_registry.mjs, so numerals do not flip.
 */

/* --- Document baseline --------------------------------------------------- */

/* styles.css sets font-family on `body` directly, so a rule on the html
   element loses. Both are targeted here. Arabic script needs more vertical
   room than Latin at the same px size, and the default Inter stack has no
   Arabic coverage, so glyphs fall back inconsistently across platforms. */
[dir="rtl"],
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button {
  font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
}

[dir="rtl"],
[dir="rtl"] body {
  line-height: 1.7;
}

/* Latin brand names, form codes and technical tokens must not be reordered by
   the bidirectional algorithm when they sit inside Arabic prose. */
[dir="rtl"] code,
[dir="rtl"] samp,
[dir="rtl"] kbd,
[dir="rtl"] .mono,
[dir="rtl"] [data-latin] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* --- List indentation ---------------------------------------------------- */
/* styles.css indents these with padding-left, which puts the bullet on the
   wrong side in RTL. */

[dir="rtl"] .situation-list,
[dir="rtl"] .reference-list,
[dir="rtl"] .toolkit-columns ul,
[dir="rtl"] .plan-grid ul,
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-left: 0;
  padding-right: 1.4rem;
}

/* --- Text alignment ------------------------------------------------------ */
/* Anything explicitly pinned to left/right needs to follow the reading
   direction instead. */

[dir="rtl"] .r23-stepper button,
[dir="rtl"] #calculator .r25-error-link,
[dir="rtl"] .r23-review-row dt,
[dir="rtl"] .r23-review-row dd,
[dir="rtl"] .small-note,
[dir="rtl"] th,
[dir="rtl"] td {
  text-align: right;
}

/* Numeric cells stay end-aligned in both directions, which under RTL means the
   left edge. Using a logical value keeps one rule for both. */
[dir="rtl"] td.amount,
[dir="rtl"] th.amount,
[dir="rtl"] .amount {
  text-align: start;
}

/* --- Auto margins that push an element to one edge ----------------------- */

[dir="rtl"] .r23-navigation #r23Next {
  margin-left: 0;
  margin-right: auto;
}

/* --- Fixed-position affordances ------------------------------------------ */

[dir="rtl"] .skip-link {
  left: auto;
  right: 16px;
}

[dir="rtl"] .r25-skip {
  left: auto;
  right: 12px;
}

/* --- Decorative header glow ---------------------------------------------- */
/* Purely cosmetic, but it anchors the composition; leaving it unmirrored makes
   the header look lopsided against mirrored content. */

[dir="rtl"] .site-header::after {
  right: auto;
  left: -190px;
}

/* --- Floats and directional borders -------------------------------------- */

[dir="rtl"] .float-right { float: left; }
[dir="rtl"] .float-left { float: right; }

[dir="rtl"] [class*="border-left"] {
  border-left: 0;
  border-right: 1px solid currentColor;
}

/* --- Locale picker and disclaimer banner --------------------------------- */
/* These are v2.9.7 components; their spacing is authored here logically rather
   than patched, since locale-ui.css is not minified. */

[dir="rtl"] #rg-locale-preview-banner { text-align: right; }
[dir="rtl"] #rg-locale-preview-banner button { margin: 0; }

[dir="rtl"] .rg-locale-preview-warning {
  text-align: right;
}

/* The disclaimer's dismiss button is the third grid column, so it mirrors
   automatically. Its narrow-viewport override pins a column, which does not. */
@media (max-width: 640px) {
  [dir="rtl"] .rg-section-disclaimer button {
    grid-column: 2;
    justify-self: end;
  }
}

/* --- Inputs -------------------------------------------------------------- */
/* Money and date fields accept Latin digits in every locale, so their content
   is typed and displayed left-to-right even on an RTL page. The label above
   them still reads right-to-left. */

[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[inputmode="decimal"],
[dir="rtl"] input[inputmode="numeric"],
[dir="rtl"] input[name*="Rent"],
[dir="rtl"] input[name*="Date"],
[dir="rtl"] input[name*="Amount"] {
  direction: ltr;
  text-align: right;
}

/* --- Progress and step indicators ---------------------------------------- */

[dir="rtl"] .calc-progress,
[dir="rtl"] .r23-stepper {
  flex-direction: row-reverse;
}

/* --- Layered home page (v2.9.10) ------------------------------------------ */
/* Chevrons and the back arrow point in the reading direction. */
[dir="rtl"] .rg-chevron,
[dir="rtl"] .rg-back-arrow {
  display: inline-block;
  transform: scaleX(-1);
}

[dir="rtl"] .rg-back {
  padding: 0 6px 0 12px;
}