/* Landing page: direction fixes.
   ======================================================================
   The landing theme (templatemo-scholar.css) is an LTR-only template. It
   lays the page out with physical `left`/`right`/`margin-left`, and it
   ships against the LTR build of Bootstrap, so in Arabic the text moves to
   the right while the furniture around it — decorative panels, corner
   badges, the circle behind each service heading — stays where it was.
   That is what pushes sections to one side and what makes several
   headings unreadable.

   Everything here is a mirror of a rule in the vendor files, so it is
   loaded after them and the vendor files stay untouched. Companion to
   landing-header.css, which does the same job for the header.

   Two kinds of rule below:
     - logical rewrites, which are identical to the theme in English and
       flip on their own in Arabic;
     - `[dir="rtl"]` blocks, for pseudo-elements and rounded corners that
       have no logical spelling.
   ====================================================================== */

/* ── Banner carousel ─────────────────────────────────────────────────── */
/* Owl's own `rtl` option (set from `dir` in landing/assets/js/custom.js) is
   what makes the slides appear at all; these only put the chrome around
   them on the correct side. The 130px inset is the gutter the arrows sit
   in, so it follows them. */

.main-banner .item {
  margin-left: 0;
  margin-inline-start: 130px;
}

[dir="rtl"] .main-banner .owl-nav {
  left: auto;
  right: 0;
  text-align: left;
}

/* ── Services ────────────────────────────────────────────────────────── */
/* The icon is a 190px circle parked in the top corner of the card, and the
   card reserves 80px on that same side so the text never runs under it.
   Both were physical, so in Arabic the circle stayed on the right while
   the headings moved there — it sat directly on top of every service
   title. This is the change that makes the section readable again. */

.services .service-item .icon {
  right: auto;
  inset-inline-end: 0;
}

.services .service-item .main-content {
  margin-right: 0;
  margin-inline-end: 80px;
}

/* ── About us ────────────────────────────────────────────────────────── */

.about-us .section-heading {
  margin-left: 0;
  margin-inline-start: 60px;
}

/* The lavender panel sits behind the heading, so it belongs on whichever
   side the heading is. Its rounded edge is the one facing the page. */
[dir="rtl"] .about-us::before {
  right: auto;
  left: 0;
  border-radius: 0 500px 500px 0;
}

/* The accordion is Bootstrap's, and the LTR build pins both halves of the
   row: the label with `text-align: left`, and the +/- circle with
   `margin-left: auto` — an auto margin on the main-END side, which is what
   pushes it to the far end in English. In Arabic that same side is the
   main START, so the auto margin pushed the circle backwards until it sat
   against the label instead of at the end of the row.
   `margin-inline-start` is the auto margin that means "the side the row
   starts at" in both directions. */
.accordion-button {
  text-align: start;
}

.accordion-button::after {
  margin-left: 0;
  margin-inline-start: auto;
}

/* ── Latest courses ──────────────────────────────────────────────────── */
/* The card's type badge ("Diplomas" / "الدبلومات") is pinned to the corner
   the title starts at. */

.events_item .thumb span.category {
  left: auto;
  inset-inline-start: 30px;
}

/* ── Fun facts (the stats band) ──────────────────────────────────────── */
/* A full-bleed band with one rounded cap: the flat end runs off the edge
   the reading starts at, the cap points into the page. */

[dir="rtl"] .fun-facts::before {
  left: auto;
  right: 0;
  border-radius: 500px 0 0 500px;
}

[dir="rtl"] .fun-facts::after {
  left: auto;
  right: 15%;
}

/* ── Testimonials ────────────────────────────────────────────────────── */

/* The arrows straddle the edge of the quote card and sit in the 60px gap
   the theme opens next to the heading — also physical, so without this the
   heading runs under them in Arabic. */
.testimonials .section-heading {
  margin-left: 0;
  margin-inline-start: 60px;
}

[dir="rtl"] .testimonials .owl-nav {
  right: auto;
  left: -25px;
  text-align: left;
}

[dir="rtl"] .testimonials::before {
  right: auto;
  left: 0;
  border-radius: 0 500px 500px 0;
}

/* ── Events ──────────────────────────────────────────────────────────── */
/* The tab on the end of each row is a half-pill clipped by the card edge;
   in Arabic it belongs on the other end, rounded the other way, with its
   chevron pointing the way the reading goes. */

[dir="rtl"] .events .item a {
  right: auto;
  left: 0;
  border-radius: 0 60px 60px 0;
}

[dir="rtl"] .events .item a .fa-angle-right {
  transform: scaleX(-1);
}

/* ── Contact us ──────────────────────────────────────────────────────── */

.contact-us .section-heading {
  margin-right: 0;
  margin-inline-end: 100px;
}

[dir="rtl"] .contact-us::before {
  left: auto;
  right: 0;
  border-radius: 500px 0 0 500px;
}

/* Browsers force `direction: ltr` on `input[type="tel"]` so phone numbers
   are always typed left-to-right. That also drags the field's Arabic
   placeholder to the left, leaving "رقم هاتفك..." on the opposite side
   from every other field in the form.

   Only the alignment is moved, not the direction: a number is more than
   one run of digits ("+20 1147300362" is three), and in an RTL paragraph
   those runs are laid out right-to-left — the field would show
   "1147300362 20+" as the person typed. Keeping the field LTR and
   aligning it to the end puts the placeholder where the others are while
   the number stays in the order it was typed. */
[dir="rtl"] #contact-form input[type="tel"] {
  text-align: right;
}

/* ── Footer ──────────────────────────────────────────────────────────── */

[dir="rtl"] footer::before {
  left: auto;
  right: 30px;
}

/* ── Bootstrap ───────────────────────────────────────────────────────── */
/* The page loads the LTR build, whose offset and text-align utilities are
   physical. Only these two are used on this page (`justify-content-*` is
   flexbox and flips by itself), so they are mirrored here rather than
   shipping a second copy of Bootstrap. Both live inside Bootstrap's own
   min-width: 992px block, so these do too. */

@media (min-width: 992px) {
  [dir="rtl"] .offset-lg-1 {
    margin-left: 0;
    margin-right: 8.33333333%;
  }

  [dir="rtl"] .text-lg-start {
    text-align: right !important;
  }
}

/* ── The theme's own breakpoints ─────────────────────────────────────── */

@media (max-width: 1200px) {
  /* Theme: `.main-banner .owl-nav { left: 30px !important }`. */
  [dir="rtl"] .main-banner .owl-nav {
    left: auto !important;
    right: 30px !important;
  }
}

@media (max-width: 992px) {
  /* The theme drops the banner gutter and centres the slide here, so the
     inset above has to go with it. */
  .main-banner .item {
    margin-inline-start: 0;
  }

  /* Theme: the arrow pair is centred with `left: 50% !important` and
     `.owl-next i` is offset by a physical `left`. Centring survives RTL;
     the offset does not, or "next" lands on top of "previous". */
  [dir="rtl"] .main-banner .owl-nav {
    right: auto !important;
  }

  [dir="rtl"] .main-banner .owl-nav .owl-next i {
    left: auto;
    right: 65px;
  }

  /* The theme zeroes these margins at this width; keep the logical ones in
     step, or the base rules above keep applying in Arabic. */
  .about-us .section-heading,
  .testimonials .section-heading {
    margin-inline-start: 0;
  }

  .contact-us .section-heading {
    margin-inline-end: 0;
  }

  /* Theme: `.events .item ul li:last-child { text-align: right }` — the
     last cell is aligned away from the reading start. */
  .events .item ul li:last-child {
    text-align: end;
  }
}