/* Right-to-left overrides for the Arabic pages.
 *
 * The theme is built left-to-right and ships almost no RTL rules, so
 * dir="rtl" alone flips text direction but leaves the layout mirrored the wrong
 * way: paddings, floats, text alignment and the icons that sit beside text.
 * Loaded only under /ar/ and scoped to [dir="rtl"] so it cannot affect the
 * other languages.
 *
 * El Messiri is already served from /g/ for the Arabic headings.
 */

[dir="rtl"] body,
[dir="rtl"] .ed-element,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th {
    text-align: right;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    text-align: right;
    font-family: "El Messiri", "Lato", sans-serif;
}

/* Blocks the theme deliberately centres stay centred. */
[dir="rtl"] .center,
[dir="rtl"] [class*="text-align-center"],
[dir="rtl"] .ed-button,
[dir="rtl"] .button {
    text-align: center;
}

/* Flex and grid rows read the other way round. */
[dir="rtl"] .inner,
[dir="rtl"] .columns-box,
[dir="rtl"] .menu-level-0,
[dir="rtl"] [class*="flex-"] {
    direction: rtl;
}

[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-right: 1.5em;
    padding-left: 0;
}

[dir="rtl"] .checkbox_list {
    padding-right: 0;
}

/* Menus and inline lists float from the right. */
[dir="rtl"] .menu-level-0 > li {
    float: right;
}

[dir="rtl"] .ed-menu ul {
    padding-right: 0;
}

/* Font Awesome glyphs that point somewhere — chevrons, arrows — must mirror. */
[dir="rtl"] .fa-angle-left::before { content: "\f105"; }
[dir="rtl"] .fa-angle-right::before { content: "\f104"; }
[dir="rtl"] .fa-arrow-left::before { content: "\f061"; }
[dir="rtl"] .fa-arrow-right::before { content: "\f060"; }
[dir="rtl"] .fa-chevron-left::before { content: "\f054"; }
[dir="rtl"] .fa-chevron-right::before { content: "\f053"; }

/* Form controls: label and input both start from the right. */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] label {
    text-align: right;
    direction: rtl;
}

/* Email and phone fields stay LTR — the values are Latin either way. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: right;
}

/* Latin runs inside Arabic text (Falez, ISO 9001, URLs) keep their own order. */
[dir="rtl"] .ltr,
[dir="rtl"] code,
[dir="rtl"] a[href^="http"]:not(:has(*)) {
    unicode-bidi: isolate;
}

/* Arabic needs a little more line height at the same size. */
[dir="rtl"] p,
[dir="rtl"] li {
    line-height: 1.9;
}

/* The language switcher separator should not flip. */
[dir="rtl"] .lang-switch {
    unicode-bidi: isolate;
}