/*
 * Sanatan Bliss — reading-layout.css
 * Shared styles for all devotional content single pages.
 * Loaded alongside the CPT-specific CSS (mantra.css, aarti.css etc.)
 * Contains: display controls, font-size toggle, Hindi/English toggle,
 *           verse block structure, reading layout grid, sidebar widgets.
 */

/* ── Display controls bar ──────────────────────────────────── */
.display-controls {
  background: white;
  border-bottom: 1px solid var(--cream-dark);
  padding: 12px 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 80;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.dc-label {
  font-size: .72rem;
  color: var(--stone-light);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.font-size-ctrl { display: flex; align-items: center; gap: 6px; }
.fs-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1.5px solid var(--cream-dark);
  background: white;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  line-height: 1;
}
.fs-btn:hover { border-color: var(--saffron); color: var(--saffron); }
.fs-val {
  font-size: .75rem;
  font-weight: 700;
  color: var(--stone-mid);
  min-width: 20px;
  text-align: center;
}
.dc-sep { width: 1px; height: 28px; background: var(--cream-dark); }
.dc-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--cream-dark);
  background: white;
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--stone-mid);
  cursor: pointer;
  transition: all .2s;
}
.dc-btn:hover { border-color: var(--saffron); color: var(--saffron); }
.dc-btn.active { background: var(--maroon); border-color: var(--maroon); color: white; }

/* ── Reading layout grid ───────────────────────────────────── */
.reading-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}
.reading-area { min-width: 0; }

/* ── Info card (about section) ─────────────────────────────── */
.info-card {
  background: var(--saffron-pale);
  border: 1px solid rgba(194,96,10,.2);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 32px;
}
.info-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--maroon);
  margin-bottom: 10px;
}
.info-card p { font-size: .87rem; color: var(--stone-mid); line-height: 1.75; }
.info-pill {
  display: inline-block;
  font-size: .72rem;
  background: white;
  border: 1px solid rgba(194,96,10,.15);
  border-radius: 20px;
  padding: 4px 12px;
  color: var(--stone-mid);
  margin: 4px 4px 0 0;
}

/* ── Verse section wrapper ─────────────────────────────────── */
.verse-section { margin-bottom: 8px; }
.verse-section-title {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stone-light);
  font-weight: 600;
  padding: 20px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.verse-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cream-dark);
}

/* ── Individual verse block ────────────────────────────────── */
.verse-block {
  background: white;
  border: 1px solid var(--cream-dark);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 12px;
  transition: all .2s;
}
.verse-block:hover {
  border-color: rgba(194,96,10,.2);
  box-shadow: 0 4px 20px rgba(107,30,15,.06);
}
.verse-block.highlighted {
  border-color: var(--saffron);
  background: var(--saffron-pale);
}
.verse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 0;
}
.verse-num {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-light);
}
.verse-actions { display: flex; gap: 4px; }
.verse-act-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .15s;
}
.verse-act-btn:hover { background: var(--cream-dark); }

/* ── Hindi text ────────────────────────────────────────────── */
.verse-hindi {
  font-family: var(--font-hindi);
  font-size: var(--hindi-size, 1.15rem);
  color: var(--maroon);
  line-height: 2.1;
  padding: 14px 20px 12px;
  text-align: center;
}

/* ── Transliteration (Roman) ───────────────────────────────── */
.verse-transliteration {
  font-size: .82rem;
  color: var(--stone-mid);
  line-height: 1.9;
  padding: 10px 20px;
  font-style: italic;
  border-top: 1px dashed var(--cream-dark);
}

/* ── English meaning ───────────────────────────────────────── */
.verse-meaning {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--cream-dark);
}
.verse-meaning-label {
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone-light);
  font-weight: 600;
  margin-bottom: 5px;
}
.verse-meaning-text {
  font-size: .84rem;
  color: var(--stone-mid);
  line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════
   HINDI / ENGLISH TOGGLE — THE ACTUAL WORKING RULES
   Body class is toggled by toggleView() in JS.
   Default (no class): show Hindi only.
   body.show-meaning: show meaning only, hide Hindi.
   body.show-both: show everything.
   body.show-transliteration: show transliteration too.
   ════════════════════════════════════════════════════════════ */

/*
  TOGGLE STATE MATRIX
  ─────────────────────────────────────────────────────────────
  Mode                 body class            Hindi  Roman  Meaning
  ─────────────────────────────────────────────────────────────
  हिन्दी Only (default) (none)               ✅     ❌     ❌
  English Only          .show-meaning         ❌     ❌     ✅
  Roman Only            .show-transliteration ❌     ✅     ❌
  All                   .show-both            ✅     ✅     ✅
  ─────────────────────────────────────────────────────────────
  JS sets/removes these classes on <body> via sbToggleView().
*/

/* ── Base: hide meaning and transliteration by default ── */
.verse-meaning         { display: none; }
.verse-transliteration { display: none; }

/* ── Hindi Only (default — no body class): only .verse-hindi shows ── */
/* (it's visible by default since we only hide meaning+transliteration) */

/* ── English Only (.show-meaning) ── */
body.show-meaning .verse-hindi            { display: none; }
body.show-meaning .verse-transliteration  { display: none; }
body.show-meaning .verse-meaning          { display: block; }

/* ── Roman transliteration only (.show-transliteration) ── */
body.show-transliteration .verse-hindi         { display: none; }
body.show-transliteration .verse-transliteration { display: block; }
body.show-transliteration .verse-meaning       { display: none; }

/* ── All / Both (.show-both) ── */
body.show-both .verse-hindi               { display: block; }
body.show-both .verse-transliteration     { display: block; }
body.show-both .verse-meaning             { display: block; }

/* Font size classes (set by changeFontSize JS) */
body.fs-sm .verse-hindi { --hindi-size: .95rem; }
body.fs-sm .verse-meaning-text { font-size: .76rem; }
body.fs-sm .verse-transliteration { font-size: .74rem; }

body.fs-lg .verse-hindi { --hindi-size: 1.4rem; }
body.fs-lg .verse-meaning-text { font-size: .94rem; }
body.fs-lg .verse-transliteration { font-size: .9rem; }

body.fs-xl .verse-hindi { --hindi-size: 1.7rem; }
body.fs-xl .verse-meaning-text { font-size: 1.05rem; }
body.fs-xl .verse-transliteration { font-size: 1rem; }

/* ── Share row ─────────────────────────────────────────────── */
.share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid var(--cream-dark);
  border-bottom: 1px solid var(--cream-dark);
  margin: 32px 0;
}
.share-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--stone-mid);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 4px;
}
.share-btn {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--cream-dark);
  background: white;
  font-size: .76rem;
  color: var(--stone-mid);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .2s;
}
.share-btn:hover { border-color: var(--saffron); color: var(--saffron); background: var(--saffron-pale); }

/* ── Related scroll ────────────────────────────────────────── */
.related-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--maroon);
  margin-bottom: 20px;
}
.related-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.related-scroll::-webkit-scrollbar { display: none; }
.related-card {
  flex-shrink: 0;
  width: 180px;
  background: white;
  border: 1px solid var(--cream-dark);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--stone);
  transition: all .3s;
}
.related-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(107,30,15,.1); }
.rc-top {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}
.rc-body { padding: 12px 14px; }
.rc-type {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--saffron);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.rc-name {
  font-size: .84rem;
  font-weight: 600;
  color: var(--stone);
  line-height: 1.35;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 20px; }

.significance-card {
  background: linear-gradient(135deg, var(--saffron-pale), var(--cream));
  border: 1px solid rgba(194,96,10,.2);
  border-radius: 18px;
  padding: 20px;
}
.sig-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--maroon);
  margin-bottom: 10px;
}
.sig-text { font-size: .84rem; color: var(--stone-mid); line-height: 1.7; margin-bottom: 12px; }
.sig-points { padding-left: 16px; margin: 0; }
.sig-points li { font-size: .8rem; color: var(--stone-mid); line-height: 1.8; }

.print-widget {
  background: var(--maroon);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
}
.pw-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.pw-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: white; margin-bottom: 6px; }
.pw-desc { font-size: .76rem; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 14px; }
.pw-btns { display: flex; flex-direction: column; gap: 8px; }
.pw-btn {
  padding: 9px 16px;
  border-radius: 20px;
  border: none;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.pw-btn.p { background: var(--gold); color: #1a0a00; }
.pw-btn.p:hover { background: var(--gold-light); }
.pw-btn.s { background: rgba(255,255,255,.12); color: white; border: 1px solid rgba(255,255,255,.2); }
.pw-btn.s:hover { background: rgba(255,255,255,.2); }

.sidebar-card {
  background: white;
  border-radius: 18px;
  border: 1px solid var(--cream-dark);
  padding: 20px;
}
.sidebar-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-mid);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cream-dark);
}
.quick-nav { display: flex; flex-direction: column; gap: 2px; }
.qn-item {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .82rem;
  color: var(--stone-mid);
  text-decoration: none;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qn-item:hover { background: var(--saffron-pale); color: var(--maroon); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .reading-layout { grid-template-columns: 1fr; padding: 32px 32px 60px; }
  .sidebar { position: static; }
}
@media (max-width: 600px) {
  .display-controls { padding: 10px 16px; gap: 10px; }
  .reading-layout { padding: 24px 16px 48px; }
  .verse-hindi { font-size: var(--hindi-size, 1rem) !important; padding: 12px 14px; }
  .verse-meaning { padding: 10px 14px 14px; }
  .verse-transliteration { padding: 8px 14px; }
  .related-card { width: 150px; }
  .rc-top { height: 70px; font-size: 1.8rem; }
}

/* ── Print styles ──────────────────────────────────────────── */
@media print {
  .display-controls, .sidebar, .share-row, .related-title, .related-scroll,
  header, footer, nav, .breadcrumb { display: none !important; }
  .reading-layout { grid-template-columns: 1fr; padding: 0; }
  .verse-block { border: none; margin-bottom: 24px; }
  .verse-hindi { font-size: 1.2rem; }
  /* Always print both Hindi and meaning */
  body .verse-meaning { display: block !important; }
  body .verse-transliteration { display: block !important; }
  body .verse-hindi { display: block !important; }
}