/* =====================================================================
   ARABIC / RTL
   Loaded only when the Arabic language is active. Layout direction is
   handled by logical properties in main.css; this file swaps the type
   system and mirrors the few things that should read right-to-left.
   ===================================================================== */

[dir="rtl"] {
  --to-end: 270deg;
  --serif: "Amiri", "Cormorant Garamond", Georgia, serif;
  --sans: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --script: "Aref Ruqaa", "Amiri", serif;
  --hand: "Aref Ruqaa", "Amiri", serif;
}

/* Letter-spacing breaks Arabic letter joining — remove it everywhere except Latin brand names. */
[dir="rtl"] :not(.brand-list b):not(.brand-list b *):not(.ls-opt) { letter-spacing: 0 !important; }

[dir="rtl"] body { font-size: 15.5px; line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2 { font-weight: 700; line-height: 1.4; }
[dir="rtl"] h2 { font-size: clamp(28px, 3vw, 40px); }
[dir="rtl"] .label, [dir="rtl"] .eyebrow { font-size: 13px; font-weight: 600; }
[dir="rtl"] .eyebrow i { margin: 0 .5em; }
[dir="rtl"] .btn { font-size: 14px; }
[dir="rtl"] .crumbs, [dir="rtl"] .scroll-cue { font-size: 12px; }
[dir="rtl"] .brand-list small, [dir="rtl"] .work-info small, [dir="rtl"] .stat span,
[dir="rtl"] .case-meta dt, [dir="rtl"] .field label, [dir="rtl"] .info small,
[dir="rtl"] .footer h4, [dir="rtl"] .toolkit-cols h4, [dir="rtl"] .post-card small { font-size: 12px; font-weight: 600; }
[dir="rtl"] .brand-list small { font-size: 9px; }
[dir="rtl"] .lead { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.9; }
[dir="rtl"] .about-text > p:not(.label), [dir="rtl"] .svc p, [dir="rtl"] .case-body p:not(.label) { line-height: 1.95; }
[dir="rtl"] .passions li, [dir="rtl"] .service-grid li { font-size: 13px; line-height: 1.6; }
[dir="rtl"] .work-info h3, [dir="rtl"] .tl-item h3, [dir="rtl"] .card h3, [dir="rtl"] .svc h3,
[dir="rtl"] .step h3, [dir="rtl"] .ind h3, [dir="rtl"] .beyond h3, [dir="rtl"] .faq summary { font-weight: 700; line-height: 1.5; }
[dir="rtl"] .faq summary { font-size: 20px; }
[dir="rtl"] .case-meta dd { font-size: 18px; font-weight: 700; }

/* Script & handwriting (Aref Ruqaa is visually larger than the Latin script) */
[dir="rtl"] .logo { font-size: 34px; line-height: 1.2; }
[dir="rtl"] .hero h1 { font-size: clamp(44px, 6vw, 80px); gap: .25em; }
[dir="rtl"] .hero h1 .script { font-size: 1.2em; line-height: 1.2; transform: translateY(.06em) rotate(3deg); margin-inline-start: .1em; }
[dir="rtl"] .page-hero h1 { font-size: clamp(40px, 5.6vw, 76px); }
[dir="rtl"] .page-hero h1 .script { font-size: 1.1em; line-height: 1.2; transform: translateY(.06em) rotate(3deg); margin: 0 .15em; }
[dir="rtl"] .hand { line-height: 1.7; }
[dir="rtl"] .note-hero { transform: rotate(10deg); }
[dir="rtl"] .note-side { transform: rotate(10deg); font-size: 18px; }
[dir="rtl"] .about-quote p { transform: rotate(4deg); font-size: clamp(17px, 1.5vw, 21px); }
[dir="rtl"] .about-quote .sig { font-size: 46px; transform: rotate(6deg); }
[dir="rtl"] .services-photo p { transform: rotate(10deg); }
[dir="rtl"] .note-contact { transform: rotate(10deg); }
[dir="rtl"] .contact-sign .script { font-size: 44px; transform: rotate(6deg); }
[dir="rtl"] .cta-note { transform: translateY(-50%) rotate(10deg); }
[dir="rtl"] .work-cta .hand, [dir="rtl"] .contact-note { transform: rotate(3deg); }
[dir="rtl"] .footer-bottom .hand { font-size: 16px; }

/* Mirror full-bleed photos so the subject still faces the text */
[dir="rtl"] .hero-bg, [dir="rtl"] .contact-bg, [dir="rtl"] .leaf { scale: -1 1; }

/* Arrows point the reading direction */
[dir="rtl"] .arrow { scale: -1 1; }

/* Numbers and emails stay left-to-right inside Arabic text */
[dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href*="linkedin"], [dir="rtl"] .stat b { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 900px) {
  [dir="rtl"] .nav-links { font-size: 26px; font-weight: 700; }
  [dir="rtl"] .logo { font-size: 30px; }
}

/* Greeting in light Naskh, name in bold Ruqaa, so the two read as different voices */
[dir="rtl"] .hero h1 { font-weight: 400; }
[dir="rtl"] .script { font-weight: 700; }
[dir="rtl"] .brand-list { gap: 22px; }

/* Logo images keep their own slant — no extra tilt or mirroring in Arabic */
[dir="rtl"] .about-quote .sig, [dir="rtl"] .contact-sign .sig { transform: none; font-size: inherit; }
[dir="rtl"] .logo:has(.mw-logo) { font-size: inherit; }