/*
 * Masader — Arabic (RTL). Loaded only on /ar/ pages, after every other theme stylesheet
 * (inc/arabic.php). Flex/grid rows already follow dir="rtl"; this file mirrors what is
 * written with physical sides (left/right, origins, one-sided padding/borders, arrows).
 *
 * Kept left-to-right on purpose: things drawn on real geometry (the map, the plant photo
 * with its unit hotspots, numeric gauges on a 0→max scale) — only their text turns RTL.
 */

/* ==== Type ============================================================================== */

/* Arabic letters must join: no tracking, no faux italics. */
html[dir="rtl"] body,
html[dir="rtl"] body * {
	letter-spacing: 0 !important;
}
html[dir="rtl"] em,
html[dir="rtl"] i,
html[dir="rtl"] cite {
	font-style: normal;
}

/* Amiri needs room above/below the line for its tall letters and dots. */
html[dir="rtl"] body :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
	line-height: 1.32 !important;
	font-weight: 700;
}
html[dir="rtl"] body :is(p, li, dd, dt, label, .elementor-widget-text-editor) {
	line-height: 1.85;
}
/* Small labels / eyebrows / buttons stay in the text face, never the display face. */
html[dir="rtl"] :is(.mx-eyebrow, .elementor-button, .mx-header-cta, .mx-nav__list a) {
	font-family: var(--mx-font-body);
}
html[dir="rtl"] .mx-nav__list a { font-size: 0.95rem; }

/* Codes, numbers, units, e-mails: keep their own left-to-right order. */
html[dir="rtl"] :is(code, kbd, samp, .mx-mono, [class*="__val"], .mxt__purity, .mxt__now, dd) {
	direction: ltr;
	unicode-bidi: isolate;
}
html[dir="rtl"] :is(.mx-dl, .mxe__specs, .mxt__ledger, .mxt__panel) dd { text-align: left; }
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"] {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ==== Arrows ============================================================================= */

/* (Link arrows are drawn and mirrored in style.css.) */
html[dir="rtl"] .elementor .elementor-element.mx-link-arrow .elementor-button {
	background-position: 100% 100%;
}
html[dir="rtl"] :is(.elementor-button-icon, .elementor-icon-list-icon) svg:is([class*="arrow-right"], [class*="arrow-left"], [class*="chevron"], [class*="angle"]) {
	transform: scaleX(-1);
}

/* ==== Header ============================================================================= */

html[dir="rtl"] .mx-brand { transform-origin: right center; }
html[dir="rtl"] .mx-nav { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .mx-nav__line { transform-origin: right center; }
html[dir="rtl"] .mx-burger { margin-left: 0; margin-right: auto; }
@media (max-width: 1024px) {
	html[dir="rtl"]:not(.mx-js) .mx-nav { margin-right: 0; }
}
html[dir="rtl"] .mx-menu-overlay__list a { line-height: 1.4; }

/* ==== Home: hero ========================================================================= */

html[dir="rtl"] .mx-hero-hex {
	right: auto;
	left: calc(var(--mx-container) / 2 - 50vw - 15vw);
}
@media (max-width: 1024px) {
	html[dir="rtl"] .mx-hero-hex { right: auto; left: -30%; }
}

/* ==== Home: how the loop closes (loop.css) =============================================== */

html[dir="rtl"] .elementor .mx-loop .elementor-element.mx-eyebrow .elementor-heading-title::after { transform-origin: right center; }
html[dir="rtl"] .elementor .mx-loop .e-con.mx-scope { padding: 1.35rem 1.75rem 1.35rem 1.5rem; }
html[dir="rtl"] .elementor .mx-loop .e-con.mx-scope::before { left: auto; right: 0; }
html[dir="rtl"] .elementor .e-con.mx-loop__steps::before {
	left: auto;
	right: var(--mxl-rail-x);
	margin-left: 0;
	margin-right: -0.75px;
}
html[dir="rtl"] .mxl-rail {
	left: auto;
	right: var(--mxl-rail-x);
	margin-left: 0;
	margin-right: -1px;
}
html[dir="rtl"] .elementor .e-con.mx-step { padding: 1.75rem 0 1.75rem 1.75rem; }

/* ==== Home: why / sustainability bands =================================================== */

html[dir="rtl"] .elementor .e-con.mx-value::before,
html[dir="rtl"] .elementor .e-con.mx-value::after { transform-origin: right center; }
html[dir="rtl"] .elementor .mx-sustain .elementor-element.mx-eyebrow .elementor-heading-title::before { transform-origin: right center; }
@media (min-width: 1025px) {
	html[dir="rtl"] .elementor .e-con.mx-sustain__visual::before { left: auto; right: 0; }
}

/* ==== Inner pages: shared (inner.css) ===================================================== */

html[dir="rtl"] .mxi-decor__glow--1 { right: auto; left: -10vw; }
html[dir="rtl"] .mxi-decor__glow--2 { left: auto; right: -14vw; }
html[dir="rtl"] .elementor .e-con.mx-col::before { left: auto; right: 0; transform-origin: right; }
html[dir="rtl"] .mx-dl dd { text-align: left; }
html[dir="rtl"] .elementor .e-con.mx-terms { border-left: 0; border-right: 1px solid var(--mxi-hair-light); }
html[dir="rtl"] .elementor .e-con.mx-term { border-right: 0; border-left: 1px solid var(--mxi-hair-light); }
html[dir="rtl"] .mxf-stage__bar { margin-left: 0; margin-right: 0.6rem; }
html[dir="rtl"] .mxf-stage__bar i { transform-origin: right; }
html[dir="rtl"] .elementor .e-con.mx-plates__viewport { margin-right: 0; margin-left: calc(-1 * var(--mx-pad-x, 1rem)); }
html[dir="rtl"] .mxq-row__bar { transform-origin: right; background: linear-gradient(270deg, rgba(244, 175, 53, 0.35), var(--mxp-gold)); }
html[dir="rtl"] .mxq-row:last-of-type .mxq-row__bar { background: linear-gradient(270deg, var(--mxp-green), var(--mxp-gold)); }
html[dir="rtl"] .mxg__bar-val { text-align: left; }
html[dir="rtl"] .elementor .e-con.mx-empty::before { left: auto; right: 0; }

/* ==== Inner pages: instruments (pages.css) =============================================== */

html[dir="rtl"] .mx-readout > div + div,
html[dir="rtl"] .mxt__read > div + div {
	padding-left: 0;
	border-left: 0;
	padding-right: 0.9rem;
	border-right: 1px solid var(--mxi-hair-dark);
}
html[dir="rtl"] .mxt__read > div + div { padding-right: 0.75rem; }
html[dir="rtl"] .mxt__gauge-track i { inset: 0 0 0 auto; background: linear-gradient(270deg, #F4AF35, #C9C05A, #9DCB5B); }

/* Plant tour: the text panel moves to the right, the shade follows it. */
html[dir="rtl"] .mxt__rail button { text-align: right; }
html[dir="rtl"] .mxt__rail button::before { left: 0.75rem; right: 0; transform-origin: right; }

html[dir="rtl"] .mxs__stream i::after { right: auto; left: -3px; }
@media (max-width: 767px) {
	html[dir="rtl"] .mxs__out { padding-left: 0; padding-right: calc(34px + 0.75rem); }
}
@media (min-width: 768px) {
	html[dir="rtl"] .elementor .e-con.mx-pillar + .e-con.mx-pillar {
		padding-left: 0 !important;
		padding-right: 2rem !important;
		border-left: 0;
		border-right: 1px solid var(--mxi-hair-dark);
	}
	html[dir="rtl"] .elementor .mx-paper .e-con.mx-pillar + .e-con.mx-pillar { border-right-color: var(--mxi-hair-light); }
}
html[dir="rtl"] .mxe__specs dd { text-align: left; }
html[dir="rtl"] .mxe__tabs [role="tab"] { text-align: right; }
html[dir="rtl"] .mxe__tabs [role="tab"]::before { left: auto; right: 0; }
html[dir="rtl"] .mxe__tabs [role="tab"][aria-selected="true"] { background: linear-gradient(270deg, rgba(244, 175, 53, 0.08), transparent 70%); }

/* EN 14214 gauges: a 0 → limit scale, read left to right like the numbers on it. */
html[dir="rtl"] .mxh__gauge { direction: ltr; }
html[dir="rtl"] .mxh__checks > div + div {
	padding-left: 0;
	border-left: 0;
	padding-right: 1rem;
	border-right: 1px solid var(--mxi-hair-light);
}
@media (max-width: 480px) {
	html[dir="rtl"] .mxh__checks > div + div { padding-right: 0; border-right: 0; }
}

html[dir="rtl"] .mxb__side--out { text-align: left; }

/* Chain of custody steps: number and line on the right. */
html[dir="rtl"] .mxc__step { padding: 0 3.25rem 1.75rem 0; }
html[dir="rtl"] .mxc__step::before,
html[dir="rtl"] .mxc__step::after { left: auto; right: 1rem; }
html[dir="rtl"] .mxc__n { left: auto; right: 0; }
@media (min-width: 1025px) {
	html[dir="rtl"] .mxc__step { padding: 3.25rem 0 0; }
	html[dir="rtl"] .mxc__step::before,
	html[dir="rtl"] .mxc__step::after { right: 2.6rem; left: -1.5rem; }
	html[dir="rtl"] .mxc__step::after { transform-origin: right; }
}

/* Plant tour (pinned): panel on the right, ledger on the left, veil mirrored.
 * The plant drawing itself keeps its coordinates (pages.js frames each unit for this side). */
html[dir="rtl"] .mxk-plant { direction: ltr; }
html[dir="rtl"] .mxt.is-pinned .mxt__stage::after {
	background:
		linear-gradient(270deg, rgba(9, 29, 13, 0.94) 0%, rgba(9, 29, 13, 0.88) 30%, rgba(9, 29, 13, 0) 46%),
		linear-gradient(90deg, rgba(9, 29, 13, 0.8) 0%, rgba(9, 29, 13, 0) 24%),
		linear-gradient(0deg, rgba(9, 29, 13, 0.85) 0%, rgba(9, 29, 13, 0) 18%);
}
html[dir="rtl"] .mxt.is-pinned .mxt__panel {
	left: auto;
	right: max(var(--mx-gutter), calc((100% - var(--mx-container)) / 2));
}
html[dir="rtl"] .mxt.is-pinned .mxt__ledger {
	right: auto;
	left: max(var(--mx-gutter), calc((100% - var(--mx-container)) / 2));
}
html[dir="rtl"] .mxt__rail button { padding: 0.85rem 0 0 0.75rem; }

html[dir="rtl"] .mxcert__seal { right: auto; left: clamp(1.25rem, 1rem + 1vw, 2rem); }

/* Incoterms line: from our gate (right) to your port (left). */
html[dir="rtl"] .mxi__switch button { text-align: right; }
html[dir="rtl"] .mxi__line i { left: auto; right: 0; background: linear-gradient(270deg, #F4AF35, #D9921A); }
html[dir="rtl"] .mxi__risk em { left: auto; right: 0.4rem; }
html[dir="rtl"] .mxi__stops li:first-child { text-align: right; }
html[dir="rtl"] .mxi__stops li:last-child { text-align: left; }

html[dir="rtl"] .mxl__step::before { left: auto; right: 0; }
html[dir="rtl"] .mxx__seg { transform-origin: right; }

/* Careers: function list, marker on the right. */
html[dir="rtl"] .mxw__teams button { padding: 0.85rem 1rem 0.85rem 0; text-align: right; }
html[dir="rtl"] .mxw__teams button::before { left: auto; right: 0; }
html[dir="rtl"] .mxw__teams [aria-pressed="true"] { background: linear-gradient(270deg, rgba(244, 175, 53, 0.08), transparent 70%); }

@media (min-width: 768px) {
	html[dir="rtl"] .elementor .mx-manifesto__frame > .mx-manifesto__item--mission {
		border-left: 0;
		border-right: 1px solid rgba(239, 245, 237, 0.18);
	}
}
html[dir="rtl"] .mxcv::before { right: auto; left: -60px; }

/* Route map: the map keeps its geography (labels are placed with left: var(--x)); the
 * columns swap, so the bleed and the fade move to the other side. */
@media (min-width: 1025px) {
	html[dir="rtl"] .mx-atlas > .elementor-element.mx-atlas__map { margin: 0 -4rem 0 calc(-1 * var(--mx-pad-x)); }
	html[dir="rtl"] .mx-atlas .mxm__svg { --fade: radial-gradient(closest-side at 44% 50%, #000 62%, transparent 100%); }
}
html[dir="rtl"] .mxm__label { text-align: right; }