/* ==========================================================================
   Right-to-left overrides (Arabic). Loaded only when the page is RTL, after style.css.
   style.css already uses logical properties (inline-start/end); Bootstrap's own RTL build
   mirrors its utilities. What is left is typography and the few physical values.
   ========================================================================== */
html[dir="rtl"] body {
  font-family: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
  line-height: 1.75;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .font-serif,
html[dir="rtl"] .sitemap-top,
html[dir="rtl"] .story-pullquote {
  font-family: 'Noto Naskh Arabic', 'Noto Sans Arabic', Georgia, serif;
  line-height: 1.45;
}

/* Letter-spacing breaks the joining of Arabic letters: never apply it. */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after { letter-spacing: 0 !important; }

/* Arabic has no uppercase and no italics: keep the small-label look without them. */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .btn-navy,
html[dir="rtl"] .btn-outline-navy,
html[dir="rtl"] label.form-label { text-transform: none; }
html[dir="rtl"] .pillar-example,
html[dir="rtl"] .story-anecdote,
html[dir="rtl"] .story-pullquote { font-style: normal; }

html[dir="rtl"] .hero-title { line-height: 1.35; }
html[dir="rtl"] .sitemap-tree ul { padding: 0 1rem 0 0; }

/* Directional arrows in buttons and links point the other way. */
html[dir="rtl"] .flip-rtl { display: inline-block; transform: scaleX(-1); }

/* Latin brand names, e-mail addresses and phone numbers keep their own direction inside RTL text. */
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] { direction: ltr; unicode-bidi: plaintext; }
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] { text-align: right; }