/* ============================================================
   Arabic layer — Fintech AI Advisory
   ar.css | v2
   Loaded ONLY on Arabic pages (html[dir="rtl"]), after style.css.
   Rule: never alter the PROD layout. Only (1) the Arabic typeface
   for text, (2) mirror the physical direction properties.
   The logo lockup is deliberately left untouched.
   ============================================================ */

/* ---------- Readex Pro, self-hosted ---------- */
@font-face{font-family:'Readex Pro';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/readex-arabic-400.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Readex Pro';font-weight:500;font-style:normal;font-display:swap;
  src:url('fonts/readex-arabic-500.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Readex Pro';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/readex-arabic-600.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Readex Pro';font-weight:700;font-style:normal;font-display:swap;
  src:url('fonts/readex-arabic-700.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Readex Pro';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/readex-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC;}
@font-face{font-family:'Readex Pro';font-weight:500;font-style:normal;font-display:swap;
  src:url('fonts/readex-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC;}
@font-face{font-family:'Readex Pro';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/readex-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC;}
@font-face{font-family:'Readex Pro';font-weight:700;font-style:normal;font-display:swap;
  src:url('fonts/readex-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC;}

/* ---------- typeface: text only, never the logo ---------- */
html[dir="rtl"] body{font-family:'Readex Pro','Segoe UI',Tahoma,sans-serif}

/* The wordmark stays exactly as PROD renders it - same faces, same sizes. */
html[dir="rtl"] .brand-name,
html[dir="rtl"] .brand-name span[lang="ar"]{font-family:inherit}
html[dir="rtl"] .brand{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif}
html[dir="rtl"] .brand-name span[lang="ar"]{font-family:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif}

/* ---------- Arabic reading adjustments ---------- */
html[dir="rtl"] p,
html[dir="rtl"] .sub,
html[dir="rtl"] li{line-height:1.9}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{
  line-height:1.45;
  letter-spacing:0;          /* negative tracking breaks Arabic letter joins */
}
html[dir="rtl"] .kicker,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .eb-name{letter-spacing:.04em}

/* ---------- direction mirroring ---------- */
html[dir="rtl"] .brand{margin-right:0;margin-left:auto}
/* Above 1200px there is room for the wordmark at full width; stop the extra
   nav item squeezing it into more lines than the English page renders.
   Below that it must stay shrinkable or the row overflows. */
@media (min-width:1200px){
  html[dir="rtl"] .brand{flex:none}
}
html[dir="rtl"] .service ul{padding-left:0;padding-right:1.1rem}
html[dir="rtl"] .capacity-out,
html[dir="rtl"] .quote,
html[dir="rtl"] .callout{
  border-left:0;border-right:3px solid var(--brand-light);
  padding-left:0;padding-right:1.2rem;
}
html[dir="rtl"] .footer-legal .ar-name{text-align:right}
/* Arabic nav (8 items, longer labels, one extra item vs English) needs a
   smaller font, tighter gaps and less per-link padding than English to have
   any chance of fitting - even then it needs ~1150px of header width before
   brand + nav actually fit side by side. Below that, hamburger; English's
   own <=900px hamburger (style.css) covers the phone-width end. */
@media (min-width:901px) and (max-width:1149px){
  html[dir="rtl"] .nav-toggle-btn{display:flex}
  html[dir="rtl"] .site-header .wrap{position:relative}
  html[dir="rtl"] .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--paper);
    border-top:1px solid var(--line);
    box-shadow:0 12px 28px rgba(20,23,28,.12);
    padding:.5rem;max-height:calc(100vh - 88px);overflow-y:auto;
  }
  html[dir="rtl"] .nav.is-open{display:flex}
  html[dir="rtl"] .nav > a{width:100%}
  html[dir="rtl"] .nav > a.nav-lang{width:auto !important; align-self:flex-end;}
}

/* ---------- language switch: a small pill badge with a globe icon ---------- */
html[dir="rtl"] .nav-lang{
  font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  font-weight:700 !important;
  letter-spacing:.02em;
  height:2.15rem !important;
  padding:0 .7rem !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  gap:.35rem;
  border:1.5px solid var(--line); border-radius:999px;
  font-size:.74rem !important; line-height:1 !important;
  color:var(--muted) !important;
  flex:none; margin-inline-start:.4rem;
}
html[dir="rtl"] .nav-lang svg{color:var(--muted);}
html[dir="rtl"] .nav-lang:hover{border-color:var(--brand); color:var(--brand) !important;}
html[dir="rtl"] .nav-lang:hover svg{color:var(--brand);}

/* Shrink nav text so all 8 Arabic items have a real chance of fitting on one
   row like EN's 7 - EN uses .3rem gap at full 17px body size, so Arabic
   (longer labels, one extra item) needs both a smaller font and a tighter
   gap, not just one or the other. */
html[dir="rtl"] .nav{font-size:.8rem;gap:.45rem}
html[dir="rtl"] .nav a{padding-inline:.5rem}
html[dir="rtl"] .nav a{white-space:nowrap}

/* Landing-page hero headline: at the shared clamp's 4rem cap, this Arabic
   sentence runs a full line longer than the English one, which pushes the
   align-items:end hero photo noticeably lower than on the English page.
   A slightly smaller cap shortens the block without needing to touch the
   shared (English-affecting) .hero h1 rule. */
html[dir="rtl"] .hero h1 { font-size: clamp(2rem, 4.8vw, 3.2rem); }

/* Books / About-me / Speaking: a few Arabic section headlines run wider
   than their English counterparts at the shared .section-head cap and
   wrap mid-phrase instead of at a sentence break. Give this page's column
   more room so the whole line - or, where the H1 forces a manual <br>
   between two full sentences, each half - sits on one line. */
html[dir="rtl"] #about h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); }

/* Diagram SVGs have no width/height attribute, only a viewBox - under an
   inherited dir="rtl" some browsers shift/crop their coordinate box instead
   of scaling it cleanly. Every diagram already mirrors its own text with
   text-anchor, so force the SVG itself back to plain ltr rendering. */
html[dir="rtl"] svg{direction:ltr}