/* ============================================================
   rtl.css — Arabic / RTL-only overrides
   Loaded ONLY on /ar/* pages, after every other stylesheet so it
   wins the cascade without touching the LTR code paths.

   Scope:
     1. Swap --ff-display and --ff-sans to IBM Plex Sans Arabic
        across the [lang="ar"] root.
     2. Reset variable-font axes (Plex Arabic is static, not
        variable, so opsz/SOFT axes from Fraunces would noop and
        sometimes trigger a fallback metrics flash).
     3. Retune type for Arabic readability — bump font-size on
        long-form copy (~6%) and loosen line-height (~10%) since
        Arabic glyphs need more vertical room than their Latin
        counterparts at the same visual weight.
     4. Mirror directional inline arrows that the EN page uses
        as content (→ becomes ← in CTAs). The arrow glyph lives
        in the AR markup as `←`, but where the EN CSS injects
        an arrow via ::after { content: '→' }, we override here.
     5. Reverse the few decorative offsets where logical
        properties aren't supported (brand corner anchors, etc.).
   ============================================================ */

:where([lang="ar"]) {
  --ff-display: var(--ff-ar);
  --ff-sans:    var(--ff-ar);
}

/* Clear Fraunces' variation axes so Plex Arabic isn't asked to
   honor opsz/SOFT (it has neither). The wght value stays useful
   because Plex Arabic's static weights match. */
[lang="ar"] {
  font-feature-settings: "kern";
}

[lang="ar"] [data-mask] .mask__inner,
[lang="ar"] .hero__title,
[lang="ar"] .section-title,
[lang="ar"] .blueprint__heading,
[lang="ar"] .final-cta__heading,
[lang="ar"] .portfolio-teaser__heading,
[lang="ar"] .about-hero__title,
[lang="ar"] .contact-hero__title,
[lang="ar"] .services-hero__title,
[lang="ar"] .services-discipline__title,
[lang="ar"] .services-equipment__title,
[lang="ar"] .projects-hero__title,
[lang="ar"] .achievements__title,
[lang="ar"] .vision__lede,
[lang="ar"] .discipline-hero__title,
[lang="ar"] .discipline-approach__title,
[lang="ar"] .discipline-services__title,
[lang="ar"] .discipline-sub-service__title,
[lang="ar"] .discipline-project__title {
  font-variation-settings: normal;
  /* Headings: Plex Arabic Bold (700) reads closer to the Fraunces
     600 weight visually because Arabic strokes are slightly heavier. */
  font-weight: 700;
}

/* CRITICAL — Arabic ligatures break under ANY non-zero letter-spacing.
   The site's headings/titles inherit negative tracking (-0.01 to -0.02em)
   from base.css + page-specific overrides, which makes every Arabic
   glyph render in its isolated form (visually disconnected words).
   Reset to 0 across every heading class used on AR pages. The exception
   is Latin runs wrapped in <bdi dir="ltr"> — they keep their own tracking
   because the bidi isolation creates a separate styling context. */
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5,
[lang="ar"] h6,
[lang="ar"] .hero__title,
[lang="ar"] .section-title,
[lang="ar"] .section-title--cascade,
[lang="ar"] .blueprint__heading,
[lang="ar"] .final-cta__heading,
[lang="ar"] .portfolio-teaser__heading,
[lang="ar"] .about-hero__title,
[lang="ar"] .contact-hero__title,
[lang="ar"] .services-hero__title,
[lang="ar"] .services-discipline__title,
[lang="ar"] .services-equipment__title,
[lang="ar"] .projects-hero__title,
[lang="ar"] .projects-featured__title,
[lang="ar"] .projects-grid__title,
[lang="ar"] .project-featured__title,
[lang="ar"] .project-card__title,
[lang="ar"] .projects__tile-name,
[lang="ar"] .contact-form-section__title,
[lang="ar"] .who-we-are__body,
[lang="ar"] .history__body,
[lang="ar"] .achievements__title,
[lang="ar"] .achievements__lede,
[lang="ar"] .vision__lede,
[lang="ar"] .vision__body,
[lang="ar"] .team__name,
[lang="ar"] .discipline-hero__title,
[lang="ar"] .discipline-approach__title,
[lang="ar"] .discipline-approach__body,
[lang="ar"] .discipline-services__title,
[lang="ar"] .discipline-sub-service__title,
[lang="ar"] .discipline-sub-service__body,
[lang="ar"] .discipline-project__title,
[lang="ar"] .discipline-project__body {
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}

/* Body + long-form copy — Arabic needs a touch more breathing room. */
[lang="ar"] body,
[lang="ar"] p,
[lang="ar"] li,
[lang="ar"] .services__desc,
[lang="ar"] .projects__tile-desc,
[lang="ar"] .blueprint__sub,
[lang="ar"] .final-cta__sub,
[lang="ar"] .who-we-are__body,
[lang="ar"] .history__body,
[lang="ar"] .achievements__lede,
[lang="ar"] .achievements__item,
[lang="ar"] .vision__body,
[lang="ar"] .vision__lede,
[lang="ar"] .services-equipment__intro,
[lang="ar"] .services-equipment__item,
[lang="ar"] .services-equipment__closing,
[lang="ar"] .discipline-hero__sub,
[lang="ar"] .discipline-approach__body,
[lang="ar"] .discipline-sub-service__body,
[lang="ar"] .discipline-sub-service__list-item,
[lang="ar"] .discipline-project__body {
  line-height: 1.75;
  letter-spacing: 0;
}

[lang="ar"] .hero__sub,
[lang="ar"] .services__intro,
[lang="ar"] .projects__intro,
[lang="ar"] .blueprint__sub {
  font-size: clamp(17px, 1.4vw, 20px);
}

/* Eyebrows — Latin uppercase tracking doesn't apply to Arabic.
   Reset letter-spacing and let it sit at natural advance. */
[lang="ar"] .eyebrow,
[lang="ar"] .services__number,
[lang="ar"] .blueprint__meta,
[lang="ar"] .site-footer__heading {
  letter-spacing: 0;
  text-transform: none;
}

/* Display numerals (the stats counter row) — stay tabular-num
   so they don't reflow during count-up. Already set in EN but
   re-asserted here for safety after font swap. */
[lang="ar"] .blueprint__stat-number,
[lang="ar"] .blueprint__stat-suffix {
  font-family: var(--ff-ar);
  font-variation-settings: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Decorative direction flips
   ============================================================ */

/* Brand corner motif — the base `.brand-corner--tr` already uses
   `inset-inline-end: 0`, which logical-property-flips naturally to
   the visual LEFT in RTL. That's exactly where the contact CTA
   ends up in the RTL header, so the orange notch already follows
   the contact tab — we just need to MIRROR the clip-path shape
   so the angular cut points INTO the page (not away from it).
   Same logic for `--bl`. */
[lang="ar"] .brand-corner--tr,
[lang="ar"] .brand-corner--bl,
[lang="ar"] .brand-corner--hero {
  transform: scaleX(-1);
}

/* The angular cut-corner accent at the top of services/projects. */
[lang="ar"] .cut-corner {
  transform: scaleX(-1);
}

/* Hero scroll cue — the small "Scroll" hint at the bottom of the
   hero. EN aligns it to the inline-start, which RTL handles
   automatically through logical properties; nothing to override. */

/* Site header dropdown arrow (▾ glyph) — direction-neutral; no flip. */

/* Floating contact buttons — these are visual icons (WhatsApp,
   phone). They DON'T flip in RTL — the icons keep their natural
   orientation regardless of reading direction. */

/* Mobile-drawer reveal — the EN drawer slides in from the right.
   In RTL, "right" is the inline-start, so for visual consistency
   with EN (the drawer comes from the OPPOSITE side of the burger
   button, which itself moves to the opposite inline-edge), the
   drawer should slide in from the LEFT in AR. */
[lang="ar"] .mobile-drawer__panel {
  inset-inline-start: 0;
  inset-inline-end: auto;
  transform: translateX(-100%);
}
[lang="ar"] .mobile-drawer.is-open .mobile-drawer__panel {
  transform: translateX(0);
}

/* ============================================================
   Inline arrow glyphs in CTAs
   ============================================================ */

/* Most arrows live in the AR markup as `&larr;` content directly.
   But some buttons use ::after content for the arrow. Override
   those here. */

[lang="ar"] .btn__arrow,
[lang="ar"] .services__arrow,
[lang="ar"] .projects__tile-link span[aria-hidden],
[lang="ar"] .portfolio-teaser__cta span[aria-hidden],
[lang="ar"] .final-cta__btn span[aria-hidden] {
  /* These glyphs are written as → in EN markup. In AR markup,
     we write ← directly. But if any are missed or come from
     CSS content, this transform catches them. */
  display: inline-block;
  transform: scaleX(-1);
}

/* Reset the transform when the arrow is already an Arabic-mirrored
   glyph in the markup (the AR file uses &larr; → ← as a real glyph,
   so it doesn't need a flip). */
[lang="ar"] [data-no-mirror-arrow] {
  transform: none;
}

/* ============================================================
   Numerals & latinate runs inside Arabic text
   ============================================================ */

/* When Latin digits, dates, or product names sit inside Arabic
   prose, force LTR direction on the inline run so they read in
   the expected order. The AR markup uses <bdi> or <span dir="ltr">
   to mark these, this rule just makes sure the directionality
   actually flips. */
[lang="ar"] bdi,
[lang="ar"] [dir="ltr"] {
  unicode-bidi: isolate;
  font-family: var(--ff-sans);
}

/* Phone numbers and emails in the FOOTER contact list — these
   are inline text links that need LTR isolation so digits read
   left-to-right inside the otherwise-RTL footer. Scoped to the
   footer list only so contact-page cards (display: block) and
   the floating contact icons (display: inline-flex) are unaffected.
   Anywhere else, the inner <p dir="ltr"> markup wrapper handles
   directionality without forcing a display change. */
[lang="ar"] .site-footer__contact a[href^="tel:"],
[lang="ar"] .site-footer__contact a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ============================================================
   Blueprint section — the construction-site SVG is visually
   direction-agnostic (it's a technical drawing, not a sentence).
   But the stage card has corner brackets on the top-left and
   top-right; under RTL these read more naturally if mirrored
   so the heavier visual weight stays on the inline-start side.
   ============================================================ */

[lang="ar"] .blueprint__stage::before {
  inset-inline-start: auto;
  inset-inline-end: 12px;
  border-inline-start: none;
  border-inline-end: 1px solid rgba(241, 242, 242, 0.35);
}
[lang="ar"] .blueprint__stage::after {
  inset-inline-end: auto;
  inset-inline-start: 12px;
  border-inline-end: none;
  border-inline-start: 1px solid rgba(241, 242, 242, 0.35);
}

/* Status label tucks into the inline-end corner of the stage.
   Logical property already does the right thing — no override. */

/* ============================================================
   Portfolio teaser — the "port [image] folio" composition is a
   Latin word ("portfolio") wrapped around a circular image. Under
   RTL the words flip sides and the image's logical-property
   centering anchors to the wrong edge. Forcing direction: ltr on
   the poster keeps the LATIN reading order + the image's
   left-50%/translate(-50%,-50%) centering math correct.
   ============================================================ */

[lang="ar"] .portfolio-teaser__card-poster {
  direction: ltr;
}

/* ============================================================
   Partners — local index numerals follow the site's Arabic-Indic
   convention; flag chips stay LTR (direction-neutral artwork).
   ============================================================ */

[lang="ar"] .partner-tile::before {
  content: counter(partner, arabic-indic);
}

/* ============================================================
   Team marquee — seamless loop direction.
   In RTL the flex track is anchored to the right and overflows
   off-screen to the LEFT, so the EN keyframe (translateX(-50%),
   travelling left) slides the track away from its content and
   opens an empty gap on the right. Travelling right (+50%) pulls
   the duplicate set in from the left, mirroring the EN loop so the
   start and end frames match exactly. Same 50s duration/easing.
   ============================================================ */
@media (min-width: 1024px) {
  [lang="ar"] .team__marquee-track {
    animation-name: marquee-scroll-rtl;
  }
}

@keyframes marquee-scroll-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* ============================================================
   Mobile + responsive — same breakpoints, same rules apply.
   No additional RTL-specific responsive overrides needed.
   ============================================================ */