/* =========================================================================
   RTL overrides — loaded only on Arabic pages (dir="rtl")
   Most layout already uses logical properties (inset-inline, padding-inline,
   border-inline) in style.css, so this file only handles the exceptions:
   icon mirroring, background-position flips, and a couple of literal
   left/right values that logical properties can't express.
   ========================================================================= */

[dir="rtl"] body { font-family: 'Cairo', 'Tahoma', 'Segoe UI', Arial, sans-serif; }

/* Chevron / arrow icons that must visually point the opposite way */
[dir="rtl"] .card__link svg,
[dir="rtl"] .hero__actions svg.icon-arrow,
[dir="rtl"] .btn svg.icon-arrow {
  transform: scaleX(-1);
}

/* Gallery video play icon stays centered — no mirroring needed */

/* Timeline connecting line (decorative, drawn via ::before in some breakpoints) */
[dir="rtl"] .timeline__num::before { content: counter(step); }

/* Form: keep numeric / tel / email inputs LTR for readability even inside RTL page */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"] {
  direction: ltr;
  text-align: right;
}

/* Sticky mobile bar icons mirror only the arrow-style ones (call/whatsapp/quote glyphs are symmetric) */

/* Lightbox prev/next arrows swap sides physically as well as visually since they are
   positioned with inset-inline in style.css already — only the glyph needs mirroring,
   handled in style.css via [dir="rtl"] .lightbox__prev svg selector. */

/* Phone numbers inside Arabic text stay left-to-right and on one line */
[dir="rtl"] span[dir="ltr"] { white-space: nowrap; }

/* Letter-spacing pulls joined Arabic letters apart — only keep it for Latin text */
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero__eyebrow,
[dir="rtl"] .project-card__tag { letter-spacing: 0; }

/* Slight line-height bump: Arabic script benefits from a touch more leading */
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] .lead { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.35; }

/* Quote/blockquote mirroring if used */
[dir="rtl"] blockquote { border-inline-start: none; border-inline-end: 4px solid var(--color-accent); }