/* ============================================================
   Sabeel-e-Rahat — i18n styles
   ============================================================ */

/* ---- Language toggle pill ---- */
.lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 102, 94, 0.08);
  border-radius: 30px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.lang-toggle-btn button {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 24px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  color: var(--primary, #00665E);
  transition: all 0.25s ease;
  font-family: inherit;
}
.lang-toggle-btn button.active {
  background: var(--accent, #FF6B00);
  color: #fff;
}

/* On dark/transparent nav states (e.g. project-detail before scroll) */
.pd-nav:not(.scrolled) .lang-toggle-btn {
  background: rgba(255, 255, 255, 0.12);
}
.pd-nav:not(.scrolled) .lang-toggle-btn button {
  color: #fff;
}
.pd-nav:not(.scrolled) .lang-toggle-btn button.active {
  background: var(--accent, #FF6B00);
  color: #fff;
}

/* ---- Urdu typography ----
   We deliberately do NOT flip the whole page to dir="rtl":
   this design relies on absolutely-positioned / CSS-grid
   layouts (the hero grid, the founder depth-slider, the
   mosaic project grid, etc.) that were built for a fixed
   left-to-right arrangement. Mirroring the whole document
   would break those layouts. Instead, only the text nodes
   that were actually translated switch to dir="rtl" and the
   Urdu typeface, while the surrounding layout stays put. */
body.lang-ur {
  --ur-font: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
}
body.lang-ur [data-i18n][dir="rtl"] {
  font-family: var(--ur-font);
  line-height: 2;
  letter-spacing: 0;
}
/* Headings read a little tighter in Nastaliq */
body.lang-ur h1[data-i18n][dir="rtl"],
body.lang-ur h2[data-i18n][dir="rtl"],
body.lang-ur h3[data-i18n][dir="rtl"],
body.lang-ur h4[data-i18n][dir="rtl"] {
  line-height: 1.9;
}

@media (max-width: 768px) {
  .lang-toggle-btn button { padding: 5px 10px; font-size: 0.62rem; }
}