/* ============================================================
   RTL.CSS
   Fine visual corrections applied only when the page runs in
   Arabic (html[dir="rtl"]). Loaded after style.css / responsive.css.
   Written flat (no CSS nesting) for maximum browser compatibility.
   ============================================================ */

/* ---------- Small mono "label" text was tuned for English acronyms;
   letter-spacing breaks Arabic letter-joining and stretches the line
   far wider than intended, and IBM Plex Mono has no Arabic glyphs at
   all — so these switch to the Arabic body font with normal spacing. ---------- */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .hero-tags .tag,
html[dir="rtl"] .plaque,
html[dir="rtl"] .service-tags span,
html[dir="rtl"] .project-tags span,
html[dir="rtl"] .about-facts dt,
html[dir="rtl"] .about-facts dd,
html[dir="rtl"] .footer-col h4,
html[dir="rtl"] .stat .label,
html[dir="rtl"] .hero-scroll,
html[dir="rtl"] .project-index,
html[dir="rtl"] .form-status,
html[dir="rtl"] .skill-top .name,
html[dir="rtl"] .form-foot,
html[dir="rtl"] .footer-bottom{
  font-family: var(--font-body);
  letter-spacing: normal;
  text-transform: none;
}
html[dir="rtl"] .eyebrow::before{ width: 16px; }

/* ---------- Nav underline grows from the reading-start side ---------- */
html[dir="rtl"] .nav-links a::after{ left: 100%; right: 0; }
html[dir="rtl"] .nav-links a:hover::after,
html[dir="rtl"] .nav-links a.active::after{ left: 0; }

/* ---------- Skill bars fill toward the reading-start side ---------- */
html[dir="rtl"] .skill-fill{ margin-inline-start: auto; margin-inline-end: 0; }
html[dir="rtl"] .skill-fill::after{ right: auto; left: -1px; }

/* ---------- Stat dividers sit on the correct outer edge ---------- */
html[dir="rtl"] .stat{ border-right: none; border-left: 1px solid var(--line); }
html[dir="rtl"] .stat:last-child{ border-left: none; }

@media (max-width: 1200px){
  html[dir="rtl"] .stat:nth-child(2n){ border-left: none; }
  html[dir="rtl"] .stat:nth-child(2n+1){ border-left: 1px solid var(--line); }
}

/* ---------- Mobile nav drawer opens from the reading-start edge ---------- */
@media (max-width: 992px){
  html[dir="rtl"] .nav-links{
    inset: 0 auto 0 0;
    border-left: none;
    border-right: 1px solid var(--line);
    transform: translateX(-100%);
  }
  html[dir="rtl"] .nav-links.is-open{ transform: translateX(0); }
}