/*
 * Additive-only direction fixes for English (LTR) rendering.
 * All existing page CSS files stay untouched and remain the RTL/Arabic
 * default styling. Every rule here is scoped under html[dir="ltr"] so it
 * only ever applies once English is selected - it can never affect the
 * default Arabic/RTL layout. Loaded on every page, after that page's own
 * stylesheet(s), so it wins the cascade for matching selectors.
 *
 * Filled in incrementally per page during the QA pass (see the bilingual
 * conversion plan's Phase 6) as actual visual issues are found - not a
 * blind mechanical flip of every RTL-authored rule.
 */

html[dir="ltr"] {
  direction: ltr;
}

html[dir="ltr"] body {
  direction: ltr;
  text-align: left;
}

/* --- Shared header / nav (all pages) --- */
html[dir="ltr"] header {
  flex-direction: row;
}

/*
 * Home page header only (templates/index.html, plain <header> with no
 * .top-header class). main.css mirrors the logo to the header's trailing
 * edge via flex-direction: row-reverse so it lands on the right for RTL.
 * The generic `row` rule above flips that back to source order, which
 * pins the logo flush against the viewport's right edge in English - the
 * oversized logo image (.logo img is 250% width, meant to overflow into
 * open space) then overflows past the edge and gets clipped/garbled.
 * Restore the mirrored order here so the logo keeps the same breathing
 * room it has in Arabic. .top-header (inner pages) is untouched.
 */
html[dir="ltr"] header:not(.top-header) {
  flex-direction: row-reverse;
}

html[dir="ltr"] .dropdown-menu {
  right: auto;
  left: 0;
}

/*
 * Home page news slider (templates/index.html only). static/js/main.js
 * moves slides with a physical `translateX(currentIndex * width)` that is
 * always positive, which only reveals the next card correctly when the
 * cards are laid out RTL (slide 0 anchored right, later slides to its
 * left) - the order they get for free in Arabic. Pin that same order in
 * English too, so the slider keeps matching the JS math instead of
 * scrolling the wrong way / showing blank gaps.
 */
html[dir="ltr"] .slider-track {
  direction: rtl;
}

/* --- Shared footer --- */
html[dir="ltr"] footer {
  direction: ltr;
}