/**
 * NexLaw Theme — RTL overrides
 *
 * Loaded automatically by WordPress when is_rtl() is true, replacing
 * style.css. Contains ONLY rules that CSS logical properties can't handle:
 *   - Icon mirroring (arrows, chevrons, "back" buttons)
 *   - Number direction (force Western numerals LTR for stats)
 *   - Hero gradient mirror (cosmetic)
 *
 * All other RTL behavior is handled by logical properties in style.css:
 *   - margin-inline-start / margin-inline-end
 *   - padding-inline-start / padding-inline-end
 *   - border-inline-start / border-inline-end
 *   - inset-inline-start / inset-inline-end
 *   - text-align: start / end
 *
 * @package NexLaw
 * @version 1.1.0
 */

/* ============================================================
   ICON MIRRORING
   ============================================================

   Material Symbols that are inherently directional (arrows, chevrons)
   should be mirrored in RTL so they point the "correct" way for Arabic
   readers (arrows pointing left = "back" / "previous" in RTL).

   We mirror the icon itself with transform: scaleX(-1) rather than
   swapping the icon name in PHP — keeps the template logic simple. */

/* "Back" button arrows on single practice area / team member pages */
[dir="rtl"] .single-practice_area .nx-btn-ghost .material-symbols-outlined,
[dir="rtl"] .single-team_member .nx-btn-ghost .material-symbols-outlined,
[dir="rtl"] .nx-practice-card .nx-btn-ghost .material-symbols-outlined,
[dir="rtl"] .nx-team-card .nx-btn-ghost .material-symbols-outlined {
  transform: scaleX(-1);
}

/* "Forward" arrows in CTAs (Explore Practice, Meet the Full Team, etc.) */
[dir="rtl"] .nx-practice-card__cta .material-symbols-outlined,
[dir="rtl"] .nx-clients__cta .material-symbols-outlined,
[dir="rtl"] .nx-section .nx-btn-ghost .material-symbols-outlined {
  transform: scaleX(-1);
}

/* "open_in_new" icon (external link) — keep as-is, universal symbol */

/* ============================================================
   NUMERIC & DATE DISPLAY
   ============================================================

   Arabic websites typically use Western Arabic numerals (0-9) for
   stats, dates, phone numbers — easier to read on screens than
   Eastern Arabic numerals (٠-٩).

   Force numbers LTR within the RTL flow so they don't get re-ordered. */

[dir="rtl"] .nx-stat__number,
[dir="rtl"] .nx-clients__logo-name,
[dir="rtl"] .site-footer__copy {
  font-feature-settings: "lnum";
  unicode-bidi: isolate;
}

/* Stats numbers — force LTR so "15+" doesn't become "+15" */
[dir="rtl"] .nx-stat__number {
  direction: ltr;
  display: inline-block;
}

/* ============================================================
   HERO GRADIENT (cosmetic mirror)
   ============================================================

   The hero background uses a 135deg gradient. In RTL, mirror it to
   225deg for visual balance — the dark side should be on the leading
   edge of the reading direction. */

[dir="rtl"] .nx-hero__bg[style*="linear-gradient(135deg"] {
  background: linear-gradient(225deg, #0e0e0e 0%, #1c1c1c 100%) !important;
}

/* ============================================================
   ARABIC TYPOGRAPHY TWEAKS
   ============================================================

   Almarai and Cairo are loaded conditionally in inc/setup.php.
   These rules fine-tune their rendering. */

[dir="rtl"] body {
  line-height: 1.8;  /* Arabic needs slightly larger line-height */
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .nx-display-lg,
[dir="rtl"] .nx-headline-md,
[dir="rtl"] .nx-headline-sm {
  font-weight: 700;  /* Headings need heavier weight in Arabic */
  line-height: 1.4;
}

[dir="rtl"] .nx-label-caps {
  letter-spacing: 0;  /* Arabic doesn't use letter-spacing — letters connect */
}

/* ============================================================
   MOBILE NAV SLIDE-IN (no change needed)
   ============================================================

   The mobile nav uses .is-open with a transform. The transform is
   direction-agnostic (translateX(0)) so no override is needed.

   If you ever add a slide-in animation (e.g., translateX(100%) → 0),
   mirror it here:
   [dir="rtl"] .site-header__mobile-nav { transform: translateX(-100%); }
   [dir="rtl"] .site-header__mobile-nav.is-open { transform: translateX(0); }
*/