/* ============================================================
   BluePrint — rtl.css
   Right-to-left overrides. Loaded only by index_arabic.html.
   ============================================================ */

:root {
  --font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans Arabic', 'DM Sans', system-ui, sans-serif;
}

body { direction: rtl; text-align: right; }

/* Arabic reads better with a little more line height */
body, p, li { line-height: 1.95; }
h1, h2, h3, h4 { letter-spacing: 0; line-height: 1.45; }
.page-header h1 { line-height: 1.35; }

/* Flip the utility classes we actually use */
.text-left  { text-align: right !important; }
.text-right { text-align: left  !important; }
.ml-auto    { margin-left: 0 !important; margin-right: auto !important; }
.mr-auto    { margin-right: 0 !important; margin-left: auto !important; }

/* Navbar */
.nav-logo-wrap img { transform: none; }
.nav-link .nav-chevron { margin-left: 0; margin-right: 1px; }
.nav-dd-link { text-align: right; }
.drawer-link { text-align: right; }
.footer-link-list li a, .footer-link-list li button { text-align: right; }
.footer-link-list li a:hover, .footer-link-list li button:hover { padding-left: 0; padding-right: 6px; }
.footer-col-title::after { left: auto; right: 0; }
.footer-live-chip { margin-left: 0; margin-right: auto; }

/* Drawer slides in from the left in RTL */
#navMobileDrawer { right: auto; left: 0; transform: translateX(-100%); box-shadow: 8px 0 40px rgba(11, 47, 56,.15); }
#navMobileDrawer.open { transform: translateX(0); }

/* Chevrons and arrows point the other way */
.fa-chevron-right::before { content: "\f053"; }
.fa-arrow-right::before   { content: "\f060"; }
.fa-arrow-left::before    { content: "\f061"; }

/* Section eyebrow */
.showcase-eyebrow::before { margin-left: 0; }

/* Floating widgets swap sides */
.whatsapp-container { right: auto; left: 28px; }
#expertCTA { left: auto; right: 28px; }
#expertPanel { left: auto; right: 28px; transform: translateX(380px); }
#expertCTA.open #expertPanel { transform: translateX(0); }


.expert-label-pill { border-radius: 12px 0 0 12px; }
.ep-close { right: auto; left: 12px; }

/* Cards and panels */
.isvc-tab::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
.isvc-tab:hover  { transform: translateX(-3px); }
.isvc-tab.active { transform: translateX(-5px); }
.isvc-panel-badge { left: auto; right: 18px; }
.isvc-panel-watermark { right: auto; left: 18px; }
.isvc-progress-bar { left: auto; right: 0; border-radius: 3px 0 0 0; }
.card-badge { left: auto; right: 12px; }
.card-source { right: auto; left: 12px; }
.article-body blockquote { border-left: none; border-right: 4px solid var(--bp-olive); border-radius: 12px 0 0 12px; }
.article-body ul, .article-body ol { margin-left: 0; margin-right: 1.3rem; }
.article-body li { padding-left: 0; padding-right: .3rem; }

/* Tickers keep their direction so the animation still reads correctly */
.logo-ticker-track, .ticker-track { direction: ltr; }
.ticker-item { direction: rtl; }

/* Numerals in Latin form inside stat blocks look cleaner */
.stat-number, .isvc-tab-num, .sc-val, .ns-val { direction: ltr; unicode-bidi: embed; }

/* Hero scrim is directional — mirror it so the dark side sits behind the copy */
[dir="rtl"] .hero-cover-scrim {
  background:
    linear-gradient(260deg, rgba(11,47,56,.88) 0%, rgba(11,47,56,.55) 30%, rgba(11,47,56,.14) 55%, rgba(11,47,56,0) 78%),
    linear-gradient(to top, rgba(11,47,56,.34) 0%, rgba(11,47,56,0) 32%);
}
@media (max-width: 1023px) {
  [dir="rtl"] .hero-cover-video { object-position: 38% center; }
}
/* Two-tone service hero mirrors as well */
[dir="rtl"] .svcd-hero::after { right: auto; left: 0; }
[dir="rtl"] .svcd-hero::before { right: auto; left: 46%; }
[dir="rtl"] .svcd-float { left: auto; right: -56px; }

/* ==== arabic stage 1 ==== */
/* the logo is a Latin wordmark, so it keeps its left-to-right order */
.bp-lock { direction: ltr; }
/* phone numbers and codes read left to right inside Arabic text */
[dir="ltr"] { unicode-bidi: isolate; }
.footer-cert-badge { direction: ltr; }
/* dropdown text starts from the right */
.nav-dd-text-wrap, .nav-dropdown-title, .nav-mega-header-title { text-align: right; }

/* ==== arabic stage 2: home ==== */
/* Arabic letters join to each other; letter-spacing pulls them apart */
html[dir="rtl"] body * { letter-spacing: 0 !important; }

/* Tailwind's space-x puts the gap on the left; in Arabic it belongs on the right */
html[dir="rtl"] [class*="space-x-"] > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }

/* cover: the shading sits behind the copy, which is now on the right */
@media (min-width: 901px) {
  html[dir="rtl"] .sc-s {
    background: linear-gradient(260deg, rgba(6,26,28,.88) 0%, rgba(6,26,28,.72) 38%,
      rgba(6,26,28,.32) 68%, rgba(6,26,28,.12) 100%) !important; }
}
/* chapter labels move to the free side */
html[dir="rtl"] .rail { right: auto; left: clamp(16px, 2.4vw, 38px); }

/* services carousel */
html[dir="rtl"] .carsec-head { text-align: right; }
@media (min-width: 1001px) {
  html[dir="rtl"] .car-badges { padding-left: 0; border-left: none;
    padding-right: 44px; border-right: 1px solid rgba(11,47,56,.16); }
}
html[dir="rtl"] .car-card .car-body,
html[dir="rtl"] .car-card.sideL .car-body,
html[dir="rtl"] .car-card.sideR .car-body { text-align: right !important; }

/* three service cards */
html[dir="rtl"] .svc-card { text-align: right; }
html[dir="rtl"] .svc-card-num { left: auto; right: 24px; }
html[dir="rtl"] .svc-card-icon { right: auto; left: 20px; }
html[dir="rtl"] .svc-back-list li { padding-left: 0; padding-right: 24px; }
html[dir="rtl"] .svc-back-list li::before { left: auto; right: 0; }

/* sectors */
html[dir="rtl"] .sect-tag { left: auto; right: 13px; }

/* insights */
html[dir="rtl"] .ipanel-tag { left: auto; right: 84px; border-left: none; padding-left: 0;
  border-right: 2px solid var(--bp-blue); padding-right: 16px; }
html[dir="rtl"] .icard-n { left: auto; right: 14px; direction: ltr; }
html[dir="rtl"] .icard-ic { left: auto; right: 16px; }
@media (max-width: 900px) { html[dir="rtl"] .ipanel-tag { right: 26px; } }

/* cover labels: the monospace face has no Arabic letters, so use the Arabic
   face, and give Arabic the size it needs to stay legible */
html[dir="rtl"] .stage, html[dir="rtl"] .wrap, html[dir="rtl"] .after {
  --mono: 'IBM Plex Sans Arabic', 'IBM Plex Mono', ui-monospace, monospace; }
html[dir="rtl"] .eb { font-size: 12.5px; }
html[dir="rtl"] .mk-c { font-size: 9.5px; }
html[dir="rtl"] .mk-v { font-size: 11.5px; }
html[dir="rtl"] .ch span { font-size: 11px; }
html[dir="rtl"] .hud { font-size: 11px; }
html[dir="rtl"] .lc-val span { font-size: 9px; }
html[dir="rtl"] .lc-k { font-size: 10px; }
html[dir="rtl"] .lc-src { font-size: 9px; }
html[dir="rtl"] .par span { font-size: 10.5px; }
html[dir="rtl"] .cr span { font-size: 11px; }
html[dir="rtl"] .cv-cred span { font-size: .72rem; }
/* credential dividers sit on the reading-start side */
html[dir="rtl"] .cr div { border-left: none; padding-left: 0;
  border-right: 2px solid rgba(120,224,240,.6); padding-right: 17px; }
html[dir="rtl"] .par b { direction: ltr; unicode-bidi: isolate; }

/* client logos are pictures, not text: keep the strip left to right so the
   scrolling animation stays seamless */
html[dir="rtl"] .logo-marquee, html[dir="rtl"] .logo-track { direction: ltr; }

/* ==== arabic stage 3: inner pages ==== */
/* About hero: photo on the left, shading behind the Arabic copy on the right */
@media (min-width: 1001px) {
  html[dir="rtl"] .abt-hero-media { inset: 0 38% 0 0; }
  html[dir="rtl"] .abt-hero-veil {
    background: linear-gradient(260deg, #0b2f38 0%, #0b2f38 46%, rgba(11,47,56,.86) 60%, rgba(11,47,56,.42) 100%); }
}
html[dir="rtl"] .abt-lede { border-left: none; border-right: 3px solid #4fc3cd; padding: 4px 20px 4px 0; }
html[dir="rtl"] .abt-hero-facts > div { padding-right: 0; margin-right: 0; border-right: none;
  padding-left: 40px; margin-left: 40px; border-left: 1px solid rgba(255,255,255,.16); }
html[dir="rtl"] .abt-hero-facts > div:last-child { border-left: none; margin-left: 0; padding-left: 0; }
@media (max-width: 560px) {
  html[dir="rtl"] .abt-hero-facts > div { border-left: none; padding-left: 0; margin: 0 0 16px 34px; }
}
html[dir="rtl"] .abt-reg-cards { right: auto; left: 0; }
html[dir="rtl"] .abt-mdl-tools, html[dir="rtl"] .abt-reg dd { text-align: left; }

/* ==== arabic stage 4: all remaining pages ==== */
/* equipment catalogue, phone layout: the row label comes from CSS */
@media (max-width: 860px) {
  html[dir="rtl"] .eqp-meas::before { content: "يقيس: "; }
}
/* compliance hub: English reference title under the Arabic one */
html[dir="rtl"] .cmp-en-ref { direction: ltr; text-align: right; font-family: var(--font-body, inherit); }

/* ==== arabic stage 5: readable small labels ==== */
/* Arabic letterforms need more size than Latin small caps to stay legible;
   these labels sit at 9.6-11.4px in the shared design, so Arabic gets 12px */
html[dir="rtl"] .drawer-section-title, html[dir="rtl"] .footer-contact-label,
html[dir="rtl"] .footer-col-title, html[dir="rtl"] .footer-cta-label, html[dir="rtl"] .footer-credit,
html[dir="rtl"] .icard-cat, html[dir="rtl"] .svc-card-kick, html[dir="rtl"] .svc-card-count,
html[dir="rtl"] .sect-obl b, html[dir="rtl"] .acr-kick, html[dir="rtl"] .showcase-eyebrow,
html[dir="rtl"] .ikick, html[dir="rtl"] .abt-cred-full, html[dir="rtl"] .abt-eyebrow,
html[dir="rtl"] .svcd-figure-k, html[dir="rtl"] .svcd-cap-badge span, html[dir="rtl"] .svcd-float-row span, html[dir="rtl"] .svcd-float-2 span,
html[dir="rtl"] .svcd-kicker, html[dir="rtl"] .cmp-sev, html[dir="rtl"] .cmp-ref, html[dir="rtl"] .cmp-tag,
html[dir="rtl"] .cmp-eyebrow, html[dir="rtl"] .card-time, html[dir="rtl"] .card-badge,
html[dir="rtl"] .svq-eyebrow, html[dir="rtl"] .eqp-eyebrow { font-size: 12px !important; }
/* number runs (postcodes, phone numbers) never break across lines */
html[dir="rtl"] span[dir="ltr"], html[dir="rtl"] bdi[dir="ltr"] { white-space: nowrap; }
/* compliance hub: the English reference title is a quiet secondary line */
html[dir="rtl"] .cmp-en-ref { font-size: .8rem; line-height: 1.45; opacity: .8; margin-top: 2px; }

/* ==== arabic stage 6: service page hero and figure mirrored ==== */
/* wide screens: the floating panels sit on the mirror-image side, so the
   accreditation badge no longer lands on top of the fact card */
@media (min-width: 1024px) {
  html[dir="rtl"] .svcd-float { left: auto; right: -46px; }
  html[dir="rtl"] .svcd-float-2 { right: auto; left: -28px; }
  html[dir="rtl"] .svcd-figure-card { right: 40px; left: -24px; }
  html[dir="rtl"] .svcd-cap-badge { left: auto; right: -12px; }
}
@media (max-width: 1023px) {
  html[dir="rtl"] .svcd-cap-badge { right: auto; left: 14px; }
}
/* the notched corner of the photos moves to the top-left */
html[dir="rtl"] .svcd-hero-img { clip-path: polygon(46px 0, 100% 0, 100% 100%, 0 100%, 0 46px); }
html[dir="rtl"] .svcd-figure-img { clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px); }