/* ============================================
   RTL (Right-to-Left) Overrides
   Applied when html[dir="rtl"] is set
   Supports: Urdu (ur), Punjabi Shahmukhi (pa)
   ============================================ */

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

/* Fonts — Noto Nastaliq for Urdu, Noto Naskh for Punjabi Shahmukhi */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

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"] li,
html[dir="rtl"] span,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea {
  font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'Inter', sans-serif;
}

/* Slightly larger line-height for Nastaliq script (tall ascenders/descenders) */
html[dir="rtl"] body {
  line-height: 2;
}

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

/* ============ HEADER ============ */
html[dir="rtl"] .header-nav {
  margin-left: auto;
  margin-right: 2.5rem;
}

html[dir="rtl"] .header-nav a svg {
  margin-right: 0;
  margin-left: 3px;
}

html[dir="rtl"] .header-brand {
  flex-direction: row-reverse;
}

html[dir="rtl"] .theme-toggle {
  margin-left: 0;
  margin-right: 0.5rem;
}

html[dir="rtl"] .lang-selector {
  margin-left: 0;
  margin-right: 0.3rem;
}

/* ============ HERO ============ */
html[dir="rtl"] .hero-content p {
  text-align: right;
}

/* ============ SECTIONS ============ */
html[dir="rtl"] .section-header p {
  text-align: right;
}

/* ============ CARDS ============ */
html[dir="rtl"] .card-body {
  text-align: right;
}

html[dir="rtl"] .card-link::after {
  content: ' ←';
}

html[dir="rtl"] .card-link {
  direction: rtl;
}

/* ============ BUTTONS ============ */
html[dir="rtl"] .btn {
  flex-direction: row-reverse;
}

/* ============ FOOTER ============ */
html[dir="rtl"] .footer-brand p {
  text-align: right;
}

html[dir="rtl"] .footer-links-col a {
  text-align: right;
}

html[dir="rtl"] .footer-bottom {
  flex-direction: row-reverse;
}

/* ============ DONATE CARDS ============ */
html[dir="rtl"] .donate-card {
  text-align: center; /* keep centered for donate cards */
}

/* ============ CTA BANNER ============ */
html[dir="rtl"] .cta-banner p {
  text-align: right;
}

/* ============ STATS ============ */
html[dir="rtl"] .stats-bar {
  direction: rtl;
}

/* ============ VIDEO CAPTIONS ============ */
html[dir="rtl"] .video-card .caption {
  text-align: right;
}

/* ============ MOBILE NAV ============ */
@media (max-width: 768px) {
  html[dir="rtl"] .header-nav.open {
    text-align: right;
  }
  
  html[dir="rtl"] .header-brand {
    flex-direction: row;
  }
}

/* ============ LANGUAGE DROPDOWN RTL ============ */
html[dir="rtl"] .lang-dropdown {
  margin-left: 0;
  margin-right: 0.5rem;
}

html[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}