/*
 * ════════════════════════════════════════════════════════════════════════
 * themes.css
 * ════════════════════════════════════════════════════════════════════════
 *
 * All overrides that change the appearance based on media type or user
 * preference. Dark mode overrides are distributed to the bottom of each
 * relevant sub-file (variables.css, base.css, chrome.css, etc.) rather
 * than collected here, because co-locating dark mode rules with the
 * components they override makes maintenance easier.
 *
 * This file therefore contains only print / PDF export styles.
 *
 * 01. Print button    – Trigger button rendered on the Progress page
 * 02. Print styles    – @media print: hides chrome, resets page,
 *                       renders answer fields as static text for PDF
 *
 * ── DARK MODE ───────────────────────────────────────────────────────────
 * Dark mode overrides for .print-btn live in pages.css (Section 13),
 * alongside the other Progress page dark mode rules.
 * All other dark mode rules are in their respective sub-files.
 *
 * ── MULTILINGUAL NOTES ──────────────────────────────────────────────────
 * RTL text direction in print is inherited automatically from the
 * html[dir="rtl"] attribute set by the JS language switcher — no
 * explicit direction rule is needed here.
 *
 * Screen-level :lang() overrides defined in section 11 of each component
 * file remain active during printing (media queries don't strip lang
 * selectors), so the following are already handled without duplication:
 *   • question-ref letter-spacing     (05b section 11)
 *   • reflection-header h3 font-style (05a section 11)
 *   • All body-text line-heights       (05a, 05b section 11)
 *
 * New overrides added in this file cover print-specific rules that the
 * screen section 11 blocks cannot reach because the print block
 * re-declares the properties with hardcoded values:
 *   • .chapter-label letter-spacing / text-transform (print re-declares both)
 *   • .answer-field font-family (hardcoded to Source Serif 4 in print,
 *     which has no non-Latin glyph coverage)
 *   • .intro-block / .bridge-text border-left → border-inline-start
 *
 * ════════════════════════════════════════════════════════════════════════
 */


/* ── 01. PRINT BUTTON ───────────────────────────────────────────────────── */
/* Trigger button rendered on the Progress page that initiates window.print().
   Light-mode styles here; dark-mode overrides in pages.css. */

.print-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 16px;         /* UI chrome — stays px */
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.print-btn:hover {
  background: var(--surface-mid);
  color: var(--text);
}


/* ── 02. PRINT STYLES ───────────────────────────────────────────────────── */
/*
 * Activated when the user triggers window.print() or uses the browser's
 * print dialog. Designed to produce a clean PDF of the chapter content
 * with answers rendered as readable text — stripping all app chrome.
 *
 * Design decisions:
 *   - All screen-only UI is hidden with display:none !important
 *   - Colour backgrounds that should survive into print use
 *     print-color-adjust: exact (and its -webkit- prefix)
 *   - Font sizes switch to pt units for reliable print rendering
 *   - Page margins set via @page for consistent PDF output
 */

@media print {

  /* ── Hide all app chrome ── */
  .top-nav,
  .chapter-menu,
  .save-bar,
  .toast,
  .celebration-toast,
  .verse-modal-overlay,
  .qa-modal-overlay,
  .search-overlay,
  .onboarding-overlay,
  .chapter-nav,
  .print-btn,
  .page-close-bar,
  .starred-summary,
  .section-break,
  .qa-callout-card,
  .gen-callout-card {
    display: none !important;
  }

  /* ── Reset page ── */
  html, body {
    font-size: 11pt;
    background: white !important;
    color: black !important;
    margin: 0;
    padding: 0;
  }

  /* Full-width content — remove the max-width reading column constraint */
  .content {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  /* ── Chapter header ── */
  .chapter-header {
    padding: 0 0 16pt 0;
    border-bottom: 1.5pt solid #999;
    margin-bottom: 16pt;
    page-break-after: avoid;
  }
  .chapter-label {
    font-size: 8pt;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #666;
  }
  .chapter-title {
    font-size: 20pt;
    color: black;
  }

  /* ── Question cards ── */
  .question-card {
    border: 0.75pt solid #ccc;
    border-radius: 0;
    margin: 0 0 12pt 0;
    page-break-inside: avoid;
    box-shadow: none;
  }
  /* Reference bar — preserve dark background and gold text in print */
  .question-ref {
    background: #2c2416 !important;
    color: #d4a843 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 5pt 10pt;
    font-size: 8pt;
  }
  /* Star and verse buttons serve no purpose in print */
  .star-btn,
  .verse-btn {
    display: none !important;
  }
  .question-body {
    padding: 8pt 10pt 4pt;
  }
  .question-text {
    font-size: 10pt;
    color: black;
  }

  /* ── Answer fields ──
     Rendered as static text boxes rather than interactive textareas.
     Source Serif 4 is chosen for Latin-script readability in print;
     non-Latin scripts override font-family below (section 02a). */
  .answer-field {
    display: block;
    width: 100%;
    min-height: 48pt;
    border: none;
    border-top: 0.5pt solid #ddd;
    background: #f9f9f9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 6pt 10pt;
    font-size: 10pt;
    font-family: 'Source Serif 4', Georgia, serif;
    color: black;
    white-space: pre-wrap;
    word-break: break-word;
    resize: none;
  }

  /* ── Intro and bridge blocks ──
     Preserve the inline-start accent border and warm cream background.
     border-inline-start so the accent border flips to the right edge
     when printing in a RTL language (html[dir="rtl"] is still present
     at print time). */
  .intro-block,
  .bridge-text {
    border-inline-start: 3pt solid #b8922a;      /* was border-left */
    background: #faf8f3 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 8pt 12pt;
    margin: 0 0 12pt 0;
    font-size: 10pt;
    color: #333;
    box-shadow: none;
  }

  /* ── Reflection header ──
     Preserve the rust background so the section header is visually distinct. */
  .reflection-header {
    background: #8b3a2a !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-radius: 0;
    padding: 6pt 12pt;
    margin: 16pt 0 0 0;
    page-break-after: avoid;
  }
  .reflection-header h3 {
    color: white !important;
    font-size: 11pt;
  }

  /* ── Notes field ──
     Extra top margin to visually separate the notes card from question cards. */
  .question-card:has([data-type="notes"]) {
    margin-top: 16pt;
  }

  /* ── Likert scale ──
     The interactive radio-button widget is hidden entirely. In its place, a
     print-friendly response summary is shown via .likert-print-row, which is
     display:none on screen and display:table on print.

     Each .likert-print-row contains:
       .likert-print-statement — the statement text (left column)
       .likert-print-response  — the selected option label (right column)

     The response cell is populated by JS at print time in renderLikertPrintRows()
     (called from a beforeprint listener wired in render-elements.js / modals.js).
     If no response has been saved, the cell shows a faint em-dash placeholder.

     .likert-scale itself is hidden so raw radio inputs never appear in print,
     regardless of browser. page-break-inside: avoid is set on the wrapper card
     so a scale is not split across pages. */
  .likert-scale,
  .likert-instructions,
  .likert-header-row {
    display: none !important;
  }
  .likert-print-summary {
    display: block;
    margin: 0 0 12pt 0;
    page-break-inside: avoid;
    border: 0.75pt solid #ccc;
  }
  .likert-print-title {
    background: #2c2416 !important;
    color: #d4a843 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 5pt 10pt;
    font-size: 8pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .likert-print-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4pt 10pt;
    font-size: 10pt;
    border-top: 0.5pt solid #eee;
    gap: 12pt;
  }
  .likert-print-row:first-of-type {
    border-top: none;
  }
  .likert-print-statement {
    flex: 1;
    color: black;
  }
  .likert-print-response {
    flex-shrink: 0;
    font-style: italic;
    color: #444;
    text-align: right;
  }
  .likert-print-response.no-response {
    color: #bbb;
  }

  .likert-print-row--bipolar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-items: center;
    gap: 6pt;
    padding: 4pt 10pt;
    font-size: 10pt;
    border-top: 0.5pt solid #eee;
  }
 
  .likert-print-row--bipolar:first-of-type {
    border-top: none;
  }
 
  .likert-print-statement--left {
    text-align: right;
    color: black;
    flex: unset;
  }
 
  .likert-print-statement--right {
    text-align: left;
    color: black;
    flex: unset;
  }


  /* ── Page margins ── */
  @page {
    margin: 1.5cm 1.8cm;
  }
  @page :first {
    margin-top: 1cm;  /* tighter top margin on first page — no running header */
  }


  /* ════════════════════════════════════════════════════════════════════════
     02a. PRINT — SCRIPT-SPECIFIC OVERRIDES
     ──────────────────────────────────────────────────────────────────────
     These rules sit inside @media print so they only apply during printing.
     They override the print-specific property values declared above that
     the screen-level section 11 blocks in other files cannot reach,
     because those blocks target screen rendering and the print block
     re-declares the same properties with hardcoded values.

     TWO ELEMENTS ARE TARGETED:

     .chapter-label
       The print block re-declares letter-spacing: 0.15em and
       text-transform: uppercase. Non-Latin scripts need both reset.
       Cyrillic needs only letter-spacing reset (uppercase is fine).

     .answer-field
       The print block hardcodes font-family to 'Source Serif 4', Georgia,
       serif. Source Serif 4 and Georgia have no coverage for Arabic,
       Devanagari, Myanmar, CJK, Hangul, or Hebrew script. Without an
       override the browser falls back to a generic serif, which may
       render poorly or produce blank boxes depending on the OS.
       Explicitly setting system-ui (or the OS default sans) for each
       script family ensures the user's typed answers print legibly.

     WHAT IS NOT DUPLICATED HERE:
       • question-ref letter-spacing — the 05b section 11 :lang() rules
         remain active in print (lang selectors are not media-scoped).
       • reflection-header h3 font-style — same, covered by 05a section 11.
       • All line-heights — print rendering engine handles leading from
         pt font sizes; the screen line-height values are not inherited
         into print because the print block resets font-size to pt units
         which implicitly resets line-height to normal.
       • RTL direction — inherited from html[dir="rtl"] at print time.
     ════════════════════════════════════════════════════════════════════════ */

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

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

  /* Source Serif 4 / Georgia have no Arabic glyphs.
     system-ui will resolve to the OS default Arabic-capable font. */
  :lang(ar) .answer-field,
  :lang(ur) .answer-field {
    font-family: system-ui, sans-serif;
  }


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

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

  :lang(he) .answer-field {
    font-family: system-ui, sans-serif;
  }


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

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

  :lang(ne) .answer-field,
  :lang(hi) .answer-field {
    font-family: system-ui, sans-serif;
  }


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

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

  :lang(my) .answer-field {
    font-family: system-ui, sans-serif;
  }


  /* ── E. CJK — zh (Chinese Simplified zh-CN), ja (Japanese) ─────────── */

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

  :lang(zh) .answer-field,
  :lang(ja) .answer-field {
    font-family: system-ui, sans-serif;
  }


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

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

  :lang(ko) .answer-field {
    font-family: system-ui, sans-serif;
  }


  /* ── G. Cyrillic — ru (Russian), uk (Ukrainian) ──────────────────────── */
  /* Cyrillic text-transform: uppercase is fine — only letter-spacing reset.
     Georgia (the fallback in the print font stack) has good Cyrillic
     coverage, so no font-family override is needed. */

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

} /* end @media print */