/*
 * ════════════════════════════════════════════════════════════════════════
 * components.cards.display.css
 * ════════════════════════════════════════════════════════════════════════
 *
 * Read-only display cards and content blocks — elements the user reads
 * but does not interact with directly. For interactive response cards
 * (question cards, answer fields, Likert scale) see:
 * components.cards.responses.css
 *
 * 01. Chapter header    – Chapter number label, title, decorative gradient
 * 02. Section header    – Mid-chapter divider heading (h2-level)
 * 03. Subsection header – Mid-chapter divider heading (h3-level)
 * 04. Intro block       – Opening narrative paragraph card
 * 05. Bridge text       – Explanatory paragraphs between question groups
 * 06. Reflection        – Further reflection header and card container
 * 07. Chapter image     – Inline images with caption and fallback
 * 08. Speak button      – Inline read-aloud button.
 *
 * ── DARK MODE ───────────────────────────────────────────────────────────
 * 09. Dark mode         – body.dark-mode overrides for all rules above
 *
 * ── MULTILINGUAL / RTL ──────────────────────────────────────────────────
 * 10. RTL overrides     – Mirrors layout for Arabic, Hebrew, Urdu (dir="rtl")
 * 11. Script overrides  – Per-script resets for letter-spacing,
 *                         text-transform, font-style, font-family, and
 *                         line-height. Grouped by script family:
 *                           A. Arabic script   — ar, ur
 *                           B. Hebrew script   — he
 *                           C. Devanagari      — ne, hi
 *                           D. Myanmar         — my
 *                           E. CJK             — zh (zh-CN), ja
 *                           F. Hangul          — ko
 *                           G. Cyrillic        — ru, uk  (chrome labels only)
 *                         Latin scripts (en, fr, es, pt, ha, ff, sw, ig,
 *                         yo, ms, tl) and Greek (el) need no overrides.
 *
 * ════════════════════════════════════════════════════════════════════════
 */


/* ── 01. CHAPTER HEADER ─────────────────────────────────────────────────── */
/* The title block at the top of each chapter.
   ::before adds a decorative radial gold glow in the top-right corner. */

.chapter-header {
  padding: 32px var(--content-margin) 28px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.chapter-header::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;  /* decorative glow — intentionally physical, always top-right */
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,146,42,0.08) 0%, transparent 70%);
}
.chapter-label {
  font-family: var(--font-stack-mono);
  font-size: 11px;         /* UI chrome — stays px */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emphasis);
  margin-bottom: 10px;
}
.chapter-title {
  font-family: var(--font-stack-heading);
  font-size: 26px;         /* display heading — stays px */
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 6px;
}


/* ── 02. SECTION HEADER ─────────────────────────────────────────────────── */
/* A mid-chapter divider heading, e.g. "Spiritual Health Check-up".
   Larger of the two heading levels. */

.section-header {
  font-family: var(--font-stack-heading);
  font-size: 20px;         /* display heading — stays px */
  font-style: italic;
  color: var(--text);
  margin: 28px var(--content-margin) 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
}


/* ── 03. SUBSECTION HEADER ──────────────────────────────────────────────── */
/* A secondary mid-chapter divider heading, one level below .section-header. */

.subsection-header {
  font-family: var(--font-stack-heading);
  font-size: 18px;         /* display heading — stays px */
  font-style: italic;
  color: var(--text-secondary);
  margin: 28px var(--content-margin) 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
}


/* ── 04. INTRO BLOCK ────────────────────────────────────────────────────── */
/* Opening narrative paragraph card at the top of a chapter's content.
   border-inline-start so the accent border flips to the right in RTL.
   border-radius still uses physical values; RTL override in section 10. */

.intro-block {
  background: var(--card-bg);
  border-inline-start: 3px solid var(--accent);   /* was border-left */
  margin: 20px var(--content-margin);
  padding: 18px 20px;
  border-radius: 0 8px 8px 0;                     /* mirrored for RTL in section 10 */
  box-shadow: 0 1px 4px var(--shadow);
}
.intro-block p {
  font-size: 0.9375rem;    /* was 15px — scales */
  color: var(--text-secondary);
  line-height: 1.75;
}
.intro-block p + p { margin-top: 12px; }


/* ── 05. BRIDGE TEXT ────────────────────────────────────────────────────── */
/* Explanatory paragraphs placed between question groups.
   Visually matches the intro block but uses tighter top margin
   to sit snugly between cards. */

.bridge-text {
  background: var(--card-bg);
  border-inline-start: 3px solid var(--accent);   /* was border-left */
  margin: 12px var(--content-margin);
  padding: 18px 20px;
  border-radius: 0 8px 8px 0;                     /* mirrored for RTL in section 10 */
  box-shadow: 0 1px 4px var(--shadow);
  font-size: 0.9375rem;    /* was 15px — scales */
  color: var(--text-secondary);
  line-height: 1.75;
}
.bridge-text p + p { margin-top: 12px; }

/* ── List indentation inside text cards ─────────────────────────────────── */
/* padding-inline-start flips automatically in RTL so list markers always
   sit inside the card on the correct side. */
.intro-block ul,
.intro-block ol,
.bridge-text ul,
.bridge-text ol {
  padding-inline-start: 1.4em;                    /* was padding-left */
  margin: 8px 0;
}
.intro-block ul ul,
.intro-block ol ol,
.intro-block ul ol,
.intro-block ol ul,
.bridge-text ul ul,
.bridge-text ol ol,
.bridge-text ul ol,
.bridge-text ol ul {
  margin: 4px 0;
}
.intro-block li,
.bridge-text li {
  margin-bottom: 4px;
  line-height: 1.65;
}


/* ── 06. REFLECTION ─────────────────────────────────────────────────────── */
/* "Further Reflection" section at the foot of a chapter.
   Header and card are visually joined — header uses border-radius on top
   only, card on bottom only, creating a single rounded block. */

.reflection-header {
  background: var(--emphasis);
  margin: 24px var(--content-margin) 0;
  border-radius: 10px 10px 0 0;
  padding: 14px 18px;
}
.reflection-header h3 {
  font-family: var(--font-stack-heading);
  font-size: 16px;         /* display heading — stays px */
  color: var(--surface);
  font-style: italic;
  font-weight: 400;
}
.reflection-card {
  background: var(--card-bg);
  margin: 0 var(--content-margin);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--shadow);
}
.reflection-q {
  padding: 16px 18px 4px;
  font-size: 0.906rem;     /* was 14.5px — scales */
  color: var(--text);
  line-height: 1.65;
  border-top: 1px solid var(--surface-mid);
}
.reflection-q:first-child { border-top: none; }


/* ── 07. CHAPTER IMAGE ──────────────────────────────────────────────────── */
/* Inline images within chapter content, with caption and emoji fallback.
   float (left/right/none) is applied inline by the content author. */

.chapter-image-wrapper {
  display: block;
  margin: 16px var(--content-margin);
  border-radius: 10px;
  overflow: hidden;        /* clips image to border-radius */
  box-shadow: 0 2px 8px var(--shadow);
}
/* Clearfix so floated images don't bleed into the next card */
.chapter-image-wrapper + * { clear: both; }

.chapter-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.chapter-image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px;
  background: var(--surface-mid);
  font-size: 32px;         /* emoji — stays px */
}
.chapter-image-caption {
  font-family: var(--font-stack-mono);
  font-size: 11px;         /* UI chrome — stays px */
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-align: center;
  padding: 8px 12px;
  background: var(--card-bg);
  line-height: 1.5;
  margin: 0;
}


/* ── 08. SPEAK BUTTON ───────────────────────────────────────────────────── */
/* Inline read-aloud button. Anchored to the inline-start corner of
   bridge-text cards; inset-inline-start flips it in RTL automatically. */

.intro-block,
.bridge-text {
  position: relative;
  isolation: isolate;   /* guarantees button anchors here, not to chapter-header */
}
.speak-btn {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;                        /* was left: 2px — flips in RTL */
  background: var(--surface-mid);
  border: none;
  border-radius: 50%;
  color: var(--text);
  opacity: 0.6;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  transition: opacity 0.15s, color 0.15s;
}
.speak-btn:hover  { opacity: 1; }
.speak-btn-active { opacity: 1; color: var(--accent); }


/* ══════════════════════════════════════════════════════════════════════════
   09. DARK MODE
   body.dark-mode overrides for all rules in this file, gathered here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Chapter header ── */
body.dark-mode .chapter-label {
  color: var(--emphasis-light);
}
body.dark-mode .chapter-title {
  color: var(--surface);
}

/* ── Section header / subsection header ── */
body.dark-mode .section-header {
  color: var(--dm-text);
  border-color: var(--dm-border);
}
body.dark-mode .subsection-header {
  color: var(--dm-text-mid);
  border-color: var(--dm-border);
}

/* ── Intro block ── */
body.dark-mode .intro-block {
  background: var(--dm-raised);
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
body.dark-mode .intro-block p {
  color: var(--dm-text-mid);
}

/* ── Bridge text ── */
body.dark-mode .bridge-text {
  background: var(--dm-raised);
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  color: var(--dm-text-mid);
}

/* ── Reflection ── */
body.dark-mode .reflection-card {
  background: var(--dm-raised);
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* ── Chapter image ── */
body.dark-mode .chapter-image-wrapper {
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
body.dark-mode .chapter-image-fallback {
  background: var(--dm-raised);
}
body.dark-mode .chapter-image-caption {
  background: var(--dm-raised);
  color: var(--dm-text-faint);
}

/* ── Speak button ── */
body.dark-mode .speak-btn { color: var(--emphasis-light); }


/* ══════════════════════════════════════════════════════════════════════════
   10. RTL OVERRIDES  (dir="rtl" on <html> or a parent element)
   Applies to Arabic (ar), Urdu (ur), and Hebrew (he).
   Most directional properties were converted to logical equivalents above
   (border-inline-start, padding-inline-start, inset-inline-start) and
   flip automatically without any rules here.
   The border-radius on intro/bridge cards still uses physical values
   because there is no logical equivalent for border-radius yet, so we
   mirror it explicitly.
   ══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] .intro-block,
[dir="rtl"] .bridge-text {
  border-radius: 8px 0 0 8px;   /* mirrors the LTR 0 8px 8px 0 */
}


/* ══════════════════════════════════════════════════════════════════════════
   11. SCRIPT-SPECIFIC OVERRIDES
   ──────────────────────────────────────────────────────────────────────────
   These selectors fire automatically when the JS language switcher sets the
   lang attribute on <html> (e.g. <html lang="ar"> or <html lang="zh-CN">).
   :lang(zh) matches zh-CN as a primary-language subtag match, so no
   separate zh-CN rule is needed.

   WHAT IS CHANGED AND WHY, BY SCRIPT FAMILY:

   Arabic script (ar, ur)
   ─────────────────────
   • letter-spacing: 0  — Arabic is a cursive script; letter-spacing breaks
     the joins between connected letters, rendering text illegible.
   • text-transform: none  — Arabic has no uppercase/lowercase distinction.
   • font-style: normal  — Arabic has no italic form. Browsers apply an
     algorithmic oblique slant that looks wrong and should be suppressed.
   • font-family: var(--main-font-family)  — Playfair Display (used for
     headings) has no Arabic glyphs. Fall back to the active body font so
     heading text renders in the correct script rather than blank boxes.
   • line-height: 2  — Arabic text with full diacritical vowel marks
     (harakat) needs extra vertical space to prevent line collisions.

   Hebrew script (he)
   ──────────────────
   • Same as Arabic script above, except line-height: 1.9 — Hebrew is
     slightly less vertically demanding than fully vowelled Arabic.

   Devanagari (ne — Nepali, hi — Hindi)
   ────────────────────────────────────
   • letter-spacing: 0  — Devanagari uses a top connecting bar (shirorekha);
     letter-spacing separates characters from it unnaturally.
   • text-transform: none  — Devanagari has no case.
   • font-style: normal  — No italic form; algorithmic obliquing tilts the
     shirorekha and looks poor.
   • font-family: var(--main-font-family)  — Playfair Display has no
     Devanagari glyphs.
   • line-height: 2  — Devanagari matras extend well above the cap height;
     the default 1.25–1.75 causes inter-line collisions.

   Myanmar script (my — Burmese)
   ─────────────────────────────
   • letter-spacing: 0  — Myanmar uses complex stacked and enclosing marks;
     spacing disrupts these clusters.
   • text-transform: none  — Myanmar has no case.
   • font-style: normal  — No italic form.
   • font-family: var(--main-font-family)  — Playfair Display has no Myanmar
     glyphs.
   • line-height: 2.2  — Myanmar has the tallest stacked characters of any
     script in this app; requires the most generous line-height.

   CJK — Chinese Simplified and Japanese (zh → zh-CN, ja)
   ────────────────────────────────────────────────────────
   • letter-spacing: 0  — CJK characters are fixed-width; Latin-style
     tracking looks unnatural and wastes space.
   • text-transform: none  — CJK has no case.
   • font-style: normal  — No italic; algorithmic obliquing looks wrong on
     ideographic characters.
   • font-family: var(--main-font-family)  — Playfair Display has no CJK
     glyphs.
   • line-height: 1.6  — CJK glyphs are square and compact; the Latin-
     optimised 1.75 looks too loose. 1.6 is the CJK convention.

   Hangul — Korean (ko)
   ────────────────────
   • letter-spacing: 0  — Hangul syllable blocks are fixed-width; tracking
     looks unnatural.
   • text-transform: none  — Hangul has no case.
   • font-style: normal  — Korean fonts rarely include a true italic cut;
     suppress algorithmic obliquing.
   • font-family: var(--main-font-family)  — Playfair Display has no Hangul.
   • line-height: 1.7  — Hangul blocks are slightly taller than CJK
     ideographs so a marginally larger value than the CJK 1.6 reads better.

   Cyrillic — Russian and Ukrainian (ru, uk)
   ─────────────────────────────────────────
   • letter-spacing: 0 on chrome labels only  — Cyrillic has case and italic
     so text-transform, font-style, and font-family are left unchanged.
     However the 0.2em tracking on .chapter-label and 0.04em on
     .chapter-image-caption (monospace all-caps chrome) look stretched on
     Cyrillic glyph proportions. Reset to 0 for those specific elements
     only; body text letter-spacing is unaffected.

   Latin scripts (en, fr, es, pt, ha, ff, sw, ig, yo, ms, tl) and
   Greek (el) need no overrides — they behave correctly with the
   base rules as written.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── A. Arabic script — ar, ur ────────────────────────────────────────── */

:lang(ar) .chapter-label,
:lang(ur) .chapter-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ar) .chapter-title,
:lang(ur) .chapter-title {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(ar) .section-header,
:lang(ur) .section-header,
:lang(ar) .subsection-header,
:lang(ur) .subsection-header {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(ar) .reflection-header h3,
:lang(ur) .reflection-header h3 {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(ar) .chapter-image-caption,
:lang(ur) .chapter-image-caption {
  letter-spacing: 0;
}

:lang(ar) .intro-block p,
:lang(ur) .intro-block p,
:lang(ar) .bridge-text,
:lang(ur) .bridge-text,
:lang(ar) .reflection-q,
:lang(ur) .reflection-q {
  line-height: 2;
}


/* ── B. Hebrew script — he ────────────────────────────────────────────── */

:lang(he) .chapter-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(he) .chapter-title {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(he) .section-header,
:lang(he) .subsection-header {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(he) .reflection-header h3 {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(he) .chapter-image-caption {
  letter-spacing: 0;
}

:lang(he) .intro-block p,
:lang(he) .bridge-text,
:lang(he) .reflection-q {
  line-height: 1.9;
}


/* ── C. Devanagari — ne (Nepali), hi (Hindi) ─────────────────────────── */

:lang(ne) .chapter-label,
:lang(hi) .chapter-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ne) .chapter-title,
:lang(hi) .chapter-title {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(ne) .section-header,
:lang(hi) .section-header,
:lang(ne) .subsection-header,
:lang(hi) .subsection-header {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(ne) .reflection-header h3,
:lang(hi) .reflection-header h3 {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(ne) .chapter-image-caption,
:lang(hi) .chapter-image-caption {
  letter-spacing: 0;
}

:lang(ne) .intro-block p,
:lang(hi) .intro-block p,
:lang(ne) .bridge-text,
:lang(hi) .bridge-text,
:lang(ne) .reflection-q,
:lang(hi) .reflection-q {
  line-height: 2;
}


/* ── D. Myanmar script — my (Burmese) ───────────────────────────────── */

:lang(my) .chapter-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(my) .chapter-title {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(my) .section-header,
:lang(my) .subsection-header {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(my) .reflection-header h3 {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(my) .chapter-image-caption {
  letter-spacing: 0;
}

/* Myanmar stacked characters are the tallest of any script in this app */
:lang(my) .intro-block p,
:lang(my) .bridge-text,
:lang(my) .reflection-q {
  line-height: 2.2;
}


/* ── E. CJK — zh (Chinese Simplified zh-CN), ja (Japanese) ──────────── */
/* :lang(zh) matches zh-CN as a primary-language subtag match.            */

:lang(zh) .chapter-label,
:lang(ja) .chapter-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(zh) .chapter-title,
:lang(ja) .chapter-title {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(zh) .section-header,
:lang(ja) .section-header,
:lang(zh) .subsection-header,
:lang(ja) .subsection-header {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(zh) .reflection-header h3,
:lang(ja) .reflection-header h3 {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(zh) .chapter-image-caption,
:lang(ja) .chapter-image-caption {
  letter-spacing: 0;
}

/* CJK square glyphs read better slightly tighter than the Latin default */
:lang(zh) .intro-block p,
:lang(ja) .intro-block p,
:lang(zh) .bridge-text,
:lang(ja) .bridge-text,
:lang(zh) .reflection-q,
:lang(ja) .reflection-q {
  line-height: 1.6;
}


/* ── F. Hangul — ko (Korean) ─────────────────────────────────────────── */

:lang(ko) .chapter-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ko) .chapter-title {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(ko) .section-header,
:lang(ko) .subsection-header {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(ko) .reflection-header h3 {
  font-style: normal;
  font-family: var(--main-font-family);
}

:lang(ko) .chapter-image-caption {
  letter-spacing: 0;
}

/* Hangul syllable blocks are slightly taller than CJK ideographs */
:lang(ko) .intro-block p,
:lang(ko) .bridge-text,
:lang(ko) .reflection-q {
  line-height: 1.7;
}


/* ── G. Cyrillic — ru (Russian), uk (Ukrainian) ─────────────────────── */
/* Cyrillic has case and italic, so text-transform, font-style, and
   font-family are left unchanged. Only the aggressive letter-spacing
   on monospace chrome labels is reset — 0.2em looks stretched on
   Cyrillic glyph proportions. Body text letter-spacing is unaffected. */

:lang(ru) .chapter-label,
:lang(uk) .chapter-label {
  letter-spacing: 0;
}

:lang(ru) .chapter-image-caption,
:lang(uk) .chapter-image-caption {
  letter-spacing: 0;
}