/*
 * Arabic (html[dir="rtl"]) — loaded only on Arabic pages, after every other stylesheet.
 *
 * 1. Typography: IBM Plex Sans Arabic (SIL Open Font License) replaces Advent Pro, which has no
 *    Arabic glyphs. Letter-spacing is removed (it breaks the joins of Arabic script) and the
 *    heavy 600 body weight of the English design is eased to 500 for long Arabic paragraphs.
 * 2. Mirroring of the original layout CSS (assets/css/style.min.css, responsive.min.css and
 *    whatsapp-float.css), which uses physical left/right. The sidebar's own mirroring lives in
 *    sidebar.css; the newer page stylesheets use logical properties.
 *
 * Photos, logos, illustrations and media are never mirrored. Directional arrows are.
 * The case-study pages load a guarded copy (npm run build:case-study-css).
 */

/* ==== 1. Typography ======================================================= */
html[dir="rtl"] {
  /* Direction helpers for the logical stylesheets: hover nudges and origins follow the text */
  --rk-x: -1;
  --rk-start: right;
}

/* Every element, including components that name Advent Pro; icon fonts are left alone */
html[dir="rtl"] body,
html[dir="rtl"] body *:not(i):not(.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"]) {
  font-family: "IBM Plex Sans Arabic", "Advent Pro", "Segoe UI", Tahoma, sans-serif !important;
}

/* Bootstrap aligns the body text left */
html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] body,
html[dir="rtl"] body * {
  letter-spacing: 0 !important;
}

html[dir="rtl"] .aboutus p,
html[dir="rtl"] .serviceLink p,
html[dir="rtl"] .s_service .top p,
html[dir="rtl"] .contactLeft p,
html[dir="rtl"] .blogContent,
html[dir="rtl"] .modal-body {
  font-weight: 500;
}

/* Justified Arabic leaves rivers on narrow columns; start-aligned reads better */
html[dir="rtl"] .aboutus p,
html[dir="rtl"] .s_service .top p {
  text-align: start;
}

/* Homepage hero ("Who are we?"): Arabic needs a larger size and taller lines than Advent Pro
   to read comfortably; the copy is set as short paragraphs (components/home/AboutSection.tsx). */
html[dir="rtl"] .aboutus h1 {
  font-size: clamp(30px, 2.6vw, 42px);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 22px;
  text-wrap: balance;
}

html[dir="rtl"] .aboutus p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.95;
  color: #1f1b2d;
  text-wrap: pretty;
}

html[dir="rtl"] .aboutus p + p {
  margin-top: 14px;
}

/* Desktop: text beside the sidebar on the right, illustration on the left, with real space
   between them; both columns centred on the same axis. */
@media (min-width: 992px) {
  /* (columns keep the default stretch: the legacy .middle centring needs their full height) */
  html[dir="rtl"] #aboutus .aboutus__text {
    order: 1;
    flex: 0 0 53%;
    max-width: 53%;
    padding-inline: 8px 56px;
  }

  html[dir="rtl"] #aboutus .aboutus__text .middle {
    max-width: 600px;
  }

  html[dir="rtl"] #aboutus .aboutus__art {
    order: 2;
    flex: 0 0 47%;
    max-width: 47%;
    padding-inline: 8px 0;
  }

  /* the 1.08 desktop scale grows from the far edge, away from the text; on short screens the
     artwork is capped by the viewport height so it never reaches the corner section title */
  html[dir="rtl"] #aboutus .aboutus__art .minds {
    transform-origin: left center;
    max-width: calc(62vh * 4 / 3);
    margin-inline: auto 0;
  }
}

/* Short desktop screens: keep the three paragraphs inside the section */
@media (min-width: 992px) and (max-height: 760px) {
  html[dir="rtl"] .aboutus h1 {
    font-size: 30px;
    margin-bottom: 14px;
  }

  html[dir="rtl"] .aboutus p {
    font-size: 15.5px;
    line-height: 1.85;
  }

  html[dir="rtl"] .aboutus p + p {
    margin-top: 8px;
  }
}

@media (max-width: 991px) {
  html[dir="rtl"] .aboutus h1 {
    font-size: 28px;
    line-height: 1.45;
    margin-bottom: 16px;
  }

  html[dir="rtl"] .aboutus p {
    font-size: 16px;
    line-height: 1.9;
  }

  html[dir="rtl"] .aboutus p + p {
    margin-top: 12px;
  }
}

/* Text set in English inside Arabic copy (addresses, emails, phone numbers) keeps its order */
html[dir="rtl"] [dir="ltr"] {
  unicode-bidi: isolate;
}

/* ==== 2. Layout (style.min.css) ============================================ */
/* Bootstrap removes list indents with padding-left only; in RTL the browser's default 40px
   indent sits on the right instead (it pushed the sidebar navigation off the edge). */
html[dir="rtl"] :is(.navbar-nav, .nav, .list-unstyled, .list-inline, .pagination) {
  padding-right: 0;
}

html[dir="rtl"] .leftContents {
  left: auto;
  right: 0;
}

html[dir="rtl"] .rightContents {
  margin-left: 0;
  margin-right: 200px;
}

html[dir="rtl"] .rightContents .main section {
  float: right;
  padding-left: 0;
  margin-left: 0;
  padding-right: 200px;
  margin-right: -200px;
}

html[dir="rtl"] .verticalScroll .rightContents .main section {
  padding: 0 30px 30px;
  margin-right: 0;
}

/* Section headings sit opposite the sidebar */
html[dir="rtl"] h1.heading,
html[dir="rtl"] h2.heading {
  right: auto;
  left: 40px;
}

html[dir="rtl"] h1.heading::after,
html[dir="rtl"] h2.heading::after {
  right: auto;
  left: 0;
}

html[dir="rtl"] h1.title::after,
html[dir="rtl"] h2.title::after {
  left: auto;
  right: 0;
}

/* Logo tab: overhangs the sidebar on its inner (left) edge, with mirrored folded corners */
html[dir="rtl"] .navLogo {
  left: auto;
  right: 0;
}

html[dir="rtl"] .navLogo a::before,
html[dir="rtl"] .navLogo a::after {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}

html[dir="rtl"] .menuButton {
  right: auto;
  left: 20px;
}

html[dir="rtl"] .aboutus h3 span,
html[dir="rtl"] .ourExperts h3 span {
  margin: 0 0 0 10px;
}

html[dir="rtl"] .caseFilterNav {
  text-align: right;
}

html[dir="rtl"] .tmContentGroup h4 i {
  float: left;
}

/* Contact: dark panel behind the form on the left, yellow card on the right */
html[dir="rtl"] .contactBg {
  right: auto;
  left: 0;
  box-shadow: 10px 10px 20px -10px darkgrey;
}

html[dir="rtl"] .contactLeft {
  border-radius: 30px 0 0 0;
}

html[dir="rtl"] .contactLeft::before {
  right: auto;
  left: 57px;
  transform: scaleX(-1);
}

html[dir="rtl"] .contactLeft::after {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}

html[dir="rtl"] .contactLeft h4::after {
  left: auto;
  right: 0;
}

/* Career: the job cards use logical properties (styles/site/career.css) */

/* Bootstrap 4 modal close button */
html[dir="rtl"] .modal-header .close {
  margin: -1rem auto -1rem -1rem;
}

html[dir="rtl"] .blogDate i,
html[dir="rtl"] .blogAuthor {
  margin: 0 0 0 10px;
}

/* The WhatsApp button needs no override: whatsapp-float.css places it at the inline end
   (bottom-left in Arabic, clear of the right-hand sidebar). */

/* ==== 3. Directional icons ================================================ */
/* Arrows point the reading way. (Hover nudges use the separate `translate` property.) */
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-long-arrow-alt-right {
  transform: scaleX(-1);
}

/* "Watch on YouTube ↗" points up and to the reading direction */
html[dir="rtl"] .fl-player__yt i {
  transform: scaleX(-1) rotate(-45deg);
}

/* ==== 4. Tablet / mobile (responsive.min.css) ============================== */
@media (max-width: 992px) {
  html[dir="rtl"] .leftContents {
    left: auto;
  }

  html[dir="rtl"] .rightContents,
  html[dir="rtl"] .verticalScroll .rightContents {
    margin-right: 0;
  }

  html[dir="rtl"] .rightContents .main section {
    float: none;
    padding-right: 0;
    margin-right: 0;
  }

  /* Stacked layout: section titles align to the start (right), underline beneath their first word */
  html[dir="rtl"] h1.heading,
  html[dir="rtl"] h2.heading {
    left: auto;
    right: 0;
    text-align: right;
    padding: 0 30px 0 0;
  }

  html[dir="rtl"] h1.heading::after,
  html[dir="rtl"] h2.heading::after {
    left: auto;
    right: 30px;
  }
}

@media (max-width: 576px) {
  html[dir="rtl"] h1.heading,
  html[dir="rtl"] h2.heading {
    padding: 0 20px 0 0;
  }

  html[dir="rtl"] h1.heading::after,
  html[dir="rtl"] h2.heading::after {
    left: auto;
    right: 20px;
  }
}

/* ==== 5. "English" badge on links to pages that exist only in English ====== */
html[dir="rtl"] .lang-badge {
  display: inline-block;
  width: fit-content;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f1ebf8;
  color: #542785;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

/* ==== 6. Forms ============================================================ */
/* Emails and phone numbers are typed left to right; the Arabic placeholder stays right-aligned */
html[dir="rtl"] input[type="email"]:not(:placeholder-shown),
html[dir="rtl"] input[name="phone"]:not(:placeholder-shown) {
  direction: ltr;
  text-align: right;
}