/* ==========================================================================
   Arabic / RTL — loaded only on /ar/ pages, after every other stylesheet.
   The <html dir="rtl"> attribute already mirrors all flex/grid layouts;
   this file handles typography and the few spots positioned with
   physical left/right values in the original design.
   ========================================================================== */

/* ---------- Typography ---------- */
body.lang-ar,
body.lang-ar button,
body.lang-ar input,
body.lang-ar select,
body.lang-ar textarea,
body.lang-ar .nav-cta,
body.lang-ar .btn-primary,
body.lang-ar .btn-secondary,
body.lang-ar .btn-blue,
body.lang-ar .form-submit,
body.lang-ar .section-tag,
body.lang-ar .page-hero-tag,
body.lang-ar .offices-tag,
body.lang-ar .faq-tag {
  font-family: 'IBM Plex Sans Arabic', 'Outfit', Tahoma, sans-serif;
}
/* Letter-spacing breaks Arabic's connected letterforms — always off. */
body.lang-ar * { letter-spacing: 0 !important; }
body.lang-ar .section-tag,
body.lang-ar .page-hero-tag,
body.lang-ar .offices-tag,
body.lang-ar .faq-tag,
body.lang-ar .footer-title,
body.lang-ar .client-stat-label,
body.lang-ar .stat-label,
body.lang-ar .case-study-tag,
body.lang-ar .pattern-label,
body.lang-ar .marquee-item,
body.lang-ar .mv-label,
body.lang-ar .about-mission-label { text-transform: none; font-size: 13px; }

/* Arabic needs more vertical room than Latin at the same size. */
body.lang-ar .hero-title { line-height: 1.35; }
body.lang-ar .hero-title .line { padding-bottom: 0.08em; }
body.lang-ar .section-title,
body.lang-ar .page-hero-title,
body.lang-ar .cta-title,
body.lang-ar .interactive-title,
body.lang-ar .offices-title,
body.lang-ar .faq-title,
body.lang-ar .location-city,
body.lang-ar .service-detail-title { line-height: 1.4; }
body.lang-ar .hero-description,
body.lang-ar .page-hero-description,
body.lang-ar .about-text,
body.lang-ar .story-content p,
body.lang-ar .experience-text,
body.lang-ar .clients-text,
body.lang-ar .service-detail-description,
body.lang-ar .location-description { line-height: 1.9; }
body.lang-ar .experience-text.highlight { font-style: normal; }
body.lang-ar .testimonial-quote,
body.lang-ar .story-quote { font-style: normal; }

/* ---------- Home ---------- */
body.lang-ar .hero-overlay {
  background: linear-gradient(to left, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.8) 50%, rgba(10,10,10,0.6) 100%);
}
body.lang-ar .interactive-text { padding-right: 0; padding-left: 40px; }
body.lang-ar .highlight-word::after { transform-origin: left; }
body.lang-ar .highlight-word:hover::after { transform-origin: right; }
body.lang-ar .pattern-cell:hover .pattern-inner { transform: rotateY(-10deg) rotateX(-5deg) scale(1.05); }
body.lang-ar .pattern-cell:hover .pattern-img { transform: scale(1.1) rotate(-5deg); }
body.lang-ar .pattern-cell:hover .pattern-img-custom { transform: scale(1.08); }

/* Marquee keeps its left-scrolling mechanics; only the text inside is RTL. */
body.lang-ar .marquee-track { direction: ltr; }
body.lang-ar .marquee-item { direction: rtl; }

body.lang-ar #about-main-img { left: auto; right: 0; }
body.lang-ar #about-secondary-img { right: auto; left: 0; }
body.lang-ar .about-mission { border-left: none; border-right: 3px solid var(--white); }

body.lang-ar .experience-bg {
  right: auto; left: 0;
  -webkit-mask-image: linear-gradient(to right, black, transparent);
  mask-image: linear-gradient(to right, black, transparent);
}

/* ---------- About: timeline ---------- */
body.lang-ar .timeline-item:nth-child(odd) { text-align: left; }
body.lang-ar .timeline-item:nth-child(odd) .timeline-content { padding-right: 0; padding-left: 60px; }
body.lang-ar .timeline-item:nth-child(even) .timeline-content { padding-left: 0; padding-right: 60px; }

/* ---------- Locations & Services: alternating image/text rows ---------- */
body.lang-ar .location-large-card:nth-child(even),
body.lang-ar .service-detail:nth-child(even) { direction: ltr; }
body.lang-ar .location-large-card:nth-child(even) > *,
body.lang-ar .service-detail:nth-child(even) > * { direction: rtl; }

/* Services: process connector lines run right-to-left. */
body.lang-ar .process-step::after { left: auto; right: calc(50% + 40px); }

/* ---------- Contact ---------- */
body.lang-ar .form-select { background-position: left 16px center; padding-right: 20px; padding-left: 44px; }
body.lang-ar .form-input[type="email"],
body.lang-ar .form-input[type="tel"] { direction: ltr; text-align: right; }
body.lang-ar .form-input[type="email"]::placeholder,
body.lang-ar .form-input[type="tel"]::placeholder { text-align: right; }
body.lang-ar .info-card:hover { transform: translateX(-4px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  body.lang-ar .interactive-text { padding-left: 0; }

  body.lang-ar .timeline::before { left: auto; right: 20px; }
  body.lang-ar .timeline-dot { left: auto; right: 20px; transform: translateX(50%); }
  body.lang-ar .timeline-item,
  body.lang-ar .timeline-item:nth-child(odd) { text-align: right; }
  body.lang-ar .timeline-item:nth-child(odd) .timeline-content,
  body.lang-ar .timeline-item:nth-child(even) .timeline-content { padding-left: 0; padding-right: 50px; }

  body.lang-ar .location-large-card:nth-child(even),
  body.lang-ar .service-detail:nth-child(even) { direction: rtl; }
}
@media (max-width: 600px) {
  body.lang-ar .hero-title { line-height: 1.4; }
}

/* Arabic on phones: slightly smaller display type (Arabic glyphs run taller). */
@media (max-width: 600px) {
  body.lang-ar .section-title,
  body.lang-ar .page-hero-title { line-height: 1.45; }
  body.lang-ar .mobile-menu a { font-size: 24px; }
  body.lang-ar .pattern-label { font-size: 12px; }
}