/* ==========================================================================
   O & A Trading — Arabic (RTL) overrides for Design 3 (video-claude)
   Loaded after style.css. Latin fonts stay first so the brand, emails and
   digits keep the English look; Arabic falls through to Noto Kufi Arabic
   (display) / IBM Plex Sans Arabic (body).
   ========================================================================== */
:root {
  --display: "Oswald", "Noto Kufi Arabic", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html[dir="rtl"] body { line-height: 1.8; }

/* Arabic is cursive: tracking breaks the joins. */
html[dir="rtl"] *, html[dir="rtl"] *::before, html[dir="rtl"] *::after { letter-spacing: 0 !important; }

/* Taller lines for Arabic display type */
.h2 { line-height: 1.4; }
.hero__title { line-height: 1.38; font-size: clamp(2.3rem, 8.6vw, 6.2rem); }
.hero__title .line { padding-top: .08em; margin-top: -.08em; padding-bottom: .2em; margin-bottom: -.2em; }
.tile__name { line-height: 1.45; }
.step__title, .leader__name, .facts dd { line-height: 1.4; }
.band__text { line-height: 1.5; }
.hero__lede, .about__lede { line-height: 1.85; }

/* Skip link */
.skip-link { left: auto; right: 12px; }

/* Header: brand at the start (right), switch + menu toggle at the end (left) */
.site-header__inner { justify-content: flex-start; }
.brand { margin-inline-end: auto; }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px;
  border: 1.5px solid rgba(238, 240, 230, .35); border-radius: 999px; flex: none; white-space: nowrap;
  font-family: "Inter", system-ui, -apple-system, Arial, sans-serif; font-size: .85rem; font-weight: 600;
  text-decoration: none; color: var(--text); order: 1;
}
.lang-switch:hover { border-color: var(--citrus); color: var(--citrus); }
.site-nav__list a:not(.btn)::after { transform-origin: right; }
@media (max-width: 959px) {
  .site-header__inner { gap: 12px; }
  .lang-switch { order: 0; padding: 0 11px; min-height: 36px; font-size: .8rem; }
  .menu-toggle { order: 1; }
  .js .menu-toggle { padding: 0 12px 0 4px; margin-right: 0; margin-left: -4px; gap: 12px; font-family: "IBM Plex Sans Arabic", var(--body); }
  .js .menu-toggle { flex: none; }
  .menu-toggle__bars { flex: none; }
  .menu-toggle__label { flex: none; white-space: nowrap; }
}
@media (min-width: 960px) {
  .lang-switch { order: 2; }
}

/* Hero: darken the right side where the copy now sits */
.hero__shade {
  background:
    linear-gradient(180deg, rgba(6, 26, 16, .62) 0%, rgba(6, 26, 16, .18) 28%, rgba(6, 26, 16, .38) 55%, rgba(6, 26, 16, .94) 100%),
    linear-gradient(270deg, rgba(6, 26, 16, .72) 0%, rgba(6, 26, 16, .18) 70%);
}

/* Facts: separators sit on the right of items 2 and 3 */
@media (min-width: 720px) {
  .facts__item { border-left: 0; border-right: 1px solid var(--rule); }
  .facts__item:first-child { border-right: 0; padding-left: 28px; padding-right: 0; }
}

/* Flow arrow points left (reading direction); on phones it is rotated to point down */
@media (min-width: 560px) {
  .flow__arrow svg { transform: scaleX(-1); }
}

/* Decorative corner mirrors to bottom-left */
.about__media::after {
  right: auto; left: -14px;
  border-right: 0; border-left: 2px solid var(--kiwi);
  border-radius: 0 0 0 18px;
}
@media (max-width: 559px) {
  .about__media::after { right: auto; left: -8px; }
}

/* Marquee runs left-to-right for Arabic reading */
@keyframes marquee-rtl { to { transform: translateX(50%); } }
.marquee__track { animation-name: marquee-rtl !important; }

/* Process progress fills from the right */
.process__bar { transform-origin: right; }

/* LTR islands: phones, emails, Latin company names */
.card__value[dir="ltr"], .emails a[dir="ltr"] { unicode-bidi: isolate; }
.card__value[dir="ltr"] { justify-content: flex-end; }

/* ---- Arabic micro-labels need ~14px to read like 12.5px Latin ---- */
[dir="rtl"] .facts dt, [dir="rtl"] .scroll-cue, [dir="rtl"] .parent__label, [dir="rtl"] .video-toggle__label { font-size: max(.875rem, 14px); }

/* reduced motion must also beat the !important RTL marquee rule above */
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none !important; } }