/* Arabic is feature-gated. Keep the RTL adjustments outside the FR/EN bundle. */
@font-face {
  font-family: "ASEM Noto Sans Arabic";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/i18n/ar.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] :is(body, h1, h2, h3, h4, h5, h6, p, a, button, label, input, select, textarea, small, strong) {
  font-family: "ASEM Noto Sans Arabic", Lexend, Roboto, Arial, sans-serif;
}

html[dir="rtl"] :is(input, textarea, select) {
  text-align: start;
}

html[dir="rtl"] :is(input[type="email"], input[type="url"], input[type="tel"]) {
  direction: ltr;
  text-align: end;
}

/* Mirror the editorial composition, never the photographic or product assets. */
@media (min-width: 768px) {
  html[dir="rtl"] .asem-home-hero-v2__media,
  html[dir="rtl"] .asem-about-hero__media,
  html[dir="rtl"] .asem-catalogue__hero-media {
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: 59%;
  }
  html[dir="rtl"] .asem-home-hero-v2__media img,
  html[dir="rtl"] .asem-about-hero__media img,
  html[dir="rtl"] .asem-catalogue__hero-media img { object-position: right center; }
  html[dir="rtl"] .asem-home-hero-v2__veil {
    background: linear-gradient(270deg, rgba(4,20,49,.98) 0%, rgba(4,20,49,.88) 31%, rgba(4,20,49,.28) 61%, rgba(4,20,49,.06) 100%);
  }
  html[dir="rtl"] .asem-about-hero__veil {
    background: linear-gradient(270deg, rgba(3,21,51,.98) 0%, rgba(3,25,57,.94) 34%, rgba(4,35,72,.72) 52%, rgba(5,44,79,.3) 71%, rgba(5,32,65,.06) 100%);
  }
  html[dir="rtl"] .asem-catalogue__hero::after {
    background: linear-gradient(270deg, rgba(248,251,254,.99) 0%, rgba(247,251,254,.98) 34%, rgba(246,250,253,.88) 46%, rgba(246,250,253,.25) 65%, rgba(246,250,253,0) 82%);
  }
  html[dir="rtl"] .asem-formations-hero { background-image: none; }
  html[dir="rtl"] .asem-formations-hero::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -2;
    width: 59%;
    background: url('../images/formations/training-hero-v1.webp') right center / cover no-repeat;
  }
  html[dir="rtl"] .asem-formations-hero::before {
    background: linear-gradient(270deg,#f4faff 0%,#f0f9ff 32%,rgba(239,249,255,.94) 45%,rgba(239,249,255,.45) 67%,rgba(230,245,253,.08) 100%);
  }
  html[dir="rtl"] .asem-formations-hero__quote { right: auto; left: max(28px,calc((100vw - 1300px)/2)); }
  html[dir="rtl"] .asem-guidelines-hero {
    background: linear-gradient(270deg,rgba(249,252,255,.98) 0%,rgba(239,247,255,.93) 43%,rgba(230,242,255,.22) 76%,rgba(229,242,255,.08) 100%),url('../images/guidelines/hero-clinical-reference-v2.webp') center left/cover no-repeat;
  }
  html[dir="rtl"] .asem-guidelines-hero__art { inset: 0 auto 0 -28px; width: 43%; background-position: right center; }
  html[dir="rtl"] .asem-guidelines-hero__art::before { background: linear-gradient(270deg,#e9f4ff 0%,rgba(237,246,255,.22) 38%,rgba(214,232,250,.05) 100%); }
  html[dir="rtl"] .asem-guidelines-hero__copy { width: min(60%,730px); padding: 21px 18px 17px 0; }
  html[dir="rtl"] .asem-guidelines-hero__callout { left: auto; right: 14%; }
}

@media (max-width: 767.98px) {
  html[dir="rtl"] .asem-home-hero-v2__veil { background: linear-gradient(270deg,rgba(4,20,49,.96),rgba(4,20,49,.76)); }
  html[dir="rtl"] .asem-catalogue__hero::after { background: linear-gradient(270deg,rgba(248,251,254,.99),rgba(248,251,254,.72)); }
  html[dir="rtl"] .asem-about-hero__veil { background: linear-gradient(270deg,rgba(3,21,51,.96),rgba(3,25,57,.7)); }
  html[dir="rtl"] .asem-formations-hero::before { background: linear-gradient(270deg,#f4faff 0%,rgba(239,249,255,.9) 62%,rgba(230,245,253,.35) 100%); }
  html[dir="rtl"] .asem-guidelines-hero { background-position: center left; }
  html[dir="rtl"] .asem-guidelines-hero__art { left: 0; right: auto; background-position: left center; }
}

/* Source text can be LTR inside an RTL card; its direction comes from the text. */
html[dir="rtl"] [dir="auto"],
html[dir="rtl"] [dir="ltr"] { text-align: start; }
html[dir="rtl"] .asem-catalogue-card__brand,
html[dir="rtl"] .asem-catalogue-card__stretched-link,
html[dir="rtl"] .asem-catalogue__manufacturers a,
html[dir="rtl"] .asem-home-product__intro h3 { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

@media (max-width: 1199.98px) {
  html[dir="rtl"] .header-layout1 .asem-primary-navigation .navbar-toggler {
    right: auto;
    left: max(12px, env(safe-area-inset-left));
  }

  html[dir="rtl"] .header-layout1 .asem-primary-navigation .language-switcher--mobile-header {
    right: auto;
    left: max(68px, calc(56px + env(safe-area-inset-left)));
  }
}