/* ═══════════════════════════════════════════════════════════════
   NASBOARD v2 — right-to-left. Loaded only by /ar/.

   nb.css is written in logical properties, so layout already
   mirrors. What is left: Arabic type, arrows, a few transform
   origins, and things that must NOT mirror (logo, route map).
   Every selector is scoped to [dir='rtl'] so this is inert if an
   English page ever loads it by mistake.
   ═══════════════════════════════════════════════════════════════ */

/* Francy is Latin-only and single weight, so IBM Plex Sans Arabic
   carries display type here; 600 stands in for Francy's presence. */
[dir='rtl'] body,
[dir='rtl'] .display,
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3,
[dir='rtl'] .sec-head h2, [dir='rtl'] .split-copy h2,
[dir='rtl'] .problem-head h2, [dir='rtl'] .faq-aside h2,
[dir='rtl'] .market-name h3, [dir='rtl'] .svc-hero h3,
[dir='rtl'] .cta-side h2, [dir='rtl'] .done h2, [dir='rtl'] .close h2 {
  font-family: 'IBM Plex Sans Arabic', 'Outfit', sans-serif;
}
[dir='rtl'] .display,
[dir='rtl'] h1, [dir='rtl'] h2,
[dir='rtl'] .market-name h3, [dir='rtl'] .svc-hero h3 {
  font-weight: 600;
  letter-spacing: 0;   /* tracking breaks the joins */
  line-height: 1.3;
}
[dir='rtl'] h3 { font-weight: 600; letter-spacing: 0; }
[dir='rtl'] .hero h1 { font-size: clamp(2.3rem, 1.1rem + 6vw, 4.5rem); line-height: 1.25; }
[dir='rtl'] .ln { padding-bottom: .22em; margin-bottom: -.22em; }

/* Arabic has no capitals: uppercase + wide tracking only breaks joins */
[dir='rtl'] .kicker,
[dir='rtl'] .flag,
[dir='rtl'] .cta-kicker,
[dir='rtl'] .foot h3,
[dir='rtl'] .step-n {
  text-transform: none;
  letter-spacing: 0;
}
[dir='rtl'] .kicker { font-size: .875rem; }

/* Latin runs inside Arabic (NasBoard, EOR, EGP) keep the Latin face */
[dir='rtl'] .lat { font-family: 'Outfit', sans-serif; font-weight: 500; }
/* the English market names sit in the Latin face beside Arabic ones */
[dir='rtl'] .market-name .ar { font-family: 'Outfit', sans-serif; font-size: 1.125rem; }

/* numbers stay Latin and tabular */
[dir='rtl'] .stat dd,
[dir='rtl'] .prob-n { font-family: 'Francy', 'Outfit', sans-serif; font-weight: 400; }

/* arrows point the reading direction */
[dir='rtl'] .ph.flip { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  [dir='rtl'] .btn:hover i.ph-arrow-right { transform: scaleX(-1) translateX(4px); }
}

/* underline and progress bars grow from the start edge */
[dir='rtl'] .hl::after { transform-origin: right center; }
[dir='rtl'] .chip-bar span { transform-origin: right; }
[dir='rtl'] .prob::before { transform-origin: right; }

/* the marquee runs the other way */
[dir='rtl'] .marquee-track { animation-direction: reverse; }

/* Country guides: allow Arabic headings and labels to wrap naturally. */
[dir='rtl'] .c-hero h1 {
  font-size: clamp(2rem, 1rem + 4.6vw, 4rem);
  line-height: 1.45;
}
[dir='rtl'] .country .glance dd { line-height: 1.7; }
[dir='rtl'] .country .tbl thead th,
[dir='rtl'] .country .tl-date { letter-spacing: 0; text-transform: none; }
[dir='rtl'] a[href^='mailto:'],
[dir='rtl'] input[type='email'],
[dir='rtl'] input[type='tel'] { direction: ltr; unicode-bidi: isolate; }
