/* ==========================================================================
   FSRE — Arabic / RTL overrides
   --------------------------------------------------------------------------
   Loaded only on /ar, after FSRE.css, so everything here is an override of a
   rule that already exists in the base sheet. Nothing in this file affects
   the English site.

   Three jobs:
     1. Swap the Latin brand face for an Arabic one.
     2. Undo typography that is correct for Latin but wrong for Arabic.
     3. Mirror the handful of places that are pinned with physical `left` /
        `right` rather than flowing from `dir="rtl"`.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Typeface
   --------------------------------------------------------------------------
   The base sheet routes almost every font-family through var(--jost), so
   rebinding that one variable on the body carries Tajawal through the whole
   page — headings, nav, cards, footer — without restating each rule.
   Jost is kept as the fallback so Latin fragments (FSRE, BBS, email
   addresses) still render in the brand face.
   -------------------------------------------------------------------------- */
body.lang-ar{
    --jost:"Tajawal","Jost",sans-serif;
    font-family:"Tajawal","Jost",sans-serif;
}

/* Bacalisties is a Latin script face with no Arabic coverage: an Arabic
   string set in it falls back to whatever the browser picks, which is why
   the sub-title is re-pointed at Tajawal rather than left to chance. */
.lang-ar .banner-contents .sub-title{
    font-family:"Tajawal","Jost",sans-serif;
    font-size:2.5rem;
    font-weight:500;
}


/* --------------------------------------------------------------------------
   2. Arabic typography corrections
   --------------------------------------------------------------------------
   Arabic is a joined script. Letter-spacing pulls the joins apart and makes
   words read as loose glyphs, so every tracked rule in the base sheet is
   reset. The language switcher is exempt because it is the one element that
   is deliberately still Latin ("English").
   -------------------------------------------------------------------------- */
/* `lang-ar` is the class ON <body>, so this must be `body.lang-ar`, not
   `.lang-ar body` — the latter asks for a <body> nested inside .lang-ar and
   matches nothing, which silently left every Arabic element with the Latin
   tracking this rule exists to remove. */
body.lang-ar,
body.lang-ar *{
    letter-spacing:normal !important;
}

.lang-ar .lang-switch{
    letter-spacing:0.12em !important;
}

/* text-transform:uppercase does nothing to Arabic glyphs but does mangle any
   Latin caught inside an Arabic string, and small-caps eyebrow text reads
   better in Arabic at a slightly larger size than its Latin counterpart. */
.lang-ar .forms-eyebrow,
.lang-ar .reel-eyebrow,
.lang-ar .dept-eyebrow{
    text-transform:none;
    font-size:0.95rem;
}

/* Arabic needs more leading than Latin at the same size — the ascenders and
   descenders are deeper, so lines set at Latin leading collide. */
.lang-ar p,
.lang-ar .about-text-container,
.lang-ar .forms-lede,
.lang-ar .banner-welcome-desc{
    line-height:1.9;
}

.lang-ar h1,.lang-ar h2,.lang-ar h3,
.lang-ar h4,.lang-ar h5,.lang-ar h6{
    line-height:1.5;
}

/* Latin-only fragments keep Latin treatment wherever they are marked up. */
.lang-ar [lang="en"]{
    font-family:"Jost",sans-serif;
    direction:ltr;
    unicode-bidi:isolate;
}


/* --------------------------------------------------------------------------
   3. Mirroring
   --------------------------------------------------------------------------
   dir="rtl" already reverses normal flow and flex order. What it does not
   move is anything pinned with a physical offset, and the site ships the
   LTR build of Bootstrap, so .start-0 stays `left:0`. Those are handled here.
   -------------------------------------------------------------------------- */

/* The fixed side strip moves to the left edge so it does not sit where the
   Arabic reader's eye starts. */
.lang-ar .right-header{
    right:auto;
    left:0;
}

/* Home banner: the dark logo/greeting panel is pinned with Bootstrap's
   .start-0 (left:0 in the LTR build) and belongs on the right in Arabic. */
.lang-ar .logobar-banner{
    left:auto;
    right:0;
}

/* Desktop dropdown panel and its list. */
.lang-ar .submenu{
    left:auto;
    right:0;
}

.lang-ar .menubar .submenu > ul{
    padding-left:0;
    padding-right:42px;
}

.lang-ar .menubar .submenu li a{
    text-align:right;
}

.lang-ar .submenu .submenu{
    left:auto;
    right:100%;
}

.lang-ar .menubar .submenu li ul li a{
    padding-left:0;
    padding-right:25px;
}

.lang-ar .menubar .submenu li ul li a::before{
    left:auto;
    right:10px;
}

/* The nav-link underline grows from the reading edge. */
.lang-ar .navbar ul li a.nav-link span::before,
.lang-ar .menubar .submenu ul li a span::before{
    left:auto;
    right:0;
}

.lang-ar .navbar ul li a.nav-link:hover span,
.lang-ar .navbar ul li.navdropdown:hover a.nav-link span{
    padding-left:0;
    padding-right:40px;
}

.lang-ar .menubar .submenu ul li a:hover span{
    padding-left:0;
    padding-right:25px;
}

/* Request Forms cards: the title is explicitly left-aligned in the base
   sheet, which survives dir="rtl" and has to be restated. */
.lang-ar .facility-forms .form-card-title{
    text-align:right;
}


/* --------------------------------------------------------------------------
   4. Organization chart
   --------------------------------------------------------------------------
   The chart is deliberately NOT mirrored. The client's own Arabic reference
   keeps the English geometry — Engineering left, Facilities right, children in
   the same order — and only translates the labels, which is how org charts are
   normally localised. The view pins dir="ltr" on the section to hold that, so
   none of the dashed connector offsets need a mirrored counterpart here.

   All that is left is making room for Arabic role names, which run longer than
   the English they replace in evenly divided columns.
   -------------------------------------------------------------------------- */
.lang-ar .org-chart h3,
.lang-ar .org-chart h4,
.lang-ar .org-chart h5,
.lang-ar .org-chart h6{
    word-break:normal;
    overflow-wrap:anywhere;
    hyphens:none;
    font-size:1rem;
    padding-left:4px;
    padding-right:4px;
}

.lang-ar .org-chart h2{
    font-size:1.75rem;
}


/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */
.lang-ar .foot-phone-main ul li a span{
    direction:ltr;
    unicode-bidi:embed;
}

.lang-ar .copyright{
    text-align:right;
}


/* --------------------------------------------------------------------------
   6. Mobile
   --------------------------------------------------------------------------
   The slide-in menu panel is pinned right and animates from the top; only
   its horizontal pin and inner alignment need mirroring.
   -------------------------------------------------------------------------- */
@media (max-width:1199px){
    .lang-ar .menu-wraper{
        right:auto;
        left:0;
    }

    .lang-ar .menu-container.opened .menu-wraper{
        right:auto;
        left:0;
    }

    .lang-ar .menu-container .header-links,
    .lang-ar .menu-container .header-links ul{
        text-align:right;
    }

    .lang-ar .header-links ul li + li{
        margin-left:0;
        margin-right:25px;
    }

    .lang-ar .menu-bg{
        right:auto;
        left:0;
    }

    .lang-ar .navbar ul li a.nav-link .caret{
        left:auto;
        right:0;
        transform:translateX(0);
    }
}