/* ===========================================================================
   bassel-rtl.css — Arabic edition only.

   Loaded after bassel.css on /ar pages, which carry dir="rtl" on <html>.
   The base stylesheet is written with physical properties (padding-left,
   border-left, absolute left), so this file mirrors the handful that read
   wrong in Arabic and nothing else. Two rules hold throughout:

   1. Type. Poppins has no Arabic glyphs. Cairo leads the stack and Poppins
      stays behind it so Latin brand names (Tracee, Arrel, MiCA, LinkedIn)
      and numerals keep the original face.
   2. Diagrams stay LTR. The world map, the practice-card art, the booking
      calendar and the carousels are laid out in absolute SVG or JS-driven
      transform coordinates. Mirroring them would scramble the geography and
      the animation, so they are pinned to direction: ltr.
   =========================================================================== */

:root[dir="rtl"] body,
[dir="rtl"] body {
  font-family: 'Cairo', 'Poppins', sans-serif;
  letter-spacing: 0;
}

/* Every face the base sheet sets by name, restated with Cairo in front. */
[dir="rtl"] .h1,
[dir="rtl"] .h2,
[dir="rtl"] .h3,
[dir="rtl"] .display-headline,
[dir="rtl"] .lede,
[dir="rtl"] .eyebrow,
[dir="rtl"] .caption,
[dir="rtl"] .nav-link,
[dir="rtl"] .cta-pill,
[dir="rtl"] .cta-primary,
[dir="rtl"] .cta-linkedin,
[dir="rtl"] .cta-ghost,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  font-family: 'Cairo', 'Poppins', sans-serif;
}

/* Arabic has no case, so uppercase transforms are inert at best and break
   glyph shaping at worst. Letter-spacing does the same to joined script. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .caption,
[dir="rtl"] .footer-col-title,
[dir="rtl"] .practice-number,
[dir="rtl"] .globe-stat-label,
[dir="rtl"] .lang-switch {
  text-transform: none;
  letter-spacing: 0;
}

/* Headings run a touch taller: Arabic ascenders and descenders need the room. */
[dir="rtl"] .h1,
[dir="rtl"] .h2,
[dir="rtl"] .display-headline,
[dir="rtl"] .page-hero-h1 { line-height: 1.25; letter-spacing: 0; }
[dir="rtl"] .lede { line-height: 1.8; }

/* ---- Mirrored spacing and rules --------------------------------------- */
[dir="rtl"] .nav .cta-pill { margin-left: 0; margin-right: 4px; }

[dir="rtl"] .b-arrow-list li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .b-arrow-list li::before { left: auto; right: 0; content: '←'; }
@media (max-width: 760px) {
  [dir="rtl"] .b-arrow-list li { padding-left: 0; padding-right: 22px; }
}

[dir="rtl"] .cta-ghost::after { content: ' ←'; }

/* Practice cards. The title and claim are capped at ~62% width and the card
   art is absolutely positioned in the free corner. Mirroring the text without
   mirroring the art puts the two on top of each other, which is what Arabic
   was showing, so the art, its glow, and the corner arrow all move over. */
[dir="rtl"] .practice-visual { right: auto; left: 28px; }
[dir="rtl"] .practice-card::before { right: auto; left: -120px; }
[dir="rtl"] .practice-card:hover .practice-arrow { transform: translate(-4px, -4px); }
@media (max-width: 1100px) {
  [dir="rtl"] .practice-visual { right: auto; left: 24px; }
}
@media (max-width: 600px) {
  [dir="rtl"] .practice-visual { margin: 0 auto 20px 0; }
}

/* Arabic ascenders and the hamza sit high, and the hero runs at clamp() sizes
   where a 1.25 line-height clips them against the line above. */
[dir="rtl"] .page-hero-h1,
[dir="rtl"] .h1 { line-height: 1.45; padding-bottom: 0.08em; }
[dir="rtl"] .h2 { line-height: 1.4; padding-bottom: 0.06em; }
[dir="rtl"] .practice-title { line-height: 1.4; }

[dir="rtl"] .offer-col { border-left: none; border-right: 1px solid var(--phantom); }
[dir="rtl"] .offer-col:first-child { padding-left: 22px; padding-right: 0; border-right: none; }

[dir="rtl"] .footer-crumb .right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .r-gate-form,
[dir="rtl"] .b-table th,
[dir="rtl"] .b-table td { text-align: right; }

/* ---- Things that must not mirror -------------------------------------- */
/* SVG text-anchor start/end resolves against the inline base direction, so an
   RTL context would swap every label on the world map. */
[dir="rtl"] svg { direction: ltr; }

[dir="rtl"] .globe-stage,
[dir="rtl"] .globe-stat-row,
[dir="rtl"] .cover-flow-stage,
[dir="rtl"] .marquee,
[dir="rtl"] .marquee-track,
[dir="rtl"] .calendly-card,
[dir="rtl"] .card-stack {
  direction: ltr;
}
/* The stat row keeps LTR box order but its words are Arabic. */
[dir="rtl"] .globe-stat-label,
[dir="rtl"] .globe-stat-num { direction: rtl; }

/* Latin-script runs inside Arabic prose: emails, URLs, publication titles. */
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .research-card-venue,
[dir="rtl"] .patent-id,
[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Form fields take Arabic input but keep email and URL fields LTR. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] { direction: ltr; text-align: left; }

/* ---- Skip link and mobile drawer slide in from the correct edge -------- */
[dir="rtl"] .skip-link { left: auto; right: 16px; }