/* Right-to-left layout for Arabic pages. Loaded only when the page language is RTL
   (<html dir="rtl">, set by WordPress from the Polylang language's locale).
   Mirrors every direction-dependent rule in site.css/theme.css; the flex/grid layouts
   mirror on their own. */

/* Arabic typography: Noto Sans Arabic first, the Latin design fonts for Latin text.
   Arabic letters must not be letter-spaced (it breaks the joins). */
[dir="rtl"] .lx{
  --head:"Noto Sans Arabic","Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --body:"Noto Sans Arabic","Noto Sans","Segoe UI",system-ui,sans-serif;
  line-height:1.75;
}
[dir="rtl"] .lx *,[dir="rtl"] .lx *::before{letter-spacing:0 !important}
[dir="rtl"] .lx h1,[dir="rtl"] .lx h2,[dir="rtl"] .lx h3{line-height:1.3}

/* Arrows point the other way. */
[dir="rtl"] .btn svg,[dir="rtl"] .lnk svg:not(.chev),[dir="rtl"] .go,[dir="rtl"] .go2 svg,
[dir="rtl"] .mall span,[dir="rtl"] .mnav li a span,[dir="rtl"] .intro-cta svg{transform:scaleX(-1)}
[dir="rtl"] .mall span,[dir="rtl"] .mnav li a span{display:inline-block}
[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .rel:hover .go2 svg{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] a.rail-item .go{margin-left:0;margin-right:auto;transform:scaleX(-1) translateX(-6px)}
[dir="rtl"] a.rail-item:hover .go,[dir="rtl"] a.rail-item:focus-visible .go{transform:scaleX(-1)}
[dir="rtl"] .nav .mega a.mlink:hover,[dir="rtl"] .nav .mega a.mlink:focus-visible{transform:translateX(-3px)}

/* Header, progress, floating actions. */
[dir="rtl"] .skip{left:auto;right:16px}
[dir="rtl"] .nav .btn{margin-left:0;margin-right:14px}
[dir="rtl"] .prog,[dir="rtl"] .fbtn .bar{transform-origin:100% 50%}
[dir="rtl"] .fab,[dir="rtl"] .top-btn{right:auto;left:20px}
[dir="rtl"] .mnav .sub{padding:4px 14px 8px 0;border-left:0;border-right:2px solid rgba(255,255,255,.12)}

/* Heroes: the dark side of the overlay follows the text to the right. */
[dir="rtl"] .hero::before{background:linear-gradient(270deg,rgba(7,18,38,.92) 0%,rgba(7,18,38,.78) 36%,rgba(7,18,38,.25) 66%,rgba(7,18,38,.05) 100%),linear-gradient(0deg,rgba(7,18,38,.9) 0%,rgba(7,18,38,0) 42%),linear-gradient(180deg,rgba(7,18,38,.55) 0%,rgba(7,18,38,0) 22%)}
[dir="rtl"] .ihero::before{background:linear-gradient(270deg,rgba(7,18,38,.93) 0%,rgba(7,18,38,.78) 40%,rgba(7,18,38,.3) 75%,rgba(7,18,38,.12) 100%),linear-gradient(0deg,rgba(7,18,38,.85) 0%,rgba(7,18,38,0) 45%),linear-gradient(180deg,rgba(7,18,38,.55) 0%,rgba(7,18,38,0) 25%)}
[dir="rtl"] .ihero.plain::before{background:none}
[dir="rtl"] .about::before{background:linear-gradient(90deg,rgba(7,18,38,.96) 0%,rgba(7,18,38,.9) 46%,rgba(7,18,38,.35) 70%,rgba(7,18,38,.05) 100%)}
[dir="rtl"] .credit{right:auto;left:var(--g)}
[dir="rtl"] .ihero .mark{right:auto;left:max(var(--g),calc((100vw - var(--max)) / 2 + var(--g)))}
[dir="rtl"] .crumbs li + li::before{margin-right:0;margin-left:10px}

/* Homepage. */
[dir="rtl"] .rail-item + .rail-item::before{left:auto;right:0}
[dir="rtl"] .intro-media figcaption{right:auto;left:20px}
[dir="rtl"] .full ul,[dir="rtl"] .full ol{padding-left:0;padding-right:22px}
[dir="rtl"] .full li{padding-left:0;padding-right:4px}
[dir="rtl"] .tile-solid .tile-mark{right:auto;left:-36px}

/* Inner pages. */
[dir="rtl"] .prose ul li{padding-left:0;padding-right:30px}
[dir="rtl"] .prose ul li::before{left:auto;right:4px}
[dir="rtl"] .prose ol li{padding-left:0;padding-right:44px}
[dir="rtl"] .prose ol li::before{left:auto;right:0}

/* Desktop-only full-bleed and divider rules (the ≤1100px rules are symmetric already). */
@media (min-width: 1101px){
  [dir="rtl"] .intro-media{margin:0 calc(-1 * var(--edge)) 0 0;border-radius:12px 0 0 12px}
  [dir="rtl"] .ct-side-in{padding:8px var(--edge) clamp(56px,6vw,88px) clamp(28px,4vw,64px)}
  [dir="rtl"] .ct-form{padding:clamp(56px,6.5vw,96px) clamp(32px,5vw,88px) clamp(56px,6.5vw,96px) var(--edge)}
  [dir="rtl"] .kitem + .kitem{padding-left:0;border-left:0;padding-right:24px;border-right:1px solid #D2DAE3}
}
@media (max-width: 640px){
  [dir="rtl"] .fab{left:16px;right:auto}
  [dir="rtl"] .credit{left:16px;right:16px;text-align:left}
  [dir="rtl"] .ihero .mark{left:-30px}
}

/* Language switcher reads the same in both directions. */
[dir="rtl"] .lang-sw{direction:rtl}