/* Baptist Catechism (1693) — usmcmin.org
   Single-page catechism. Reuses lbcf.css for hero/intro/proofs/link styles;
   this file adds the Q&A layout, section headers, TOC drill-down, jump box. */

/* ===== Hero edition + dedication lines ===== */
.cat-edition-line {
  color: var(--gray); font-size: 0.92rem; font-style: italic;
  max-width: 560px; margin: 2px auto 0;
}
.cat-dedication {
  color: var(--gold); font-size: 0.9rem;
  max-width: 560px; margin: 14px auto 0; line-height: 1.6;
  font-family: 'Playfair Display', serif; font-style: italic;
}
body.light-mode .cat-edition-line { color: #6b6359; }
body.light-mode .cat-dedication { color: #8a6a1a; }

/* ===== Section headers ===== */
.cat-section {
  margin: 40px auto 0;
  max-width: 820px;
  scroll-margin-top: 80px;
}
.cat-section-head {
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 26px;
  margin-bottom: 8px;
}
.cat-section-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.cat-section-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--gold-light); line-height: 1.25;
}
.cat-section-range { color: var(--gray); font-size: 0.8rem; margin-top: 4px; }
body.light-mode .cat-section-head h2 { color: #5a4710; }
body.light-mode .cat-section-eyebrow { color: #8a6a1a; }

/* ===== Q&A blocks ===== */
.cat-qa { max-width: 820px; margin: 0 auto; }
.cat-q {
  padding: 18px 0 16px;
  border-bottom: 1px solid rgba(212,175,55,0.10);
  scroll-margin-top: 80px;
  position: relative;
}
.cat-q:last-child { border-bottom: none; }
.cat-q-q {
  font-family: 'Playfair Display', serif;
  color: var(--gold-light);
  font-size: 1.12rem; line-height: 1.45;
  margin-bottom: 8px;
}
.cat-q-num {
  color: var(--gold); font-weight: 700;
  margin-right: 6px;
}
.cat-q-a {
  color: var(--white); font-size: 1.04rem; line-height: 1.8;
  margin-bottom: 6px;
}
.cat-a-label {
  color: var(--gold); font-weight: 600;
  font-family: 'Inter', sans-serif; font-size: 0.85rem;
  letter-spacing: 0.04em; margin-right: 6px;
  text-transform: uppercase;
}
.cat-permalink {
  text-decoration: none; color: var(--gray);
  font-size: 0.95rem; padding: 0 6px; border-radius: 4px;
  opacity: 0; transition: opacity .18s, color .18s, background .18s;
}
.cat-q:hover .cat-permalink { opacity: 1; }
.cat-permalink:hover { color: var(--gold); background: rgba(212,175,55,0.08); }
.cat-permalink.copied { color: var(--gold-light); opacity: 1; }

body.light-mode .cat-q-q { color: #5a4710; }
body.light-mode .cat-q-num { color: #8a6a1a; }
body.light-mode .cat-q-a { color: #1a1a1a; }
body.light-mode .cat-a-label { color: #8a6a1a; }
body.light-mode .cat-q { border-bottom-color: rgba(138,106,26,0.18); }

/* ===== TOC drill-down + jump box ===== */
.cat-controls {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 24px; margin: 24px 0;
}
.cat-controls h2 { color: var(--gold); font-size: 1.05rem; margin-bottom: 12px; }
.cat-jump {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 16px; font-size: 0.9rem; color: var(--gray);
}
.cat-jump input {
  width: 80px; padding: 7px 10px;
  background: rgba(212,175,55,0.06); border: 1px solid var(--border);
  border-radius: 8px; color: var(--white); font-size: 0.9rem;
}
.cat-jump input:focus { outline: none; border-color: var(--gold); }
.cat-jump button {
  padding: 7px 14px; background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.35); border-radius: 8px;
  color: var(--gold); font-size: 0.85rem; font-weight: 500; cursor: pointer;
  transition: background .18s, color .18s;
}
.cat-jump button:hover { background: rgba(212,175,55,0.22); color: var(--gold-light); }
.cat-toc ol { columns: 2; column-gap: 32px; margin: 0; padding: 0; list-style-position: inside; }
@media (max-width: 640px) { .cat-toc ol { columns: 1; } }
.cat-toc li { font-size: 0.9rem; margin-bottom: 6px; break-inside: avoid; }
.cat-toc a { color: var(--gray); text-decoration: none; }
.cat-toc a:hover { color: var(--gold); }
.cat-toc .cat-toc-range { color: var(--gold); opacity: 0.7; font-size: 0.78rem; }

body.light-mode .cat-controls { background: #fffaf0; border-color: #d4c8a8; }
body.light-mode .cat-controls h2 { color: #5a4710; }
body.light-mode .cat-jump input { background: #fff; color: #1a1a1a; border-color: #d4c8a8; }
body.light-mode .cat-jump button { color: #8a6a1a; border-color: rgba(138,106,26,0.4); background: rgba(138,106,26,0.1); }
body.light-mode .cat-toc a { color: #555; }
body.light-mode .cat-toc a:hover { color: #8a6a1a; }
body.light-mode .cat-toc .cat-toc-range { color: #8a6a1a; }

/* ===== Print ===== */
@media print {
  .cat-controls, .cat-permalink, .lbcf-readthru { display: none !important; }
  .cat-q-q { color: #000 !important; }
  .cat-q-a { color: #000 !important; }
  .cat-q-num, .cat-a-label { color: #555 !important; }
  .cat-section-head h2 { color: #000 !important; }
  .cat-section { break-before: page; }
  .cat-section:first-of-type { break-before: avoid; }
}