/* Arabic-specific typography and bidirectional isolation.
 * Loaded only by /ar/ pages, after rtl.css. Latin codes, phone numbers,
 * e-mail addresses and units are isolated so the Arabic bidi algorithm
 * cannot reorder them.
 */

/* ---- Arabic type: no webfonts are used on this site, so use system Arabic faces ---- */
html[dir="rtl"] body {
  font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro",
    "Arabic Typesetting", "Traditional Arabic", Arial, sans-serif;
  font-weight: 400;
}

/* Arabic is cursive: letter-spacing and uppercase transforms break joining/shape */
html[dir="rtl"] * { letter-spacing: normal !important; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .section-title, html[dir="rtl"] .eyebrow,
html[dir="rtl"] .home-hero-kicker, html[dir="rtl"] .hero-subline,
html[dir="rtl"] .product-name, html[dir="rtl"] strong, html[dir="rtl"] b,
html[dir="rtl"] .more-link, html[dir="rtl"] button, html[dir="rtl"] th {
  text-transform: none !important;
}

/* Arabic needs more leading than Latin */
html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] td, html[dir="rtl"] dd {
  line-height: 1.95;
}
html[dir="rtl"] h1 { line-height: 1.45; }
html[dir="rtl"] h2, html[dir="rtl"] h3 { line-height: 1.5; }
html[dir="rtl"] .hero h1 { line-height: 1.4; font-size: clamp(28px, 3.7vw, 56px); }
html[dir="rtl"] .hero-subline { line-height: 1.85; }

/* ---- bidirectional isolation for Latin-script data inside Arabic text ---- */
html[dir="rtl"] code,
html[dir="rtl"] kbd,
html[dir="rtl"] samp,
html[dir="rtl"] time,
html[dir="rtl"] .contact-whatsapp-numbers,
html[dir="rtl"] .contact-whatsapp-numbers a,
html[dir="rtl"] .contact-telegram-body a,
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="http"],
html[dir="rtl"] a[href^="//"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  text-align: left;
}
/* grade codes, model numbers, values with units: keep them left-to-right */
html[dir="rtl"] .product-overlay strong,
html[dir="rtl"] .catalog-card strong,
html[dir="rtl"] .spec-table td:first-child,
html[dir="rtl"] table td, html[dir="rtl"] table th {
  unicode-bidi: plaintext;
}
html[dir="rtl"] td, html[dir="rtl"] th { text-align: right; }

/* numeric / unit-only table cells should read left-to-right */
html[dir="rtl"] table td[data-ltr], html[dir="rtl"] .spec-table td:last-child {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}html[dir="rtl"] table td:last-child:lang(ru),html[dir="rtl"] table td:last-child:lang(fr),html[dir="rtl"] table td:last-child:lang(ar),html[dir="rtl"] table td:last-child:lang(es){ direction: rtl; unicode-bidi: plaintext; text-align: right; }

/* ---- punctuation and list markers ---- */
html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 1.4em; padding-left: 0; }
html[dir="rtl"] blockquote { border-right: 3px solid currentColor; border-left: 0; padding-right: 16px; padding-left: 0; }

/* ---- forms and the language switcher ---- */
html[dir="rtl"] select.language-select { text-align: right; }
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; }
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"] {
  direction: ltr; text-align: left;
}

/* ---- arrows / chevrons written as text glyphs must point the other way ---- */
html[dir="rtl"] .more-link::after,
html[dir="rtl"] .breadcrumb span::after,
html[dir="rtl"] .solution-card-footer b::after {
  display: inline-block;
  transform: scaleX(-1);
}

/* ---- scroll rails: keep them usable in RTL ---- */
html[dir="rtl"] .service-field-rail,
html[dir="rtl"] .home-highlight-window,
html[dir="rtl"] .product-gallery-track { direction: rtl; }

/* ==========================================================================
   LAYOUT EXCEPTION — hero and banner copy stays on the LEFT
   --------------------------------------------------------------------------
   The homepage hero artwork and the section-banner artwork are composed with
   their subject on the RIGHT:
     * hero image      -> object-position: center (subject sits right of frame)
     * .page-banner    -> background-position 66% / 38%, subject right
     * .contact-image-banner -> object-position 64% center on small screens
   and their scrim gradients run 90deg (opaque on the LEFT, transparent on the
   RIGHT). With the page mirrored, the copy was pushed onto the bright right
   half and covered the subject. The copy is therefore pinned back to the left
   exactly as in the English layout.

   Reading order is deliberately NOT changed: `direction` stays rtl, so the
   Arabic text is still laid out and read right-to-left. Only the block
   position and the line alignment are un-mirrored.
   ========================================================================== */

/* ---------- 1. homepage hero ---------- */
/* on an RTL flex row, flex-end packs to the LEFT edge (flex-start packs right) */
html[dir="rtl"] .hero-inner { justify-content: flex-end; }

html[dir="rtl"] .hero-panel {
  padding-left: 48px;
  padding-right: 20px;
}
html[dir="rtl"] .page-home .hero-panel {
  margin-left: clamp(28px, 6.5vw, 118px);
  margin-right: 0;
  padding-right: 32px;
}
@media (max-width: 900px) {
  html[dir="rtl"] .page-home .hero-panel {
    margin-left: 20px;
    margin-right: 20px;
  }
}

/* lines start at the left edge of the panel, as in the English layout */
html[dir="rtl"] .hero-content,
html[dir="rtl"] .hero h1,
html[dir="rtl"] .hero-subline,
html[dir="rtl"] .hero .lead { text-align: left; }

/* ---------- 2. section banners ---------- */
html[dir="rtl"] .page-banner .container,
html[dir="rtl"] .page-banner h1,
html[dir="rtl"] .page-banner .page-lead { text-align: left; }

/* NOTE — no background-position / object-position override is needed anywhere.
   rtl.css deliberately does NOT mirror artwork framing: background-position,
   object-position, transform and transform-origin keep their English values
   (verified 1:1 against the source sheets). Every hero, banner and photo therefore
   stays composed with its subject on the right, and the copy simply sits on the
   left as set above. */

/* ---------- 3. contact page image banner ---------- */
html[dir="rtl"] .contact-image-banner .container,
html[dir="rtl"] .contact-image-banner h1,
html[dir="rtl"] .contact-image-banner .page-lead { text-align: left; }

/* ==========================================================================
   LAYOUT EXCEPTION 2 — polymer experts carousel
   (used on /contact/ and on the homepage)
   --------------------------------------------------------------------------
   The carousel script drives the track with

       track.style.transform = `translate3d(${-index * step}px, 0, 0)`;

   i.e. it ALWAYS shifts the track to the left, and it clones the cards onto both
   ends (`prepend` before-clones, `append` after-clones) to fake an infinite loop.
   That geometry only holds when the flex row flows left-to-right and overflows to
   the RIGHT.

   Under `direction: rtl` the flex row flows right-to-left and overflows to the
   LEFT, so the very same negative translate scrolls the cards out of the window
   into empty space. The carousel then shows nothing — and because the real cards
   keep their `[data-reveal]` attribute (opacity:0 until the reveal observer first
   sees them) they never become visible either, leaving the whole section blank.

   Fix: pin the *scrolling geometry* to LTR and restore RTL inside each card, so
   the script runs unmodified while the card text still reads right-to-left.
   The prev/next glyphs ‹ › are Unicode mirrored characters, so they keep pointing
   the correct way (prev at the right, next at the left) without extra rules.
   ========================================================================== */
html[dir="rtl"] .contact-expert-window,
html[dir="rtl"] .contact-expert-track { direction: ltr; }
html[dir="rtl"] .contact-expert-card { direction: rtl; }