/* Targeted RTL fixes for spots in default.css / styles.css / base.html's inline
   <style> that use hardcoded left/right instead of logical properties. Only loaded
   when LANGUAGE_BIDI is true (Arabic). Extend this file as visual QA turns up more
   spots — it's intentionally a small, targeted patch, not a full mirror of the
   site's CSS. */

/* "Open this / go to" trailing arrow icons (bi-arrow-right) used next to link/CTA
   text across calendar.html, school_transport.html, admission.html, curriculum.html,
   and similar document-link lists — always the same rightward glyph regardless of
   language. In RTL the reading/"forward" direction is to the left, so the arrow
   needs to point that way too, or it reads as pointing away from the link rather
   than toward it. Doesn't apply to bi-box-arrow-in-up-right (the "opens externally"
   icon used with target="_blank"), which is a distinct icon that conventionally
   stays as-is in RTL — it means "leaves the site", not "reading direction". */
.bi-arrow-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* Phone numbers (tel: links) — a Western-digit sequence like "+973 1700 8880"
   sitting in RTL text flow gets its digit groups/punctuation reordered by the
   browser's bidi algorithm (digits and "+" are "weak" bidi characters, so they
   inherit direction from the surrounding RTL paragraph instead of staying LTR),
   making the number unreadable/scrambled. This affects every page with a phone
   or WhatsApp link — base.html's footer alone puts it on every page site-wide.
   Force LTR + isolate so the number always renders in its real left-to-right
   order regardless of surrounding direction. */
a[href^="tel:"],
a[href^="https://wa.me/"],
a[href^="https://api.whatsapp.com/"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Dropend/dropstart submenu chevrons — base.html's own rule now uses
   margin-inline-start: auto, which is direction-aware and already positions the icon
   at the end of the row correctly in both LTR and RTL, so no position override is
   needed here. Only the glyph shape itself still needs flipping: it's always the
   bi-chevron-right codepoint pointing right, which reads wrong once it's sitting at
   the *left* end of an RTL row (it should point left, toward where the submenu opens).
   There's no reliable bi-chevron-left codepoint reference already in this codebase to
   copy, so mirror the existing glyph with scaleX(-1) instead of guessing a different
   content codepoint — a chevron is symmetric, so this renders identically to a real
   chevron-left. */
.dropend > .dropdown-toggle::after,
.dropstart > .dropdown-toggle::after {
    transform: scaleX(-1);
}

/* Floating action icons (WhatsApp bubble, scroll-to-top) are single-glyph UI chrome,
   not page content — they shouldn't mirror with RTL text at all, they should just stay
   pinned to the same physical corner in both languages, like any other icon button.
   base.html's own inline <style> block (which sets right:20px/30px) is textually AFTER
   this stylesheet's <link> in <head>, so with matching specificity it already wins the
   cascade and these stay put — this reinforces it with !important plus forces
   direction:ltr so the lone icon glyph can't inherit any RTL-driven box-model shift. */
.wa-ai-float,
#myTopBtn {
    direction: ltr !important;
    right: 20px !important;
    left: auto !important;
}

#myTopBtn {
    right: 24px !important;   /* stacked above the AI pill, same edge */
}

/* Accordion/offcanvas caret icons that assume LTR reading order */
.offcanvas-end {
    right: auto !important;
    left: 0 !important;
}

.offcanvas.offcanvas-end.showing,
.offcanvas.offcanvas-end.show {
    transform: none;
}

/* ── Image/icon misplacement fixes ──────────────────────────────────────
   Several page-level <style> blocks hardcode float:left or margin-right to
   put an icon/image box on the visual left of following text — correct for
   LTR reading order, but it pins the box to the physical left edge in RTL
   too, so it ends up on the wrong side of (or overlapping) the text/photo
   it's meant to sit next to. Flip each to the logical opposite. */

/* posters.html — E-Learning Posters gallery: .grid-item tiles were floated
   left, so in RTL the tiles filled left-to-right against right-to-left
   text, visually misplacing every poster image. */
.grid-item {
    float: right;
}

/* term_plan.html — round icon boxes and the year badge next to headings */
.school-icon,
.year-badge {
    margin-right: 0;
    margin-left: 20px;
}

/* enrichment_club_signup.html — numbered step circles and inline icons */
.step-number {
    margin-right: 0;
    margin-left: 20px;
}

.info-box i,
.activity-limit i,
.alert-custom i {
    margin-right: 0;
    margin-left: 10px;
}

/* _offer_banner.html — small seats-left pill next to the banner text */
.offer-banner__seats {
    margin-left: 0;
    margin-right: 6px;
}

/* ── Hardcoded text-align: left on content headings/paragraphs ──────────
   These are plain style declarations (no inline !important), so a class-selector
   override here is enough to beat them on cascade order. Anything with an inline
   style="...!important" attribute had to be fixed directly in the template instead,
   since no stylesheet can out-rank that. */
.cs_swiper_wrpr_head,
.cs_swiper_wrpr_date,
.cs_swiper_wrpr_head-new,
.latest-news-details-sub-span,
.cs_a_p_para,
.hero-banner-header,
.csb_new_bg_txt_h1,
.csb_name_chairman,
.csb_name_chairman_pos,
.exam-table thead th {
    text-align: right;
}

/* .news-content itself uses text-align: left !important — only another
   !important declaration can beat that. */
.news-content {
    text-align: right !important;
}

/* ── Section-heading underline accent bars ───────────────────────────────
   .section-title::after / .widget-title::after / .cs_terms_header::after is a
   copy-pasted decorative pattern (a short gradient bar under a heading) repeated
   across ~10 page-level <style> blocks (curriculum pages, calendar, referral
   program, accreditations, enrichment, etc.) — always `position:absolute; left:0`,
   anchored under the start of the heading text. In RTL the heading text starts
   from the right, so the bar needs to move there too, or it ends up under empty
   space instead of under the text. The centered variant (.text-center::after,
   left:50% + translateX(-50%)) is direction-agnostic already, so it's excluded
   here rather than needing its own fix. Page block styles load after this
   stylesheet, so !important is needed to win. */
.section-title:not(.text-center)::after,
.widget-title::after,
.cs_terms_header::after {
    left: auto !important;
    right: 0 !important;
}

/* ── CKEditor-authored rich text (FAQ answers, Subject pages, News body) ──
   Content edited through CKEditor's "align left" toolbar button gets saved as
   literal `<p style="text-align:left">` (etc.) inside the stored HTML — an inline
   style on the *element itself*, not just an inherited one from a wrapper, so a
   text-align rule on the wrapper alone doesn't reach it (an element's own explicit
   style always wins over an inherited value, importance or not). The only thing
   that beats a plain (non-!important) inline style is an !important rule that
   targets that same descendant directly — CKEditor doesn't add !important itself,
   so this reliably wins without having to touch the stored HTML. */
.cs_accordian_body,
.cs_accordian_body p, .cs_accordian_body li, .cs_accordian_body div, .cs_accordian_body td, .cs_accordian_body th,
.rich-content,
.rich-content p, .rich-content li, .rich-content div, .rich-content td, .rich-content th,
.news-content p, .news-content li, .news-content div, .news-content td, .news-content th {
    text-align: right !important;
}