/* ---------------------------------------------------------
   Sacred Reads - component styles.
   Theme tokens live in theme.css. To change colours or fonts
   site-wide, edit theme.css, not this file.
   --------------------------------------------------------- */

html {
  /* Drives site-wide font scaling controls (A- / A / A+). */
  font-size: calc(16px * var(--text-scale, 1));
}

body {
  background-color: var(--bg-page);
  color: var(--text);
  font-family: var(--font-sans);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.serif        { font-family: var(--font-serif); letter-spacing: 0.005em; }
.devanagari   { font-family: var(--font-devanagari); line-height: 1.9; font-size: 1.15rem; }

/* ---- brand colour helpers ------------------------------------ */
.bg-brand      { background-color: var(--brand) !important; }
.text-brand    { color: var(--brand) !important; }

.btn-brand {
  background-color: var(--brand);
  color: var(--brand-on);
  border: 1px solid var(--brand);
}
.btn-brand:hover, .btn-brand:focus {
  background-color: var(--brand-strong);
  border-color: var(--brand-strong);
  color: var(--brand-on);
}

.btn-outline-brand {
  color: var(--brand);
  border: 1px solid var(--brand);
  background-color: transparent;
}
.btn-outline-brand:hover {
  background-color: var(--brand);
  color: var(--brand-on);
}

/* ---- navbar -------------------------------------------------- */
.navbar.bg-brand .nav-link { color: rgba(255,255,255,0.85); }
.navbar.bg-brand .nav-link:hover { color: #fff; }
.navbar.bg-brand .navbar-brand,
.navbar.bg-brand .navbar-toggler-icon { filter: none; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; padding-left: 0; }
/* Badge box so alignment never depends on the ॐ glyph's side bearing
   (fallback Devanagari fonts have wildly different metrics). */
.brand-om {
  font-family: var(--font-devanagari);
  font-size: 1.3rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand);
  flex-shrink: 0;
}
.brand-text {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---- hero ---------------------------------------------------- */
.hero { padding: 2rem 0 1rem; }
.hero h1 { color: var(--text); }
.hero p  { color: var(--text-muted); }

/* ---- cards --------------------------------------------------- */
.book-card, .chapter-card, .verse-card, .card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.book-card, .chapter-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.book-card:hover, .chapter-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

.chapter-number {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 600;
  color: var(--brand);
  line-height: 1;
}

/* ---- verse cards --------------------------------------------- */
.verse-card {
  border-radius: var(--radius);
  overflow: hidden;
}
.verse-header {
  background: var(--brand-soft);
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.verse-number {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--brand-strong);
}
.verse-body { padding: 1rem 1.25rem; }

.lang-block { padding: 0.4rem 0; }
.lang-block + .lang-block {
  border-top: 1px dashed var(--divider);
  margin-top: 0.4rem; padding-top: 0.8rem;
}
.lang-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-subtle);
  margin-bottom: 0.25rem;
}
.sanskrit-text { font-weight: 600; color: var(--brand-strong); white-space: pre-line; }
.hindi-text, .nepali-text, .english-text { color: var(--text); }

/* ---- comic view ---------------------------------------------- */
.verse-scene-wrap {
  line-height: 0;
  border-bottom: 1px solid var(--border);
}
.verse-scene { display: block; width: 100%; height: auto; }
.view-text .verse-scene-wrap { display: none; }

.speaker-chip {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: var(--font-sans);
  font-weight: 400;
  vertical-align: middle;
  white-space: nowrap;
}

.view-toggle { display: flex; align-items: center; gap: 0.4rem; }

/* ---- story mode (fullscreen verse-by-verse) ------------------ */
.verse-scene-wrap { position: relative; }
.story-open {
  position: absolute;
  top: 8px; right: 8px;
  width: 34px; height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 17, 21, 0.55);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.story-open:hover { background: rgba(15, 17, 21, 0.8); }

.story-mode {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg-page);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.story-mode[hidden] { display: none; }

.story-progressbar {
  height: 3px;
  background: var(--bg-overlay);
}
.story-progressfill {
  height: 100%;
  width: 0;
  background: var(--brand);
}
.story-progressfill.running { transition: width linear; }

.story-topbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
}
.story-counter { font-size: 0.85rem; color: var(--text-muted); margin-right: auto; }
.story-secs {
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 0.8rem;
  padding: 0.15rem 0.3rem;
}
.story-play, .story-close {
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  width: 34px; height: 34px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.story-play:hover, .story-close:hover { background: var(--bg-muted); }
.story-play.playing { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }

.story-panel { flex-shrink: 0; }
.story-panel svg { display: block; width: 100%; height: auto; max-height: 48vh; }

.story-text {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.2rem 2.5rem;
  -webkit-overflow-scrolling: touch;
}
.story-text .story-verse-tag {
  font-size: 0.8rem;
  color: var(--brand-strong);
  margin-bottom: 0.6rem;
}
.story-text p { margin: 0 0 0.9rem; }

.story-nav {
  position: absolute;
  top: 20%;
  bottom: 20%;
  width: 22%;
  background: transparent;
  border: none;
  color: var(--text-subtle);
  font-size: 2.2rem;
  cursor: pointer;
  padding: 0;
}
.story-nav:hover { color: var(--text); }
.story-nav:disabled { opacity: 0; cursor: default; }
.story-prev { left: 0; text-align: left; padding-left: 0.5rem; }
.story-next { right: 0; text-align: right; padding-right: 0.5rem; }

.bookmark-btn {
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem 0.55rem;
}

/* ---- language toggle chips ----------------------------------- */
.lang-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.lang-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  user-select: none;
}
.lang-chip input { accent-color: var(--brand); }

/* ---- breadcrumbs + muted text -------------------------------- */
.text-muted, .breadcrumb-item.active { color: var(--text-muted) !important; }
.breadcrumb a { color: var(--brand); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---- chapter nav buttons ------------------------------------- */
.chapter-nav .btn { font-size: 1.05rem; }

/* ---- settings dropdown (gear menu) --------------------------- */
.settings-menu {
  min-width: 260px;
  padding: 0.85rem 1rem;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.settings-menu .settings-row { padding: 0.5rem 0; }
.settings-menu .settings-row + .settings-row {
  border-top: 1px solid var(--divider);
  margin-top: 0.25rem;
}
.settings-menu .settings-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
  margin-bottom: 0.4rem;
}
.settings-menu .btn-group .btn {
  font-size: 0.8rem;
}

/* ---- ad slot ------------------------------------------------- */
.ad-slot {
  display: block;
  width: 100%;
  margin: 1.5rem auto;
  padding: 0.5rem;
  text-align: center;
  background: var(--bg-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-subtle);
  font-size: 0.75rem;
}
.ad-slot ins { display: block; }
.ad-slot-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.35rem;
}

/* ---- donate button ------------------------------------------ */
.btn-donate {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #ffdd00;
  color: #1f2937;
  border: 1px solid #f5c518;
  font-weight: 600;
}
.btn-donate:hover { background: #ffd700; color: #000; }

/* ---- responsive tweaks --------------------------------------- */
@media (max-width: 576px) {
  .devanagari { font-size: 1.05rem; }
}

/* ---- compact view -------------------------------------------- */
/* One continuous block per language instead of per-verse cards.
   Chunks carry .lang-block[data-lang] so the language chips filter
   them with the same code path as the cards. */
.compact-root { max-width: 46rem; }
.compact-title {
  font-family: var(--font-serif);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.compact-sub {
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}
.compact-chunk { padding: 0.75rem 0; }
.compact-lang-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-subtle);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
/* One shloka per line, each tagged with its number. The hanging indent keeps
   wrapped lines aligned under the text rather than under the number. */
.compact-flow { line-height: 1.75; }
.compact-verse {
  display: block;
  padding-left: 2.1rem;
  text-indent: -2.1rem;
}
.compact-verse + .compact-verse { margin-top: 0.4rem; }
.compact-num {
  color: var(--brand);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.62em;
  /* Fixed column so first lines start where wrapped lines do, whatever the
     number's width. Sized in em of the parent to track the hanging indent. */
  display: inline-block;
  width: 3.35em;
  margin-right: 0;
  user-select: none;
}
/* Sanskrit keeps hard line breaks in card view; compact is deliberately
   dense, so let it wrap as prose instead. */
.compact-flow.sanskrit-text { white-space: normal; }

/* ---- print --------------------------------------------------- */
@media print {
  /* Chrome: nothing but the reading text. */
  .navbar, footer, .breadcrumb, nav[aria-label], .chapter-nav,
  .lang-toggle, .view-toggle, .js-print, .story-mode, .story-open,
  .bookmark-btn, .adsense-slot, .btn-donate { display: none !important; }

  /* Neutral ink on white regardless of the on-screen theme. */
  :root, [data-theme='dark'] {
    --text: #000; --text-muted: #333; --text-subtle: #444;
    --brand: #000; --brand-strong: #000;
    --bg: #fff; --bg-surface: #fff;
    --border: #999; --divider: #bbb;
  }
  body { background: #fff !important; color: #000 !important; }

  main, .container { max-width: 100% !important; width: auto !important; padding: 0 !important; }
  .compact-root { max-width: 100%; }

  /* Cards shouldn't be split across pages in text/comic view. */
  .verse-card {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .verse-header { background: transparent !important; }

  .compact-chunk { break-inside: auto; page-break-inside: auto; }
  .compact-verse { break-inside: avoid; page-break-inside: avoid; }
  .compact-lang-title, .compact-title { break-after: avoid; page-break-after: avoid; }

  a { text-decoration: none !important; color: #000 !important; }
  @page { margin: 18mm 16mm; }
}

/* Brief pulse when a bookmark toggle fails, so it isn't a silent no-op. */
.bookmark-btn.bookmark-error {
  animation: bookmark-shake 0.4s ease;
  border-color: #dc3545 !important;
  color: #dc3545 !important;
}
@keyframes bookmark-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* ---- per-book language badges -------------------------------- */
.lang-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.lang-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-strong);
  border: 1px solid var(--border);
  white-space: nowrap;
}