/*
 * Right-to-left pages (Arabic). The theme's CSS is written for left-to-right pages only, so this mirrors the parts
 * that use physical left/right: Bootstrap's column offsets and the few spacing utilities the templates use, the
 * desktop mega-menu, the search overlay, the next-page cards and the value-card icons. Loaded only when is_rtl(). The photos' SVG clip shapes are deliberately not mirrored.
 */

/* Bootstrap's .list-unstyled only clears padding-left; on RTL pages the browser's list indent sits on the right. */
[dir=rtl] .list-unstyled {
  padding-right: 0;
}

/* Header menu: dividers after each item (on its left) and the careers link icon after its text. */
[dir=rtl] .esk-mh .esk-mh-inner .esk-headmenu > li.has-careers-icon > a > span::after {
  right: auto;
  left: -26px;
}
@media (min-width: 959px) {
  [dir=rtl] .esk-mh .esk-mh-inner .esk-headmenu > li > a > span::before {
    left: auto;
    right: calc(100% + 1.5rem);
  }
  [dir=rtl] .esk-mh .esk-mh-inner .esk-headmenu > li.has-careers-icon > a > span::before {
    left: auto;
    right: calc(100% + 2.3rem);
  }
}

/* Mega-menu: links on the right, photo on the left. */
@media (min-width: 959px) {
  [dir=rtl] .esk-mh .esk-mh-inner .esk-headmenu > li > .sub-menu-container {
    padding: 0 3vw 0 0;
  }
  [dir=rtl] .esk-mh .esk-mh-inner .esk-headmenu > li > .sub-menu-container .sub-menu {
    padding-right: 0;
  }
  [dir=rtl] .esk-mh .esk-mh-inner .esk-headmenu > li:hover > .sub-menu-container::after {
    right: auto;
    left: 0;
  }
}

/* Search overlay: magnifier on the right, submit arrow on the left, and room for both in the input. */
[dir=rtl] .esk-search-container-inner .esk-search-container-icon {
  left: auto;
  right: 0;
}
[dir=rtl] .esk-search-container .search-submit {
  right: auto;
  left: 0;
}
[dir=rtl] .esk-search-container-inner .search > input {
  padding: 0.375rem 2rem 0.375rem 0.75rem;
}
@media (min-width: 959px) {
  [dir=rtl] .esk-search-container-inner .search > input {
    padding-left: 3.5rem;
  }
}

/* Next-page cards ("See other services" etc.): the gap between cards goes on their left. */
[dir=rtl] .esk-page-navigation .esk-page-navlist .esk-page-navlist-item {
  margin-right: 0;
  margin-left: 1rem;
}
[dir=rtl] .esk-page-navigation .esk-page-navlist .esk-page-navlist-item:last-child {
  margin-left: 0;
}
[dir=rtl] .esk-page-navigation .esk-page-navlist .esk-page-navlist-item > a {
  gap: 1rem;
}
@media (max-width: 767.98px) {
  [dir=rtl] .esk-page-navigation .esk-page-navlist .esk-page-navlist-item {
    margin-left: 0;
  }
}

/* Value cards (Ethics, Culture...): icon on the left, as on the English pages, clear of the card's cut-out corner. */
[dir=rtl] .valueSwiper .swiper-slide .esk-vs-card .esk-vs-card-icon {
  margin-right: auto;
}

/*
 * Profile banners: the photo's clip shape leaves room at its bottom left for the text below it. The photo is not
 * mirrored, so keep the text on the left as well instead of letting it slide under the photo.
 */
[dir=rtl] .canvas.profile .canvas-addtext .row {
  justify-content: flex-end;
}
@media (min-width: 959px) {
  [dir=rtl] .canvas.profile .canvas-addtext .row > [class*=offset-] {
    margin-left: 8.33333333%;
    margin-right: 0;
  }
}

/* Bootstrap column offsets and spacing utilities. */
[dir=rtl] .offset-1 { margin-left: 0; margin-right: 8.33333333%; }
[dir=rtl] .offset-2 { margin-left: 0; margin-right: 16.66666667%; }
[dir=rtl] .offset-3 { margin-left: 0; margin-right: 25%; }
[dir=rtl] .offset-4 { margin-left: 0; margin-right: 33.33333333%; }
[dir=rtl] .offset-5 { margin-left: 0; margin-right: 41.66666667%; }
[dir=rtl] .offset-6 { margin-left: 0; margin-right: 50%; }
[dir=rtl] .offset-7 { margin-left: 0; margin-right: 58.33333333%; }
[dir=rtl] .offset-8 { margin-left: 0; margin-right: 66.66666667%; }
[dir=rtl] .offset-9 { margin-left: 0; margin-right: 75%; }
[dir=rtl] .offset-10 { margin-left: 0; margin-right: 83.33333333%; }
[dir=rtl] .offset-11 { margin-left: 0; margin-right: 91.66666667%; }
[dir=rtl] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir=rtl] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; }
@media (min-width: 576px) {
  [dir=rtl] .offset-sm-0 { margin-left: 0; margin-right: 0; }
  [dir=rtl] .offset-sm-1 { margin-left: 0; margin-right: 8.33333333%; }
  [dir=rtl] .offset-sm-2 { margin-left: 0; margin-right: 16.66666667%; }
  [dir=rtl] .offset-sm-3 { margin-left: 0; margin-right: 25%; }
  [dir=rtl] .offset-sm-4 { margin-left: 0; margin-right: 33.33333333%; }
  [dir=rtl] .offset-sm-5 { margin-left: 0; margin-right: 41.66666667%; }
  [dir=rtl] .offset-sm-6 { margin-left: 0; margin-right: 50%; }
  [dir=rtl] .offset-sm-7 { margin-left: 0; margin-right: 58.33333333%; }
  [dir=rtl] .offset-sm-8 { margin-left: 0; margin-right: 66.66666667%; }
  [dir=rtl] .offset-sm-9 { margin-left: 0; margin-right: 75%; }
  [dir=rtl] .offset-sm-10 { margin-left: 0; margin-right: 83.33333333%; }
  [dir=rtl] .offset-sm-11 { margin-left: 0; margin-right: 91.66666667%; }
}
@media (min-width: 768px) {
  [dir=rtl] .offset-md-0 { margin-left: 0; margin-right: 0; }
  [dir=rtl] .offset-md-1 { margin-left: 0; margin-right: 8.33333333%; }
  [dir=rtl] .offset-md-2 { margin-left: 0; margin-right: 16.66666667%; }
  [dir=rtl] .offset-md-3 { margin-left: 0; margin-right: 25%; }
  [dir=rtl] .offset-md-4 { margin-left: 0; margin-right: 33.33333333%; }
  [dir=rtl] .offset-md-5 { margin-left: 0; margin-right: 41.66666667%; }
  [dir=rtl] .offset-md-6 { margin-left: 0; margin-right: 50%; }
  [dir=rtl] .offset-md-7 { margin-left: 0; margin-right: 58.33333333%; }
  [dir=rtl] .offset-md-8 { margin-left: 0; margin-right: 66.66666667%; }
  [dir=rtl] .offset-md-9 { margin-left: 0; margin-right: 75%; }
  [dir=rtl] .offset-md-10 { margin-left: 0; margin-right: 83.33333333%; }
  [dir=rtl] .offset-md-11 { margin-left: 0; margin-right: 91.66666667%; }
}
@media (min-width: 959px) {
  [dir=rtl] .offset-lg-0 { margin-left: 0; margin-right: 0; }
  [dir=rtl] .offset-lg-1 { margin-left: 0; margin-right: 8.33333333%; }
  [dir=rtl] .offset-lg-2 { margin-left: 0; margin-right: 16.66666667%; }
  [dir=rtl] .offset-lg-3 { margin-left: 0; margin-right: 25%; }
  [dir=rtl] .offset-lg-4 { margin-left: 0; margin-right: 33.33333333%; }
  [dir=rtl] .offset-lg-5 { margin-left: 0; margin-right: 41.66666667%; }
  [dir=rtl] .offset-lg-6 { margin-left: 0; margin-right: 50%; }
  [dir=rtl] .offset-lg-7 { margin-left: 0; margin-right: 58.33333333%; }
  [dir=rtl] .offset-lg-8 { margin-left: 0; margin-right: 66.66666667%; }
  [dir=rtl] .offset-lg-9 { margin-left: 0; margin-right: 75%; }
  [dir=rtl] .offset-lg-10 { margin-left: 0; margin-right: 83.33333333%; }
  [dir=rtl] .offset-lg-11 { margin-left: 0; margin-right: 91.66666667%; }
  [dir=rtl] .ps-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (min-width: 1200px) {
  [dir=rtl] .offset-xl-0 { margin-left: 0; margin-right: 0; }
  [dir=rtl] .offset-xl-1 { margin-left: 0; margin-right: 8.33333333%; }
  [dir=rtl] .offset-xl-2 { margin-left: 0; margin-right: 16.66666667%; }
  [dir=rtl] .offset-xl-3 { margin-left: 0; margin-right: 25%; }
  [dir=rtl] .offset-xl-4 { margin-left: 0; margin-right: 33.33333333%; }
  [dir=rtl] .offset-xl-5 { margin-left: 0; margin-right: 41.66666667%; }
  [dir=rtl] .offset-xl-6 { margin-left: 0; margin-right: 50%; }
  [dir=rtl] .offset-xl-7 { margin-left: 0; margin-right: 58.33333333%; }
  [dir=rtl] .offset-xl-8 { margin-left: 0; margin-right: 66.66666667%; }
  [dir=rtl] .offset-xl-9 { margin-left: 0; margin-right: 75%; }
  [dir=rtl] .offset-xl-10 { margin-left: 0; margin-right: 83.33333333%; }
  [dir=rtl] .offset-xl-11 { margin-left: 0; margin-right: 91.66666667%; }
}
@media (min-width: 1560px) {
  [dir=rtl] .offset-xxl-0 { margin-left: 0; margin-right: 0; }
  [dir=rtl] .offset-xxl-1 { margin-left: 0; margin-right: 8.33333333%; }
  [dir=rtl] .offset-xxl-2 { margin-left: 0; margin-right: 16.66666667%; }
  [dir=rtl] .offset-xxl-3 { margin-left: 0; margin-right: 25%; }
  [dir=rtl] .offset-xxl-4 { margin-left: 0; margin-right: 33.33333333%; }
  [dir=rtl] .offset-xxl-5 { margin-left: 0; margin-right: 41.66666667%; }
  [dir=rtl] .offset-xxl-6 { margin-left: 0; margin-right: 50%; }
  [dir=rtl] .offset-xxl-7 { margin-left: 0; margin-right: 58.33333333%; }
  [dir=rtl] .offset-xxl-8 { margin-left: 0; margin-right: 66.66666667%; }
  [dir=rtl] .offset-xxl-9 { margin-left: 0; margin-right: 75%; }
  [dir=rtl] .offset-xxl-10 { margin-left: 0; margin-right: 83.33333333%; }
  [dir=rtl] .offset-xxl-11 { margin-left: 0; margin-right: 91.66666667%; }
}
