/*
 * Mass Gear — Arabic / right-to-left layer.
 *
 * Loaded only on pages under /ar/. Two jobs:
 *   1. Swap the Latin faces for IBM Plex Sans Arabic, and undo the Latin
 *      typographic habits that damage Arabic — letter-spacing breaks the
 *      connected script, and uppercase means nothing in it.
 *   2. Flip the handful of places where the design uses a physical side
 *      rather than a logical one.
 */

/* ---------- 1. Type ---------- */

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/plexarabic-arabic-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/plexarabic-arabic-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/plexarabic-arabic-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/plexarabic-arabic-700-normal.woff2") format("woff2");
}

/* One override point: every preset that pointed at a Latin face now
   resolves to the Arabic one, so nothing else has to know. */
.mg-lang-ar {
	--wp--preset--font-family--display: "IBM Plex Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif;
	--wp--preset--font-family--body: "IBM Plex Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif;
	--wp--preset--font-family--mono: "IBM Plex Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif;
}

/* Arabic letters join. Tracking them apart pulls the word to pieces, and
   there is no letter case to transform. */
.mg-lang-ar,
.mg-lang-ar :where(h1, h2, h3, h4, h5, h6, p, a, li, button, label, input, select, textarea, figcaption),
.mg-lang-ar .mg-eyebrow,
.mg-lang-ar .mg-label,
.mg-lang-ar .mg-more,
.mg-lang-ar .mg-client__sector,
.mg-lang-ar .mg-stat__label,
.mg-lang-ar .wp-element-button,
.mg-lang-ar .wp-block-button__link,
.mg-lang-ar .mg-form__submit,
.mg-lang-ar .wp-block-navigation,
.mg-lang-ar .wp-block-navigation a {
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Naskh needs a little more room between lines than a Latin grotesque. */
.mg-lang-ar { line-height: 1.85; }
.mg-lang-ar :where(h1, h2, h3) { line-height: 1.3; }
.mg-lang-ar :where(h4, h5, h6) { line-height: 1.45; }
.mg-lang-ar .mg-lede { line-height: 1.85; }

/* Latin fragments inside Arabic copy — phone numbers, model names,
   email addresses — keep their own direction. Without this the bidi
   algorithm moves the leading "+" of a phone number to the end and
   reorders the groups: +20 100 981 0654 renders as 0654 981 100 20+. */
.mg-lang-ar .mg-contactline,
.mg-lang-ar [lang="en"],
.mg-lang-ar a[href^="tel:"],
.mg-lang-ar a[href^="mailto:"] {
	direction: ltr;
	unicode-bidi: isolate;
}
.mg-lang-ar a[href^="tel:"],
.mg-lang-ar a[href^="mailto:"] { display: inline-block; }
.mg-lang-ar .mg-contactline { text-align: start; }

/* Arabic loses the tracking that separates the Latin nav labels, so the
   words need real space between them instead. */
[dir="rtl"] .mg-header .wp-block-navigation__container { gap: 2rem; }
[dir="rtl"] .mg-header .mg-header__lead { gap: var(--wp--preset--spacing--50); }

@media (min-width: 601px) and (max-width: 900px) {
	[dir="rtl"] .mg-header .wp-block-navigation__container { gap: 1.25rem; }
}

/* ---------- 2. Direction flips ---------- */

/* Gold rule under a section heading. */
[dir="rtl"] .mg-underline::after { left: auto; right: 0; }
[dir="rtl"] .has-text-align-center .mg-underline::after,
[dir="rtl"] .mg-underline.is-centered::after { right: 50%; transform: translateX(50%); }

/* Card top rule and nav underline both draw from the reading edge. */
[dir="rtl"] .mg-card::after { transform-origin: right; }
[dir="rtl"] .mg-header .wp-block-navigation > ul > li > .wp-block-navigation-item__content::after,
[dir="rtl"] .mg-header .wp-block-navigation > ul > li > a::after { transform-origin: left; }
[dir="rtl"] .mg-header .wp-block-navigation > ul > li > .wp-block-navigation-item__content:hover::after,
[dir="rtl"] .mg-header .wp-block-navigation > ul > li:focus-within > .wp-block-navigation-item__content::after,
[dir="rtl"] .mg-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { transform-origin: right; }

/* Scroll progress fills from the reading edge. */
[dir="rtl"] .mg-header::after { transform-origin: right; }

/* "Read more" arrow points the way the reader is going. */
[dir="rtl"] .mg-more::after { content: "←"; }
[dir="rtl"] .mg-card:hover .mg-more::after { transform: translateX(-5px); }

/* Offset frame sits on the other shoulder. */
[dir="rtl"] .mg-frame::before { translate: -18px 18px; }

/* Registration ticks. */
[dir="rtl"] .mg-ticks::before { left: auto; right: 24px; border-right: 1px solid var(--wp--preset--color--gold); border-left: 0; }
[dir="rtl"] .mg-ticks::after  { right: auto; left: 24px; border-left: 1px solid var(--wp--preset--color--gold); border-right: 0; }

/* The floating chat affordance sits on the reading-end side. */
[dir="rtl"] .mg-chat { right: auto; left: clamp(1rem, 3vw, 2rem); }

/* Client rail scrolls the other way. */
[dir="rtl"] .mg-marquee__track { animation-direction: reverse; }

/* The Gears panel anchors to the reading edge. */
@media (min-width: 601px) {
	[dir="rtl"] .mg-header .wp-block-navigation .wp-block-navigation__submenu-container {
		left: auto;
		right: max(var(--wp--custom--gutter), calc((100vw - 1400px) / 2));
	}
}