/* ==========================================================================
   Arabic / RTL layer — loaded after style.css on the Arabic pages
   Only what mirroring gets wrong, plus the Arabic type stack.
   ========================================================================== */

[dir="rtl"] {
  /* the Figma file renders Arabic in Cairo */
  --font-sans: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-serif: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-serif-sm: "Cairo", "Segoe UI", Tahoma, sans-serif;

  /* Arabic runs smaller on the same point size — one step up, looser leading */
  --fs-h1: clamp(2rem, 1.2rem + 2.7vw, 3.125rem);
  --fs-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-sm: .9375rem;
  --fs-xs: .875rem;
  --fs-tag: .8125rem;
}

[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] p { line-height: 1.85; }

/* Arabic has no uppercase — drop it everywhere, and the wide tracking with it */
[dir="rtl"] .tag,
[dir="rtl"] .section-title,
[dir="rtl"] .btn,
[dir="rtl"] .main-nav > a,
[dir="rtl"] .read-more,
[dir="rtl"] .footer-col h4,
[dir="rtl"] .office h5,
[dir="rtl"] .schedule b,
[dir="rtl"] .contact-form label,
[dir="rtl"] .about-brand p,
[dir="rtl"] .whoweare__title,
[dir="rtl"] .founder__bio h2,
[dir="rtl"] .founder__head span,
[dir="rtl"] .group-title,
[dir="rtl"] .cta-strip h2,
[dir="rtl"] .panel__eyebrow,
[dir="rtl"] .panel__cols h3,
[dir="rtl"] .panel__cta h3,
[dir="rtl"] .jur-card__top > span,
[dir="rtl"] .info-card__head h3,
[dir="rtl"] .request__text h2,
[dir="rtl"] .inner-hero h1 {
  text-transform: none;
  letter-spacing: 0;
}

/* Latin words inside Arabic text (GAFI, DIFC, M&A) keep the Latin face */
[dir="rtl"] .latin { font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; }

/* ---------- Header ---------- */
[dir="rtl"] .lang-switch { flex-direction: row; }
[dir="rtl"] .main-nav > a::after { transform-origin: right; }

/* ---------- Hero ---------- */
[dir="rtl"] .hero h1 em { font-style: normal; font-weight: 700; }

/* ---------- Text blocks that were justified LTR ---------- */
[dir="rtl"] .whoweare p,
[dir="rtl"] .founder__bio p,
[dir="rtl"] .request__text > p,
[dir="rtl"] .contact-text > p { text-align: justify; }

/* ---------- Icons and arrows that must flip ---------- */
[dir="rtl"] .slider-arrow svg,
[dir="rtl"] .practice__btn .arrow,
[dir="rtl"] .hero-scroll svg,
[dir="rtl"] .contact-form .btn svg,
[dir="rtl"] .link-arrow::after { transform: scaleX(-1); }

/* ...and the ones that must not */
[dir="rtl"] .logo img,
[dir="rtl"] .footer-brand > img,
[dir="rtl"] .about-brand img,
[dir="rtl"] .founder__head img,
[dir="rtl"] .social svg,
[dir="rtl"] .card__icon,
[dir="rtl"] .service-icon,
[dir="rtl"] .stars { transform: none; }

/* Marquee travels the other way */
[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

/* Slider: the track moves right-to-left, main.js flips the sign */
[dir="rtl"] .footer-links a::before { content: "‹"; }

/* ---------- Forms ---------- */
[dir="rtl"] .contact-form select {
  background-position: left var(--s-4) center;
  padding-right: var(--s-4);
  padding-left: var(--s-7);
}
[dir="rtl"] .contact-form input,
[dir="rtl"] .contact-form textarea,
[dir="rtl"] .contact-form select { text-align: right; }

/* ---------- Numbers stay LTR ---------- */
[dir="rtl"] .stat__num,
[dir="rtl"] .stat strong,
[dir="rtl"] .reason__num,
[dir="rtl"] .office-line,
[dir="rtl"] .contact-list a,
[dir="rtl"] .contact__details dd { direction: ltr; text-align: right; unicode-bidi: plaintext; }

/* ---------- Mobile menu slides in from the left ---------- */
@media (max-width: 1240px) {
  [dir="rtl"] .main-nav { transform: translateX(-100%); }
  [dir="rtl"] .main-nav.open { transform: none; }
}