/* ═══════════════════════════════════════════════════════
   ROLHR Conference — RTL Overrides
   Loaded only when lang=ar (dir=rtl)
   Bootstrap RTL handles most layout; this file
   handles custom component RTL adjustments only.
   ═══════════════════════════════════════════════════════ */

/* ─── Topbar ─────────────────────────────────────────── */
[dir="rtl"] .conf-topbar .container-xl {
  flex-direction: row-reverse;
}

/* ─── Skip Link: flip to right side ─────────────────── */
[dir="rtl"] .skip-link {
  left: auto;
  right: 1rem;
}

/* ─── Navbar underline: center stays centered ────────── */
[dir="rtl"] .conf-navbar .nav-link::after {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* ─── Brand: right-align text in RTL ─────────────────── */
[dir="rtl"] .brand-text {
  text-align: right;
}

/* ─── Icon flip for directional icons ────────────────── */
[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-chevron-right,
[dir="rtl"] .bi-arrow-left,
[dir="rtl"] .bi-chevron-left {
  transform: scaleX(-1);
}

/* ─── Footer contact list: icon on right ─────────────── */
[dir="rtl"] .footer-contact li {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* ─── Breadcrumb separator direction ─────────────────── */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "\276F"; /* use > for LTR, flip for RTL */
  transform: scaleX(-1);
  display: inline-block;
}

/* ─── Section divider: align to right in RTL ─────────── */
[dir="rtl"] .section-divider {
  margin-left: auto;
  margin-right: 0;
}

/* ─── Countdown: numbers stay LTR regardless of dir ──── */
[dir="rtl"] .cd-number {
  direction: ltr;
  unicode-bidi: embed;
}

/* ─── Card icon: flip margin in RTL ──────────────────── */
[dir="rtl"] .conf-card-icon {
  margin-right: 0;
  margin-left: auto;
}

/* ─── Partners grid direction ─────────────────────────── */
[dir="rtl"] .footer-partners-grid {
  direction: rtl;
}

/* ─── Utility: text alignment helpers ───────────────────*/
[dir="rtl"] .text-start {
  text-align: right !important;
}

[dir="rtl"] .text-end {
  text-align: left !important;
}

/* ─── Timeline (for date milestones) ─────────────────── */
[dir="rtl"] .timeline-connector {
  right: 50%;
  left: auto;
  transform: translateX(50%);
}