/* ============================================================================
   editorial.css — typography for markup that lives INSIDE a page's body field.
   ----------------------------------------------------------------------------
   Loaded only by the templates whose body carries it (athkar, biography …) via
   <link … pw-append="html-head">, the same way home.css loads on the home page.

   These class names are CONTENT-BOUND: volunteers type them into the body in
   the admin, and ~2,000 migrated pages already contain them. Never rename one
   here — the markup would silently lose its styling. Generic aliases are
   provided alongside the legacy names so newly-authored content need not say
   "athkar" on an article.

     .post-subtitle        a subtitle under the page h1
     .athkar-quran-verse   Qur'anic verses          alias: .quran-verse
     .athkar-variant       an alternative wording (e.g. the evening form)
     .athkar-instruction   a rubric line ("قراءة آية الكرسي")   alias: .instruction
     .repetition-note      an inline repeat count ("ثلاثاً")
     .athkar-note          a set-apart note          alias: .editorial-note

   Semantic tokens only — no primitives, no hard-coded colour.
   ========================================================================== */

/* ---- Subtitle ------------------------------------------------------------ */
/* Positive top margin: the subtitle may follow the <h1> directly, or sit below
   a download button. A negative margin worked for the first case and collided
   in the second. */
.post-subtitle {
  margin-block: var(--space-3) var(--space-5);
  color: var(--text-secondary);
  font-size: var(--fs-h3);
  font-weight: 400;
}

/* ---- Qur'anic verses ----------------------------------------------------- */
/* Verses read continuously, as in a printed muṣḥaf: the paragraphs flow inline,
   ﴿ ﴾ enclose the passage and ۝ separates the āyāt. Gold is used for the
   ornamental marks only — never for the verse text itself (contrast). */
.athkar-quran-verse,
.quran-verse {
  margin-block: var(--space-5);
  padding: var(--space-4);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-faint);
  font-family: var(--font-quran);
  line-height: 2.1;
  color: var(--text-body);
}

.athkar-quran-verse p,
.quran-verse p { display: inline; margin: 0; }

.athkar-quran-verse p:first-of-type::before,
.quran-verse p:first-of-type::before {
  content: '﴿ ';
  color: var(--accent);
}
.athkar-quran-verse p:last-of-type::after,
.quran-verse p:last-of-type::after {
  content: ' ﴾';
  color: var(--accent);
}
.athkar-quran-verse p + p::before,
.quran-verse p + p::before {
  content: ' ۝ ';
  color: var(--accent);
  font-size: 1.1em;
}

/* Citation sits inline after the passage: [ الروم: ١٧–١٩ ] */
.athkar-quran-verse footer,
.quran-verse footer { display: inline; font-family: var(--font-body); }

.athkar-quran-verse footer cite,
.quran-verse footer cite {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.athkar-quran-verse footer cite::before,
.quran-verse footer cite::before { content: '[ '; }
.athkar-quran-verse footer cite::after,
.quran-verse footer cite::after  { content: ' ]'; }

/* ---- Alternative wording ------------------------------------------------- */
.athkar-variant {
  margin-inline-start: var(--space-5);
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: .97em;
}

/* ---- Rubric / instruction line ------------------------------------------- */
.athkar-instruction,
.instruction {
  margin-block: var(--space-5) var(--space-3);
  color: var(--heading);
  font-weight: 700;
}
.athkar-instruction::before,
.instruction::before {
  content: '✦';
  margin-inline-end: .5em;
  color: var(--accent);
}

/* ---- Inline repetition count --------------------------------------------- */
.repetition-note {
  display: inline-block;
  margin-inline-start: .5em;
  padding: .05rem var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-faint);
  color: var(--text-secondary);
  font-family: var(--font-body);   /* never the Qur'an face */
  font-size: var(--fs-xs);
  font-weight: 400;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---- Set-apart note ------------------------------------------------------ */
.athkar-note,
.editorial-note {
  margin-block: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--link);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
.athkar-note::before,
.editorial-note::before {
  content: 'ملاحظة';
  display: block;
  margin-block-end: var(--space-2);
  color: var(--heading);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.athkar-note p:last-child,
.editorial-note p:last-child { margin-block-end: 0; }