/* Arabic-only layer. Loaded by the pages under /ar/ and nothing else, so the
   English side is untouched by everything in here.

   The layout itself is deliberately NOT mirrored: columns, the menu order and
   the header keep the arrangement they have in English, and only the text
   runs right to left. That is what was asked for, and it is also the safe
   choice, since the theme ships no RTL stylesheet of its own. */

/* ------------------------------------------------------------------ type */
/* The theme's Latin faces carry no Arabic glyphs, so Arabic fell back to a
   system font and rendered noticeably smaller beside the English. Naming the
   Arabic face explicitly fixes both the look and the size. The list is the
   set of elements that actually carry copy: icon elements are left alone so
   Font Awesome keeps its own family. */
html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] #main-nav > li > a,
html[lang="ar"] .xb-menu-primary > li > a,
html[lang="ar"] .xb-btn,
html[lang="ar"] .sec-title .subtitle,
html[lang="ar"] .elementor-heading-title,
html[lang="ar"] .elementor-icon-box-title,
html[lang="ar"] .elementor-icon-box-description,
html[lang="ar"] .elementor-widget-text-editor,
html[lang="ar"] .elementor-button-text,
html[lang="ar"] .sidebar-heading,
html[lang="ar"] .sidebar-content,
html[lang="ar"] .xb-header__info li,
html[lang="ar"] sr7-txt,
html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] button {
    font-family: 'Tajawal', sans-serif;
}

/* Arabic sits smaller on the line than the Latin faces at the same px, so the
   two languages only look equal once Arabic is stepped up. Applied to leaf
   text elements only, which keeps the steps from compounding. */
html[lang="ar"] p,
html[lang="ar"] #main-nav > li > a,
html[lang="ar"] .xb-menu-primary > li > a,
html[lang="ar"] .sec-title .subtitle,
html[lang="ar"] .elementor-icon-box-title,
html[lang="ar"] .elementor-icon-box-description,
html[lang="ar"] .elementor-button-text,
html[lang="ar"] .xb-header__info li,
html[lang="ar"] .xb-btn {
    font-size: 1.12em;
}

/* --------------------------------------------------------------- reading */
/* `direction` is what makes `text-align: start` resolve to the right and puts
   trailing punctuation at the correct end. It is set on the text blocks only,
   never on their containers, so nothing moves on the page. */
html[lang="ar"] p,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] li,
html[lang="ar"] blockquote,
html[lang="ar"] label,
html[lang="ar"] td, html[lang="ar"] th,
html[lang="ar"] .elementor-heading-title,
html[lang="ar"] .elementor-icon-box-title,
html[lang="ar"] .elementor-icon-box-description,
html[lang="ar"] .elementor-widget-text-editor,
html[lang="ar"] .elementor-button-text {
    direction: rtl;
}

html[lang="ar"] input,
html[lang="ar"] textarea {
    direction: rtl;
    text-align: right;
}

/* The switcher is a pair of flags and must keep its AR/EN order. */
html[lang="ar"] .lang-switch,
html[lang="ar"] .lang-switch * {
    direction: ltr;
}

/* "AR" and "EN" are latin language codes, so they stay on the latin face.
   Inheriting the Arabic face changed their vertical metrics and the code no
   longer sat level with the flag beside it, which is why the switcher looked
   fine in English and crooked in Arabic. */
html[lang="ar"] .lang-switch__item span {
    font-family: 'DM Sans', sans-serif;
}

/* ------------------------------------------------------------- spacing */
/* Service cards park a round arrow button against the card's right edge.
   English text starts on the left and never reaches it; right-aligned Arabic
   runs straight underneath it, so the text has to stop short. Below 768px the
   arrow sits at the top of the card instead, clear of the text. */
@media (min-width: 768px) {
    html[lang="ar"] .ins-service .xb-item--holder {
        padding-right: 95px;
    }
}

/* In a two-column row the theme indents the left column away from the page
   edge, which in English leaves a wide gap before the column beside it. Once
   the text is right-aligned it runs the other way and ends up flush against
   that neighbour, so it needs the same breathing room on the inner edge.
   Only a column that actually has a neighbour to its right is touched, so
   centred card grids keep their own alignment. */
html[lang="ar"] .elementor-column.elementor-col-50:has(+ .elementor-column) .elementor-widget-wrap {
    padding-right: 50px;
}

/* ---------------------------------------------------------------- hero */
/* Slider Revolution writes text-align and the layer widths into inline
   styles, so the hero needs !important. `direction` on the column is what
   moves the fixed-width layers over to the right edge. */
html[lang="ar"] sr7-module sr7-col {
    direction: rtl !important;
}

html[lang="ar"] sr7-module sr7-txt,
html[lang="ar"] sr7-module sr7-grp {
    text-align: right !important;
}

/* The slider sets its own typography for every layer, which left the hero on
   a latin face while the rest of the page had already moved to the Arabic
   one. This is the only place that needed forcing to make the whole site read
   in a single face. */
html[lang="ar"] sr7-module sr7-txt,
html[lang="ar"] sr7-module sr7-txt *,
html[lang="ar"] sr7-module sr7-grp,
html[lang="ar"] sr7-module sr7-grp *,
html[lang="ar"] sr7-module a.sr7-layer {
    font-family: 'Tajawal', sans-serif !important;
}