/* ---------------------------------------------------------------------------
   Arabic build: typography + the right-to-left corrections the per-page
   stylesheets cannot make on their own. Loaded only by the pages under /ar/.
   dir="rtl" on <html> already mirrors flex, grid and inline flow; what is
   listed here is the handful of places that were pinned to a physical side.
--------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root[dir="rtl"] {
  --font-ar: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] li, [dir="rtl"] dt, [dir="rtl"] dd,
[dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select,
[dir="rtl"] .navlinks a, [dir="rtl"] .navcta, [dir="rtl"] .menu-panel a {
  font-family: var(--font-ar);
}

/* Arabic has no small caps and wide tracking hurts legibility */
[dir="rtl"] .eyebrow, [dir="rtl"] .sec-eyebrow, [dir="rtl"] .certs__eyebrow,
[dir="rtl"] .banner__eyebrow, [dir="rtl"] .approach-grid__eyebrow,
[dir="rtl"] .hero__positioning, [dir="rtl"] .step__meta, [dir="rtl"] .tag,
[dir="rtl"] .spec-card__code, [dir="rtl"] .why-card__stat-label {
  letter-spacing: 0;
}

/* the type runs a touch small in Cairo at the same px size */
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] dd, [dir="rtl"] dt { line-height: 1.85; }

/* ---- side flips -------------------------------------------------------- */

/* the site-wide rule that keeps single-line labels off the justify setting
   pins them to the left; in Arabic they belong on the right */
[dir="rtl"] .eyebrow, [dir="rtl"] .sec-eyebrow, [dir="rtl"] .certs__eyebrow,
[dir="rtl"] .banner__eyebrow, [dir="rtl"] .approach-grid__eyebrow,
[dir="rtl"] .hero__positioning, [dir="rtl"] .exh-card__booth,
[dir="rtl"] .exh-home-card__booth, [dir="rtl"] .news-item__date,
[dir="rtl"] .news-card__date, [dir="rtl"] .p-card__sub, [dir="rtl"] .tag,
[dir="rtl"] .cert__name, [dir="rtl"] .spec-card__code,
[dir="rtl"] .exh-home-card__venue p, [dir="rtl"] .exh-home-card__city,
[dir="rtl"] .exh-home-card__date, [dir="rtl"] .exh-card__venue,
[dir="rtl"] .exh-card__city, [dir="rtl"] .exh-card__date,
[dir="rtl"] .exh-card__cta, [dir="rtl"] .link-more, [dir="rtl"] .link-arrow,
[dir="rtl"] .step__meta, [dir="rtl"] .why-card__stat-label {
  text-align: right;
}

/* justified Arabic stretches badly without kashida, so copy reads ragged-left */
[dir="rtl"] p { text-align: right; }
[dir="rtl"] .purpose__mission, [dir="rtl"] .purpose__lead,
[dir="rtl"] .closing p, [dir="rtl"] .stories-soon p { text-align: center; }

/* hero copy and section headers */
[dir="rtl"] .hero__positioning { text-align: right; }

/* arrows that point "forward" have to point the other way */
[dir="rtl"] .link-more, [dir="rtl"] .link-arrow, [dir="rtl"] .exh-card__cta,
[dir="rtl"] .btn--arrow, [dir="rtl"] .step__link {
  direction: rtl;
}
[dir="rtl"] .link-more svg, [dir="rtl"] .link-arrow svg,
[dir="rtl"] .exh-card__cta svg, [dir="rtl"] .btn svg,
[dir="rtl"] .spec-card__pdf svg {
  transform: scaleX(-1);
}

/* the brand pattern sits in a corner: mirror it with the page */
[dir="rtl"] .cta-strip::before, [dir="rtl"] .footer::before,
[dir="rtl"] .green-block::before, [dir="rtl"] .sustain::before,
[dir="rtl"] .banner::after {
  transform: scaleX(-1);
}

/* logo marquee keeps rolling away from the reader's starting edge */
[dir="rtl"] .partners-marquee__track { animation-direction: reverse; }

/* numbers, codes, dimensions and e-mail stay left-to-right inside Arabic text */
[dir="rtl"] .spec-card__table dd:not(.is-accent), [dir="rtl"] .spec-card__code,
[dir="rtl"] .why-card__stat-value, [dir="rtl"] .step__num,
[dir="rtl"] .contact-line a[href^="tel"], [dir="rtl"] .contact-line a[href^="mailto"],
[dir="rtl"] .footer a[href^="mailto"], [dir="rtl"] .footer a[href^="tel"] {
  direction: ltr;
  unicode-bidi: embed;
}
/* the value column stays flush to the far side of the row, as in English,
   but a worded value (the closure type) keeps Arabic direction */
[dir="rtl"] .spec-card__table dd { text-align: left; }
[dir="rtl"] .spec-card__table dd.is-accent { direction: rtl; unicode-bidi: isolate; }

/* form fields follow the reading direction */
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; }
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"] { text-align: left; direction: ltr; }