/* ===== Urdu / RTL layer — loads only on /ur/ pages (dir=rtl lang=ur) ===== */
@font-face{
  font-family:'Nastaliq';
  src:url('/assets/fonts/nastaliq.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}

/* Nastaliq needs generous line-height + a touch more size to breathe */
[dir="rtl"] body{font-family:'Nastaliq','Noto Nastaliq Urdu',serif;line-height:2.0;text-align:right}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] .wm,[dir="rtl"] .lead,[dir="rtl"] .prose{
  font-family:'Nastaliq','Noto Nastaliq Urdu',serif}
[dir="rtl"] h1{line-height:1.75;letter-spacing:0}
[dir="rtl"] h2{line-height:1.9}
[dir="rtl"] h3{line-height:1.85}
[dir="rtl"] .lead{line-height:2.05}
[dir="rtl"] .prose p,[dir="rtl"] .prose li{line-height:2.15;font-size:16.5px}
[dir="rtl"] .prose h2{margin-top:1.6em}
/* keep monospace/label bits in a clean latin face (numbers, chips, code) */
[dir="rtl"] .chip,[dir="rtl"] .badge,[dir="rtl"] .evlog,[dir="rtl"] .mult,[dir="rtl"] .rank,
[dir="rtl"] .score,[dir="rtl"] .crumbs,[dir="rtl"] .artmeta,[dir="rtl"] .flegal,[dir="rtl"] .fgrid h2,
[dir="rtl"] .toc .h,[dir="rtl"] .feats span,[dir="rtl"] .num{font-family:var(--body)}

/* ---- RTL mirrors of hard-coded directional rules ---- */
[dir="rtl"] .prose ul,[dir="rtl"] .prose ol{padding-left:0;padding-right:22px}
[dir="rtl"] .prose ul li.yes:before,[dir="rtl"] .prose ul li.no:before{left:auto;right:-22px}
[dir="rtl"] .op:before{left:auto;right:0}
[dir="rtl"] .op{padding-left:0;padding-right:22px}
[dir="rtl"] .callout{border-left:1px solid var(--line2);border-right:3px solid var(--amber)}
[dir="rtl"] .callout.fake{border-right-color:var(--red)}
[dir="rtl"] .callout.real{border-right-color:var(--teal)}
[dir="rtl"] .toc{border-left:1px solid;border-right:3px solid var(--teal)}
[dir="rtl"] .toc ol{padding-left:0;padding-right:20px}
[dir="rtl"] .step:before{left:auto;right:18px}
[dir="rtl"] .step{padding-left:0;padding-right:64px}
[dir="rtl"] .ptable th,[dir="rtl"] .ptable td{text-align:right}
[dir="rtl"] .media li:before{left:auto;right:0}
[dir="rtl"] .media li{padding-left:0;padding-right:26px}
[dir="rtl"] .evlog .bar .t{margin-left:0;margin-right:8px}
[dir="rtl"] .evlog .vd{text-align:left}
[dir="rtl"] .proof .s{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .proof .s:last-child{border-left:0}
[dir="rtl"] .op-note a{text-underline-offset:3px}
/* verdict box / op layout use flex → dir=rtl flips automatically */
[dir="rtl"] .hero .badge .dot{margin-right:0;margin-left:5px}

/* mobile nav dropdown offset already symmetric (left:0;right:0) — fine */
@media(max-width:820px){
  [dir="rtl"] .step{padding-right:56px}
}