/*
Theme Name: Aequitas
Description: Right-to-left stylesheet for Arabic, Hebrew, Urdu, and other
             RTL languages. WordPress loads this automatically when the
             site language is RTL — no manual switching needed.

             For multilingual setups using Polylang or WPML, this loads
             only on Arabic pages, leaving English pages unchanged.
*/

/* ==================================================================
   GLOBAL DIRECTION
   ================================================================== */
body { direction: rtl; text-align: right; }

/* The Inter font has reasonable Arabic support, but for production
   we recommend stacking IBM Plex Sans Arabic or Noto Sans Arabic
   first for native Arabic readers. Add to your fonts file:
     @font-face { font-family: 'IBM Plex Sans Arabic'; ... }
   Then load it via wp_enqueue_style. */
[lang="ar"], html[dir="rtl"] body {
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI Arabic',
               -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==================================================================
   HEADER & NAVIGATION
   ================================================================== */
/* v1.16.66 — The body has `direction: rtl` (set above). When a flex
   container inherits direction:rtl, its items AUTOMATICALLY lay out
   from right to left in DOM source order. Logo (first child) appears
   on the right, actions (last child) on the left. No `flex-direction:
   row-reverse` needed — and using it here actively breaks the mirror
   because RTL + row-reverse cancel each other out, leaving items in
   LTR visual order. Removed in v1.16.66.

   Logical margins (`margin-inline-start/end`) in style.css now also
   auto-mirror, so the gap between logo and nav and the auto-push to
   the opposite edge work correctly without per-language overrides. */

/* Active link underline now slides in from the right edge to the left */
.site-nav .menu a::after {
  transform-origin: right center;
}

/* Mobile menu toggle moves to left side on Arabic */
.menu-toggle { order: -1; }

/* ==================================================================
   HERO
   ================================================================== */
.hero-grid { direction: rtl; }
/* v1.16.66 — .hero-pill row-reverse removed; direction:rtl mirrors it. */

/* Decorative orb that was top-right on EN should be top-left on AR */
.hero-orb {
  right: auto;
  left: -180px;
}

/* ==================================================================
   CARDS & GRIDS
   ================================================================== */
/* Workshop card accent bar gradients should reverse direction so the
   color "flows" the same way a reader's eye moves */
.workshop-card-accent.level-beginner    { background: linear-gradient(270deg, #15532E, #3D8159); }
.workshop-card-accent.level-intermediate{ background: linear-gradient(270deg, #1E3A5F, #4F6F94); }
.workshop-card-accent.level-advanced    { background: linear-gradient(270deg, #0F1F3D, #6B7280); }
.workshop-card-accent.level-all-levels  { background: linear-gradient(270deg, #B45309, #D69E2E); }
.workshop-card-accent.level-foundations { background: linear-gradient(270deg, #7C2D32, #A85B5F); }

/* Track card accent bars same logic */
.tracks-grid .track-card:nth-of-type(6n+1)::before { background: linear-gradient(270deg, #0F1F3D, #6B7280); }
.tracks-grid .track-card:nth-of-type(6n+2)::before { background: linear-gradient(270deg, #1E3A5F, #4F6F94); }
.tracks-grid .track-card:nth-of-type(6n+3)::before { background: linear-gradient(270deg, #B45309, #D69E2E); }
.tracks-grid .track-card:nth-of-type(6n+4)::before { background: linear-gradient(270deg, #15532E, #3D8159); }
.tracks-grid .track-card:nth-of-type(6n+5)::before { background: linear-gradient(270deg, #7C2D32, #A85B5F); }
.tracks-grid .track-card:nth-of-type(6n)::before   { background: linear-gradient(270deg, #1E3A5F, #6B7280); }

/* ==================================================================
   STEPS — How It Works
   ================================================================== */
/* Connecting line should flow right→left in the reading direction */
.steps-grid .step::after {
  left: auto;
  right: 50%;
  background: linear-gradient(270deg, #FAF8F2 0%, #E5E1D5 50%, #FAF8F2 100%);
}

/* ==================================================================
   FEATURED & FORM
   ================================================================== */
.featured-card { direction: rtl; }
.featured-learn { direction: rtl; }

/* Corporate form field layout */
.form-row { direction: rtl; }
.form-status { text-align: right; }

/* Phone input keeps LTR direction — phone numbers are LTR even in RTL languages */
input[type="tel"] { direction: ltr; text-align: right; }

/* Email input — same LTR behavior */
input[type="email"] { direction: ltr; text-align: right; }

/* ==================================================================
   REVIEWS — Google-style cards
   ==================================================================
   v1.16.66 — Review head/summary/actions row-reverse rules removed;
   direction:rtl on body propagates and mirrors these naturally. */
.review-head .review-name-block { text-align: right; }
.reviews-summary-cta svg { transform: scaleX(-1); }

/* ==================================================================
   ARROWS & DIRECTIONAL ICONS
   ================================================================== */
/* Any arrow pointing → in English should point ← in Arabic.
   We do this generically by mirroring SVG icons in links. */
.fs-link svg, .ws-link svg, .track-link svg,
.workshop-cta svg, .reviews-summary-cta svg,
.btn svg.arrow-right, .menu-arrow {
  transform: scaleX(-1);
}

/* "Read more →" type text — the arrow character itself doesn't flip,
   so we use ← in Arabic builds via theme strings instead. */

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer { direction: rtl; }
.site-footer-grid { direction: rtl; }
/* v1.16.66 — .site-footer-bottom row-reverse removed; mirrors via RTL */

/* ==================================================================
   PROMO BAR
   ================================================================== */
.aequitas-promo-bar { direction: rtl; }

/* ==================================================================
   LANGUAGE SWITCHER — direction:rtl on body mirrors the flex axis;
   no flex-direction:row-reverse needed (v1.16.66).
   ================================================================== */

/* ==================================================================
   MOBILE CAROUSELS
   ================================================================== */
/* Native scroll-snap automatically handles RTL — but we want the
   first card to start from the right edge instead of left */
@media (max-width: 768px) {
  .reviews-grid,
  .articles-grid,
  .steps-grid {
    direction: rtl;
  }
}

/* ==================================================================
   GENERIC UTILITIES
   ================================================================== */
/* Common Tailwind-like utilities used inline */
.text-right { text-align: left; }
.text-left  { text-align: right; }
.ml-auto    { margin-right: auto; margin-left: 0; }
.mr-auto    { margin-left: auto; margin-right: 0; }

/* Padding/margin utilities that reference left/right need swapping.
   If your theme uses inline `style="margin-left: 12px"` etc.,
   those won't flip automatically — replace with logical properties:
     margin-inline-start, margin-inline-end
     padding-inline-start, padding-inline-end
   These respect the document direction. */