/* =========================================================================
   ARGORA — Arabic (RTL) corrections
   =========================================================================

   main.css is written with logical properties, so the layout mirrors itself
   from `dir="rtl"` alone. This file only handles what direction cannot infer:
   directional glyphs, gradients tied to a physical axis, and the places where
   Latin technical values must keep reading left-to-right inside Arabic text.

   Loaded only on Arabic pages.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Directional icons
   ---------------------------------------------------------------------- */

/* Arrows point at the reader's "forward", which is leftwards in Arabic. */
.btn .argora-icon[class*="arrow"],
.card__foot .argora-icon,
.download-item__action .argora-icon,
.breadcrumbs .argora-icon {
	transform: scaleX(-1);
}

/* The chevron on submenu toggles is vertical — it must not be flipped. */
.submenu-toggle .argora-icon { transform: none; }

/* -------------------------------------------------------------------------
   2. Mixed-direction text
   ---------------------------------------------------------------------- */

/* Product names, brands, standards and sizes stay in Latin script. Marking
   them as plaintext lets the browser resolve each run's direction on its own,
   so "½" to 12"" and "ASTM A53" never come out reversed. */
.spec-table td,
.card__meta,
.meta-inline,
.product-brands,
.contact-list__value a[href^="tel:"],
.contact-list__value a[href^="mailto:"],
.footer-contact a[href^="tel:"],
.footer-contact a[href^="mailto:"],
.topbar a[href^="tel:"],
.topbar a[href^="mailto:"] {
	unicode-bidi: plaintext;
}

/* Telephone numbers read left-to-right everywhere. `direction` alone is enough:
   these links are flex containers, and forcing them to inline-block would let
   the icon (a block-level SVG) push the number onto its own line. */
.contact-list__value a[href^="tel:"],
.footer-contact a[href^="tel:"],
.topbar a[href^="tel:"] {
	direction: ltr;
	white-space: nowrap;
}

/* Numerals in tables and counters keep Western digits so they match the
   standards and sizes printed in the brochure. */
.spec-table,
.card__count,
.pagination,
.download-item__meta {
	font-feature-settings: "tnum";
}

/* -------------------------------------------------------------------------
   3. Physical-axis backgrounds
   ---------------------------------------------------------------------- */

/* The list-marker rule is drawn with a physical background, so its position
   has to be restated for RTL. */
.card__subcats li::before,
.prose-list li::before {
	inset-inline-start: 0;
}

/* -------------------------------------------------------------------------
   4. Typography fit
   ---------------------------------------------------------------------- */

/* Arabic has no capital forms, so uppercase transforms do nothing but letter
   spacing damages the joins between letters. Both are removed wherever the
   Latin design relies on them. */
.eyebrow,
.btn,
.link-arrow,
.badge,
.chip,
.card__eyebrow,
.filter-bar__label,
.footer-heading,
.footer-credentials span,
.aside-panel__title,
.contact-list__label,
.hero__eyebrow,
.hero__disciplines li,
.lang-switch__link,
.primary-nav a {
	letter-spacing: 0;
	text-transform: none;
}

/* Arabic descenders need a little more room in tight components. */
.card__title,
.vacancy__title,
.footer-menu a,
.primary-nav a {
	line-height: 1.5;
}

/* The display sizes are tuned for Latin caps height; Arabic reads better a
   step smaller with more leading. */
.hero__title { font-size: clamp(2.2rem, 3.6vw + 1.2rem, 3.7rem); }
.page-hero__title { font-size: clamp(1.9rem, 2.6vw + 1.2rem, 3rem); }

/* -------------------------------------------------------------------------
   5. Form controls
   ---------------------------------------------------------------------- */

/* Email and URL inputs hold Latin values, so they type left-to-right while
   staying aligned to the start edge of the field. */
.argora-field input[type="email"],
.argora-field input[type="url"],
.argora-field input[type="tel"] {
	direction: ltr;
	text-align: right;
}

.argora-field input[type="file"]::file-selector-button {
	margin-inline-end: var(--sp-3);
	margin-inline-start: 0;
}