/* ============================================================
   RIVALS MEDIA — Arabic / RTL overrides
   Loaded ONLY on the Arabic (-ar) pages, after style.css.
   ============================================================ */

/* ---------- Arabic brand font: DIN Next LT Arabic ---------- */
@font-face{
  font-family:'DIN Next LT Arabic';
  src:url('../fonts/subset-DINNextLTArabic-Regular.woff2') format('woff2'),
      url('../fonts/subset-DINNextLTArabic-Regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DIN Next LT Arabic';
  src:url('../fonts/subset-DINNextLTArabic-Medium.woff2') format('woff2'),
      url('../fonts/subset-DINNextLTArabic-Medium.woff') format('woff');
  font-weight:500;font-style:normal;font-display:swap;
}
/* map heavier weights to the Medium file so bold Arabic still uses DIN Next */
@font-face{
  font-family:'DIN Next LT Arabic';
  src:url('../fonts/subset-DINNextLTArabic-Medium.woff2') format('woff2'),
      url('../fonts/subset-DINNextLTArabic-Medium.woff') format('woff');
  font-weight:600 700;font-style:normal;font-display:swap;
}

/* ---------- apply DIN Next EVERYWHERE ----------
   Redefining the font tokens means every rule that uses
   var(--font-head) / var(--font-body) — including .hero-badge .t,
   inline font-family:var(--font-head), etc. — inherits the Arabic font. */
html[dir="rtl"]{
  --font-head:"DIN Next LT Arabic","Segoe UI",Tahoma,sans-serif;
  --font-body:"DIN Next LT Arabic","Segoe UI",Tahoma,sans-serif;
}
html[dir="rtl"] body{font-family:var(--font-body)}

/* ---------- directional (mirrored) adjustments ---------- */
html[dir="rtl"] .flip{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .arr{transform:translateX(-3px)}
html[dir="rtl"] .hero::before{right:auto;left:-160px}
html[dir="rtl"] .hb1{left:auto;right:-26px}
html[dir="rtl"] .hb2{right:auto;left:-22px}
html[dir="rtl"] .testi-arrow.prev{left:auto;right:-24px}
html[dir="rtl"] .testi-arrow.next{right:auto;left:-24px}

/* keep numerals/latin brand names visually tidy in RTL flow */
html[dir="rtl"] .hero-stats,
html[dir="rtl"] .info-list li,
html[dir="rtl"] .tauthor{text-align:start}

/* mobile side drawer opens from the LEFT in Arabic */
@media(max-width:960px){
  html[dir="rtl"] .nav-links{
    right:auto;left:0;border-left:none;border-right:1px solid var(--line);
    transform:translateX(-105%)}
  html[dir="rtl"] .nav-links.open{transform:none}
}