/* Styling for the Arabic across the eight book files.
   Four classes are used:
     .quran        — Qur'anic verses recovered from the source images (block)
     .quran-inline — Qur'anic verses supplied from a citation (inline in prose)
     .hikam        — the Hikam matn of Ibnu Athaillah (block)
     .arabic       — hadith, du'a, dhikr and other quotations (block) */

/* ------------------------------------------------------------------
   Font. The Qur'anic text in these files is now the QPC Hafs script
   published by the King Fahd Complex, so it must be set in a QPC Hafs
   font -- the two are a matched pair.

   Note the font carries NO punctuation: the Arabic comma (U+060C),
   semicolon (U+061B), question mark (U+061F) and Arabic full stop (U+06D4)
   are all mapped to one unassigned circle glyph, and would print as a black
   disc mid-sentence. They have been removed from the text. The Latin full
   stop is simply absent from the font, so it falls through the stack below
   to Amiri or Scheherazade -- keep those fallbacks listed.

   The shipped file is UthmanicHafs_V22 (KFGQPC HAFS Uthmanic Script 2.2),
   checked against every one of the 68 Arabic characters used across these
   books -- no gaps. Do NOT fall back to the older "KFGQPC Uthmanic Script
   HAFS" Ver 0.09: it maps the small low meem (U+06ED) to a full-width glyph
   and prints it as a circle in the middle of the line.

   Drop the font file next to this stylesheet and set the url() to match.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "QPC Hafs";
  src: local("KFGQPC HAFS Uthmanic Script"),
       url("UthmanicHafs_V22.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --arabic-font: "QPC Hafs", "Amiri Quran", "Scheherazade New", serif;
}

div[dir="rtl"][lang="ar"] {
  direction: rtl;
  text-align: right;
  font-family: var(--arabic-font);
  font-size: 1.75rem;
  line-height: 2.6;
  margin: 1.6em 0;
  padding: 0.9em 1.2em;
  border-radius: 4px;
}

/* Verses inserted from a citation carry the reference; show it as a caption */
div.quran[data-ref]::after {
  content: attr(data-ref);
  display: block;
  direction: ltr;
  text-align: left;
  margin-top: 0.5em;
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #8a7a5c;
}


/* Verses set inline with the Malay prose. Kept close to body size so the line
   does not break rhythm; the RTL run is isolated so it cannot disturb the
   surrounding left-to-right text. */
/* Verses set inline, following the Malay translation they render.

   display:inline-block makes the verse ATOMIC. A bidi run allowed to split
   across a line break leaves one line ending in right-to-left Arabic and the
   next resuming at the right margin -- two direction reversals in a single
   visual sweep, which is close to unreadable. As an inline-block the verse
   either fits the space left on the line or moves down whole, and when it is
   too long for any one line it wraps INSIDE its own box, where every line is
   pure RTL with a normal right-margin return sweep.

   unicode-bidi:isolate is a separate job and still required: it stops the
   Malay punctuation on either side being reordered by the Arabic run. */
/* The verse now FOLLOWS the Malay, so the reader needs a cue for where the
   quotation ends and the Arabic begins. The ornate parentheses that Arabic
   typography uses for this (U+FD3E/U+FD3F) are not in the QPC font, and
   injecting them would pull two glyphs from an unpredictable fallback -- or
   render as tofu where no fallback has them. A tinted box does the same job
   with no font dependency.

   If you would rather have the real brackets, uncomment the two rules at the
   bottom of this file and serve a font that contains them (Amiri does). */
span.quran-inline {
  background: #f6f2e8;
  border-radius: 3px;
  padding: 0.05em 0.35em;
  display: inline-block;
  vertical-align: baseline;
  max-width: 100%;
  unicode-bidi: isolate;
  direction: rtl;
  text-align: right;
  font-family: var(--arabic-font);
  font-size: 1.35em;
  line-height: 2.2;
  color: #4a3d28;
}

/* Belt and braces. The Qur'anic font has no italic or bold cut, so if Arabic
   ever ends up inside an <em> or <strong> the browser synthesises a slant or a
   smeared outline over it. Never let the Arabic inherit either. */
div[dir="rtl"][lang="ar"],
span.quran-inline,
em span.quran-inline,
strong span.quran-inline,
em div[dir="rtl"][lang="ar"],
strong div[dir="rtl"][lang="ar"] {
  font-style: normal;
  font-weight: normal;
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

/* Qur'an: set apart with a rule on the right edge */
div.quran {
  border-right: 3px solid #b08d57;
  background: #fbf8f2;
  color: #1a1a1a;
}

/* Hikam matn: the aphorism that opens each chapter */
div.hikam {
  border-right: 3px solid #4a6f8a;
  background: #f5f8fa;
  font-size: 1.85rem;
}

/* Hadith, du'a and other quoted Arabic */
div.arabic {
  border-right: 3px solid #cfcfcf;
  background: #fafafa;
}

/* The Malay rendering that follows a quotation is a blockquote */
blockquote {
  border-left: 3px solid #ddd;
  margin: 0.8em 0 1.6em;
  padding-left: 1em;
  color: #444;
}

/* Chapter headings */
h2 {
  margin-top: 2.5em;
  padding-top: 1em;
  border-top: 1px solid #eee;
}

@media (max-width: 600px) {
  div[dir="rtl"][lang="ar"] { font-size: 1.45rem; line-height: 2.3; padding: 0.7em 0.9em; }
  div.hikam { font-size: 1.5rem; }
  span.quran-inline { font-size: 1.25em; }
}


/* Optional: ornate Qur'anic parentheses ﴾ ﴿ instead of the tinted box.
   Needs a font that contains U+FD3E and U+FD3F -- QPC Hafs V2.2 does not.
   Uncomment both rules and drop the background/padding above.

span.quran-inline::before { content: "\FD3E"; font-family: "Amiri", serif; margin-left: 0.15em; }
span.quran-inline::after  { content: "\FD3F"; font-family: "Amiri", serif; margin-right: 0.15em; }
*/