/* ============================================================
   Wuthqa — Arabic (RTL) layout layer
   Injected by cms/config.js ONLY when the site language is Arabic, AFTER the
   page CSS and en.css. en.css is the English (Latin type + LTR) layer over an
   Arabic-first base; it also carries some structural component CSS, so we keep
   it loaded and undo just its language-specific rules here. Every rule is
   scoped under [dir="rtl"], so this file is inert in an English context.
   ============================================================ */

/* ---- Type: restore the Arabic family (en.css re-points --font-ar to
   Poppins and hardcodes Latin fonts on headings/nav/labels/buttons). ---- */
[dir="rtl"] { --font-ar: 'Noto Kufi Arabic', sans-serif; }
[dir="rtl"] body { font-family: var(--font-ar); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] blockquote,
[dir="rtl"] .wq-nav-link, [dir="rtl"] .wq-nav-trigger, [dir="rtl"] .wq-nav-lang,
[dir="rtl"] .wq-kicker-label, [dir="rtl"] .wq-kicker-idx,
[dir="rtl"] .wq-btn, [dir="rtl"] .wq-chip, [dir="rtl"] .wq-filter-pill, [dir="rtl"] .wq-nl-tag,
[dir="rtl"] [class*="-title"], [dir="rtl"] [class*="-name"], [dir="rtl"] [class*="-h1"],
[dir="rtl"] .wq-hero-title, [dir="rtl"] .wq-hero-lead,
[dir="rtl"] .wq-ct-script, [dir="rtl"] .wq-inv-sub, [dir="rtl"] .wq-ddb-sub, [dir="rtl"] .wq-soon-t {
  font-family: var(--font-ar) !important;
}
/* Keep intentionally-Latin runs (emails, phone numbers) in the Latin family. */
[dir="rtl"] .font-en, [dir="rtl"] .en,
[dir="rtl"] [style*="direction: ltr"], [dir="rtl"] [style*="direction:ltr"] {
  font-family: var(--font-en) !important;
}

/* ---- Undo en.css's LTR direction flips → back to RTL ------------- */
[dir="rtl"] .wq-nav-mobile a { text-align: right; }
[dir="rtl"] .wq-ach-tab { text-align: right; }
[dir="rtl"] .wq-nav-dropdown { left: auto; right: 0; }
[dir="rtl"] .wq-res-aside {
  border-left: none; padding-left: 0;
  border-right: 1px solid var(--border-soft); padding-right: 28px;
}
@media (max-width: 980px) { [dir="rtl"] .wq-res-aside { border-right: none; padding-right: 0; } }
[dir="rtl"] .wq-hero-metric, [dir="rtl"] .wq-band .wq-metric-cell {
  padding-left: 0; padding-right: 24px;
  border-left: none; border-right: 1px solid rgba(255, 255, 255, .14);
}
[dir="rtl"] .wq-band .wq-metric-cell { border-right-color: var(--border); }
[dir="rtl"] .wq-hero-metric:first-child, [dir="rtl"] .wq-band .wq-metric-cell:first-child {
  padding-right: 0; border-right: none;
}
/* Decorative spiral marks mirror back to the left in RTL */
[dir="rtl"] .wq-hero-mark, [dir="rtl"] .wq-lab-mark, [dir="rtl"] .wq-phero-mark { right: auto; left: -90px; }
[dir="rtl"] .wq-lab-mark { left: -140px; }
[dir="rtl"] .wq-contact-mark { left: auto; right: -120px; }
/* Forward arrows point the other way */
[dir="rtl"] .wq-btn .wq-btn-arrow { transform: scaleX(-1); }

/* ---- Home hero: photo panel and copy mirror to the other side --- */
[dir="rtl"] .wq-hero-media { inset: 0 auto 0 0; }
[dir="rtl"] .wq-hero-media-fade {
  background:
    linear-gradient(265deg, var(--teal-900) 0%, var(--teal-900) 12%, rgba(13, 13, 13, .7) 32%, rgba(13, 13, 13, .12) 58%, transparent 78%),
    linear-gradient(0deg, rgba(13, 13, 13, .45) 0%, transparent 26%);
}
[dir="rtl"] #home.wq-hero-split .wq-hero-inner { align-items: flex-start; text-align: right; }
[dir="rtl"] .wq-phero p, [dir="rtl"] .wq-phero2 p { text-align: right; }

/* ---- Logo marquees ------------------------------------------------
   Both strips loop with `@keyframes wqLogoScroll` translating the track
   physically left (translateX(0) → -50%). That works in LTR, where the flex
   track starts at the strip's left edge. In RTL the track is anchored to the
   right edge instead, so translating left immediately walks the tiles out of
   the strip: the section renders its heading and then a blank band for most of
   the cycle. Transforms are not direction-aware, so mirror the travel. ---- */
@keyframes wqLogoScrollRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
[dir="rtl"] .wq-logo-track,
[dir="rtl"] .wq-cbar-track { animation-name: wqLogoScrollRtl; }

/* ---- News ticker --------------------------------------------------
   Same mirror as the logo marquees: `wqTicker` travels physically left, which
   in RTL walks the queue away from the inline start instead of through the
   viewport. Reverse the travel so items enter and leave the way an Arabic
   reader expects. ---- */
@keyframes wqTickerRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
/* The anchor is also corrected in home.css (`inset-inline-start`), but that file
   is cached for 4h while this one is content-hashed and lands immediately, so
   restate it here — otherwise the mirrored travel runs against a stale
   `left: 0` and the queue stays parked off-screen until home.css expires. */
[dir="rtl"] .wq-ticker-track { left: auto; right: 0; animation-name: wqTickerRtl; }

/* ---- Display headings: Arabic needs more leading ------------------
   The display headings are tuned for a Latin serif and sit between 1.07 and
   1.22. Arabic set in Noto Kufi carries taller ascenders plus the diacritics
   the copy actually uses (تطوّعًا), so at those values consecutive lines touch.
   Client review, notes 8. Body copy is already 1.7–1.9 and is left alone. */
[dir="rtl"] h1, [dir="rtl"] h2 { line-height: 1.45; }

/* ---- Wordmark ----------------------------------------------------
   The mark is the only image; the company name beside it is live text, so it
   renders in Arabic from the components. The Latin treatment does not carry
   over: letter-spacing pulls Arabic glyphs apart and `text-transform` is a
   no-op that only signals the wrong intent. Client review, note 1. */
[dir="rtl"] .wm-name, [dir="rtl"] .wm-sub {
  font-family: var(--font-ar) !important;
  letter-spacing: normal; text-transform: none;
}
/* The name column is right-aligned in Latin (flex-end on the cross axis). In
   RTL the cross axis flips, so flex-start is what keeps it flush against the
   mark. The footer already uses flex-start and needs no change. */
[dir="rtl"] .wq-nav-wordmark .wm-text { align-items: flex-start; }
/* Kufi at 9–10px with the Latin tracking removed is cramped, but the Arabic
   second line is the full registered name and much longer than the Latin
   slogan, so it stays small and is allowed to wrap out of the nav's way. */
[dir="rtl"] .wq-nav-wordmark .wm-sub { font-size: 9.5px; margin-top: 3px; }
[dir="rtl"] .wq-mf-brand .wq-footer-wordmark .wm-sub { font-size: 12px; margin-top: 5px; }