/* Right-to-left overrides.
 *
 * Loaded only on Arabic pages, after main.css.
 *
 * Most of the layout mirrors for free: main.css uses flex and grid with `gap`
 * rather than directional margins, and logical properties where it matters. What
 * is left here is the handful of places that hard-code a physical direction —
 * plus the typeface swap, because Instrument Sans and Source Sans 3 contain no
 * Arabic glyphs and would silently fall back to whatever the device happens to
 * have installed.
 */

:root {
	--mc-font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* --- Typeface ------------------------------------------------------------ */

[dir="rtl"] body,
[dir="rtl"] .mc-prose,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button,
[dir="rtl"] .wp-block-button__link {
	font-family: var(--mc-font-ar);
}

/* Arabic has no italics and no small-caps; both look broken rather than styled. */
[dir="rtl"] em,
[dir="rtl"] i { font-style: normal; font-weight: 600; }

/* Arabic script needs more vertical room than Latin at the same size. */
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
	font-family: var(--mc-font-ar);
	line-height: 1.45;
	letter-spacing: 0;   /* tracking is meaningless in a connected script */
}

/* --- Direction-dependent components -------------------------------------- */

[dir="rtl"] .mc-nav .wp-block-navigation-item__content { border-bottom-color: transparent; }

[dir="rtl"] .mc-sources { padding-left: 0; padding-right: 20px; }
[dir="rtl"] ul.plain,
[dir="rtl"] ol.plain,
[dir="rtl"] .mc-prose ul,
[dir="rtl"] .mc-prose ol { padding-left: 0; padding-right: 1.4rem; }

/* Cards and callouts carry an accent rail on the leading edge — flip it. */
[dir="rtl"] .mc-callout,
[dir="rtl"] .mc-note,
[dir="rtl"] .mc-unverified {
	border-left: 0;
	border-right: 3px solid var(--mc-primary);
}

[dir="rtl"] .mc-table th,
[dir="rtl"] .mc-table td { text-align: right; }

/* Chat widget sits bottom-right in LTR; mirror it. */
[dir="rtl"] #mcc-root { right: auto; left: 20px; }
[dir="rtl"] .mcc-msg--bot { align-self: flex-start; border-radius: 14px 14px 14px 4px; }
[dir="rtl"] .mcc-msg--you { align-self: flex-end;   border-radius: 14px 14px 4px 14px; }

[dir="rtl"] .mc-sticky-cta { direction: rtl; }

/* --- Numbers and prices --------------------------------------------------- */

/*
 * Prices, dates and percentages stay left-to-right inside RTL text. Without
 * this, "£12,750–£14,400" renders with the range reversed and reads as a
 * different number — the one thing on a cost-comparison site that must never
 * happen.
 */
[dir="rtl"] .mc-table td,
[dir="rtl"] .mc-fx,
[dir="rtl"] .price,
[dir="rtl"] time {
	unicode-bidi: plaintext;
}

[dir="rtl"] .mc-fx { direction: ltr; display: inline-block; }

/* --- Language switcher ---------------------------------------------------- */

.mc-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
}
.mc-lang {
	color: inherit;
	text-decoration: none;
	opacity: .78;
	padding: 2px 2px;
	border-bottom: 1.5px solid transparent;
}
.mc-lang:hover { opacity: 1; border-bottom-color: currentColor; }
.mc-lang--on { opacity: 1; font-weight: 600; border-bottom-color: currentColor; }

/* --- Converted-currency annotation --------------------------------------- */

.mc-fx {
	color: var(--mc-muted);
	font-size: 0.86em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* --- Mixed English / Arabic text ------------------------------------------
 *
 * While the site is only partly translated, English strings render inside an
 * RTL document. The browser assumes they are RTL too and moves their trailing
 * punctuation to the front — ".Unsubscribe any time" instead of "Unsubscribe
 * any time." — which reads as broken rather than multilingual.
 *
 * unicode-bidi: plaintext makes each block take its direction from its own
 * first strong character: an Arabic paragraph stays RTL, an English one renders
 * LTR with its punctuation where it belongs. This is what makes a partially
 * translated site readable rather than embarrassing, and it stays correct once
 * everything is translated.
 */

[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] figcaption,
[dir="rtl"] label,
[dir="rtl"] .wp-block-button__link,
[dir="rtl"] .mcc-msg {
	unicode-bidi: plaintext;
}

/* Buttons and nav items are single strings — keep them centred rather than
   jumping edge to edge as the language of each label changes. */
[dir="rtl"] .wp-block-button__link { text-align: center; }