/* ===== Arabic typography & RTL polish (loaded only on /ar/ pages) ===== */

/* --- 1) Force TarjamaFontV1 everywhere except true numeric / Latin mono elements --- */
:root[lang="ar"] body,
:root[lang="ar"] .hero__lede,
:root[lang="ar"] .lede,
:root[lang="ar"] .hero__headline,
:root[lang="ar"] .section-title,
:root[lang="ar"] .footer__col-title,
:root[lang="ar"] .nav__item-label,
:root[lang="ar"] .nav__dropdown-link,
:root[lang="ar"] .nav__dropdown-title,
:root[lang="ar"] .nav__dropdown-rich-desc,
:root[lang="ar"] .footer__list,
:root[lang="ar"] .cta__title,
:root[lang="ar"] .cta__sub,
:root[lang="ar"] p, :root[lang="ar"] span, :root[lang="ar"] a,
:root[lang="ar"] li, :root[lang="ar"] h1, :root[lang="ar"] h2,
:root[lang="ar"] h3, :root[lang="ar"] h4, :root[lang="ar"] button,
:root[lang="ar"] .btn span,
:root[lang="ar"] .tech-label,
:root[lang="ar"] .swap-card__service,
:root[lang="ar"] .solution-card__service,
:root[lang="ar"] .solution-card__title,
:root[lang="ar"] .swap-card__desc,
:root[lang="ar"] .solution-card__desc,
:root[lang="ar"] .gallery-card__kicker,
:root[lang="ar"] .gallery-card__metric,
:root[lang="ar"] .gallery-card__label,
:root[lang="ar"] .lang-stat__label,
:root[lang="ar"] .test-card__name,
:root[lang="ar"] .test-card__title,
:root[lang="ar"] .test-card__quote,
:root[lang="ar"] .cap-overview__kicker,
:root[lang="ar"] .cap-overview__body,
:root[lang="ar"] .clients__head,
:root[lang="ar"] .orbit-label,
:root[lang="ar"] .orbit-hint,
:root[lang="ar"] .hero__eyebrow {
  font-family: 'TarjamaFontV1', var(--font), -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* --- 2) Display headings — slightly tighter Arabic spacing --- */
:root[lang="ar"] .hero__headline,
:root[lang="ar"] .section-title,
:root[lang="ar"] .cta__title {
  letter-spacing: 0;
  line-height: 1.15;
}
:root[lang="ar"] .hero__headline {
  max-width: 32ch;
  /* Override inherited `text-wrap: balance` from .hero__main — balance forces
     even line lengths and would split the tail "الرائدة في الشرق الأوسط."
     into two lines even when there's horizontal room for it on one. */
  text-wrap: pretty;
}
:root[lang="ar"] .hero__headline .hero__rotate { white-space: nowrap; }

/* --- 3) Rotating word: right-anchored, IBM Plex font, RTL typing flow ---
   Container has min-width so the right edge stays fixed as letters appear leftward */
:root[lang="ar"] .hero__headline .accent-word {
  font-family: 'TarjamaFontV1', var(--font), sans-serif !important;
  text-align: right;
  direction: rtl;
  unicode-bidi: isolate;
  letter-spacing: 0;
  font-size: 1em;
  /* Base CSS reserves min-width:8.5em for English's longest word
     ("communication", ~13 chars). Arabic rotation maxes at 7 letters
     ("الاتصال"), so we shrink the reservation — otherwise the accent-word's
     huge reserved width pushes it off the first line onto its own line. */
  min-width: 5em;
}
:root[lang="ar"] .hero__headline .accent-word::before,
:root[lang="ar"] .hero__headline .accent-word::after { content: none; }
:root[lang="ar"] .hero__headline .accent-word .ar-br {
  color: var(--red);
  font-weight: 300;
  display: inline-block;
}
/* Caret blinks at the END of typed text (which in RTL is to the LEFT of last char) */
:root[lang="ar"] .hero__caret { margin-left: 0; margin-right: 0.06em; }

/* --- 4) True numeric values stay LTR/mono so digits render cleanly --- */
:root[lang="ar"] [data-counter],
:root[lang="ar"] .hero__stat-value,
:root[lang="ar"] .lang-stat__num,
:root[lang="ar"] .test-card__avatar,
:root[lang="ar"] .gallery-card__num,
:root[lang="ar"] .swap-card__media-tag,
:root[lang="ar"] .swap-card__index,
:root[lang="ar"] .solution-card__index {
  font-family: var(--font-mono), monospace !important;
  direction: ltr;
  unicode-bidi: isolate;
}
/* Fix `100<sup>+</sup>` and `24<sup>/7</sup>` in lang stats —
   force LTR isolate so the supplement renders to the RIGHT of the number visually */
:root[lang="ar"] .lang-stat__num {
  display: inline-flex;
  align-items: baseline;
  flex-direction: row;
}
/* Hero stat dividers — mirror right-edge separator to left in RTL */
:root[lang="ar"] .hero__stat { padding-right: 0; padding-left: 1rem; }
:root[lang="ar"] .hero__stat:not(:last-child)::after {
  right: auto; left: 0;
}
/* Hero stat values — right-align the number block to match the Arabic label below.
   Value stays direction:ltr so "100+" / "2B+" render in reading order, but the
   whole flex row is pushed to the right edge of the column. */
:root[lang="ar"] .hero__stat-value { justify-content: flex-end; }
:root[lang="ar"] .hero__stat-label { text-align: right; }

/* --- 5) Button arrow — flip to point left (toward reading direction) --- */
:root[lang="ar"] .btn__arrow svg { transform: scaleX(-1); }

/* --- 6) Brand-name spans stay LTR-isolated (Tarjama, T-Portal, etc.) --- */
:root[lang="ar"] .brand-mark, :root[lang="ar"] .ltr {
  direction: ltr; unicode-bidi: isolate;
}
:root[lang="ar"] .swap-card__title { direction: ltr; unicode-bidi: isolate; justify-content: flex-end; }

/* Card stack — mirror the LTR -90px X-translate so the front card hugs the
   right side of its column instead of the left, matching the reference. */
@media (min-width:1101px){ :root[lang="ar"] .card-swap { transform: translate(90px, 20px); } } /* desktop-only deck offset; reset to none on mobile */

/* Card corner badges — flip "01 / 06" to right edge, spark to left,
   so the badge sits next to the description column (mirror of LTR). */
:root[lang="ar"] .swap-card__media-tag { left: auto; right: 1.25rem; }
:root[lang="ar"] .swap-card__media-spark { right: auto; left: 1.25rem; }

/* Mirror the radial accent glow so it pools on the same visual side as LTR
   after the deck is flipped (right-anchored cards "face" content on the right). */
:root[lang="ar"] .swap-card__media-glow {
  background: radial-gradient(circle at 70% 30%, var(--card-accent, rgba(255,36,60,0.4)) 0%, transparent 60%);
}

/* --- 7) Mobile drawer slides from left in RTL ---
   NOTE: target __panel (the sliding sheet) not .m-drawer (the full-viewport wrapper).
   Transforming the wrapper collapses it to 0 width and the panel never appears.
   Override box-shadow so the shadow falls on the visible (right) edge in RTL. */
:root[lang="ar"] .m-drawer__panel { right: auto; left: 0; transform: translateX(-100%); border-left: 0; border-right: 1px solid rgba(245,242,234,0.08); box-shadow: 32px 0 80px rgba(0,0,0,0.6); }
:root[lang="ar"] .m-drawer.is-open .m-drawer__panel { transform: translateX(0); }

/* --- 8) Footer brand mark stays LTR (it's the wordmark display) --- */
:root[lang="ar"] .footer__bigmark { direction: ltr; }

/* --- 9) Scroll progress bar — keep growing left-to-right --- */
:root[lang="ar"] #scroll-progress { direction: ltr; }

/* --- 10) Cases drag/scroll hint arrow — flip to point reading direction --- */
:root[lang="ar"] .cases__hint svg { transform: scaleX(-1); }

/* --- 10b) Full-bleed RTL fix for cases gallery —
   the original uses `left: 50%; margin-left: -50vw` which calculates from physical
   left in LTR but breaks in RTL parents because of how flexbox/grid positions the
   container. Mirror with right-side trick for AR. */
:root[lang="ar"] .cases__gallery {
  left: auto;
  right: 50%;
  margin-left: 0;
  margin-right: -50vw;
}

/* --- 11) JS-driven horizontal galleries — force LTR direction internally
   (the JS measures cardWidth and translates by negative pixels in LTR coords;
   forcing LTR here keeps the animation correct. Text inside cards is still RTL.) --- */
:root[lang="ar"] .cases__gallery,
:root[lang="ar"] .gallery-track,
:root[lang="ar"] .test-marquee,
:root[lang="ar"] .test-marquee__track,
:root[lang="ar"] .test-marquee__set,
:root[lang="ar"] .lang-marquees,
:root[lang="ar"] .lang-row,
:root[lang="ar"] .lang-track,
:root[lang="ar"] .clients-marquee,
:root[lang="ar"] #clients-track {
  direction: ltr;
}
/* Re-establish RTL inside individual cards so Arabic text reads correctly */
:root[lang="ar"] .gallery-card,
:root[lang="ar"] .test-card,
:root[lang="ar"] .lang-cell {
  direction: rtl;
}
/* Lang-cell that's already marked .rtl stays RTL; .lang-cell without it (English/Latin words) is LTR */
:root[lang="ar"] .lang-cell:not(.rtl) {
  direction: ltr;
}

/* --- 12) Navbar Arabic logo sizing
   The Arabic logo SVG has aspect ratio ~4.1:1 (861x210) — slightly taller than the
   Latin one (4.22:1). Tweak nav width so visual height matches existing 30px target. */
:root[lang="ar"] .logo-svg.logo--nav-ar { height: 32px; width: 132px; }
:root[lang="ar"] .nav.is-scrolled .logo-svg.logo--nav-ar { height: 30px; width: 124px; }

/* --- 13) FONT CONSISTENCY — universal sweep so nothing slips through ---
   The earlier rule listed every class explicitly; this catches anything missed
   (kickers, captions, micro-labels, dropdown content, etc.). True numerics and
   .ltr/.brand-mark/.swap-card__title spans escape via the rule above. */
:root[lang="ar"] *:not([data-counter]):not(.mono-glyph):not(.brand-mark):not(.ltr):not(.swap-card__title):not(.lang-stat__num):not(.test-card__avatar):not(.gallery-card__num):not(.swap-card__media-tag):not(.swap-card__index):not(.solution-card__index):not(.hero__stat-value):not(.hero__stat-value *):not(.lang-stat__num *):not(svg):not(svg *) {
  font-family: 'TarjamaFontV1', var(--font), -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- 14) HINT-ARROW animation — must include scaleX(-1) inside the keyframe,
   otherwise the running animation overrides our static flip rule. --- */
:root[lang="ar"] .cases__hint svg {
  animation: hint-arrow-rtl 2.4s ease-in-out infinite;
}
@keyframes hint-arrow-rtl {
  0%, 100% { transform: scaleX(-1) translateX(0);  opacity: 0.5; }
  50%      { transform: scaleX(-1) translateX(6px); opacity: 1;   }
}

/* --- 15) ROTATING WORD: clean inline behavior with brackets hugging the word.
   Brackets are HTML literals (not pseudo-elements) so RTL flow handles ordering. --- */
:root[lang="ar"] .hero__headline .accent-word {
  display: inline;
  letter-spacing: 0;
  font-size: 1em;
}
:root[lang="ar"] .hero__rotate {
  display: inline-block;
  font-feature-settings: "kern" 1, "liga" 1;
}
/* Caret follows the LAST typed char visually — in RTL, that's to the LEFT */
:root[lang="ar"] .hero__caret {
  margin: 0 0.06em 0 0;
}

/* --- 16) Mobile drawer logo — also swap to Arabic version --- */
:root[lang="ar"] .m-drawer .logo-svg use { /* visual-only fallback */ }

/* --- 17) Languages section title — keep within section bounds at very wide viewports.
   The original `section-head__right` lets the title push to its container's right edge
   which on ultra-wide screens makes the title look like it's flying off the page.
   Cap the right column at a sensible content width and keep title left-aligned within. --- */
:root[lang="ar"] .languages .section-head__right,
:root[lang="ar"] .cases .section-head__right,
:root[lang="ar"] .testimonials .section-head__right,
:root[lang="ar"] .capabilities .section-head__right,
:root[lang="ar"] .solutions .section-head__right {
  max-width: 720px;
}

/* --- 18) Section title in RTL — align right so it grows from the right margin
   inward (matches reading direction). Without this, on wide viewports the title
   can look stranded at the page edge. Constrain max-width so wide screens don't
   stretch the title past the right gutter. --- */
:root[lang="ar"] .section-title {
  text-align: right;
  max-width: 18ch;
  margin-right: 0;
  margin-left: auto;
  text-wrap: balance;
  overflow-wrap: break-word;
}
:root[lang="ar"] .languages .section-title,
:root[lang="ar"] .testimonials .section-title,
:root[lang="ar"] .cases .section-title { max-width: 16ch; }

/* --- 19) The hint-arrow animation duration was on .cases__hint svg only;
   the marquee and gallery have their own JS-driven motion which we leave alone. --- */

/* === RTL mega-dropdown anchor fix === */
/* In LTR the trigger sits at the left of the viewport so left:0 works.
   In RTL the trigger is on the right — anchor to right instead. */
[dir="rtl"] .nav__dropdown--mega,
:root[lang="ar"] .nav__dropdown--mega {
  left: auto !important;
  right: 0 !important;
}
[dir="rtl"] .nav__dropdown:not(.nav__dropdown--mega),
:root[lang="ar"] .nav__dropdown:not(.nav__dropdown--mega) {
  /* Non-mega dropdowns are centered with translateX(-50%); that already
     works in both directions, but make sure RTL hover state matches. */
  left: 50%;
  right: auto;
}

/* === Solutions mega-4 dropdown (added) ========================================
   4-column variant of the existing nav mega menu, plus optional 'sub-title as
   link' styling for clickable category headings.                              */
.nav__dropdown--mega-4 .nav__dropdown-mega-grid{
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.nav__dropdown--mega-4{
  /* Center the 4-column dropdown under the Solutions nav item (LTR).
     Override the parent .nav__dropdown--mega left:0 anchoring. */
  left:50%;
  right:auto;
  transform:translate(-50%, -8px);
  min-width:1080px;
  max-width:calc(100vw - 64px);
}
.nav__item-wrap:hover .nav__dropdown--mega-4,
.nav__item-wrap:focus-within .nav__dropdown--mega-4{
  transform:translate(-50%, 0);
}
/* RTL: there's a higher-specificity rule [dir="rtl"] .nav__dropdown--mega
   {right:0 !important} that wins, so use a stronger selector to anchor
   the centered version under the Solutions item in RTL too. */
[dir="rtl"] .nav__dropdown--mega.nav__dropdown--mega-4,
:root[lang="ar"] .nav__dropdown--mega.nav__dropdown--mega-4{
  right:50% !important;
  left:auto !important;
  transform:translate(50%, -8px);
}
[dir="rtl"] .nav__item-wrap:hover .nav__dropdown--mega.nav__dropdown--mega-4,
[dir="rtl"] .nav__item-wrap:focus-within .nav__dropdown--mega.nav__dropdown--mega-4,
:root[lang="ar"] .nav__item-wrap:hover .nav__dropdown--mega.nav__dropdown--mega-4,
:root[lang="ar"] .nav__item-wrap:focus-within .nav__dropdown--mega.nav__dropdown--mega-4{
  transform:translate(50%, 0);
}
.nav__dropdown-title--link{
  color:var(--text);
  text-decoration:none;
  transition:color 0.25s ease;
}
.nav__dropdown-title--link:hover{
  color:var(--red);
}
.m-drawer__sub-title--link{
  /* Inherit base sub-title styling (drawer is dark-themed) but make it a link. */
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(245,242,234,0.55);
  padding:14px 0 8px;
  border-top:1px solid rgba(245,242,234,0.05);
  margin-top:6px;
  display:block;
  text-decoration:none;
  transition:color 0.25s ease;
}
.m-drawer__sub:first-child .m-drawer__sub-title--link:first-child,
.m-drawer__sub-title--link:first-child{
  border-top:0;
  margin-top:0;
  padding-top:6px;
}
.m-drawer__sub-title--link:hover{color:#F5F2EA;}
/* Tablet/mobile fallback for the desktop mega-4 when viewport is narrow but
   the desktop nav is still visible (e.g. ~960–1180px). Drop to 2 columns. */
@media (max-width:1180px){
  .nav__dropdown--mega-4{min-width:0;width:calc(100vw - 64px);}
  .nav__dropdown--mega-4 .nav__dropdown-mega-grid{grid-template-columns:repeat(2,1fr);}
}
/* ============================================================================ */