@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Markazi+Text:wght@500;600&display=swap');

/* ==========================================================================
   Costa Global Capital — Arabic (RTL) locale overrides
   Loaded ONLY on /ar/ pages, scoped to html[dir="rtl"] so no other locale is
   affected. Council-synthesized: dir=rtl + Arabic type + letter-spacing reset
   + targeted geometric mirrors. Hero animation + brand wordmark left untouched.
   ========================================================================== */

/* 0 — Force RTL base direction. The shared translate.css carries a deliberate
   guard `html[dir="rtl"]{direction:ltr!important}` (from when Arabic shipped LTR-only).
   Beat it with higher specificity + !important, scoped to lang="ar" so the guard
   still protects EN pages translated live by the widget (they don't load this file). */
html[lang="ar"][dir="rtl"],
html[lang="ar"][dir="rtl"] body { direction: rtl !important; }

/* 1 — Arabic typography ------------------------------------------------- */
html[dir="rtl"] body {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  line-height: 1.85;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5 {
  font-family: 'Markazi Text', 'IBM Plex Sans Arabic', Georgia, serif;
  line-height: 1.3;
  font-feature-settings: normal;
}
/* Arabic is cursive: ANY positive letter-spacing breaks glyph joining. */
html[dir="rtl"] * { letter-spacing: 0 !important; }

/* 2 — Keep Latin tokens left-to-right (brand, names, rotated type) ------ */
html[dir="rtl"] .nav-brand,
html[dir="rtl"] .brand-lockup,
html[dir="rtl"] .mc-portrait-name,
html[dir="rtl"] .madeby,
html[dir="rtl"] .mc-media-rotated {
  direction: ltr;
  unicode-bidi: isolate;
}

/* 3 — Targeted geometric mirrors (the visible asymmetries) -------------- */
/* nav CTA arrow-circle: extra pad was on the label (left) side */
html[dir="rtl"] .nav-cta { padding: 9px 20px 9px 9px; }

/* founder credentials: vertical divider must move to the inline-end side */
html[dir="rtl"] .founder-feature-credit {
  border-right: none;
  border-left: 1px solid var(--border, rgba(26,23,18,.14));
  padding-right: 0; padding-left: 22px;
  margin-right: 0;  margin-left: 22px;
}

/* dominance-stat red accent border */
html[dir="rtl"] .mc-dom-stat {
  border-left: none;
  border-right: 1px solid var(--mc-red);
  padding-left: 0; padding-right: 22px;
}

/* testimonial arrow cluster was pushed right via margin-left:auto */
html[dir="rtl"] .mc-reviews-arrows { margin-left: 0; margin-right: auto; }

/* portrait photo focal point (was bottom right) */
html[dir="rtl"] .mc-portrait-photo img { object-position: bottom left; }

/* bio image fade gradient direction */
html[dir="rtl"] .bio-img-overlay {
  background: linear-gradient(to left, transparent 60%, var(--cream, #F5F0E8) 100%);
}

/* before / after comparison labels are semantic, swap sides */
html[dir="rtl"] .ba-badge.before { left: auto;  right: 20px; }
html[dir="rtl"] .ba-badge.after  { right: auto; left: 20px; }

/* case-study circular arrow button anchored to the inline-end */
html[dir="rtl"] .mc-vid-cs { right: auto; left: 13px; }

/* 4 — Directional arrows point toward the reading direction (left) ------ */
html[dir="rtl"] .nav-cta .arrow,
html[dir="rtl"] .btn-primary .arrow,
html[dir="rtl"] .pillar-card .arrow-up { transform: scaleX(-1); }

/* hover nudge follows reading direction */
html[dir="rtl"] .press-item:hover { transform: translateX(-4px); }

/* 7 — Mobile/tablet burger nav + drawer (<=1100px) RTL corrections ------ */
/* Drawer header wordmark is a Latin lockup — keep it COSTA · GLOBAL · CAPITAL */
html[dir="rtl"] .mobile-drawer-head .brand { direction: ltr; }

/* At burger widths, keep the top-bar chrome in physical LTR: brand on the left,
   language pill + burger together on the right — matching the EN bar and the
   drawer (which slides in from the right). Desktop (>1100) Arabic nav stays RTL. */
@media (max-width: 1100px) {
  html[dir="rtl"] .top-nav { direction: ltr; }
  /* brand stays left; language pill + burger pack together on the right.
     The burger normally has margin-left:auto (which created a big gap before the
     language pill) — neutralise it and push the brand instead. */
  html[dir="rtl"] .top-nav .nav-brand { margin-right: auto !important; }
  html[dir="rtl"] .top-nav .nav-actions { margin: 0 !important; }
  html[dir="rtl"] .top-nav .mobile-toggle { margin-left: 14px !important; }
}

/* The home-page section dots (z-index 400) must never float over the open drawer */
html[dir="rtl"] body.drawer-open .dot-nav { display: none !important; }