@font-face {
  font-family: 'Quranic';
  font-display: swap;
  src: local('1 MUHAMMADI QURANIC'),
       url('/fonts/MuhammadiFont.woff2') format('woff2'),
       url('/fonts/MuhammadiFont.woff') format('woff');
}

@font-face {
  font-family: 'QuranicSurah';
  font-display: swap;
  src: local('Al Qalam Quran Majeed Web'),
       url('/fonts/AlQalamQuranMajeedWeb.woff2') format('woff2'),
       url('/fonts/AlQalamQuranMajeedWeb.woff') format('woff');
}

@font-face {
  font-family: 'Mehr';
  font-display: swap;
  src: local('Mehr Nastaliq Web'),
       url('/fonts/MehrNastaliqWeb.woff') format('woff');
  unicode-range: U+A0, U+20-22, U+27, U+3A, U+60, U+600-603, U+60C, U+60F, U+610-613, U+614, U+61B, U+61F,
                 U+621-63A, U+640-64F, U+650-657, U+66A-66C, U+670, U+674, U+679, U+67E, U+686, U+688, U+691,
                 U+698, U+6A9, U+6AF, U+6BA, U+6BE, U+6C1-6C3, U+6CC, U+6D2-6D3, U+6E4, U+6F0-6F9, U+6D4,
                 U+2018-2019, U+2026, U+FDFA-FDFB;
}

@font-face {
  font-family: 'Naskh';
  font-display: swap;
  src: url('/fonts/Vazir-Variable.woff2') format('woff2'),
       url('/fonts/Vazir-Variable.woff') format('woff');
}

:root {
  --ar-box-bg: #e3eed7;
  --ur-box-bg: #e1e6ed;
  --list-heading-color: #361313;
  --backtop-btn-bg: #917c61;
  --lang-border-color: #d1cfcf;

  /* in anticipation of edge-to-edge display support */
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-area-inset-left: env(safe-area-inset-left);
  --safe-area-inset-right: env(safe-area-inset-right);
}
[data-bs-color-scheme=dark] {
  --ar-box-bg: #152209;
  --ur-box-bg: #022329;
  --list-heading-color: #2fa4e7;
  --backtop-btn-bg: #2f2519;
  --lang-border-color: #666666;
}
body, .popover {
  font-family: Mehr, 'Jameel Noori Nastaleeq', 'AlQalam Taj Nastaleeq', 'Alvi Nastaleeq', 'Nafees Nastaleeq', 'Urdu Typesetting', 'Noto Nastaliq Urdu', sans-serif;
}
.ar-text {
  font-family: Quranic, sans-serif;
  word-spacing: 4px;
}
.ar-inline {
  font-family: Quranic, sans-serif;
  font-size: 1.2em; /* 20% bigger than surrounding para */
}
.ar-text.quran-text {
  font-family: QuranicSurah, sans-serif;
}
.en-text {
  font-family: sans-serif; /* TODO. use standard bootstrap fonts Roboto, SegoeUI etc*/
}
.list-heading {
  font-family: Naskh, sans-serif;
  color: var(--list-heading-color);
  font-weight: 700;
}
.popover {
  font-size: 1.2rem;
}
.popover-body {
  padding: 10px;
}
[data-bs-color-scheme=dark] .popover .popover-arrow::before, .popover .popover-arrow::after {
    border-color: rgba(var(--bs-secondary-rgb-alt), 1);
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}
.popover .popover-arrow::before, .popover .popover-arrow::after {
    border-color: rgba(var(--bs-secondary-rgb), 1);
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* Disable transitions for now, causing weird behaviour:
   Text color transitions only after the background-color transition has finished */
/* body, body * {
  transition-property: color, background-color, border-color, box-shadow, text-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease;
} */

/* Additional styles to fix dark mode inconsistencies */
[data-bs-color-scheme=dark] a {
  color: #9cd4f7;
}
[data-bs-color-scheme=dark] .navbar.bg-primary {
  /* cerulean theme adds this gradient, too bright for dark mode */
  background-image: unset !important;
}

/* inner fill color of logo in dark mode */
[data-bs-color-scheme=dark] .inner-hizb {
  fill: #050f04;
}