/* ════════════════════════════════════════════════════════════════════════════
   Stackmatchup — right-to-left layer (Arabic)
   ────────────────────────────────────────────────────────────────────────────
   Loaded ON TOP of site.css, only when is_rtl(). site.css is not forked: this
   file carries just the declarations that encode a reading direction, so every
   future change to the LTR sheet applies to Arabic automatically.

   Deliberately NOT flipped:
     · The VS scoreboard bars and score meters. They are a data visualisation —
       "winner on the left" is read off the layout, and mirroring them would
       silently swap which tool the reader thinks won.
     · Numerals, scores and score bars. Numbers stay LTR inside RTL text; the
       browser's bidi algorithm already handles this correctly.
     · Logos and brand marks.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Skip link ───────────────────────────────────────────────────────────── */
.sm-skip-link { left: auto; right: -9999px; }
.sm-skip-link:focus { left: auto; right: 0; }

/* ── Ticker ──────────────────────────────────────────────────────────────────
   The inline-flex track lays its items out right-to-left under dir=rtl, so the
   marquee has to travel the other way or it scrolls into empty space. */
@keyframes smTicker {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}

/* ── Header / nav ────────────────────────────────────────────────────────── */
.sm-nav { margin-left: 0; margin-right: auto; }
.sm-header-actions { margin-left: 0; margin-right: auto; }
.sm-nav-list .sub-menu { left: auto; right: -14px; }

/* Dark-mode toggle: knob starts on the right and travels left. */
.sm-switch-knob { left: auto; right: 3px; }
html.sm-mode-dark .sm-switch-knob { transform: translateX(-28px); }

/* ── Search ──────────────────────────────────────────────────────────────── */
.sm-search-input { padding: 12px 15px 12px 44px; }
.sm-search-clear { right: auto; left: 38px; }

/* ── Scoreboard cards ────────────────────────────────────────────────────── */
.sm-sb-badge  { right: auto; left: 16px; }
.sm-sb-side--b { text-align: left; }
.sm-sb-side--b .sm-sb-bar span { margin-left: 0; margin-right: auto; }

/* ── Article ─────────────────────────────────────────────────────────────── */
.sm-share-cluster { margin-left: 0; margin-right: auto; }
.sm-sharebar .btns { margin-left: 0; margin-right: auto; }
.sm-content blockquote {
	border-left: 0;
	border-right: 3px solid var(--accent);
	border-radius: 14px 0 0 14px;
}
.sm-content table thead th,
.sm-content table tr:first-child th { text-align: right; }
.sm-pn-card.next { text-align: left; }

/* ── Cards / badges ──────────────────────────────────────────────────────── */
.sm-gcard-badge { left: auto; right: 10px; }
.sm-list-badge  { left: auto; right: 8px; }
.sm-cat-stats b { margin-right: 0; margin-left: 4px; }
.sm-page-cta .sm-btn { margin-left: 0; margin-right: auto; }

/* ── Plugin surfaces rendered inside theme pages ─────────────────────────── */
body .smt-r-score { text-align: left; }
body .smt-r-menu button { text-align: right; }
body .smt-empty { text-align: right; }
body .smt-r-row:hover { transform: translateX(-2px); }
body .smt-r-alink::after { content: " \2190"; }   /* ← instead of → */
body .smt-r-engaged .smt-roll-hint { margin-right: 0; margin-left: -5px; }

/* ── Language switcher ───────────────────────────────────────────────────── */
.sm-lang-menu { right: auto; left: 0; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	/* Drawer slides in from the right edge. */
	.sm-nav {
		left: auto;
		right: 0;
		transform: translateX(100%);
		margin-right: 0;
	}
	.sm-nav.open { transform: translateX(0); }
	.sm-header-actions { margin-left: 0; margin-right: auto; }
	.sm-share-cluster { margin-right: 0; }
}

@media (max-width: 700px) {
	.sm-share-cluster { margin-left: 0; margin-right: 0; }
}

/* ── Arabic typography ───────────────────────────────────────────────────────
   Space Grotesk and IBM Plex Sans have no Arabic coverage, so inc/i18n.php
   loads IBM Plex Sans Arabic and the custom properties are repointed here. The
   mono family keeps Latin fallbacks because it renders scores and dates.

   Arabic script has a taller x-height and no capitals, so it reads small at the
   Latin sizes: the base line-height is opened up and the display face is set a
   touch larger. */
.sm-lang-ar {
	--sans: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	--disp: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	--mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
	line-height: 1.85;
}
.sm-lang-ar h1,
.sm-lang-ar h2,
.sm-lang-ar h3,
.sm-lang-ar .sm-article-title,
.sm-lang-ar .sm-hero-title { line-height: 1.45; letter-spacing: 0; }

/* Letter-spacing and uppercasing are meaningless in Arabic — it has no letter
   case, and tracking breaks the cursive joins between glyphs. */
.sm-lang-ar .sm-kicker,
.sm-lang-ar .sm-cat-stats,
.sm-lang-ar .sm-scoreboard-kicker,
.sm-lang-ar .sm-widget-title,
.sm-lang-ar .sm-footer-kicker,
.sm-lang-ar .sm-author-kicker,
.sm-lang-ar .sm-pn-kicker,
.sm-lang-ar .sm-share-label,
.sm-lang-ar .sm-popular-label,
.sm-lang-ar .sm-list-meta,
.sm-lang-ar .sm-gcard-badge,
.sm-lang-ar .sm-list-badge,
.sm-lang-ar .sm-sb-badge,
.sm-lang-ar .sm-verdict-label,
.sm-lang-ar .sm-30s-chip,
.sm-lang-ar .sm-verdict-final-chip {
	letter-spacing: 0;
	text-transform: none;
}

/* Scores, dates and rank numbers are Latin-numeral runs inside RTL text.
   Isolating them stops the bidi algorithm from dragging adjacent punctuation
   (the "/" in 8.5/10, the "#" in #3) to the wrong end of the number. */
.sm-lang-ar .sm-verdict-score,
.sm-lang-ar .sm-tool-rank-score,
.sm-lang-ar .sm-score-chip,
.sm-lang-ar .sm-sb-score,
.sm-lang-ar .sm-vs-score,
.sm-lang-ar .sm-bh-score,
.sm-lang-ar .sm-bh-snum,
.sm-lang-ar .sm-bh-rank,
.sm-lang-ar .sm-read-time,
.sm-lang-ar .sm-card-date,
.sm-lang-ar .sm-tool-rank-num,
.sm-lang-ar .sm-404-code,
.sm-lang-ar .sm-tool-scorebox .v,
.sm-lang-ar .sm-subscore .n {
	unicode-bidi: isolate;
	direction: ltr;
}

/* ── The VS scoreboard stays LTR ─────────────────────────────────────────────
   Winner-left / runner-up-right is load-bearing: the whole card is read as a
   scoreboard, and the winner is also colour-coded to the left-hand bar. Flipping
   it would move the winner under the runner-up's colour. The names and blurbs
   inside each side still read right-to-left, which is what matters for the
   words; only the two-column arrangement is pinned. */
.sm-lang-ar .sm-article-vs-grid,
.sm-lang-ar .sm-vs-grid,
.sm-lang-ar .sm-sb-vs,
.sm-lang-ar .sm-bh-row,
.sm-lang-ar .sm-bh-duel { direction: ltr; }

.sm-lang-ar .sm-article-vs-grid .side,
.sm-lang-ar .sm-vs-grid .sm-vs-side,
.sm-lang-ar .sm-sb-vs .sm-sb-side,
.sm-lang-ar .sm-bh-row .sm-bh-brand,
.sm-lang-ar .sm-bh-duel .sm-bh-side { direction: rtl; }