/*
    RTL corrections for the Bootstrap 4 based template (stylesheet.css +
    plugins/bootstrap). Bootstrap 4 has no built-in RTL build (that only
    shipped in Bootstrap 5), so its spacing utility classes (ml-*, mr-*,
    pl-*, pr-*, text-left/text-right) hard-code physical left/right and do
    NOT flip under dir="rtl". Load this file AFTER css/stylesheet.css on
    every Arabic page that uses <html lang="ar" dir="rtl">.

    Note: Bootstrap 4's grid (.row/.col-*) is flexbox-based, and flexbox row
    direction already respects `dir`, so columns re-order correctly on
    their own — no fix needed there. This file only touches the handful of
    physical-direction utility classes actually used across this site's
    templates (checked against header-new.html, footer-new.html,
    index.html, contact.html and the article page template).
*/

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

/* Navbar: push the nav links to the visual "start" side (right, in RTL) */
html[dir="rtl"] .navbar-nav.ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Icon-to-label spacing (calendar/pencil/phone/email/social icons etc.) —
   these use mr-1/2/3 to push the following text away from the icon; in
   RTL the icon renders on the right of the text, so the gap must become
   margin-left instead. */
html[dir="rtl"] .mr-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

html[dir="rtl"] .mr-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

html[dir="rtl"] .mr-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

/* Contact page: the two-column layout mirrors correctly on its own
   (flexbox grid), but the manual left-padding that separated the text
   column from the form needs to move to the other side. */
html[dir="rtl"] .pl-lg-5 {
    padding-left: 0 !important;
    padding-right: 3rem !important;
}

/* Forced left-alignment (used on the article sidebar author bio) should
   read as right-alignment for Arabic body text. */
html[dir="rtl"] .text-left {
    text-align: right !important;
}

/* Breadcrumb-style list-inline items: give the gap to the correct side so
   spacing between "Home / Page" reads evenly in both directions. */
html[dir="rtl"] .list-inline-item:not(:last-child) {
    margin-right: 0;
    margin-left: 0.5rem;
}