/* Shared site typography. Quran glyphs retain their existing fonts/artwork. */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/ibm-plex-sans-arabic-300.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/ibm-plex-sans-arabic-400.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/ibm-plex-sans-arabic-500.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/ibm-plex-sans-arabic-600.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/ibm-plex-sans-arabic-700.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bina-site-font: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
}

/* Override legacy classes, inline Matn choices and public-site font settings.
   Excluding each Quran subtree lets its own rules and inherited fonts win. */
html:root,
html:root body,
html:root body :where(*):not(:where(
  .mushaf, .mushaf *,
  .fixed-text-page, .fixed-text-page *,
  .report-verse, .report-verse *,
  .ward-part p, .ward-part p *,
  .quran-text, .quran-text *,
  [data-quran-font], [data-quran-font] *,
  .mushaf-artwork, .mushaf-artwork *,
  .vm-mushaf-image,
  .bi, .fa, .fas, .far, .fab, .fal, .fad,
  .material-icons, .material-symbols-outlined
)) {
  font-family: var(--bina-site-font) !important;
}

/* Page captions are interface text, even when placed inside the Quran reader. */
html:root body .mushaf-page-heading {
  font-family: var(--bina-site-font) !important;
}