/* ==========================================================================
   Prayer Times Doha — custom-ar.css
   Arabic/RTL overrides only. Loaded AFTER custom.css, on /ar/ pages only.
   custom.css itself is never edited so English pages are unaffected.
   ========================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
/* Cairo: body/UI text. Amiri: H1 + big hero time displays ("headings/display"). */
body {
  font-family: 'Cairo', 'Tahoma', sans-serif;
}

.page-title,
.hero-time-display,
.panel-prayer-name,
.progress-prayer-name {
  font-family: 'Amiri', 'Cairo', serif;
}

/* custom.css (English design system) now sets explicit Bricolage/IBM Plex
   font-family on these classes for the Latin site; they previously had no
   own font-family and simply inherited Cairo from body above. Restore that
   here so Arabic pages don't silently fall back to a non-Cairo system font. */
.section-title,
.month-nav-title,
.sun-moon-title {
  font-family: 'Cairo', 'Tahoma', sans-serif;
}

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

/* ── Skip link + floating Qibla button: mirror to the trailing (left) edge ── */
[dir="rtl"] .skip-link { left: auto; right: 8px; }
[dir="rtl"] .skip-link:focus { left: auto; }

[dir="rtl"] .qibla-fab { right: auto; left: 20px; }
[dir="rtl"] .qibla-fab-label { right: auto; left: 0; }
[dir="rtl"] .qibla-fab-label::after { right: 18px; left: auto; }
@media (max-width: 600px) {
  [dir="rtl"] .qibla-fab { right: auto; left: 16px; }
}

/* ── Language switcher ────────────────────────────────────────────────── */
.lang-switch {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 3px; margin-inline-start: 8px;
}
.lang-switch a {
  padding: 4px 10px; border-radius: 5px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); transition: background .15s, color .15s;
}
.lang-switch a.active { background: var(--orange); color: #fff; }
.lang-switch a:not(.active):hover { background: var(--bg-stripe); color: var(--text); }

/* ── Numeral toggle button ────────────────────────────────────────────── */
.numeral-toggle {
  border: 1px solid var(--border-2); background: var(--bg-card); color: var(--text-2);
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-sm);
  cursor: pointer; font-family: 'Cairo', sans-serif;
}
.numeral-toggle:hover { background: var(--bg-stripe); }

/* ── Info rows: keep label/value from crushing together in RTL ──────────── */
[dir="rtl"] .info-row-label { min-width: 100px; }