/* ==========================================================================
   STM Legal — RTL overrides
   --------------------------------------------------------------------------
   main.css is written with logical properties (inline-start / inline-end /
   margin-inline), so it already flips for Arabic and Urdu without help. This
   file only carries the handful of cases logical properties cannot express:
   gradient directions, transforms, and background-position on custom arrows.
   ========================================================================== */

.stm-dir-rtl {
	--stm-grad-dir: left;
}

/* Section separator gradient runs the other way. */
.stm-dir-rtl .stm-section + .stm-section::before {
	background: linear-gradient(
		to left,
		transparent,
		var(--stm-line) 22%,
		var(--stm-line) 78%,
		transparent
	);
}

/* The hero's vertical stroke sits on the reading-start edge. */
.stm-dir-rtl .stm-hero::after,
.stm-dir-rtl .stm-pagehead::after {
	inset-inline-start: max(2.5rem, calc((100vw - var(--stm-container)) / 2));
}

/* Submenu opens toward the reading direction. */
.stm-dir-rtl .stm-menu__sub {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* Drawer slides in from the reading-start side. */
.stm-dir-rtl .stm-drawer {
	grid-template-columns: min(88%, 24rem) 1fr;
}

.stm-dir-rtl .stm-drawer__scrim {
	order: 2;
}

.stm-dir-rtl .stm-drawer__panel {
	order: 1;
	border-inline-start: 0;
	border-inline-end: 1px solid var(--stm-line);
}

/* Language panel aligns to the reading-end edge. */
.stm-dir-rtl .stm-lang__panel {
	inset-inline-end: 0;
	inset-inline-start: auto;
}

/* The CTA band's diagonal wash follows the reading direction. */
.stm-dir-rtl .stm-cta {
	background: linear-gradient(
		225deg,
		color-mix(in srgb, var(--stm-teal) 22%, var(--stm-navy)) 0%,
		var(--stm-navy) 62%
	);
}

/* Latin fragments (numbers, e-mail, "STM Legal") inside Arabic sentences. */
.stm-dir-rtl .stm-logo__img {
	transform: none;
}

/* Numerals and telephone links stay left-to-right. */
.stm-dir-rtl input[type="tel"],
.stm-dir-rtl input[type="email"],
.stm-dir-rtl input[type="url"] {
	direction: ltr;
	text-align: right;
}

/* Prose lists indent from the correct side (padding-inline handles it, but
   nested Gutenberg lists sometimes ship an explicit padding-left). */
.stm-dir-rtl .stm-prose ul,
.stm-dir-rtl .stm-prose ol {
	padding-left: 0;
	padding-right: 1.4rem;
}