/* ══════════════════════════════════════════════════════════════════════════
   rtl.css — Arabic only.

   LOADED ONLY WHEN THE ACTIVE LANGUAGE IS ar (see the three header.php files),
   so it costs the other eight languages nothing. Every rule is additionally
   scoped to [dir="rtl"] so that if it is ever loaded elsewhere by mistake it
   stays inert.

   WHAT dir="rtl" ALREADY DOES, so do NOT re-do it here:
     • flexbox and grid flow reverse
     • text-align:start / end flip, and unstyled text right-aligns
     • margin/padding written with LOGICAL properties flip
     • the scrollbar moves to the left
   Measured after adding dir: document overflow 0, and only THREE visible
   elements escaped the viewport. This file fixes those and the handful of
   places written with PHYSICAL left/right that cannot flip themselves.

   RULE OF THUMB when adding to this file: mirror LAYOUT and READING ORDER,
   never mirror BRAND MARKS, LOGOS, MEDIA or numbers.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Language dropdown ──────────────────────────────────────────────────
   Pinned with right:0 and transform-origin:top right. Measured escaping the
   viewport by 62px on the left in RTL. */
[dir="rtl"] .eco-lang__menu {
    right: auto;
    left: 0;
    transform-origin: top left;
}

/* ── 2. Accreditor marquee: stays LTR on purpose ───────────────────────────
   These are logos and wordmarks (BESA, TESDA, British Council). A logo strip
   carries no reading order, so mirroring it gains nothing and it actively
   breaks: the ribbon is scrolled by a rAF loop writing translateX() against a
   width:max-content flex track, and reversing the flex direction inverted that
   geometry. Measured: the track sat at left:-2717px. Forcing the component
   back to LTR restores the maths without touching the JS. */
[dir="rtl"] .eco-marq,
[dir="rtl"] .eco-marq__viewport,
[dir="rtl"] .eco-marq__track {
    direction: ltr;
}
/* the heading above the ribbon is real prose, so it stays mirrored */
[dir="rtl"] .eco-marq__title { direction: rtl; }

/* ── 3. Directional arrows ─────────────────────────────────────────────────
   "Read more →" points the way the eye travels, so in RTL it must point left.
   Flipping the glyph is correct for arrows and chevrons and is how icon fonts
   are normally handled. External-link arrows are NOT flipped: they mean "opens
   elsewhere", not "go forward". */
[dir="rtl"] .bi-arrow-right::before,
[dir="rtl"] .bi-arrow-left::before,
[dir="rtl"] .bi-chevron-right::before,
[dir="rtl"] .bi-chevron-left::before,
[dir="rtl"] .bi-arrow-right-short::before,
[dir="rtl"] .bi-arrow-left-short::before {
    display: inline-block;
    transform: scaleX(-1);
}
/* hover nudges move toward the reading direction too */
[dir="rtl"] .eco-explore__link:hover i { transform: scaleX(-1) translateX(3px); }

/* ── 4. Search overlay + gallery search ────────────────────────────────────
   Both put the magnifier on the left and the clear button on the right with
   physical offsets. */
[dir="rtl"] .gal-page .gal-search i.bi-search { left: auto; right: 1.05rem; }
[dir="rtl"] .gal-page .gal-clear             { right: auto; left: .6rem; }
[dir="rtl"] .eco-srch__panel i.bi-search     { left: auto; right: 1.05rem; }

/* ── 5. Accent borders ─────────────────────────────────────────────────────
   A left accent bar reads as "the start of this block", so it belongs on the
   right in RTL. */
[dir="rtl"] .exam-guide-page .xg-panel {
    border-left: 1px solid var(--xg-line);
    border-right: 5px solid var(--xg-blue);
}

/* ── 6. margin-left:auto ───────────────────────────────────────────────────
   Used to push an element to the far end of a flex row. The logical
   equivalent flips on its own. */
[dir="rtl"] .exam-guide-page details.xg-q .xg-plus,
[dir="rtl"] .eco-nav__list a i {
    margin-left: 0;
    margin-inline-start: auto;
}

/* ── 7. Things that must NEVER mirror ──────────────────────────────────────
   Latin brand names, code, numbers and media keep their own direction so the
   bidi algorithm cannot reorder them into nonsense. */
[dir="rtl"] .eco-nav__brand,
[dir="rtl"] .notranslate,
[dir="rtl"] time,
[dir="rtl"] .eco-lang__btn,
[dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .swiper {
    direction: ltr;
}
[dir="rtl"] .eco-lang__opt { direction: rtl; text-align: right; }

/* ── 8. Typography ─────────────────────────────────────────────────────────
   Arabic script has no uppercase, and letter-spacing breaks the joins between
   letters, so the eyebrow styling used across the site has to relax. Arabic
   also sits lower and needs a touch more line height at the same size. */
[dir="rtl"] .xg-eyebrow,
[dir="rtl"] .eco-marq__title,
[dir="rtl"] .fac-eyebrow,
[dir="rtl"] .about-eyebrow {
    text-transform: none;
    letter-spacing: 0;
}
[dir="rtl"] body { line-height: 1.85; }