/* ===========================================
 * rtl.css — RTL overrides for Arabic pages
 * Per Constitution §5.4 + Amendment 8
 * Loaded only on /ar/* pages (after main.css + components.css)
 * Tokens-only, Mobile-First, no max-width media queries.
 * =========================================== */

/* ---------- Document base ---------- */

html[lang="ar"] body {
  font-family: var(--font-arabic);
  text-align: start;       /* logical: right in RTL, left in LTR */
}

/* ---------- Modal (kept LTR per Amendment 8 §8.2) ----------
 * Modal copy stays French; force LTR direction so labels, inputs,
 * and the close button render in their natural FR layout.
 */
html[lang="ar"] .modal-backdrop,
html[lang="ar"] .modal {
  direction: ltr;
  text-align: left;
}

/* ---------- Hero — invert two-column desktop ---------- */
@media (min-width: 1024px) {
  html[lang="ar"] .hero__grid {
    /* Visual element on the LEFT in RTL, content on the RIGHT */
    grid-template-columns: 1fr 1.1fr;
    direction: rtl;
  }
}

/* ---------- Header inner — flip nav alignment ----------
 * In RTL: brand on the right, nav and CTA on the left.
 * `flex-direction: row-reverse` is robust regardless of source order.
 */
html[lang="ar"] .site-header__inner {
  flex-direction: row-reverse;
}

/* Lang switcher position per §5.4 line 896: top-left on AR */
html[lang="ar"] .lang-switcher {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* ---------- Sectors / Services / Bundles cards ----------
 * Card content uses logical properties (margin-inline / padding-inline).
 * Sector-card border-top accent stays top — no flip needed.
 * Service card lead-time chip naturally flows right-to-left.
 */

/* Sector list separators: « · » between items needs RTL-friendly spacing */
html[lang="ar"] .sector-card__list li::after {
  content: " · ";        /* same separator works both directions */
}

/* ---------- Footer ---------- */
html[lang="ar"] .site-footer {
  text-align: start;
}
@media (min-width: 768px) {
  /* Brand-on-right / contact-on-left in RTL */
  html[lang="ar"] .site-footer__contact {
    align-items: flex-start;
  }
}

/* ---------- Bundle card "card-badge" ----------
 * The " ⭐ Le plus populaire " badge is positioned with left: 50%; transform: translateX(-50%).
 * That centering is direction-agnostic — no override needed.
 */

/* ---------- Sticky WhatsApp — keep bottom-right ----------
 * RTL users still expect a thumb-zone CTA on the dominant side; we keep it
 * at the same physical corner. No override required because the rule uses
 * `right: var(--space-2)` (intentional, not logical) in main.css.
 */

/* ---------- Timeline (vertical mobile) ----------
 * Items use a fixed two-column grid (48px marker + body). On AR the marker
 * appears on the right, body on the left — swap via direction: rtl on the list.
 * The connector line position must follow the marker.
 */
html[lang="ar"] .timeline {
  direction: rtl;
}
html[lang="ar"] .timeline__item::before {
  /* Marker is on the right in RTL: connector x-position mirrors */
  left: auto;
  right: 23px;
}
@media (min-width: 1024px) {
  html[lang="ar"] .timeline__item::before {
    /* In horizontal desktop layout the connector spans the row;
       direction: rtl already reverses x-axis. Reset overrides. */
    right: 56%;
    left: auto;
  }
}

/* ---------- Money-back / Protection grid ----------
 * Grid layout is direction-independent. Cards reflow naturally.
 */

/* ---------- Bullet list (icon + text) ----------
 * grid-template-columns: 32px 1fr — needs to flip in RTL so icon stays
 * on the inline-start side relative to reading direction. RTL automatically
 * flips this; no override needed.
 */

/* ---------- FAQ ---------- */
/* The chevron is a vertical disclosure arrow (down) — no horizontal mirror.
   The summary uses justify-content: space-between, which inverts naturally. */

/* ---------- Form fields outside Modal ----------
 * No fields outside Modal currently. If any get added, ensure
 * `dir="rtl"` on text inputs, `dir="ltr"` on tel/email/numeric inputs.
 */


/* ---------- Number / phone / email LTR isolation §1.1 + §3.3 + §3.4 ---------- */
/* Inside RTL flow, sequences like "+213 540 698 461", "25 000 دج", "5-7 jours"
 * can render with reversed digits or split tokens. Forcing dir=ltr +
 * unicode-bidi: isolate on the wrapper element keeps the run intact. */
bdi, .num, .phone, .email, .price, [dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}
a[href^="tel:"], a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
}