/**
 * RTL corrections.
 *
 * Loaded last, and only on RTL locales, so it can override the card, chrome,
 * skin and magazine sheets. Everything else in the theme uses logical
 * properties and needs no mirroring.
 */

/* ---------------------------------------------------------------------------
 * Letter-spacing.
 *
 * Arabic and Urdu are cursive: letters join to their neighbours. Adding
 * letter-spacing forces gaps between them, so words come apart into loose
 * glyphs. There is no correct positive value here — the only fix is to
 * remove it. Latin strings inside an RTL page (a version number, a brand)
 * lose their tracking too, which is a fair trade for legible Urdu.
 * ------------------------------------------------------------------------ */
/*
 * The list below was written by hand and was always going to miss some.
 * It did: sidebar links, footer links, table headings and prose buttons
 * all still carry tracking between 0.03em and 0.16em, and every one of
 * them holds Arabic on this site.
 *
 * So the reset is universal instead. There is no correct positive
 * letter-spacing for a cursive script — the letters are supposed to join,
 * and any gap at all breaks the join. A blanket rule cannot be outgrown
 * the way a list can.
 *
 * Latin text sitting inside an RTL page loses its tracking too. That is a
 * fair trade for Arabic that reads properly, and it is why this file is
 * only ever loaded on an RTL locale.
 */
[dir="rtl"] body,
[dir="rtl"] body * {
	letter-spacing: normal !important;
}

/* Kept as its own rule so the intent stays visible: these are the elements
   the theme tracks most heavily, and they are the ones that looked worst. */
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .wpx-badge,
[dir="rtl"] .wpx-badges,
[dir="rtl"] .wpx-section-title,
[dir="rtl"] .wpx-widget__title,
[dir="rtl"] .wpx-card__title,
[dir="rtl"] .wpx-acard__title,
[dir="rtl"] .wpx-game__title,
[dir="rtl"] .wpx-page-title,
[dir="rtl"] .wpx-button,
[dir="rtl"] .wpx-tag,
[dir="rtl"] .wpx-chip,
[dir="rtl"] .wpx-menu a,
[dir="rtl"] .wpx-nav a,
[dir="rtl"] .wpx-specs dt,
[dir="rtl"] .wpx-breadcrumbs,
[dir="rtl"] .wpx-postlist__meta,
[dir="rtl"] .wpx-article-meta,
[dir="rtl"] .wpx-hero__badge,
[dir="rtl"] .wpx-slide__badge {
	letter-spacing: normal;
}

/* ---------------------------------------------------------------------------
 * Uppercasing.
 *
 * Arabic and Urdu have no case, so text-transform: uppercase is a no-op on
 * the script itself — but it still shouts at any Latin text mixed in, and the
 * extra tracking that usually goes with it is already gone above. Small caps
 * labels read better left alone.
 * ------------------------------------------------------------------------ */
[dir="rtl"] .wpx-badge,
[dir="rtl"] .wpx-section-title,
[dir="rtl"] .wpx-widget__title,
[dir="rtl"] .wpx-hero__badge,
[dir="rtl"] .wpx-specs dt {
	text-transform: none;
}

/* ---------------------------------------------------------------------------
 * Direction-dependent motion and decoration.
 *
 * These reference a physical side on purpose, so they need mirroring.
 * ------------------------------------------------------------------------ */
[dir="rtl"] .wpx-download:hover {
	transform: translateX(-3px);
}

[dir="rtl"] .wpx-postnav__title,
[dir="rtl"] .wpx-card__title,
[dir="rtl"] .wpx-acard__title {
	text-align: right;
}

/* The sweep on buttons travels with the reading direction. */
[dir="rtl"] .wpx-button::after {
	right: -50%;
	left: auto;
}

[dir="rtl"] .wpx-button:hover::after {
	right: 120%;
	left: auto;
}

/* ---------------------------------------------------------------------------
 * Numerals and inline Latin.
 *
 * Version numbers, file sizes and dates are frequently Latin inside an
 * otherwise RTL line. Isolating them stops the bidi algorithm from dragging
 * trailing punctuation to the wrong end.
 * ------------------------------------------------------------------------ */
[dir="rtl"] .wpx-specs dd,
[dir="rtl"] .wpx-article-meta time,
[dir="rtl"] .wpx-postlist__meta {
	unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
 * Chevrons.
 *
 * The little arrow beside a sidebar link, a footer link and a text post-list
 * item is drawn in CSS: a square with only its top and right borders, turned
 * 45 degrees. That points right.
 *
 * Its position is logical — inset-inline-start — so on an RTL page it
 * correctly moves to the right of the text. The rotation is not. The arrow
 * kept pointing right, which is away from the text it belongs to, and it
 * landed on top of the first letter.
 *
 * Turning it to 225 degrees points it left, back toward the text, which is
 * the same relationship it has on an LTR page.
 * ------------------------------------------------------------------------ */
[dir="rtl"] .wpx-sidebar .wpx-widget li a::before,
[dir="rtl"] .wpx-footer .wpx-widget li a::before,
[dir="rtl"] .wpx-postlist--text .wpx-postlist__link::before {
	transform: rotate(225deg);
}

/* The hover nudge moves the arrow a little further along the way it points,
   so it has to travel the other way too. */
[dir="rtl"] .wpx-footer .wpx-widget li a:hover::before,
[dir="rtl"] .wpx-postlist--text .wpx-postlist__link:hover::before {
	transform: rotate(225deg) translate(2px, -2px);
}