/* ============================================
   NAVINTE — RTL OVERRIDES (Arabic pages)
   Loaded AFTER styles.css. Mirrors layout logic,
   keeps identical colors, spacing scale, and components.
   ============================================ */

[dir="rtl"] body{
  font-family:'IBM Plex Sans Arabic','Inter',sans-serif;
}
[dir="rtl"] .display{
  font-family:'Cairo','IBM Plex Sans Arabic',sans-serif;
  letter-spacing:0;
  line-height:1.35;
}
[dir="rtl"] .hero h1.display{margin:22px 0 30px;}
[dir="rtl"] .page-hero h1.display{margin:20px 0 22px;}
[dir="rtl"] .section-head h2.display{margin:18px 0 16px;}
[dir="rtl"] .contact-panel h2.display{margin:16px 0 18px;}
[dir="rtl"] .product-panel h3{line-height:1.35;}
[dir="rtl"] .mono{
  font-family:'IBM Plex Mono','IBM Plex Sans Arabic',monospace;
  direction:ltr;
  unicode-bidi:embed;
}

[dir="rtl"] .eyebrow{
  font-family:'IBM Plex Sans Arabic','Cairo',sans-serif;
  font-weight:600;
  font-size:0.8rem;
  letter-spacing:0;
}
[dir="rtl"] .eyebrow::before{order:2;}

/* Letter-spacing (tracking) breaks Arabic cursive letter-joining — remove it everywhere Arabic text appears */
[dir="rtl"] .navlinks a,
[dir="rtl"] .btn,
[dir="rtl"] .btn-solid,
[dir="rtl"] .btn-dark,
[dir="rtl"] .btn-outline-dark,
[dir="rtl"] .mono,
[dir="rtl"] .status,
[dir="rtl"] .stamp,
[dir="rtl"] .rtag,
[dir="rtl"] .lang-switch,
[dir="rtl"] .logo,
[dir="rtl"] .footer-row,
[dir="rtl"] .link-card .go,
[dir="rtl"] .form-group label{
  letter-spacing:0;
}

/* Swap monospace for a proper Arabic-shaping font wherever these classes carry Arabic words */
[dir="rtl"] .mono,
[dir="rtl"] .status,
[dir="rtl"] .stamp,
[dir="rtl"] .rtag,
[dir="rtl"] .navlinks a,
[dir="rtl"] .btn,
[dir="rtl"] .btn-dark,
[dir="rtl"] .btn-outline-dark,
[dir="rtl"] .footer-row,
[dir="rtl"] .link-card .go,
[dir="rtl"] .form-group label{
  font-family:'IBM Plex Sans Arabic','Cairo',sans-serif;
}

/* lang-switch holds Arabic on English pages ("العربية") and Latin on Arabic pages ("EN") — support both */
.lang-switch{
  font-family:'IBM Plex Mono','IBM Plex Sans Arabic',monospace;
}

/* Nav mirrors naturally via dir, just fix logo mark spacing */
[dir="rtl"] .logo{
  flex-direction:row-reverse;
  font-family:'Cairo','IBM Plex Sans Arabic',sans-serif;
  letter-spacing:0;
}
[dir="rtl"] .logo .mark{transform:translateY(-3px);}

/* Hero grid: manifest card should sit on the LEFT visually in RTL (mirrors reading order) */
[dir="rtl"] .hero-grid{direction:rtl;}
[dir="rtl"] .hero h1 em{color:var(--brass-bright);}

/* Manifest card internals stay LTR for numbers/IDs but labels flip */
[dir="rtl"] .manifest-head{flex-direction:row-reverse;}
[dir="rtl"] .checkpoint-row{flex-direction:row-reverse;}
[dir="rtl"] .checkpoint-row .cname{flex-direction:row-reverse;}
[dir="rtl"] .stamp{transform:rotate(4deg);}
[dir="rtl"] .manifest-card.cleared .stamp{transform:rotate(4deg) scale(1);}

/* Feature lines / roadmap items / value items mirror padding+border side */
[dir="rtl"] .feature-line{flex-direction:row-reverse;text-align:right;}
[dir="rtl"] .roadmap-item{flex-direction:row-reverse;text-align:right;}
[dir="rtl"] .contact-info-item{text-align:right;}

/* Strip (how it works) mirrors direction so step 1 starts on the right */
[dir="rtl"] .strip{direction:rtl;}

/* Link cards / value grid / problem list: text alignment */
[dir="rtl"] .problem-item, [dir="rtl"] .value-item, [dir="rtl"] .link-card{text-align:right;}

/* Contact form: labels and inputs align right */
[dir="rtl"] .form-group label{text-align:right;}
[dir="rtl"] .form-group input, [dir="rtl"] .form-group select, [dir="rtl"] .form-group textarea{
  text-align:right;
}

/* Footer row mirrors via dir automatically; just ensure gap logic stays even */
[dir="rtl"] .footer-links{flex-direction:row-reverse;}

/* Language switcher pill */
.lang-switch{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.76rem;
  letter-spacing:0.05em;
  color:var(--text-dim);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 12px;
  transition:border-color .2s, color .2s;
}
.lang-switch:hover{border-color:var(--brass);color:var(--brass-bright);}

/* Section heads / general prose right-align under RTL */
[dir="rtl"] .section-head, [dir="rtl"] .page-hero, [dir="rtl"] .hero p.lede{
  text-align:right;
}
[dir="rtl"] .contact-panel{text-align:center;} /* keep centered panels centered */