/* ==========================================================================
   Arabic pages only (ar/, <html lang="ar" dir="rtl">). Loaded after the
   mirrored stylesheets (*.rtl.css, generated with RTLCSS by
   tools/i18n/build.py) for what mirroring alone cannot express.
   ========================================================================== */

/* Arabic glyphs inside the site's Montserrat text come from Cairo: same
   family name, Arabic unicode-range only, so every existing font-family
   rule keeps working and Latin text stays in Montserrat. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(../fonts/cairo/cairo-arabic-variable.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
html[lang="ar"] #chatbot,
html[lang="ar"] .lang-switcher a[lang="ar"] {
  font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
}
/* Cairo is the Arabic typeface everywhere on the Arabic pages - also on
   elements whose own rules name another family (Georgia, Segoe UI, ...).
   Icon fonts are excluded so their glyphs keep working; Latin characters
   fall through to Montserrat (the Cairo file holds Arabic glyphs only). */
html[lang="ar"] body,
html[lang="ar"] body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi):not(.material-icons):not([class^="flaticon-"]):not([class*=" flaticon-"]):not([class^="ion-"]) {
  font-family: "Cairo", "Montserrat", Arial, sans-serif !important;
}

/* Menu size. The other languages' menu is Latin capitals, which fill the
   full cap height; Arabic letters at the same font-size read visibly
   smaller. These sizes make the Arabic menu look the same size (compared
   side by side with the English menu). */
html[lang="ar"] .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
  font-size: 15px !important;
  word-spacing: normal; /* the theme's 4px gap splits two-word Arabic labels */
}
html[lang="ar"] .ftco-navbar-light .navbar-nav .dropdown-menu .dropdown-item {
  font-size: 14px !important;
}
html[lang="ar"] .countries-mega-title {
  font-size: 14px !important;
}
html[lang="ar"] .countries-mega-count {
  font-size: 13px !important;
}
html[lang="ar"] .countries-mega-foot a {
  font-size: 14.5px !important;
}
html[lang="ar"] .hrm-app-badge-title {
  font-size: 12.5px !important;
}
html[lang="ar"] .hrm-app-badge-sub {
  font-size: 9.5px !important;
}
html[lang="ar"] .hrm-app-badge-cta {
  font-size: 12px !important;
}

/* Team section heading (home + team page): a full sentence, so in Cairo
   the theme's 32px / 800 reads too heavy - lighter and slightly smaller. */
html[lang="ar"] .section-title {
  font-size: 28px;
  font-weight: 600 !important;
  line-height: 1.6;
}

/* Letter-spacing breaks the joins between Arabic letters. */
html[dir="rtl"] body * {
  letter-spacing: normal !important;
}

/* Left-to-right values inside Arabic text: numbers, e-mail, URLs. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"] {
  direction: ltr;
  text-align: right;
}
html[dir="rtl"] input[type="email"]::placeholder,
html[dir="rtl"] input[type="tel"]::placeholder {
  direction: rtl;
}

/* Directional icons point the other way in a right-to-left layout. */
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-long-arrow-right,
html[dir="rtl"] .fa-long-arrow-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-arrow-right-to-bracket,
html[dir="rtl"] .fa-sign-in-alt,
html[dir="rtl"] .fa-arrow-up-right-from-square,
html[dir="rtl"] .fa-quote-left,
html[dir="rtl"] .bi-arrow-right::before,
html[dir="rtl"] .detail-arrow {
  display: inline-block;
  transform: scaleX(-1);
}
/* Phones: the country details stack into one column. The arrow is then a
   full-width grid item, and mirroring that whole box would throw the arrow
   to the left edge - sized to the glyph it stays at the start, under the
   label. */
@media (max-width: 768px) {
  html[dir="rtl"] .countries-section .detail-arrow {
    justify-self: start;
  }
}
/* Owl's prev/next already swap their icons in RTL mode (js/main.js). */
html[dir="rtl"] .owl-nav .fa-chevron-right,
html[dir="rtl"] .owl-nav .fa-chevron-left {
  transform: none;
}

/* Lists the theme resets with padding-left: the browser's own
   padding-inline-start (right side in RTL) must go too. */
html[dir="rtl"] .list-unstyled {
  padding-right: 0;
}

/* Leaflet lays out its tiles with physical offsets. */
html[dir="rtl"] .leaflet-container {
  direction: ltr;
}
html[dir="rtl"] .leaflet-popup-content {
  direction: rtl;
  text-align: right;
}

/* Chat assistant: bottom-right corner in Arabic too, the same place as on
   the other languages (the mirrored chatbot.rtl.css would put it on the
   left); everything inside it stays right-to-left. */
html[dir="rtl"] #chatbot {
  right: 22px;
  left: auto;
  transform-origin: bottom right;
}
html[dir="rtl"] #chatbot.fullscreen {
  right: 0 !important;
  left: 0 !important;
}
html[dir="rtl"] #chatbotToggle {
  right: 20px;
  left: auto;
}
html[dir="rtl"] #chatbotToggle::after {
  right: 1px;
  left: auto;
}

/* Cookie banner styles are injected at runtime (js/cookie-consent.js). */
html[dir="rtl"] .cookie-consent-actions {
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 600px) {
  html[dir="rtl"] .cookie-consent-actions {
    margin-right: 0;
  }
}

/* Article text the CMS has only in English, shown on an Arabic page
   (insights.html / insight.html mark it lang="en" dir="ltr"): left
   aligned, the way English text reads. */
html[dir="rtl"] [lang][dir="ltr"] {
  text-align: left;
}