/* =========================================================================
   rtl.css
   Overrides applied only when the Arabic (RTL) version is active.
   Loaded after style.css, so rules here take precedence.
   Most spacing already uses logical properties (inset-inline-start/end,
   border-inline-start, padding-inline-start) which flip automatically;
   this file covers the remaining cases Bootstrap/flex utilities need help with.
   ========================================================================= */

html[dir="rtl"] body {
  text-align: right;
}

/* Bootstrap icons that visually imply direction (arrows) should mirror */
html[dir="rtl"] .hero-scroll-cue i,
html[dir="rtl"] .bi-arrow-up {
  transform: scaleX(-1);
}
html[dir="rtl"] .back-to-top i {
  transform: none; /* up arrow should not mirror */
}

/* Navbar toggler icon spacing */
html[dir="rtl"] .navbar-toggler {
  margin-inline-start: auto;
}

/* Ensure Bootstrap's ms-auto / me-auto behave visually correctly.
   Bootstrap 5.3 ships RTL-aware utilities automatically via logical
   properties in its own RTL build; since we load the standard build,
   we patch the few utility classes actually used on this site. */
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-lg-3 { margin-right: 1rem !important; margin-left: 0 !important; }

/* Timeline dot / line already uses inset-inline-start so it mirrors correctly */

/* Progress bar fill direction: keep visual fill growing from the start edge
   in reading direction (right-to-left) */
html[dir="rtl"] .progress-fill {
  margin-inline-start: auto;
}

/* Card hover accent bar uses inset-inline-start already (auto-flips) */

/* Fine-tune Arabic type rhythm: Tajawal/Cairo look better slightly larger
   line-height for long-form paragraphs */
html[dir="rtl"] p,
html[dir="rtl"] .section-subtitle,
html[dir="rtl"] .vision-text {
  line-height: 2;
}

html[dir="rtl"] .section-eyebrow::before {
  order: 2;
}

/* Contact info icons spacing already handled by flex gap (direction-agnostic) */

/* Stat divider direction is handled with border-inline-start in style.css,
   so no change needed here. */

/* Breadcrumb / small caps arabic tracking looks tighter with less letter-spacing */
html[dir="rtl"] .section-eyebrow,
html[dir="rtl"] .breadcrumb-custom,
html[dir="rtl"] .category-badge {
  letter-spacing: 0;
}