/*==================================================================
  rtl.css — Arabic (right-to-left) layer
  ------------------------------------------------------------------
  Loaded ONLY on /ar pages, after style.css. Bootstrap's own RTL build
  already flips the grid, spacing utilities and float helpers, so this
  file only has to correct the site's hand-written directional rules
  plus the Arabic typography, which needs different metrics from the
  Latin faces the design was built around.

  Every selector is scoped under [dir="rtl"] so this file is inert if
  it is ever loaded on an English page by mistake.
==================================================================*/

/*------------------------------------------------------------------
# Font stack
  The inlined critical CSS already points --font-* at IBM Plex Sans
  Arabic, but style.css re-declares both variables on :root and loads
  afterwards, so it wins and the page falls back to Sora / Plus Jakarta
  Sans — neither of which has Arabic glyphs. Re-declaring here fixes it
  twice over: this file loads after style.css, and :root[dir="rtl"]
  outranks a bare :root on specificity.
------------------------------------------------------------------*/
:root[dir="rtl"] {
  --font-display: "IBM Plex Sans Arabic", "PlexArabic-fallback", "Segoe UI", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "PlexArabic-fallback", "Segoe UI", Tahoma, sans-serif;
}

/*------------------------------------------------------------------
# Typography
  Arabic letterforms are connected: the negative letter-spacing that
  makes Sora look tight in English visually breaks the joins between
  Arabic glyphs. Reset it everywhere and give the script the extra
  leading its ascenders and descenders need.
------------------------------------------------------------------*/
[dir="rtl"] body {
  font-family: var(--font-body);
  letter-spacing: normal;
  line-height: 1.9;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: var(--font-display);
  letter-spacing: normal;
  line-height: 1.45;
}

[dir="rtl"] .header .logo span,
[dir="rtl"] .hero-proof strong,
[dir="rtl"] .eyebrow,
[dir="rtl"] .btn,
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-outline-primary,
[dir="rtl"] .btn-read-more {
  letter-spacing: normal;
}

/* The brand name and phone/email stay Latin even inside Arabic text. */
[dir="rtl"] .logo span,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: embed;
}

/*------------------------------------------------------------------
# Header + logo
------------------------------------------------------------------*/
[dir="rtl"] .header .logo img {
  margin-right: 0;
  margin-left: 11px;
}

[dir="rtl"] .mobile-nav-toggle {
  margin-right: 0;
  margin-left: -8px;
}

/*------------------------------------------------------------------
# Navigation — desktop
------------------------------------------------------------------*/
[dir="rtl"] .navbar a,
[dir="rtl"] .navbar a:focus,
[dir="rtl"] .navbar a span {
  padding: 10px 30px 10px 0;
}

[dir="rtl"] .navbar a i,
[dir="rtl"] .navbar a:focus i {
  margin-left: 0;
  margin-right: 5px;
}

[dir="rtl"] .navbar .getstarted,
[dir="rtl"] .navbar .getstarted:focus {
  margin-left: 0;
  margin-right: 30px;
}

/* Dropdown panels hang from the opposite edge. */
[dir="rtl"] .navbar .dropdown ul {
  left: auto;
  right: 14px;
}

[dir="rtl"] .navbar .dropdown ul li:hover > a {
  padding-left: 14px;
  padding-right: 18px;
}

/* Nested (second-level) dropdowns open leftwards. */
[dir="rtl"] .navbar .dropdown .dropdown ul {
  left: auto;
  right: calc(100% - 30px);
}

[dir="rtl"] .navbar .dropdown .dropdown:hover > ul {
  left: auto;
  right: 100%;
}

@media (max-width: 1366px) {
  [dir="rtl"] .navbar .dropdown .dropdown ul {
    left: auto;
    right: -90%;
  }

  [dir="rtl"] .navbar .dropdown .dropdown:hover > ul {
    left: auto;
    right: -100%;
  }
}

/*------------------------------------------------------------------
# Navigation — mobile
------------------------------------------------------------------*/
[dir="rtl"] .navbar-mobile .mobile-nav-toggle {
  right: auto;
  left: 15px;
}

[dir="rtl"] .navbar-mobile .dropdown ul {
  border-left: 0;
  border-right: 2px solid var(--line-2);
  margin: 4px 10px 6px 0;
  padding: 0 6px 0 0;
}

/*------------------------------------------------------------------
# Floating actions + back-to-top
  These sit in the bottom-right in English; in Arabic the reading eye
  ends bottom-left, and leaving them on the right would overlap the
  scrollbar side of an RTL viewport.
------------------------------------------------------------------*/
[dir="rtl"] .floating-actions {
  right: auto;
  left: 28px;
}

[dir="rtl"] .back-to-top {
  right: auto;
  left: 28px;
}

/*------------------------------------------------------------------
# Directional icons
  Chevrons and arrows carry meaning ("forward", "next"), so they have
  to point the other way. Mirroring beats swapping the icon class in
  every view.
------------------------------------------------------------------*/
[dir="rtl"] .bi-chevron-right::before,
[dir="rtl"] .bi-arrow-right::before,
[dir="rtl"] .btn-read-more i::before {
  display: inline-block;
  transform: scaleX(-1);
}

[dir="rtl"] .btn-read-more:hover i {
  transform: translateX(-4px);
}

/*------------------------------------------------------------------
# Breadcrumbs
------------------------------------------------------------------*/
[dir="rtl"] .breadcrumbs ol li + li {
  padding-left: 0;
  padding-right: 10px;
}

[dir="rtl"] .breadcrumbs ol li + li::before {
  padding-right: 0;
  padding-left: 10px;
}

/*------------------------------------------------------------------
# Home — about + capabilities
------------------------------------------------------------------*/
[dir="rtl"] .about .content {
  padding-right: 0;
  padding-left: clamp(0px, 3vw, 2.5rem);
}

[dir="rtl"] .company-capabilities h3 {
  padding-left: 0;
  padding-right: 1rem;
  border-left: 0;
  border-right: 3px solid var(--primary);
}

/*------------------------------------------------------------------
# Cards + section copy that is left-aligned by default
------------------------------------------------------------------*/
[dir="rtl"] .ourproducts .box,
[dir="rtl"] .features > .container > p,
[dir="rtl"] .contact .php-email-form .error-message {
  text-align: right;
}

[dir="rtl"] .ourproducts .box::before {
  transform-origin: right;
}

/*------------------------------------------------------------------
# Inner service pages — checklist bullets
  The tick is drawn with ::before/::after squares pinned to the left
  edge; both need re-pinning, and the ::after checkmark has to be
  rotated the other way so it still reads as a tick and not a cross.
------------------------------------------------------------------*/
[dir="rtl"] #main2 .values ul li {
  padding: .35rem 2rem .35rem 0;
}

[dir="rtl"] #main2 .values ul li::before {
  left: auto;
  right: 0;
}

[dir="rtl"] #main2 .values ul li::after {
  left: auto;
  right: .36rem;
}

/*------------------------------------------------------------------
# Progress bars (SEO page skill meters)
------------------------------------------------------------------*/
[dir="rtl"] .features .progress .skill {
  padding-right: 0;
  padding-left: 8px;
}

/*------------------------------------------------------------------
# Footer
------------------------------------------------------------------*/
[dir="rtl"] .footer .footer-links ul i {
  margin-right: 0;
  margin-left: .45rem;
}

[dir="rtl"] .footer .footer-links ul a {
  transition: color .2s ease, padding-right .2s ease;
}

[dir="rtl"] .footer .footer-links ul a:hover {
  padding-left: 0;
  padding-right: 4px;
}

/*------------------------------------------------------------------
# Language switcher
  Shared component, defined here and in the critical CSS so it paints
  correctly before style.css lands.
------------------------------------------------------------------*/
[dir="rtl"] .lang-switch {
  margin-left: 0;
  margin-right: 18px;
}

/* Keep the switcher compact in RTL: the generic .navbar a / a span rules
   otherwise re-inflate its links with nav-item padding and font size. */
[dir="rtl"] .navbar .lang-switch a {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}
[dir="rtl"] .navbar .lang-switch a span {
  padding: 0;
  font-size: inherit;
}

/* Opposite corner from the mobile close button, which rtl.css moves to the left. */
[dir="rtl"] .navbar-mobile .lang-switch {
  left: auto;
  right: 15px;
}

@media (max-width: 991px) {
  [dir="rtl"] .lang-switch {
    margin-right: auto;
    margin-left: 12px;
  }
}