/* MBF — Arabic / RTL overrides
   Loaded only when current language is Arabic. Mirrors directional rules
   defined in main.css and swaps the body font to a system Arabic stack. */

html[dir="rtl"],
body.is-rtl {
  direction: rtl;
  text-align: right;
}

/* Arabic uses the same Intercom family as English (set in main.css).
   No font override here — letter-spacing reset only, since Latin
   letter-spacing tweaks don't suit Arabic shaping. */
body.is-rtl {
  letter-spacing: 0;
}

/* Header / nav — let natural RTL flip handle ordering:
   Logo on RIGHT (DOM 0 ends up rightmost), then About → Social → ... → Contact → Lang on LEFT.
   MB Group badge naturally flips to top-left (where the right-column ends in RTL). */
/* No nav__right / nav__top-bar overrides — main.css uses flex-end which
   auto-flips to physical LEFT in RTL, so MB Group badge ends up above the
   Contact Us nav item (which is leftmost in Arabic mode). */

/* Hero */
body.is-rtl .hero__headline,
body.is-rtl .hero__inner { text-align: right; }

/* Pillars — equal-height layout already in main.css; only flip text-align here */
body.is-rtl .pillar {
  text-align: right;
  align-items: flex-end;
}

body.is-rtl .pillar__title,
body.is-rtl .pillar__text { text-align: right; }

/* Arabic glyphs need relaxed line-height to avoid clipping / vertical shift */
body.is-rtl .pillar__title {
  line-height: 1.3;
  margin-block-start: 12px;
}

body.is-rtl .pillar__text {
  line-height: 1.7;
}

/* Pillar accent: keep on RIGHT (don't mirror to left) — original design intent */
/* main.css already positions it at right:24px which works for both directions */

/* About */
body.is-rtl .about__inner { direction: rtl; }
body.is-rtl .about__title,
body.is-rtl .about__copy,
body.is-rtl .about__copy p,
body.is-rtl .about__quote,
body.is-rtl .about__quote p,
body.is-rtl .about__attribution,
body.is-rtl .about__name,
body.is-rtl .about__role { text-align: right; }

/* Story bands — keep card POSITION same as English (don't mirror).
   In RTL, flex-end/flex-start auto-flip physically — invert them to preserve
   the original LTR layout: Social=right, Environment=left (lead), Economic=right. */
body.is-rtl .story-band__inner {
  justify-content: flex-start; /* RTL flex-start = physical right (matches LTR flex-end) */
}
body.is-rtl .story-band__inner--lead {
  justify-content: flex-end; /* RTL flex-end = physical left (matches LTR flex-start) */
}

/* Card content stays right-aligned (Arabic reading direction); accent stays on RIGHT */
body.is-rtl .story-card { text-align: right; }
body.is-rtl .story-card__title { text-align: right; }
body.is-rtl .story-card__body,
body.is-rtl .story-card__body p { text-align: right; }

/* CTA pill — Arabic glyphs need a relaxed line-height and no uppercase */
body.is-rtl .story-card__cta,
body.is-rtl .slider-card__cta {
  text-transform: none;
  line-height: 1.4;
  font-size: 12px;
  letter-spacing: 0;
  height: auto;
  min-height: 28px;
  padding: 6px 14px;
}

/* News slider — keep TRACK in LTR so the JS translate3d navigation works
   correctly in both languages. Only the card content is RTL. */
body.is-rtl .slider__track { direction: ltr; }
body.is-rtl .slider__viewport { direction: ltr; }
body.is-rtl .slider-card { direction: rtl; }
body.is-rtl .slider-card__date { right: auto; left: 18px; }
body.is-rtl .slider-card__body { text-align: right; }
body.is-rtl .slider-card__title { text-align: right; }
body.is-rtl .slider-card__cta::after,
body.is-rtl .story-card__cta::after { transform: scaleX(-1); }
body.is-rtl .slider__dots {
  direction: ltr;
  justify-content: center;
}

/* Board — names/roles stay centered in Arabic too (matches LTR design) */
body.is-rtl .board__members { direction: rtl; }
body.is-rtl .board-member { text-align: center; }
body.is-rtl .board-member__meta { text-align: center; }
body.is-rtl .board-member__name,
body.is-rtl .board-member__role {
  text-align: center;
  line-height: 1.3;
}

/* Footer — let RTL naturally flip the layout. No flex-direction overrides.
   Result: logo on FAR RIGHT, addresses CENTER, contact/social on FAR LEFT. */
body.is-rtl .site-footer__addresses { text-align: right; }
body.is-rtl .site-footer__line--ar { text-align: right; }
body.is-rtl .site-footer__heading { text-align: left; }
body.is-rtl .site-footer__legal { text-align: left; }
body.is-rtl .site-footer__copy { text-align: left; }

/* English address line — always render in Latin font + LTR regardless of page direction */
body.is-rtl .site-footer__line[lang="en"] {
  font-family: "Intercom Regular", system-ui, -apple-system, "Segoe UI", sans-serif;
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

/* Website link — already has direction:ltr in main.css, ensure font is Latin too */
body.is-rtl .site-footer__site-link {
  font-family: "Intercom Regular", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 900px) {
  /* Pillar & story card body — icon stays on RIGHT in Arabic too, so protect same side */
  body.is-rtl .pillar__text {
    padding-right: calc(var(--accent-pill-w) + 20px);
    padding-left: 0;
  }
  body.is-rtl .story-card__body {
    padding-right: calc(var(--accent-pill-w) + 18px);
    padding-left: 0;
  }

  /* Nav drawer — main.css handles RTL alignment + lang toggle pill on mobile. */

  /* News slider — center the dots just like English mobile */
  body.is-rtl .slider__dots {
    direction: ltr;
    justify-content: center;
  }
  /* Reset card date to normal flow on mobile */
  body.is-rtl .slider-card__date {
    right: 18px;
    left: auto;
  }

  /* Footer — override desktop RTL text-align rules; use centered layout like English */
  body.is-rtl .site-footer__row { text-align: center; }
  body.is-rtl .site-footer__left {
    align-items: center;
    text-align: center;
  }
  body.is-rtl .site-footer__addresses { text-align: center; }
  body.is-rtl .site-footer__line { text-align: center; }
  body.is-rtl .site-footer__line--ar { text-align: center; }
  body.is-rtl .site-footer__aside { text-align: center; }
  body.is-rtl .site-footer__heading { text-align: center; }
  body.is-rtl .site-footer__social { justify-content: center; }
  body.is-rtl .site-footer__legal {
    text-align: center;
    justify-content: center;
  }
  body.is-rtl .site-footer__copy { text-align: center; }
}

/* Latin fragments inside Arabic content (URL, +968 number) stay LTR */
body.is-rtl .site-footer__line--ar,
body.is-rtl [lang="en"] {
  unicode-bidi: isolate;
}
body.is-rtl .site-footer__site-link { direction: ltr; display: inline-block; }