/* ============================================================
   FEKR — Arabic / RTL Overrides
   Applied on top of the shared CSS for the Arabic site.
   Uses CSS logical properties where supported; falls back to
   physical properties for broader browser compatibility.
   ============================================================ */

/* ── Font stack ───────────────────────────────────────────────── */
:root {
  --font-sans: "Noto Sans Arabic", "Cairo", "Segoe UI", system-ui, sans-serif;
}

body {
  font-family: var(--font-sans);
  /* Arabic text benefits from slightly looser letter spacing */
  letter-spacing: 0;
}

/* ── Direction ────────────────────────────────────────────────── */
html {
  direction: rtl;
}

/* ── Navigation ───────────────────────────────────────────────── */
.site-nav__lang {
  margin-left: 0;
  margin-right: var(--space-3);
}

@media (max-width: 767px) {
  .site-nav__lang {
    margin-right: 0;
  }
}

/* ── Skip link ────────────────────────────────────────────────── */
.skip-link {
  left: auto;
  right: var(--space-4);
}

/* ── Hero — align text right (natural in RTL, but explicit) ───── */
.hero__body {
  text-align: start;
}

/* ── Carousel — force LTR internals ──────────────────────────── */
/*
 * Two issues arise when the carousel lives inside a dir="rtl" document:
 *
 * 1. translateX() uses physical coordinates (always left = negative).
 *    With RTL flex the browser lays slide 0 physically on the RIGHT,
 *    so translateX(-100%) moves in the wrong direction and the buttons
 *    appear to do nothing.
 *
 * 2. dir="rtl" already reverses every flex row automatically. Adding
 *    flex-direction:row-reverse in CSS creates a double-reversal that
 *    puts the buttons back in LTR visual order with the wrong icons.
 *
 * Solution: re-lock the carousel track AND controls to LTR so that
 * slide ordering and translateX work identically to the English site.
 * Text inside slides inherits Arabic/RTL from the closest ancestor
 * that isn't forced to LTR, so Arabic copy renders correctly.
 */
.carousel__track-wrapper,
.carousel__track,
.carousel__controls {
  direction: ltr;
}

/* Partner card text should still be RTL */
.partner-card {
  direction: rtl;
}

/* ── Donation notice border – flip to right side ─────────────── */
.donation-notice,
.donation__notice {
  border-left: 1px solid var(--brand-200);
  border-right: 4px solid var(--color-primary);
}

/* ── Contact info icon margin ─────────────────────────────────── */
.contact__info-icon {
  margin-left: 0;
  /* The gap on the flex parent handles spacing; explicit for safety */
}

/* ── Footer bottom ────────────────────────────────────────────── */
.footer-lang-link {
  /* In RTL the lang switcher (now "English") sits on the left in visual order */
}

/* ── Form error messages ──────────────────────────────────────── */
.form-error {
  text-align: start;
}

/* ── Buttons with icons — icon order ─────────────────────────── */
/* Buttons in RTL should keep icon on the visual-right (logical start)
   when the icon is a leading icon. No change needed as flex-direction
   follows writing mode. Explicit no-op to document intent. */

/* ── Section label letter-spacing — reduce for Arabic ────────── */
.section-label {
  letter-spacing: 0;
  text-transform: none;
}

/* ── Text direction for mixed content ─────────────────────────── */
/* Some elements may contain LTR fragments (emails, URLs, numbers).
   We let the browser handle bidi automatically via Unicode bidirectional
   algorithm; no explicit overrides needed. */

/* ── Scroll-reveal — flip translateX direction ────────────────── */
/* RTL pages should slide in from the opposite direction.
   The Y-axis reveal in main.css is direction-agnostic, so no change. */