/*
 * DABA L-GHDA — right-to-left overrides.
 *
 * Loaded only when the active language declares dir: rtl (see dlg_languages()
 * in inc/config.php). The document already carries dir="rtl", which flips
 * flex, grid and text alignment on its own — so this file only corrects the
 * physical properties the browser cannot flip for us: left/right offsets,
 * one-sided borders, asymmetric radii, directional transforms and the type
 * itself.
 *
 * Every selector here is scoped to [dir="rtl"] so nothing can leak into the
 * LTR languages.
 */

/* ---- TYPOGRAPHY --------------------------------------------------------
   Poppins has no Arabic glyphs; without this the browser silently falls back
   to a default Arabic face and the page loses its typographic identity.
   Cairo is geometric, so it keeps the same character as Poppins alongside it.
   Latin fragments (brand name, emails, GA IDs) still render in Poppins. */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button {
  font-family: 'Poppins', 'Cairo', sans-serif;
}

[dir="rtl"] {
  /* Arabic script sits taller than Latin; a little extra leading stops the
     diacritics and descenders from colliding. */
  line-height: 1.85;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.45; }

/* Arabic has no uppercase, so tracking-out an "uppercase" label just breaks
   the joins between letters. */
[dir="rtl"] .section-label,
[dir="rtl"] .logo-sub,
[dir="rtl"] .hero-scroll {
  text-transform: none;
  letter-spacing: 0;
}

/* The script tagline face is Latin-only; keep the Arabic slogan in Cairo. */
[dir="rtl"] .tagline {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
}

/* Keep the wordmark and any Latin data left-to-right inside an RTL page. */
[dir="rtl"] .logo-name,
[dir="rtl"] .lang-switch,
[dir="rtl"] .step-num,
[dir="rtl"] .legal-table code,
[dir="rtl"] .bridge-stat span {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- HEADER ------------------------------------------------------------ */
[dir="rtl"] .skip-link { left: auto; right: 1rem; border-radius: 0 0 8px 8px; }

[dir="rtl"] .nav-links > li > a::after { left: auto; right: 0; }

[dir="rtl"] .has-dropdown > a i { margin-left: 0; margin-right: 0.3rem; }

[dir="rtl"] .dropdown { left: auto; right: -1rem; }
[dir="rtl"] .dropdown::before { left: 0; right: 0; }

/* ---- HERO / ABOUT ------------------------------------------------------ */
[dir="rtl"] .about-badge { right: auto; left: 1.5rem; }

/* ---- ACCENT-BAR CARDS --------------------------------------------------
   The coloured rule must sit on the reading edge, and the rounded corners
   follow it across. */
[dir="rtl"] .info-card,
[dir="rtl"] .highlight-card,
[dir="rtl"] .privacy-card {
  border-left: none;
  border-right: 4px solid var(--blue);
  border-radius: var(--radius) 0 0 var(--radius);
}
[dir="rtl"] .highlight-card,
[dir="rtl"] .privacy-card { border-right-color: var(--green); }

[dir="rtl"] .meaning-card.daba,
[dir="rtl"] .meaning-card.lghda {
  border-left: none;
  border-right: 4px solid var(--blue);
}
[dir="rtl"] .meaning-card.lghda { border-right-color: var(--green); }

/* ---- LISTS ------------------------------------------------------------- */
[dir="rtl"] .page-body > ul,
[dir="rtl"] .legal-body ul {
  margin-left: 0;
  margin-right: 1.2rem;
}
[dir="rtl"] .legal-body ul.plain-list { margin-right: 0; }

/* ---- FORMS ------------------------------------------------------------- */
[dir="rtl"] select {
  background-position: left 0.9rem center;
  padding-right: 1rem;
  padding-left: 2.4rem;
}
[dir="rtl"] .form-honeypot { left: auto; right: -9999px; }

/* ---- TABLES ------------------------------------------------------------ */
[dir="rtl"] .legal-table th { text-align: right; }

/* ---- MOTION ------------------------------------------------------------
   Reveal animations should travel inward from the reading edge, so their
   direction mirrors too. */
[dir="rtl"] .reveal-left  { transform: translateX(30px); }
[dir="rtl"] .reveal-right { transform: translateX(-30px); }
[dir="rtl"] .reveal-left.visible,
[dir="rtl"] .reveal-right.visible { transform: translateX(0); }

[dir="rtl"] .step:hover { transform: translateX(-4px); }

/* The service-link arrow points along the reading direction. */
[dir="rtl"] .service-link i,
[dir="rtl"] .breadcrumb { transform: scaleX(-1); }
[dir="rtl"] .breadcrumb > * { transform: scaleX(-1); }

/* ---- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 768px) {
  [dir="rtl"] .nav-links { left: 0; right: 0; }
  [dir="rtl"] .has-dropdown > a i { float: left; }
  [dir="rtl"] .dropdown { padding: 0.3rem 0.9rem 0.6rem 0; }
}

@media (max-width: 480px) {
  [dir="rtl"] .about-badge { right: auto; left: 1rem; }
}