/* ==========================================================================
   PPRI Pakistan — Urdu Typography & RTL BiDi Layout Engine
   assets/css/rtl.css
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;600;700&display=swap');

:root {
  --ur-font: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', Tahoma, 'Segoe UI', sans-serif;
  --ur-font-sans: system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ── Base Typography & Document Direction ───────────────────────────────── */
html[lang="ur"],
body[lang="ur"],
[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family: var(--ur-font);
  font-size: 17px;
  line-height: 2.25;
  letter-spacing: normal;
}

/* Headings in Nastaliq require adequate line-height to avoid glyph collision */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: var(--ur-font);
  font-weight: 700;
  line-height: 1.85;
  margin-top: 1.25em;
  margin-bottom: 0.6em;
  letter-spacing: normal;
}

[dir="rtl"] p {
  line-height: 2.25;
  margin-top: 0;
  margin-bottom: 1.3em;
}

[dir="rtl"] li {
  line-height: 2.1;
  margin-bottom: 0.5em;
}

[dir="rtl"] .hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.65;
  letter-spacing: normal;
  margin: 18px 0 24px;
}

[dir="rtl"] .hero p {
  font-size: 1.15rem;
  line-height: 2.2;
}

[dir="rtl"] .eyebrow {
  letter-spacing: normal;
  font-size: 0.88rem;
  font-weight: 700;
}

/* ── Site Header & Navbar Mirroring ─────────────────────────────────────── */
[dir="rtl"] .site-header {
  direction: rtl;
}

[dir="rtl"] .navbar {
  flex-direction: row;
}

[dir="rtl"] .brand {
  flex-direction: row;
  gap: 14px;
}

[dir="rtl"] .brand-text strong {
  font-size: 1.15rem;
  line-height: 1.3;
}

[dir="rtl"] .brand-text span {
  font-size: 0.8rem;
  line-height: 1.6;
}

[dir="rtl"] .nav-links {
  flex-direction: row;
  direction: rtl;
}

[dir="rtl"] .nav-links a,
[dir="rtl"] .nav-trigger {
  font-size: 0.98rem;
  font-family: var(--ur-font);
}

/* Active indicator underline originates from right */
[dir="rtl"] .nav-links a::after,
[dir="rtl"] .nav-group::after {
  left: auto;
  right: 0;
  transform-origin: right center;
}

/* Search badge in nav */
[dir="rtl"] .nav-links .nav-search {
  margin-left: 0;
  margin-right: 8px;
  font-family: var(--ur-font-sans);
  font-size: 0.85rem;
}

/* ── Language Switcher Button ────────────────────────────────────────────── */
.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  background: rgba(168, 224, 106, 0.18);
  border: 1px solid rgba(168, 224, 106, 0.55);
  color: #c8ff54;
  transition: all 200ms ease;
  white-space: nowrap;
  font-family: var(--ur-font);
  line-height: 1.6;
  margin-inline-start: 6px;
}

.lang-switch-btn:hover {
  background: #a8e06a;
  color: #052217;
  border-color: #a8e06a;
}

/* ── Desktop & Mobile Dropdown Menus ─────────────────────────────────────── */
[dir="rtl"] .nav-menu {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .nav-menu a {
  text-align: right;
  font-size: 0.92rem;
  line-height: 1.8;
}

@media (max-width: 900px) {
  [dir="rtl"] .nav-links {
    right: auto;
    left: 0;
  }
  [dir="rtl"] .nav-menu {
    border-left: none;
    border-right: 2px solid rgba(168, 224, 106, 0.45);
  }
  [dir="rtl"] .nav-menu a {
    text-align: right;
  }
}

/* ── Reading Progress Bar ───────────────────────────────────────────────── */
[dir="rtl"] .reading-progress {
  left: auto;
  right: 0;
  transform-origin: right center;
}

/* ── Decorative Borders, Callouts & Blockquotes ─────────────────────────── */
[dir="rtl"] .division-card,
[dir="rtl"] .report-card-featured,
[dir="rtl"] .callout,
[dir="rtl"] blockquote {
  border-left: none;
  border-right: 4px solid var(--accent, #a8e06a);
  text-align: right;
}

[dir="rtl"] .stat-card strong {
  font-family: var(--ur-font-sans);
}

[dir="rtl"] .stat-card span {
  font-size: 0.84rem;
  line-height: 1.6;
}

/* ── Data Tables & Observatories ────────────────────────────────────────── */
[dir="rtl"] .data-table,
[dir="rtl"] .scale-table,
[dir="rtl"] table {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .data-table th,
[dir="rtl"] .data-table td,
[dir="rtl"] .scale-table th,
[dir="rtl"] .scale-table td,
[dir="rtl"] table th,
[dir="rtl"] table td {
  text-align: right;
}

/* Numeric table columns: keep numbers legible with LTR layout in cell */
[dir="rtl"] .data-table th.num,
[dir="rtl"] .data-table td.num,
[dir="rtl"] .scale-table th.num,
[dir="rtl"] .scale-table td.num,
[dir="rtl"] th[style*="text-align:right"],
[dir="rtl"] td[style*="text-align:right"] {
  text-align: left !important;
  direction: ltr;
  font-family: var(--ur-font-sans);
}

/* ── Badges, Buttons & Interactive Links ────────────────────────────────── */
[dir="rtl"] .badge,
[dir="rtl"] .card-meta,
[dir="rtl"] .matrix-badge {
  font-family: var(--ur-font);
  line-height: 1.7;
  font-size: 0.78rem;
}

[dir="rtl"] .btn,
[dir="rtl"] .button,
[dir="rtl"] .actions a {
  font-family: var(--ur-font);
  line-height: 1.8;
  font-size: 0.98rem;
}

/* Reversing chevrons / arrows */
[dir="rtl"] .arrow-next,
[dir="rtl"] .nav-prev-next .next-link span::after {
  display: inline-block;
  transform: scaleX(-1);
}

/* ── Survey Hub Localized Styles ─────────────────────────────────────────── */
[dir="rtl"] .survey-topic-btn {
  font-family: var(--ur-font);
  font-size: 1.05rem;
  line-height: 1.8;
  text-align: right;
}

[dir="rtl"] .survey-question h3 {
  font-size: 1.25rem;
  line-height: 1.8;
}

[dir="rtl"] .survey-scale label {
  font-family: var(--ur-font);
  font-size: 0.88rem;
}

[dir="rtl"] .survey-card {
  text-align: right;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
[dir="rtl"] .site-footer {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .footer-grid {
  direction: rtl;
}

[dir="rtl"] .footer-links {
  padding-right: 0;
  list-style: none;
}

[dir="rtl"] .footer-links a {
  font-size: 0.94rem;
  line-height: 2.1;
}

[dir="rtl"] .footer-bottom {
  direction: rtl;
}

/* ── Breadcrumb Navigation ──────────────────────────────────────────────── */
[dir="rtl"] .breadcrumb {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "‹";
  padding: 0 8px;
}