/* Besere Oil — Arabic edition overrides (loaded only by ar/ pages).
   Fonts, tracking and the handful of direction-sensitive details the
   shared sheets express in physical (LTR) terms. */

:root {
  --font-heading: "Noto Sans Arabic", "Archivo", system-ui, sans-serif;
  --font-body: "Noto Sans Arabic", "Archivo", system-ui, sans-serif;
  --font-heading-weight: 700;
}

/* Arabic script is never letterspaced */
h1, h2, h3, h4, h5, h6, p, a, span, button, strong,
.tag, .btn, .lang-btn, .ops-num, .ops-title, .ops-head,
.sf-copy, .sf-legal a, .sf-col a, .p-n, .p-t, .ptab,
.mnav-links a, .mnav-foot, .ticker-track span {
  letter-spacing: 0 !important;
}

/* Arabic wants a little more line height */
body { line-height: 1.7; }
h1, h2, h3, h4, h5, h6 { line-height: 1.3; }

/* direction-sensitive pieces */
[dir="rtl"] .hero-rule, [dir="rtl"] .drawx { transform-origin: right; }
[dir="rtl"] .ops-left {
  border-right: none;
  border-left: calc(var(--space-1) / 2) solid var(--color-divider);
}
[dir="rtl"] .ops-detail { left: 0; right: var(--ops-rail); }
[dir="rtl"] .ops-prog { margin-left: 0; margin-right: 1.1rem; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .type-caret { margin-left: 0; margin-right: 0.15ch; }

/* keep figures/labels that carry Latin codes readable */
.ops-num, .ops-count, .p-n { font-family: "Archivo", var(--font-body); }

/* tables read from the right */
[dir="rtl"] .table th { text-align: right; }

/* the ticker marquee runs the other way */
@keyframes tickerRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
[dir="rtl"] .ticker-track { animation-name: tickerRtl; }

/* list rows and tabs align with the reading direction */
[dir="rtl"] .ops-row, [dir="rtl"] .ptab { text-align: right; }
@media (max-width: 767px) {
  [dir="rtl"] .ops-detail { padding-left: 0; padding-right: calc(3.4rem + var(--space-3)); }
}

/* brand logo stays at the reading-start edge below the desktop breakpoint;
   at desktop widths the bar is space-between, so no auto margin at all
   (an auto margin there squeezes every link into one corner) */
@media (max-width: 899px) {
  [dir="rtl"] .m-nav > a:first-child { margin-right: 0 !important; margin-left: auto; }
}
@media (min-width: 900px) {
  [dir="rtl"] .m-nav > a:first-child { margin-right: 0 !important; margin-left: 0 !important; }
}

/* purpose tabs: dividers and the active bar mirror */
[dir="rtl"] .ptab + .ptab { border-left: 0; border-right: calc(var(--space-1) / 4) solid var(--color-divider); }
[dir="rtl"] .ptab::after { transform-origin: right; }

/* page-entrance wipes come from the reading-start side */
@keyframes pageInRtl { from { transform: translateX(-100%); } to { transform: none; } }
html[dir="rtl"] [data-screen] { animation-name: pageInRtl !important; }
html[dir="rtl"].no-intro [data-screen="home"] { animation-name: pageInRtl !important; }
html[dir="rtl"].intro .hero { animation-name: pageInRtl !important; }
@media (prefers-reduced-motion: reduce) {
  html[dir="rtl"] [data-screen], html[dir="rtl"].intro .hero { animation: none !important; }
}