/* ============================================================
   CILA — RTL + Arabic typography overrides
   Loaded only when locale = ar (dir="rtl")
   Note: dir="rtl" already reverses flex row order natively.
   We do NOT add flex-direction:row-reverse on flex rows, or it
   double-flips back to LTR.
   ============================================================ */

@font-face {
  font-family: 'DIN Next Arabic';
  src: url('/fonts/DINNextArabic-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'DIN Next Arabic';
  src: url('/fonts/DINNextArabic-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'DIN Next Arabic';
  src: url('/fonts/DINNextArabic-Light.ttf') format('truetype');
  font-weight: 300; font-display: swap;
}

/* Arabic font everywhere in RTL */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] span, html[dir="rtl"] div,
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] button,
html[dir="rtl"] .eyebrow {
  font-family: 'DIN Next Arabic', 'Inter', system-ui, sans-serif !important;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { font-weight: 700; }

/* Default text flows right */
html[dir="rtl"] body { text-align: right; }

/* -------- NAVBAR --------
   dir="rtl" already places: logo at the RIGHT, actions at the LEFT,
   and nav items right-to-left (الرئيسية first on the right).
   So NO row-reverse here. Just alignment tweaks. */
html[dir="rtl"] .nav-links { justify-content: center; }

/* Logo internal separator flips to the right side */
html[dir="rtl"] .logo span {
  border-left: 0; border-right: 1px solid #4a544c;
  padding-left: 0; padding-right: .5rem; text-align: right;
}

/* Dropdown menus align right */
html[dir="rtl"] .nav-dropdown__menu { text-align: right; }

/* -------- EYEBROW LABEL: tick sits to the right of text -------- */
html[dir="rtl"] .eyebrow { flex-direction: row-reverse; }

/* -------- HERO -------- */
html[dir="rtl"] .hero { text-align: right; }
html[dir="rtl"] .hero__member { right: auto; left: clamp(1.5rem,4vw,3rem); text-align: left; }

/* -------- CARDS / PILLARS: accent border flips to the right -------- */
html[dir="rtl"] .pillar {
  border-left: 0; border-right: 3px solid var(--lime);
  padding-left: 0; padding-right: 1.1rem;
}
html[dir="rtl"] .card--limebar {
  border-left: 0; border-right: 3px solid var(--lime);
}

/* -------- ESTABLISHED BADGE ROW -------- */
html[dir="rtl"] .est-row { flex-direction: row-reverse; }

/* -------- SPLIT SECTIONS -------- */
html[dir="rtl"] .split { direction: rtl; }

/* -------- FORMS -------- */
html[dir="rtl"] .field label { text-align: right; }
html[dir="rtl"] .contact-form { direction: rtl; }

/* -------- FOOTER -------- */
html[dir="rtl"] .footer__cols { direction: rtl; text-align: right; }

/* -------- GENERIC -------- */
html[dir="rtl"] .card { text-align: right; }
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-lead { margin-inline-start: 0; margin-inline-end: auto; }

/* Mobile */
@media (max-width: 940px) {
  html[dir="rtl"] .nav-links { align-items: flex-end; }
}