/* ==========================================================================
   TechSparq RTL stylesheet
   --------------------------------------------------------------------------
   Loaded on every Arabic (/ar/) page AFTER the page's inline styles and
   after techsparq-mobile.css. Overrides directional properties to work
   right-to-left and swaps the font stack for Arabic glyph coverage.

   Load order on AR pages:
     1. Inline <style>  (page-specific styles)
     2. techsparq-mobile.css
     3. techsparq-rtl.css  <-- this file
   ========================================================================== */


/* ──────────────────────────────────────────────────────────────────────────
   1. FONTS
   Noto Sans Arabic + Noto Serif pair.
   Matches Barlow/Barlow Condensed usage for sans,
   and Playfair Display usage for serif/display.
   (Font is selected as placeholder — swap later if you pick Cairo/Tajawal.)
   ────────────────────────────────────────────────────────────────────────── */

html[lang="ar"] body,
html[lang="ar"] .nav-links a,
html[lang="ar"] .nav-cta,
html[lang="ar"] .nav-lang-switcher,
html[lang="ar"] .btn-primary,
html[lang="ar"] .btn-outline,
html[lang="ar"] .btn-primary-inv,
html[lang="ar"] .btn-outline-inv,
html[lang="ar"] .label,
html[lang="ar"] .section-link,
html[lang="ar"] .footer-col-title,
html[lang="ar"] .footer-links,
html[lang="ar"] .footer-desc,
html[lang="ar"] .footer-copy,
html[lang="ar"] .hero-deck,
html[lang="ar"] .hero-track-label,
html[lang="ar"] .hero-track-desc,
html[lang="ar"] .hero-meta-tag,
html[lang="ar"] .hero-meta-loc,
html[lang="ar"] .client-name,
html[lang="ar"] .svc-num,
html[lang="ar"] .svc-name,
html[lang="ar"] .svc-desc,
html[lang="ar"] .track-card-phase,
html[lang="ar"] .track-card-name,
html[lang="ar"] .track-card-desc,
html[lang="ar"] .problem-card-phase,
html[lang="ar"] .problem-card-name,
html[lang="ar"] .problem-card-body,
html[lang="ar"] .case-client-tag,
html[lang="ar"] .case-body,
html[lang="ar"] .case-card-body,
html[lang="ar"] .test-bar-quote,
html[lang="ar"] .test-bar-name,
html[lang="ar"] .test-bar-role,
html[lang="ar"] .test-quote,
html[lang="ar"] .test-name,
html[lang="ar"] .test-role,
html[lang="ar"] .ind-item-name,
html[lang="ar"] .ind-item-desc,
html[lang="ar"] .ind-sub,
html[lang="ar"] .cairo-body,
html[lang="ar"] .cairo-fact-label,
html[lang="ar"] .leader-bio,
html[lang="ar"] .leader-name,
html[lang="ar"] .leader-role,
html[lang="ar"] .leader-num-label,
html[lang="ar"] .kpi-label,
html[lang="ar"] .resolution-text,
html[lang="ar"] .proof-label {
  font-family: "Noto Sans Arabic", "Barlow", sans-serif;
}

/* Headlines use Playfair Display in EN/FR. In Arabic we substitute Noto
   Serif which has Arabic coverage and a comparable editorial feel. */
html[lang="ar"] .hero-headline,
html[lang="ar"] .who-headline,
html[lang="ar"] .services-headline,
html[lang="ar"] .cases-headline,
html[lang="ar"] .testimonials-headline,
html[lang="ar"] .ind-headline,
html[lang="ar"] .cairo-headline,
html[lang="ar"] .forbes-headline,
html[lang="ar"] .eng-headline,
html[lang="ar"] .video-headline,
html[lang="ar"] .case-featured-headline,
html[lang="ar"] .case-card-headline,
html[lang="ar"] .leader-quote,
html[lang="ar"] .proof-num,
html[lang="ar"] .kpi-num,
html[lang="ar"] .cairo-fact-num,
html[lang="ar"] .metric-val,
html[lang="ar"] .leader-num-val,
html[lang="ar"] .inline-quote-text,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-family: "Noto Serif", "Playfair Display", serif;
}

/* Arabic has no italic tradition — neutralise italic on decorative
   <em> while preserving the red-accent color rule. */
html[lang="ar"] em {
  font-style: normal;
  font-weight: 700;
}


/* ──────────────────────────────────────────────────────────────────────────
   2. GLOBAL DIRECTION
   ────────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] body { direction: rtl; text-align: right; }

/* Keep tel: numbers and Latin content rendered LTR inside Arabic text.
   Site authors can wrap inline Latin in <span dir="ltr"> when needed; this
   rule handles the common case of numbers and tags. */
html[dir="rtl"] .proof-num,
html[dir="rtl"] .kpi-num,
html[dir="rtl"] .cairo-fact-num,
html[dir="rtl"] .metric-val,
html[dir="rtl"] .leader-num-val,
html[dir="rtl"] .svc-num {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}


/* ──────────────────────────────────────────────────────────────────────────
   3. NAV + OVERLAY
   ────────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] nav { direction: rtl; }
html[dir="rtl"] .nav-links { direction: rtl; }

/* The hamburger was on the right in LTR (absolute via media query).
   In RTL mobile, flip to the left. */
html[dir="rtl"] .nav-hamburger { margin-right: auto; margin-left: 0; }

/* Overlay close button was top-right in LTR. Flip to top-left. */
html[dir="rtl"] .nav-overlay-close { right: auto; left: 24px; }

html[dir="rtl"] .nav-overlay-inner { text-align: right; }


/* ──────────────────────────────────────────────────────────────────────────
   4. HERO
   ────────────────────────────────────────────────────────────────────────── */

/* Hero layout: LTR has left-text / right-photo. In RTL we keep this
   visual order (text on right, photo on left) for natural reading. */
html[dir="rtl"] .hero { direction: rtl; }
html[dir="rtl"] .hero-left {
  padding: 80px 52px 80px 64px; /* flip horizontal padding */
  border-right: none;
  border-left: 1px solid var(--rule);
}
html[dir="rtl"] .hero-two-track .hero-track:first-child {
  border-right: none;
  border-left: 1px solid var(--rule);
}
html[dir="rtl"] .hero-photo-cap { left: auto; right: 28px; }
html[dir="rtl"] .hero-tag-strip { direction: rtl; }


/* ──────────────────────────────────────────────────────────────────────────
   5. TICKER
   Keep ticker animation LTR-flowing regardless of doc direction; Arabic
   text inside ticker items still reads right-to-left correctly. */
html[dir="rtl"] .ticker-inner { direction: rtl; }


/* ──────────────────────────────────────────────────────────────────────────
   6. MEDIA + CLIENTS BARS
   ────────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] .media-bar-label,
html[dir="rtl"] .clients-label {
  padding-right: 0;
  padding-left: 48px;
  border-right: none;
  border-left: 1px solid var(--rule);
}


/* ──────────────────────────────────────────────────────────────────────────
   7. WHO WE ARE + TWO-TRACK
   ────────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] .who-we-are { direction: rtl; }
html[dir="rtl"] .inline-quote-attr { direction: rtl; }


/* ──────────────────────────────────────────────────────────────────────────
   8. SERVICES LIST
   The CSS Grid auto-flips column visual order in RTL (col 1 renders at the
   inline-start, which is the RIGHT in RTL). So we DO NOT override
   grid-template-columns here — letting the default flip the layout gives us
   svc-num on the right, svc-name next to it, svc-desc taking 1fr, arrow on
   the far left. The arrow glyph itself (&#8598; U+2196) is already the
   up-LEFT variant in the Arabic HTML, so no scaleX transform needed.

   Only the hover translate direction needs to flip — we want the arrow to
   move up-LEFT on hover in RTL, not up-right. */
html[dir="rtl"] .service-row:hover .svc-arrow {
  transform: translate(-3px, -3px);
}
html[dir="rtl"] .service-row-link:hover .svc-arrow {
  transform: translate(-2px, -2px);
}
html[dir="rtl"] .case-card:hover .case-card-arrow {
  transform: translate(-3px, -3px);
}
html[dir="rtl"] .section-link {
  direction: rtl;
}


/* ──────────────────────────────────────────────────────────────────────────
   9. CASE STUDIES
   ────────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] .case-featured-content { border-right: none; border-left: 1px solid var(--rule); }
html[dir="rtl"] .case-featured[style*="border-right"] { /* noop, inline styles won—need page-level fix */ }
html[dir="rtl"] .metric { border-left: none; border-right: 2px solid var(--red); padding-left: 0; padding-right: 14px; }
html[dir="rtl"] .case-photo-tag { left: auto; right: 24px; }
html[dir="rtl"] .case-card-arrow { left: 24px; right: auto; }


/* ──────────────────────────────────────────────────────────────────────────
   10. KPI STRIP + TESTIMONIALS
   ────────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] .kpi-card { border-right: none; border-left: 1px solid rgba(255,255,255,0.07); }
html[dir="rtl"] .kpi-card:last-child { border-left: none; }
html[dir="rtl"] .test-bar-divider:first-of-type { background: var(--red); }


/* ──────────────────────────────────────────────────────────────────────────
   11. CAIRO SECTION
   ────────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] .cairo-overlay {
  background: linear-gradient(to left, rgba(13,13,13,0.7) 0%, rgba(13,13,13,0.15) 65%);
}
html[dir="rtl"] .cairo-fact { border-right: none; border-left: 1px solid var(--rule); }
html[dir="rtl"] .cairo-fact:last-child { border-left: none; }


/* ──────────────────────────────────────────────────────────────────────────
   12. LEADERSHIP
   Photo is a 360px column in LTR. Keep visual layout but flip paddings. */
html[dir="rtl"] .leadership { direction: rtl; }
html[dir="rtl"] .leader-quote {
  padding-left: 0; padding-right: 24px;
  border-left: none; border-right: 3px solid var(--red);
}
html[dir="rtl"] .leader-badge { left: auto; right: 20px; }


/* ──────────────────────────────────────────────────────────────────────────
   13. FOOTER
   ────────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] footer { direction: rtl; }
html[dir="rtl"] .footer-links { padding: 0; list-style: none; }


/* ──────────────────────────────────────────────────────────────────────────
   14. BACK-TO-TOP BUTTON
   LTR sits it in the bottom-right. RTL flips to bottom-left. */
html[dir="rtl"] .back-to-top { right: auto; left: 24px; }


/* ──────────────────────────────────────────────────────────────────────────
   15. FORMS (contact)
   ────────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] label {
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"] {
  /* Phone and email typically render LTR for legibility even within RTL */
  direction: ltr;
  text-align: right; /* visually anchor to line-start in RTL */
}


/* ──────────────────────────────────────────────────────────────────────────
   16. MOBILE SELECT
   .filter-select etc — rendered via mobile-select.js. Make sure options
   display with correct direction. */
html[dir="rtl"] .filter-select,
html[dir="rtl"] .filter-select option {
  direction: rtl;
  text-align: right;
}


/* ──────────────────────────────────────────────────────────────────────────
   17. HUB PAGE ALTERNATING ROWS (services & solutions index)
   --------------------------------------------------------------------------
   In EN, .area-row:nth-child(even) flips direction to RTL to visually swap
   the image/content pair every other row. In an Arabic page where the
   entire document is already RTL, that rule is a no-op — so every row
   renders with the same side placement and the pattern collapses.

   Fix: invert which rows get flipped. Odd rows force LTR (inverting the
   parent's RTL); even rows neutralise the EN inline rule so they inherit
   RTL from the body. Net effect: pattern alternates in RTL, mirrored from
   the English layout. */
html[dir="rtl"] .area-row:nth-child(odd)     { direction: ltr; }
html[dir="rtl"] .area-row:nth-child(odd) > * { direction: rtl; }
html[dir="rtl"] .area-row:nth-child(even)     { direction: rtl; }
html[dir="rtl"] .area-row:nth-child(even) > * { direction: rtl; }


/* ──────────────────────────────────────────────────────────────────────────
   18. SVC SUBPAGE KPI STATS ROW
   --------------------------------------------------------------------------
   LTR rule puts border + padding + margin on the RIGHT of every .svc-stat
   except the last-child, so the divider falls between items. In RTL the
   flex row auto-flips visual order: source order stat1, stat2, stat3 renders
   visually as stat3 | stat2 | stat1 (left to right). We want a divider on
   the inline-start (LEFT) of every stat EXCEPT the visually-leftmost stat,
   which is :last-child in source order. Put border-left + padding-left +
   margin-left on the base rule, then strip them from :last-child only.
   Do NOT override :first-child — it is visually rightmost and must keep
   its divider (between itself and the middle stat). */
html[dir="rtl"] .svc-stat {
  padding-right: 0;
  padding-left: 48px;
  margin-right: 0;
  margin-left: 48px;
  border-right: none;
  border-left: 1px solid rgba(255,255,255,0.1);
}
html[dir="rtl"] .svc-stat:last-child {
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}


/* ──────────────────────────────────────────────────────────────────────────
   19. SVC SUBPAGE TWO-COLUMN SECTION DIVIDER
   The left column gets `border-right` in LTR to divide it from the right
   column. In RTL the visual column order flips, so the divider needs
   to move to the left side of that column. */
html[dir="rtl"] .svc-section-left {
  border-right: none;
  border-left: 1px solid var(--rule);
}


/* ──────────────────────────────────────────────────────────────────────────
   20. RTL IMAGE FLIP UTILITY
   Applied per-image via class="rtl-flip". Mirrors the image horizontally
   only on AR pages so off-center focal points stay away from the RTL text
   overlay. Opt-in per image; do NOT apply site-wide. */
html[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}