/**
 * PIXIMIXI — right-to-left corrections.
 *
 * WordPress loads this file automatically, with no enqueue call, whenever the
 * active locale is right-to-left: `locale_stylesheet()` runs on `wp_head` and
 * looks for `rtl.css` in the theme root. That is why this file sits here rather
 * than in `assets/css/`.
 *
 * It is deliberately short. The theme's layout is written with CSS logical
 * properties throughout — `margin-inline-start`, `inset-inline-end`,
 * `padding-block`, `border-inline-start`, `text-align: start` — so the whole
 * page mirrors on its own when the document direction flips. What remains here
 * is only the handful of things a logical property cannot express: physical
 * transforms, gradient angles, shadow offsets, and third-party markup whose
 * classes are named after a physical side.
 *
 * @package PIXIMIXI
 */

/* --------------------------------------------------------------------------
   Gradients

   `115deg` sweeps from the lower-left to the upper-right. Mirrored, the brand
   gradient should sweep the other way so PIXI's red still sits at the start of
   the line of text and MIXI's yellow at the end — the handover has to travel
   in the direction the sentence is read.
   -------------------------------------------------------------------------- */

:root {
	--cta-gradient: linear-gradient(245deg, #dc2a21 0%, #ff3b30 45%, #e0a100 100%);
	--warm-gradient: linear-gradient(245deg, #ff4d4d 0%, #ff9671 50%, #ffd93d 100%);
	--pixi-glow: linear-gradient(210deg, rgba(255, 59, 48, 0.1) 0%, rgba(255, 150, 113, 0.1) 100%);
	--mixi-glow: linear-gradient(210deg, rgba(255, 217, 61, 0.2) 0%, rgba(255, 241, 168, 0.28) 100%);
}

/* The wordmark is deliberately NOT flipped.
 *
 * Everything else here mirrors because it travels with the text. The wordmark
 * does not: it is `dir="ltr"` isolated, so the letters always read P-I-X-I-M-I-
 * X-I from left to right in both languages. Reversing its gradient therefore
 * puts the yellow on PIXI and the red on MIXI — contradicting the two
 * characters standing a few centimetres away, who are red and yellow
 * respectively. The brand's whole arithmetic inverts.
 *
 * Flipping this was the first thing written in this file and it was wrong; the
 * rule is kept as a comment so it does not get "fixed" back in.
 */

.pm-impact {
	background-image: linear-gradient(210deg, rgba(255, 217, 61, 0.35) 0%, rgba(255, 241, 168, 0.5) 100%);
}

/* --------------------------------------------------------------------------
   Radial atmosphere

   The mesh is positioned by percentage from the left edge, which a direction
   change does not touch. Swapping the stops keeps the warmer corner nearest
   the start of the text.
   -------------------------------------------------------------------------- */

.pm-hero,
.pm-page-header {
	background-image:
		radial-gradient(at 90% 14%, rgba(255, 59, 48, 0.1) 0, transparent 48%),
		radial-gradient(at 12% 12%, rgba(255, 217, 61, 0.16) 0, transparent 46%),
		radial-gradient(at 20% 86%, rgba(255, 77, 77, 0.08) 0, transparent 48%),
		radial-gradient(at 84% 88%, rgba(255, 241, 168, 0.3) 0, transparent 50%);
}

/* --------------------------------------------------------------------------
   Mirrored figures and icons

   The handover scene reverses on its own, because it is a flex row — that puts
   PIXI on the right, which is correct. But each figure must also be mirrored
   so the arm holding the toy out still points inward, at the other character,
   rather than off the edge of the card. `.pm-icon-directional` in `style.css`
   does that, and applies to arrows for the same reason.
   -------------------------------------------------------------------------- */

/* The `+`/`−` marker on an FAQ row sits at the inline end already; only the
   chevron in the navigation needs its rotation corrected. */
.pm-submenu-toggle svg {
	transform: scaleX(-1);
}

.pm-open > a > .pm-submenu-toggle svg,
.pm-open > .pm-submenu-toggle svg {
	transform: scaleX(-1) rotate(180deg);
}

/* --------------------------------------------------------------------------
   Shadows

   A drop shadow's offset is physical. The drawer slides in from the left in
   RTL, so its shadow has to fall to the right of the panel instead.
   -------------------------------------------------------------------------- */

.pm-drawer {
	box-shadow: 4px 0 12px -4px rgba(32, 32, 32, 0.09), 24px 0 48px -20px rgba(32, 32, 32, 0.18);
}

/* --------------------------------------------------------------------------
   Editor and core markup named after a physical side

   These classes come from WordPress itself, so their names cannot be made
   logical. They are corrected here rather than in `style.css` so the LTR rule
   stays readable.
   -------------------------------------------------------------------------- */

.wp-block-image.alignleft,
.wp-block-embed.alignleft {
	float: right;
	margin-inline: 1.5rem 0;
}

.wp-block-image.alignright,
.wp-block-embed.alignright {
	float: left;
	margin-inline: 0 1.5rem;
}

.wp-block-pullquote {
	text-align: center;
}

/* --------------------------------------------------------------------------
   Numerals

   Latin digits inside Persian text are isolated so bidi cannot reorder them —
   a version number, a toy code, a date range. Without this, `#024` renders as
   `024#` and a range like `18–36` can invert.
   -------------------------------------------------------------------------- */

.tabular,
time,
.pm-journey__code,
.pm-fact__stat,
.pm-impact__number,
.pm-404__code {
	unicode-bidi: isolate;
}