/* ============================================================
   Navid AI — Arabic RTL overrides
   Loaded AFTER all theme/page CSS in templates/ar/base.html.
   Every rule is scoped to html[dir="rtl"] so this file is inert
   on the English site. Targeted fixes only — no wholesale flips.
   ============================================================ */

/* ---------- 1. Typography ---------- */
html[dir="rtl"] body,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button,
html[dir="rtl"] .btn-default,
html[dir="rtl"] .rainbow-gradient-btn {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif;
}

/* Arabic script must never be letter-spaced (theme adds 0.5px in places). */
html[dir="rtl"] .subtitle,
html[dir="rtl"] .copyright-text,
html[dir="rtl"] .newsletter-form input {
  letter-spacing: 0;
}

/* Mixed-direction lines (Arabic copy containing Latin names like OALL,
   KAUST, AraLingBench, API…) resolve per-paragraph, keeping Latin
   snippets readable without flipping the block direction. */
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  unicode-bidi: plaintext;
}

/* ---------- 2. Text alignment: theme forces LTR alignment ---------- */
html[dir="rtl"] .text-start,
html[dir="rtl"] .text-left,
html[dir="rtl"] .section-title.text-left,
html[dir="rtl"] .section-title.text-start {
  text-align: right !important;
}
@media (min-width: 992px) {
  html[dir="rtl"] .text-lg-start {
    text-align: right !important;
  }
  /* Copyright right column: text-lg-end means "far edge" = left in RTL. */
  html[dir="rtl"] .copyright-right.text-lg-end {
    text-align: left !important;
  }
}
html[dir="rtl"] .aiwave-cta .content-left {
  text-align: right;
}

/* ---------- 3. Desktop main menu ---------- */
html[dir="rtl"] .mainmenu-nav .mainmenu {
  direction: rtl;
  padding-right: 0;
}
/* Dropdown chevron sits after the label: flip its margin. */
html[dir="rtl"] .mainmenu-nav .mainmenu > li > a i {
  margin-left: 0;
  margin-right: 5px;
}
/* Submenus anchor to the right edge of their parent item. */
html[dir="rtl"] .mainmenu-nav .mainmenu li.has-dropdown .submenu {
  left: auto;
  right: 0;
  text-align: right;
}

/* ---------- 4. Mobile popup menu ---------- */
html[dir="rtl"] .popup-mobile-menu .mainmenu {
  padding-right: 0;
}
html[dir="rtl"] .popup-mobile-menu .mainmenu .has-dropdown .submenu {
  padding-left: 0;
  padding-right: 14px;
}
/* Expand/collapse indicator moves to the far (left) edge. */
html[dir="rtl"] .popup-mobile-menu .mainmenu .has-menu-child-item > a::after {
  right: auto;
  left: 10px;
}

/* ---------- 5. Header button ---------- */
html[dir="rtl"] .header-default .header-right .header-btn {
  margin-left: 0;
  margin-right: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  html[dir="rtl"] .header-default .header-right .header-btn {
    margin-right: 0;
  }
}

/* ---------- 6. Buttons & icons ---------- */
/* Directional arrows should point with the reading flow. */
html[dir="rtl"] .btn-default .fa-arrow-right,
html[dir="rtl"] .btn-read-more .fa-arrow-right {
  transform: scaleX(-1);
}
/* Icon spacing utility inside buttons (ml--5 = margin-left: 5px). */
html[dir="rtl"] .btn-default .ml--5,
html[dir="rtl"] .store-btn .ml--5 {
  margin-left: 0 !important;
  margin-right: 5px !important;
}

/* ---------- 7. Footer ---------- */
html[dir="rtl"] .footer-style-default .footer-top .rainbow-footer-widget .footer-link {
  padding-right: 0;
  text-align: right;
}
/* Link-hover underline grows from the right. */
html[dir="rtl"] .footer-style-default .footer-top .rainbow-footer-widget .footer-link li a:hover::after {
  left: auto;
  right: 0;
}
/* Contact icons precede the text on the right side. */
html[dir="rtl"] .footer-style-3 .footer-link li .contact-icon {
  margin-right: 0;
  margin-left: 15px;
}
/* Newsletter: input/button flex row flips automatically; flip the gap. */
html[dir="rtl"] .newsletter-form input {
  margin-right: 0;
  margin-left: 10px;
}
@media only screen and (max-width: 479px) {
  html[dir="rtl"] .newsletter-form input {
    margin-right: 0 !important;
    margin-left: 10px !important;
  }
}
html[dir="rtl"] .copyright-area .ft-menu {
  padding-right: 0;
}

/* ---------- 8. Breadcrumbs ---------- */
html[dir="rtl"] .breadcrumb-inner ul.page-list {
  padding-right: 0;
}

/* ==========================================================================
   Page-specific RTL corrections.
   yehia.css and the theme's style.css are SHARED with the English site, so
   they are never edited — their left-aligned rules are overridden here,
   scoped to html[dir="rtl"] so the English pages are untouched.
   ========================================================================== */

/* Yehia page: benchmark tables and the KAUST citation are hardcoded
   text-align:left in the shared yehia.css. */
html[dir="rtl"] #yehia-page .bench-table th,
html[dir="rtl"] #yehia-page .bench-table td,
html[dir="rtl"] #yehia-page .kaust-source-text {
  text-align: right;
}

/* Latin-script cells (model names, scores) stay LTR internally so numbers and
   names like "Kimi K3" / "65.68" read correctly, while the column itself is
   right-aligned above. */
html[dir="rtl"] #yehia-page .bench-table td {
  unicode-bidi: plaintext;
}

/* The theme's generic left-aligned utilities, when they wrap Arabic copy. */
html[dir="rtl"] .text-start,
html[dir="rtl"] .text-lg-start,
html[dir="rtl"] .rainbow-section-title.text-start {
  text-align: right !important;
}

/* Mobile popup menu: brand + items follow the reading direction. */
html[dir="rtl"] .popup-mobile-menu .inner-popup .header-top .logo h3,
html[dir="rtl"] .popup-mobile-menu .mainmenu li a {
  text-align: right;
}

/* Nothing may push the page wider than the viewport in RTL — a stray
   full-bleed block was adding a horizontal scrollbar on some pages. */
html[dir="rtl"] body {
  overflow-x: hidden;
}
