/* ============================================================
   LITTLE LEARNERS PRIVATE PRESCHOOL — rtl.css
   Loaded only on /ar/ pages, after style.css and components.css.
   Most layout (flex/grid item order, text alignment) flips
   automatically once <html dir="rtl"> is set — these are the
   handful of rules that hard-code a physical left/right and need
   an explicit mirror, plus the Arabic-appropriate font stack.
   ============================================================ */

:root {
  --font-heading: 'Baloo Bhaijaan 2', 'Poppins', sans-serif;
  --font-body:    'Tajawal', 'Nunito', sans-serif;
}

/* Mobile nav drawer opens from the trailing (right) edge in RTL.
   Scoped to the same breakpoint as the mobile drawer itself — the
   desktop rule in style.css (min-width: 768px) repositions .nav-links
   entirely and must not be overridden here. */
@media (max-width: 767.98px) {
  .nav-links {
    inset: 0 0 0 auto;
    transform: translateX(100%);
  }
  body.nav-open .nav-links { transform: translateX(0); }
}

/* Decorative hero blobs — mirror the corners they sit in */
.hero::before { right: auto; left: -100px; }
.hero::after  { left: auto; right: -80px; }

/* Native <select> caret sits on the leading (right) edge in RTL */
.form-group select {
  background-position: left 12px center;
  padding-right: var(--space-4);
  padding-left: 2.5rem;
}

/* Fees table header follows the Arabic reading direction */
.fees-table th { text-align: right; }

/* Blockquote accent bar (about page) — flip left border to right */
.about-quote {
  border-left: none;
  border-right: 4px solid var(--color-primary);
}