/* SermonIndex v3.1 — All refinements */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --accent: #D4AF37;
  --main: #707035;
  --olive: #908F51;
  --light: #F8F8F2;
  --gray: #DEE2E6;
  --gray2: #e5e7eb;
  --text: #242424;
  --text2: #555;
  --text3: #888;
  --white: #fff;
  --card-bg: #fff;
  --footer-bg: #E8EDE4;
  --tan: #5A6B50;
  --footer-text: #3F4F38;
  --footer-heading: #2C3926;
  --footer-muted: #6B7E64;
  --footer-border: rgba(80,100,60,0.15);
  --footer-card-bg: rgba(80,100,60,0.06);
  --footer-card-border: rgba(80,100,60,0.12);
  --shell-border: var(--gray);
  --w: 1280px;
  --ff: Verdana, Geneva, sans-serif;
  --fs: Georgia, 'Times New Roman', serif;
}

html.dark {
  --light: #1a1a1a; --gray: #3a3a3a; --gray2: #444;
  --text: #e4e4da; --text2: #bbb; --text3: #888;
  --white: #1e1e1e; --card-bg: #262620;
  --shell-border: #333; --footer-bg: #111108;
  --tan: #D9CDB6; --footer-text: #D9CDB6; --footer-heading: #fff;
  --footer-muted: rgba(255,255,255,0.5);
  --footer-border: rgba(255,255,255,0.08);
  --footer-card-bg: rgba(255,255,255,0.05);
  --footer-card-border: rgba(255,255,255,0.1);
}

html { font-size: 16px; }
body { font-family: var(--ff); color: var(--text); background: var(--light); line-height: 1.55; }
a { color: var(--main); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--olive); }
img { max-width: 100%; height: auto; display: block; }

/* Green hyperlink style */
.green-link {
  color: var(--main); text-decoration: underline;
  text-decoration-color: rgba(112,112,53,0.3); text-underline-offset: 2px;
}
.green-link:hover { color: var(--olive); text-decoration-color: var(--olive); }
html.dark .green-link { color: var(--accent); text-decoration-color: rgba(212,175,55,0.3); }

/* ===== SITE SHELL ===== */
.site-shell {
  max-width: var(--w); margin: 0 auto; background: var(--card-bg);
  border-left: 2px solid var(--shell-border);
  border-right: 2px solid var(--shell-border);
}

/* ===== HEADER BAR ===== */
.header-bar { background: var(--main); }
html.dark .header-bar { background: #2c2c14; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 32px;
}
.site-logo img { height: 42px; }
.header-right { display: flex; align-items: center; gap: 14px; }

/* Search: white bg matching original */
.search-box { position: relative; }
.search-box .search-svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: rgba(0,0,0,0.35); pointer-events: none;
}
.search-box input {
  background: var(--white); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 22px; padding: 13px 20px 13px 42px;
  color: var(--text); font-size: 0.95rem; font-family: var(--ff); width: 380px;
}
html.dark .search-box input { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); }
html.dark .search-box .search-svg { color: rgba(255,255,255,0.4); }
.search-box input::placeholder { color: rgba(0,0,0,0.4); }
html.dark .search-box input::placeholder { color: rgba(255,255,255,0.4); }
.search-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(212,175,55,0.2); }

/* Mobile search icon — hidden on desktop */
.search-icon-btn {
  display: none; background: none; border: none; color: rgba(255,255,255,0.8);
  cursor: pointer; padding: 4px;
}
.search-icon-btn svg { width: 24px; height: 24px; }

/* Dark mode toggle */
.dark-toggle {
  background: none; border: none; color: rgba(255,255,255,0.8);
  cursor: pointer; display: flex; align-items: center; padding: 4px;
}
.dark-toggle svg { width: 26px; height: 26px; }
.dark-toggle:hover { color: #fff; }
.icon-sun { display: none; }
html.dark .icon-moon { display: none; }
html.dark .icon-sun { display: block; }

/* Hamburger — hidden on desktop */
.hamburger {
  display: none; background: none; border: none; color: rgba(255,255,255,0.8);
  cursor: pointer; padding: 4px;
}
.hamburger svg { width: 28px; height: 28px; }

/* ===== NAV BAR ===== */
.nav-bar {
  background: var(--olive); display: flex; justify-content: center;
  align-items: stretch; overflow: visible;
}
html.dark .nav-bar { background: #3d3d1e; }
.nav-bar a {
  display: inline-flex; align-items: center;
  padding: 10px 18px 3px; color: #fff;
  font-size: 1.25rem; font-weight: 400; white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: border-color 0.15s;
}
.nav-bar a:hover { border-bottom-color: var(--accent); color: #fff; }
.nav-partner {
  background: var(--accent) !important; color: #2a2a14 !important;
  border-radius: 0 !important; padding: 10px 20px 3px !important;
  font-weight: 700 !important; font-size: inherit !important;
  border-bottom: 3px solid var(--accent) !important; margin-left: 4px;
  transition: background 0.15s, transform 0.15s !important;
}
.nav-partner:hover {
  background: #C9A432 !important; color: #2a2a14 !important;
  border-bottom: 3px solid #C9A432 !important;
}

/* ===== NAV GROUP: Sermons label + items ===== */
.nav-group {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}
.nav-group-label {
  display: inline-flex; align-items: center;
  font-weight: 600;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 4px 3px 18px;
  user-select: none;
}
.nav-group a {
  /* inherits .nav-bar a styles */
}

/* ===== MORE DROPDOWN ===== */
.nav-more-wrap {
  position: relative; display: inline-flex; align-items: stretch;
}
.nav-more-btn {
  display: inline-flex; align-items: center;
  padding: 10px 18px 3px; color: #fff;
  font-size: 1.25rem; font-weight: 400; white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: border-color 0.15s;
  text-decoration: none; cursor: pointer;
}
.nav-more-btn:hover { border-bottom-color: var(--accent); color: #fff; }
.nav-more-dropdown {
  display: none; position: absolute; top: 100%; right: 0;
  min-width: 200px; background: #fff; border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px 0; z-index: 1000;
}
html.dark .nav-more-dropdown { background: #2a2a2a; border-color: rgba(255,255,255,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.nav-more-dropdown a {
  display: block; padding: 10px 18px; color: var(--text, #333);
  font-size: 0.92rem; font-weight: 500; text-decoration: none;
  white-space: nowrap; border-bottom: none;
  transition: background 0.1s;
}
.nav-more-dropdown a:hover { background: rgba(0,0,0,0.04); color: var(--olive, #6b5f3f); border-bottom: none; }
html.dark .nav-more-dropdown a { color: #ddd; }
html.dark .nav-more-dropdown a:hover { background: rgba(255,255,255,0.06); color: var(--accent, #d4af37); }
.nav-more-wrap:hover .nav-more-dropdown { display: block; }

/* ===== BIBLE BAR — NOT bold ===== */
/* ===== BIBLE ABBREVIATION BAR ===== */
.bible-bar {
  background: var(--light); display: flex; justify-content: center;
  align-items: center; padding: 10px 32px; gap: 2px;
  border-bottom: 1px solid var(--gray);
}
html.dark .bible-bar { background: var(--card-bg); }
.bible-bar a {
  padding: 4px 14px; color: var(--text);
  font-size: 1.05rem; font-weight: 400;
  border-bottom: 2px solid transparent;
}
.bible-bar a:hover { color: var(--main); border-bottom-color: var(--accent); }
.bb-divider {
  color: var(--gray, #ccc); font-size: 1.1rem; padding: 0 6px;
  user-select: none; opacity: 0.5;
}
.bb-section-link { font-weight: 500 !important; }
.bb-partner { display: none !important; }

/* ===== BIBLE + COMMENTARY DROPDOWN BAR ===== */
.bible-nav {
  background: var(--white); border-bottom: 1px solid var(--gray);
}
html.dark .bible-nav { background: var(--card-bg); }
.bible-nav-inner {
  display: flex; align-items: center; gap: 0;
  height: 48px;
}
.bible-select-wrap {
  position: relative; flex: 1;
  border-right: 1px solid var(--gray);
}
.bible-select-wrap:last-of-type { border-right: none; }
.bible-sw-book { flex: 5 1 0; }
.bible-sw-ref { flex: 5 1 0; }
.bible-sw-comm { flex: 9 1 0; }
.bible-select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: transparent; border: none;
  padding: 12px 40px 12px 20px; height: 48px;
  font-family: var(--ff); font-size: 0.95rem; color: var(--text);
  cursor: pointer; transition: background 0.15s;
}
.bible-select:hover { background: rgba(144,143,81,0.04); }
html.dark .bible-select:hover { background: rgba(212,175,55,0.04); }
.bible-select:focus { outline: none; background: rgba(144,143,81,0.06); }
.bible-select optgroup { font-weight: 700; font-size: 0.88rem; color: var(--text3); padding: 4px 0; }
.bible-select option { font-weight: 400; padding: 4px 12px; }
.bible-select-wrap::after {
  content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--text3); pointer-events: none;
}
.bible-go {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  background: #fff; color: #555;
  border-left: 1px solid var(--gray);
  transition: background 0.15s;
}
.bible-go:hover { background: #e8e8e8; color: #333; }
.bible-go svg { width: 20px; height: 20px; }

/* ===== MOBILE MENU ===== */
.mobile-menu {
  position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
  background: var(--card-bg); z-index: 200;
  transform: translateX(-100%); transition: transform 0.25s ease;
  box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--gray);
  font-size: 1.1rem; font-weight: 700; color: var(--text);
}
.mobile-menu-close {
  background: none; border: none; font-size: 1.6rem; color: var(--text3);
  cursor: pointer; line-height: 1;
}
.mobile-nav a {
  display: block; padding: 14px 24px; color: var(--text);
  font-size: 1.05rem; border-bottom: 1px solid var(--gray);
}
.mobile-nav a:hover { background: var(--light); color: var(--main); }
.mobile-nav .nav-partner {
  background: var(--accent) !important; color: #2a2a14 !important;
  border-radius: 0 !important; font-weight: 700 !important;
  padding: 14px 24px !important; margin: 0 !important;
}
.mobile-nav-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.35);
  padding: 14px 24px 4px;
}
html.dark .mobile-nav-label { color: rgba(255, 255, 255, 0.35); }
.mobile-nav-divider {
  display: block;
  height: 1px;
  background: var(--gray);
  margin: 4px 24px;
}

/* ===== BREADCRUMB ===== */
.breadcrumb { padding: 18px 32px; font-size: 0.92rem; color: var(--text2); }
.breadcrumb a { color: var(--main); text-decoration: underline; text-decoration-color: rgba(112,112,53,0.3); text-underline-offset: 2px; }
.breadcrumb a:hover { color: var(--olive); text-decoration-color: var(--olive); }
html.dark .breadcrumb a { color: var(--accent); text-decoration-color: rgba(212,175,55,0.3); }
html.dark .breadcrumb a:hover { color: #C9A432; text-decoration-color: #C9A432; }

/* ===== TWO COLUMN with grey divider ===== */
.two-col {
  display: grid; grid-template-columns: 1fr 370px;
  gap: 0; padding: 0 0 48px 32px;
}
.col-main { padding-right: 36px; padding-top: 24px; border-right: 1px solid var(--gray); }
.col-side { padding-left: 0; }

/* CTA flush to top and right edge of sidebar */
.side-cta {
  position: relative; overflow: hidden;
  height: 420px; margin-bottom: 24px;
}
.side-cta > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 42%, rgba(50,48,25,0.55) 68%, rgba(50,48,25,0.84) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; padding: 30px 22px;
}
.cta-overlay h3 { color: #fff; font-size: 1.15rem; font-weight: 400; margin-bottom: 4px; }
.cta-overlay h3 span { color: var(--accent); font-size: 1.45rem; font-weight: 700; }
.cta-overlay p { color: rgba(255,255,255,0.85); font-size: 0.95rem; margin-bottom: 18px; }
.btn-gold {
  display: inline-block; padding: 10px 28px; background: var(--accent);
  border-radius: 8px; color: #2a2a14; font-weight: 700; font-size: 1rem;
}
.btn-gold:hover { background: #C9A432; color: #2a2a14; }
.btn-cta {
  display: inline-block; padding: 10px 28px; background: #fff;
  border-radius: 8px; color: var(--main); font-weight: 700; font-size: 1rem;
  transition: all 0.15s;
}
.btn-cta:hover { background: rgba(255,255,255,0.85); color: var(--main); }

.side-padded { padding: 0 24px; }

/* ===== SECTION TITLES ===== */
.sec-title {
  font-size: 1.4rem; font-weight: 400; color: var(--text);
  padding-bottom: 12px; border-bottom: 2px solid var(--gray);
  margin-bottom: 20px; margin-top: 36px;
}
.sec-title:first-child { margin-top: 0; }

/* ===== FEATURED SERMON CARD ===== */
.sermon-card {
  display: block; color: var(--text); text-decoration: none;
  border: 1px solid var(--gray2); border-top: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s, transform 0.3s;
  background: var(--card-bg); overflow: hidden;
}
.sermon-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  transform: translateY(-2px); color: var(--text);
}
.card-inner { display: flex; gap: 20px; padding: 24px; align-items: flex-start; }
.sermon-img {
  width: 130px; height: 130px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.sermon-body { flex: 1; min-width: 0; }
.sermon-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sermon-title {
  font-size: 1.45rem; font-weight: 600; line-height: 1.3; margin-bottom: 2px;
  color: var(--main);
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.35);
  text-underline-offset: 3px;
}
html.dark .sermon-title { color: var(--accent); text-decoration-color: rgba(212,175,55,0.35); }
.sermon-author { font-size: 1.05rem; color: var(--text2); }
.sermon-author .green-link { font-weight: 400; }
.dl-count {
  font-size: 0.9rem; color: var(--text3); white-space: nowrap;
  display: flex; align-items: center; gap: 3px; flex-shrink: 0;
}
.sermon-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.tag { display: inline-block; padding: 4px 14px; border-radius: 6px; font-size: 0.92rem; font-weight: 600; }
.tag-olive { background: var(--olive); color: #fff; }
.tag-gold { background: var(--olive); color: #fff; }
html.dark .tag-gold { color: #fff; }
.sermon-desc { font-size: 1.02rem; color: var(--text2); line-height: 1.65; }

/* ===== BLOCKQUOTE ===== */
.block-quote {
  padding: 14px 0 8px 24px; border-left: 3px solid var(--gray); margin-bottom: 8px;
}
.block-quote p {
  font-family: var(--fs); font-size: 1.25rem; font-style: italic; line-height: 1.65; color: var(--text);
}
.cite {
  display: block; margin-top: 10px; font-family: var(--ff);
  font-size: 1.05rem; color: var(--main); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.3); text-underline-offset: 2px;
}
.cite:hover { color: var(--olive); text-decoration-color: var(--olive); }
span.cite { color: var(--text); text-decoration: none; cursor: default; }
span.cite:hover { color: var(--text); text-decoration: none; }
html.dark span.cite { color: var(--text); }
.block-quote .bt-verse-actions { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.06); }
html.dark .cite { color: var(--accent); text-decoration-color: rgba(212,175,55,0.3); }

/* ===== PILLS ===== */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pill {
  display: inline-block; padding: 6px 16px;
  border: 1px solid var(--gray); border-radius: 18px;
  font-size: 0.92rem; font-weight: 400; color: var(--text); background: transparent;
  transition: all 0.15s;
}
.pill:hover { background: var(--main); color: #fff; border-color: var(--main); }

/* ===== MORE LINK ===== */
.more-link {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-weight: 700; font-size: 1rem; color: var(--main);
  margin-top: 14px; margin-bottom: 10px;
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.35);
  text-underline-offset: 3px;
}
.more-link:hover { color: var(--olive); text-decoration-color: var(--olive); }
html.dark .more-link { color: var(--accent); text-decoration-color: rgba(212,175,55,0.35); }
html.dark .more-link:hover { text-decoration-color: var(--accent); }

/* ===== FEATURED GRID — 2 col default, 2 col tablet, 1 col mobile ===== */
/* ===== BLOG LIST ===== */
.blog-list { display: flex; flex-direction: column; gap: 0; }
.blog-row {
  display: flex; gap: 18px; padding: 18px 0;
  border-bottom: 1px solid var(--gray);
  color: var(--text); text-decoration: none;
  transition: background 0.15s;
}
.blog-row:first-child { padding-top: 0; }
.blog-row:hover { background: rgba(144,143,81,0.04); }
html.dark .blog-row:hover { background: rgba(212,175,55,0.04); }
.blog-date {
  flex-shrink: 0; width: 52px; text-align: center;
  display: flex; flex-direction: column; align-items: center; padding-top: 2px;
}
.blog-day { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--main); }
html.dark .blog-day { color: var(--accent); }
.blog-mon { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); margin-top: 2px; }
.blog-body { flex: 1; min-width: 0; }
.blog-body h3 {
  font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; color: var(--main); line-height: 1.35;
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.35);
  text-underline-offset: 2px;
}
.blog-row:hover .blog-body h3 { color: var(--main); text-decoration-color: var(--main); }
html.dark .blog-body h3 { color: var(--accent); text-decoration-color: rgba(212,175,55,0.35); }
html.dark .blog-row:hover .blog-body h3 { color: var(--accent); text-decoration-color: var(--accent); }
.blog-body p { font-size: 0.88rem; color: var(--text2); line-height: 1.55; margin-bottom: 6px; }
.blog-byline { font-size: 0.8rem; color: var(--text3); }

/* ===== DAILY DEVOTIONALS (SIDEBAR) ===== */
.si-devos { display: flex; flex-direction: column; }
.si-devo-row {
  display: flex !important; flex-direction: row !important; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--gray);
  color: var(--text); text-decoration: none;
  transition: background 0.15s; align-items: center;
}
.si-devo-row:last-child { border-bottom: none; }
.si-devo-row:hover { background: rgba(144,143,81,0.04); }
html.dark .si-devo-row:hover { background: rgba(212,175,55,0.04); }
.si-devo-img {
  width: 42px !important; height: 42px !important; min-width: 42px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(0,0,0,0.08);
  display: inline-block !important;
}
.si-devo-body { flex: 1; min-width: 0; }
.si-devo-title {
  font-size: 0.95rem; font-weight: 600; line-height: 1.3; margin-bottom: 1px;
  color: var(--main);
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.35);
  text-underline-offset: 2px;
}
html.dark .si-devo-title { color: var(--accent); text-decoration-color: rgba(212,175,55,0.35); }
.si-devo-row:hover .si-devo-title { text-decoration-color: var(--main); }
html.dark .si-devo-row:hover .si-devo-title { text-decoration-color: var(--accent); }
.si-devo-author { font-size: 0.8rem; color: var(--text3); }

/* ===== LATEST SERMONS LIST ===== */
.si-sermons-list { display: flex; flex-direction: column; }
.si-sermon-row {
  display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--gray);
  color: var(--text); text-decoration: none;
  transition: background 0.15s; align-items: center;
}
.si-sermon-row:last-child { border-bottom: none; }
.si-sermon-row:hover { background: rgba(144,143,81,0.04); }
html.dark .si-sermon-row:hover { background: rgba(212,175,55,0.04); }
.si-sermon-img {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(0,0,0,0.08);
}
.si-sermon-body { flex: 1; min-width: 0; }
.si-sermon-title {
  font-size: 1.02rem; font-weight: 600; margin-bottom: 2px; line-height: 1.3;
  color: var(--main);
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.35);
  text-underline-offset: 2px;
}
html.dark .si-sermon-title { color: var(--accent); text-decoration-color: rgba(212,175,55,0.35); }
.si-sermon-row:hover .si-sermon-title { color: var(--main); text-decoration-color: var(--main); }
html.dark .si-sermon-row:hover .si-sermon-title { color: var(--accent); text-decoration-color: var(--accent); }
.si-sermon-speaker { font-size: 0.88rem; color: var(--text2); }

/* ===== CENTER DEVOTIONALS ===== */
.si-devos-main { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media(max-width:600px){ .si-devos-main { grid-template-columns: 1fr; } }
.si-devo-row-main {
  display: flex !important; flex-direction: row !important; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--gray);
  color: var(--text); text-decoration: none;
  transition: background 0.15s; align-items: center;
}
.si-devo-row-main:hover { background: rgba(144,143,81,0.04); }
html.dark .si-devo-row-main:hover { background: rgba(212,175,55,0.04); }
.si-devo-img-main {
  width: 48px !important; height: 48px !important; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(0,0,0,0.08);
  display: inline-block !important;
}
.si-devo-row-main .si-devo-body { flex: 1; min-width: 0; }
.si-devo-row-main .si-devo-title {
  font-size: 1.02rem; font-weight: 600; margin-bottom: 2px; line-height: 1.3;
  color: var(--main);
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.35);
  text-underline-offset: 2px;
}
html.dark .si-devo-row-main .si-devo-title { color: var(--accent); text-decoration-color: rgba(212,175,55,0.35); }
.si-devo-row-main:hover .si-devo-title { text-decoration-color: var(--main); }
html.dark .si-devo-row-main:hover .si-devo-title { text-decoration-color: var(--accent); }
.si-devo-row-main .si-devo-author { font-size: 0.88rem; color: var(--text2); }

/* ===== PREVIOUS SERMONS (mini rows) ===== */
.si-prev-sermon {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--gray);
  color: var(--text); text-decoration: none;
  transition: background 0.15s; align-items: center;
}
.si-prev-sermon:last-child { border-bottom: none; }
.si-prev-sermon:hover { background: rgba(144,143,81,0.04); }
html.dark .si-prev-sermon:hover { background: rgba(212,175,55,0.04); }
.si-prev-img {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 1.5px solid rgba(0,0,0,0.08);
}
.si-prev-body { flex: 1; min-width: 0; }
.si-prev-title {
  display: block; font-size: 0.88rem; font-weight: 500; line-height: 1.3;
  color: var(--main);
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.25);
  text-underline-offset: 2px;
}
html.dark .si-prev-title { color: var(--accent); text-decoration-color: rgba(212,175,55,0.25); }
.si-prev-sermon:hover .si-prev-title { text-decoration-color: var(--main); }
html.dark .si-prev-sermon:hover .si-prev-title { text-decoration-color: var(--accent); }
.si-prev-speaker { display: block; font-size: 0.78rem; color: var(--text3); }

/* ===== COMMENTARY CARD ===== */
.commentary-card {
  display: flex; gap: 24px; padding: 24px;
  border: 1px solid var(--gray); border-radius: 10px;
  background: var(--card-bg); align-items: flex-start;
  transition: box-shadow 0.2s;
}
.commentary-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.commentary-img {
  width: 120px; height: 120px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.commentary-body { flex: 1; min-width: 0; }
.commentary-body h3 { font-size: 1.35rem; font-weight: 600; margin-bottom: 8px; }
.commentary-desc { font-size: 1.02rem; color: var(--text2); line-height: 1.65; margin-bottom: 12px; }
.commentary-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { display: inline-block; padding: 2px 10px; background: var(--light); border-radius: 3px; font-size: 0.82rem; }

/* ===== POPULAR BIBLE VERSES ===== */
.verse-list { display: flex; flex-direction: column; }
.verse-row {
  display: flex; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--gray);
  color: var(--text); text-decoration: none;
  transition: background 0.15s; align-items: baseline;
}
.verse-row:last-child { border-bottom: none; }
.verse-row:hover { background: rgba(144,143,81,0.04); }
html.dark .verse-row:hover { background: rgba(212,175,55,0.04); }
.verse-ref {
  flex-shrink: 0; font-size: 1.05rem; font-weight: 700;
  color: var(--main); min-width: 78px; white-space: nowrap;
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.35);
  text-underline-offset: 2px;
}
html.dark .verse-ref { color: var(--accent); text-decoration-color: rgba(212,175,55,0.35); }
.verse-text {
  font-size: 1.05rem; color: var(--text2); line-height: 1.55;
  font-family: var(--fs); font-style: italic;
}
.verse-row:hover .verse-text { color: var(--text); }

/* ===== TOP SERMONS LIST ===== */
.top-sermons { display: flex; flex-direction: column; }
.ts-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--gray);
  color: var(--text); text-decoration: none; transition: background 0.15s;
}
.ts-row:last-child { border-bottom: none; }
.ts-row:hover { background: rgba(144,143,81,0.04); }
html.dark .ts-row:hover { background: rgba(212,175,55,0.04); }
.ts-num {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--light); font-size: 0.82rem; font-weight: 700; color: var(--main);
}
html.dark .ts-num { background: rgba(212,175,55,0.1); color: var(--accent); }
.ts-info { flex: 1; min-width: 0; }
.ts-title {
  display: block; font-size: 0.9rem; font-weight: 600; color: var(--main); line-height: 1.3;
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.35);
  text-underline-offset: 2px;
}
.ts-row:hover .ts-title { color: var(--main); text-decoration-color: var(--main); }
html.dark .ts-title { color: var(--accent); text-decoration-color: rgba(212,175,55,0.35); }
html.dark .ts-row:hover .ts-title { color: var(--accent); text-decoration-color: var(--accent); }
.ts-speaker { display: block; font-size: 0.78rem; color: var(--text3); margin-top: 1px; }
.ts-plays { font-size: 0.78rem; color: var(--text3); flex-shrink: 0; }

/* ===== SPEAKERS ===== */
.spk-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 12px; padding-bottom: 16px;
}
.spk { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px; }
.spk-photo {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  transition: transform 0.2s;
}
.spk:hover .spk-photo { transform: scale(1.2); }
.spk-name {
  display: block; margin-top: 8px;
  font-size: 0.85rem; font-weight: 400; color: var(--main); line-height: 1.3;
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.25);
  text-underline-offset: 2px;
}
.spk:hover .spk-name { color: var(--olive); text-decoration-color: var(--olive); }
html.dark .spk-name { color: var(--accent); text-decoration-color: rgba(212,175,55,0.25); }

/* ===== SPEAKERS INDEX PAGE ===== */
.speakers-page { padding: 0 48px 48px; }

/* Featured speakers grid */
.featured-speakers {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 12px; padding: 20px 0 28px;
}
.fspk {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; padding: 4px; position: relative;
}
.fspk-photo {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  transition: transform 0.2s;
}
.fspk:hover .fspk-photo { transform: scale(1.25); }
.fspk-count {
  position: absolute; top: 52px; left: calc(50% + 6px);
  display: flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 5px; border-radius: 14px;
  background: #d4d4d4; color: #1a1a1a; font-size: 10px; font-weight: 400;
  border: 2.5px solid #fff; pointer-events: none;
}
html.dark .fspk-count { background: #525252; color: #fff; border-color: var(--card-bg); }
.fspk-name {
  display: block; margin-top: 10px;
  font-size: 0.88rem; font-weight: 400; color: var(--main); line-height: 1.4;
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.25);
  text-underline-offset: 2px;
}
.fspk:hover .fspk-name { color: var(--olive); text-decoration-color: var(--olive); }
html.dark .fspk-name { color: var(--accent); text-decoration-color: rgba(212,175,55,0.25); }
html.dark .fspk:hover .fspk-name { text-decoration-color: var(--accent); }

/* Section count badge — grey pill */
.sec-count {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 500; color: #1a1a1a;
  background: #d4d4d4; padding: 2px 12px; border-radius: 12px;
  margin-left: 10px; vertical-align: middle;
}
html.dark .sec-count { background: #525252; color: #fff; }

/* Alphabet navigation — grey boxes, darker on hover, text stays dark */
.alpha-nav {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px;
  padding: 16px 0;
}
.alpha-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 6px; font-size: 0.95rem; font-weight: 500;
  color: var(--text); text-decoration: none; text-transform: lowercase;
  background: #e5e5e5;
  transition: background 0.15s;
}
.alpha-nav a:hover { background: #c8c8c8; color: var(--text); }
html.dark .alpha-nav a { background: #3a3a3a; color: #ddd; }
html.dark .alpha-nav a:hover { background: #4a4a4a; color: #ddd; }

/* Letter headings */
.letter-head {
  display: flex; align-items: center;
  font-size: 1.2rem; font-weight: 500; color: var(--text); text-transform: uppercase;
  padding: 10px 0 6px; margin-top: 12px;
  border-bottom: 2px solid #d4d4d4;
}
html.dark .letter-head { border-bottom-color: #404040; }

/* Letter section heading with count badge (reusable) */
.spk-letter {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 0 6px; margin-top: 12px;
  border-bottom: 2px solid #d4d4d4;
}
html.dark .spk-letter { border-bottom-color: #404040; }
.spk-letter-text {
  font-size: 1.2rem; font-weight: 500; color: var(--text); text-transform: uppercase;
}
.spk-letter-count {
  font-size: 0.78rem; font-weight: 400; color: var(--text3);
}

/* Speaker list — multi-column grid of grey cards, darker hover, text stays */
.spk-list {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding-top: 8px;
}
.spk-row {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 40px; padding: 5px 10px;
  text-decoration: none; color: var(--text);
  background: #e5e5e5; border-radius: 8px;
  transition: background 0.1s; cursor: pointer;
  overflow: hidden; min-width: 0;
}
.spk-row:hover { background: #c8c8c8; color: var(--text); }
html.dark .spk-row { background: #3a3a3a; color: #ddd; }
html.dark .spk-row:hover { background: #4a4a4a; color: #ddd; }
.spk-row-name { font-size: 0.88rem; font-weight: 400; }
.spk-row-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 20px; padding: 0 6px; margin-left: 8px;
  font-size: 0.72rem; font-weight: 500; color: #1a1a1a;
  background: #d4d4d4; border-radius: 10px; flex-shrink: 0;
}
html.dark .spk-row-count { background: #525252; color: #fff; }

/* Responsive: speakers */
/* Below 1200px: hide speakers beyond the 24th (2 rows of 12) */
@media(max-width:1199px){
  .featured-speakers .fspk:nth-child(n+25) { display: none; }
}
@media(min-width:960px){
  .featured-speakers { grid-template-columns: repeat(12, 1fr); }
}
@media(min-width:1200px){
  .featured-speakers { grid-template-columns: repeat(12, 1fr); }
}
@media(max-width:1200px){
  .spk-list { grid-template-columns: repeat(4, 1fr); }
  .speakers-page { padding: 0 40px 44px; }
}
@media(max-width:960px){
  .spk-list { grid-template-columns: repeat(3, 1fr); }
  .speakers-page { padding: 0 32px 40px; }
}
@media(max-width:720px){
  .spk-list { grid-template-columns: repeat(2, 1fr); }
  .featured-speakers { grid-template-columns: repeat(4, 1fr); gap: 16px 4px; }
  .fspk-photo { width: 56px; height: 56px; }
  .fspk-count { top: 44px; }
  .fspk-name { font-size: 0.78rem; }
  .speakers-page { padding: 0 20px 32px; }
  .alpha-nav a { width: 30px; height: 30px; font-size: 0.78rem; }
}
@media(max-width:480px){
  .spk-list { grid-template-columns: 1fr; }
  .featured-speakers { grid-template-columns: repeat(3, 1fr); }
  .speakers-page { padding: 0 16px 28px; }
}

/* ===== TOP SERMONS PAGE ===== */
.sermons-page { padding: 0 48px 48px; }

/* All sermons — 2-column card grid */
.top-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 36px;
}
.top-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: 10px;
  background: rgba(0,0,0,0.02);
  border: 1.5px solid rgba(0,0,0,0.06);
  text-decoration: none; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.top-card:hover { border-color: rgba(0,0,0,0.15); box-shadow: 0 2px 12px rgba(0,0,0,0.06); color: var(--text); }
html.dark .top-card { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
html.dark .top-card:hover { border-color: rgba(255,255,255,0.15); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }

/* Top 5 — warm gold highlight */
.top-card.top5 {
  background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02));
  border-color: rgba(212,175,55,0.25);
}
.top-card.top5:hover { border-color: rgba(212,175,55,0.5); box-shadow: 0 3px 16px rgba(212,175,55,0.1); }
.top-card.top5 .top-rank { color: rgba(180,140,30,0.45); }
html.dark .top-card.top5 { background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02)); border-color: rgba(212,175,55,0.2); }
html.dark .top-card.top5:hover { border-color: rgba(212,175,55,0.4); box-shadow: 0 3px 16px rgba(212,175,55,0.08); }
html.dark .top-card.top5 .top-rank { color: rgba(212,175,55,0.35); }

.top-rank {
  position: absolute; top: 10px; right: 14px;
  font-size: 1.5rem; font-weight: 300; color: rgba(0,0,0,0.12);
  line-height: 1;
}
html.dark .top-rank { color: rgba(255,255,255,0.1); }
.top-photo {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  margin-top: 2px;
}
.top-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.top-title {
  font-size: 0.95rem; font-weight: 500; color: var(--olive); line-height: 1.35;
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.3); text-underline-offset: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.top-card:hover .top-title { text-decoration-color: var(--olive); }
html.dark .top-title { color: var(--accent); text-decoration-color: rgba(212,175,55,0.3); }
html.dark .top-card:hover .top-title { text-decoration-color: var(--accent); }
.top-speaker { font-size: 0.88rem; font-weight: 400; color: var(--text3); }
.top-meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.top-listens {
  font-size: 0.75rem; font-weight: 400; color: #1a1a1a;
  background: #e5e5e5; padding: 1px 8px; border-radius: 8px;
}
html.dark .top-listens { background: #3a3a3a; color: #ddd; }
.top-dur { font-size: 0.8rem; font-weight: 400; color: var(--text3); }
.top-tags {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px;
}
.top-tags span {
  font-size: 0.78rem; font-weight: 400; color: var(--olive);
  background: rgba(123,138,94,0.1); padding: 1px 9px; border-radius: 10px;
}
html.dark .top-tags span { color: var(--accent); background: rgba(212,175,55,0.1); }

/* Responsive: sermons */
@media(max-width:960px){
  .top-grid { grid-template-columns: 1fr; }
  .sermons-page { padding: 0 32px 40px; }
}
@media(max-width:600px){
  .sermons-page { padding: 0 16px 28px; }
  .top-card { padding: 12px 14px; gap: 10px; }
  .top-photo { width: 44px; height: 44px; }
  .top-rank { font-size: 1.2rem; }
}

/* ===== BIBLE INDEX PAGE ===== */
.bible-page { padding: 0 48px 120px; }

/* Featured translations — 2-column cards */
.bible-featured {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 36px;
}
.bf-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px; border-radius: 10px;
  background: rgba(0,0,0,0.02); border: 1.5px solid rgba(0,0,0,0.06);
  text-decoration: none; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bf-card:hover { border-color: rgba(0,0,0,0.15); box-shadow: 0 2px 12px rgba(0,0,0,0.06); color: var(--text); }
html.dark .bf-card { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
html.dark .bf-card:hover { border-color: rgba(255,255,255,0.15); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
.bf-abbr {
  display: flex; align-items: center; justify-content: center;
  min-width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0;
  background: var(--olive); color: #fff;
  font-size: 0.88rem; font-weight: 600; letter-spacing: 0.5px;
}
html.dark .bf-abbr { background: var(--accent); color: #1a1a0e; }
.bf-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bf-name {
  font-size: 0.95rem; font-weight: 500; color: var(--olive); line-height: 1.3;
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.3); text-underline-offset: 2px;
}
.bf-card:hover .bf-name { text-decoration-color: var(--olive); }
html.dark .bf-name { color: var(--accent); text-decoration-color: rgba(212,175,55,0.3); }
html.dark .bf-card:hover .bf-name { text-decoration-color: var(--accent); }
.bf-desc { font-size: 0.8rem; font-weight: 400; color: var(--text3); line-height: 1.4; }
.bf-meta { display: flex; gap: 6px; margin-top: 2px; }
.bf-tag {
  font-size: 0.72rem; font-weight: 400; color: var(--olive);
  background: rgba(123,138,94,0.1); padding: 1px 9px; border-radius: 10px;
}
html.dark .bf-tag { color: var(--accent); background: rgba(212,175,55,0.1); }

/* All translations — multi-column grid of grey cards */
.bible-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 8px;
}
.bl-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 6px 12px;
  text-decoration: none; color: var(--text);
  background: #f0f0f0; border-radius: 8px;
  transition: background 0.1s; cursor: pointer;
}
.bl-row:hover { background: #e0e0e0; color: var(--text); }
html.dark .bl-row { background: #3a3a3a; color: #ddd; }
html.dark .bl-row:hover { background: #4a4a4a; color: #ddd; }
.bl-abbr {
  font-size: 0.72rem; font-weight: 500; color: var(--olive);
  background: rgba(123,138,94,0.12); padding: 2px 8px; border-radius: 6px;
  flex-shrink: 0; min-width: 40px; text-align: center;
}
html.dark .bl-abbr { color: var(--accent); background: rgba(212,175,55,0.12); }
.bl-name { font-size: 0.85rem; font-weight: 400; flex: 1; }
.bl-meta { font-size: 0.7rem; color: #999; flex-shrink: 0; }

/* Highlight badge (purple) */
.bf-tag-hl { background: rgba(128,90,213,0.15); color: #6B46C1; }
html.dark .bf-tag-hl { background: rgba(128,90,213,0.2); color: #B794F4; }
/* Study notes badge (green) */
.bf-tag-study { background: rgba(76,175,80,0.15); color: #388E3C; }
html.dark .bf-tag-study { background: rgba(76,175,80,0.2); color: #66BB6A; }

/* Translation info block */
.bible-trans-info { margin: 12px 0 20px; }
.bible-trans-desc { font-size: 0.9rem; color: #555; line-height: 1.5; margin-bottom: 8px; }
html.dark .bible-trans-desc { color: #aaa; }
.bible-trans-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.bible-trans-copyright { font-size: 0.72rem; color: #999; margin-top: 6px; }
.bible-trans-meta { font-size: 0.85rem; color: #888; margin: 8px 0 16px; }

/* ═══ Major World Languages — card grid ═══ */
.bible-major-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 12px;
}
.bible-major-card {
  border: 1px solid var(--gray); border-radius: 10px;
  padding: 14px 16px; background: #fafafa;
}
html.dark .bible-major-card { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.08); }
.bmc-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--gray);
}
html.dark .bmc-header { border-color: rgba(255,255,255,0.08); }
.bmc-lang { font-size: 1rem; font-weight: 600; }
.bmc-count { font-size: 0.72rem; color: #999; }
.bmc-list { display: flex; flex-direction: column; gap: 4px; }
.bmc-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px; text-decoration: none; color: var(--text);
  transition: background 0.1s;
}
.bmc-item:hover { background: rgba(0,0,0,0.04); color: var(--text); }
html.dark .bmc-item:hover { background: rgba(255,255,255,0.05); }
.bmc-item .bl-abbr { min-width: 36px; font-size: 0.68rem; padding: 1px 6px; }
.bmc-item .bl-name { font-size: 0.8rem; }

/* ═══ Other Languages — searchable compact list ═══ */
.bible-other-search { padding: 12px 0 16px; }
.bible-search-input {
  width: 100%; max-width: 400px; padding: 8px 14px;
  border: 1px solid var(--gray); border-radius: 8px;
  font-size: 0.85rem; background: #fff; color: var(--text);
  outline: none;
}
.bible-search-input:focus { border-color: var(--olive); box-shadow: 0 0 0 2px rgba(144,143,81,0.15); }
html.dark .bible-search-input { background: #2a2a2a; border-color: rgba(255,255,255,0.12); }
html.dark .bible-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(212,175,55,0.15); }

.bible-other-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  max-height: 600px; overflow-y: auto; padding-right: 8px;
}
.bol-group {
  padding: 8px 10px; border-radius: 8px; background: #f5f5f5;
}
html.dark .bol-group { background: rgba(255,255,255,0.03); }
.bol-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.bol-lang { font-size: 0.82rem; font-weight: 600; }
.bol-count { font-size: 0.68rem; color: #999; background: rgba(0,0,0,0.06); padding: 1px 7px; border-radius: 10px; }
html.dark .bol-count { background: rgba(255,255,255,0.08); }
.bol-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 5px; text-decoration: none; color: var(--text);
  font-size: 0.75rem; transition: background 0.1s;
}
.bol-item:hover { background: rgba(0,0,0,0.06); color: var(--text); }
html.dark .bol-item:hover { background: rgba(255,255,255,0.06); }
.bol-item .bl-abbr { min-width: 30px; font-size: 0.62rem; padding: 0 4px; }
.bol-item .bl-name { font-size: 0.72rem; }

/* Responsive: bible */
@media(max-width:960px){
  .bible-featured { grid-template-columns: 1fr; }
  .bible-list { grid-template-columns: repeat(2, 1fr); }
  .bible-major-grid { grid-template-columns: repeat(2, 1fr); }
  .bible-other-list { grid-template-columns: repeat(3, 1fr); }
  .bible-page { padding: 0 32px 40px; }
}
@media(max-width:600px){
  .bible-page { padding: 0 16px 28px; }
  .bible-list { grid-template-columns: 1fr; }
  .bible-major-grid { grid-template-columns: 1fr; }
  .bible-other-list { grid-template-columns: repeat(2, 1fr); }
  .bf-card { padding: 14px 16px; gap: 12px; }
  .bf-abbr { min-width: 48px; height: 48px; font-size: 0.82rem; }
}

/* ===== COMMENTARY INDEX PAGE ===== */
.commentary-page { padding: 0 48px 120px; }

/* Featured commentaries — horizontal cards, one per line */
.comm-featured {
  display: flex; flex-direction: column; gap: 16px; padding: 20px 0 40px;
}
.comm-feat-card {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px 24px; border-radius: 10px;
  background: rgba(0,0,0,0.02); border: 1.5px solid rgba(0,0,0,0.06);
  text-decoration: none; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.comm-feat-card:hover { border-color: rgba(0,0,0,0.15); box-shadow: 0 2px 12px rgba(0,0,0,0.06); color: var(--text); }
html.dark .comm-feat-card { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
html.dark .comm-feat-card:hover { border-color: rgba(255,255,255,0.15); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
.comm-feat-photo {
  width: 110px; height: 110px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.08);
}
html.dark .comm-feat-photo { border-color: rgba(255,255,255,0.08); }
.comm-feat-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.comm-feat-name {
  font-size: 1.05rem; font-weight: 500; color: var(--olive); line-height: 1.3;
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.3); text-underline-offset: 2px;
}
.comm-feat-card:hover .comm-feat-name { text-decoration-color: var(--olive); }
html.dark .comm-feat-name { color: var(--accent); text-decoration-color: rgba(212,175,55,0.3); }
html.dark .comm-feat-card:hover .comm-feat-name { text-decoration-color: var(--accent); }
.comm-feat-desc { font-size: 0.85rem; font-weight: 400; color: var(--text3); line-height: 1.55; }
.comm-feat-desc em { font-style: italic; }
.comm-feat-meta { display: flex; gap: 6px; margin-top: 4px; }
.comm-feat-tag {
  font-size: 0.78rem; font-weight: 400; color: #fff;
  background: var(--olive); padding: 3px 12px; border-radius: 6px;
}
html.dark .comm-feat-tag { background: var(--accent); color: #1a1a0e; }
.comm-feat-link {
  display: block; margin-top: 4px;
  font-size: 0.88rem; font-weight: 400; color: var(--olive);
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.3); text-underline-offset: 2px;
  text-align: right;
}
.comm-feat-card:hover .comm-feat-link { text-decoration-color: var(--olive); }
html.dark .comm-feat-link { color: var(--accent); text-decoration-color: rgba(212,175,55,0.3); }
html.dark .comm-feat-card:hover .comm-feat-link { text-decoration-color: var(--accent); }

/* All commentaries — grey card grid */
.comm-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 8px;
}
.comm-row {
  display: flex; align-items: center;
  min-height: 42px; padding: 8px 14px;
  text-decoration: none; color: var(--text);
  background: #e5e5e5; border-radius: 8px;
  transition: background 0.1s; cursor: pointer;
}
.comm-row:hover { background: #c8c8c8; color: var(--text); }
html.dark .comm-row { background: #3a3a3a; color: #ddd; }
html.dark .comm-row:hover { background: #4a4a4a; color: #ddd; }
.comm-row-name { font-size: 0.88rem; font-weight: 400; }

/* Responsive: commentary */
@media(max-width:960px){
  .comm-list { grid-template-columns: repeat(2, 1fr); }
  .commentary-page { padding: 0 32px 80px; }
}
@media(max-width:600px){
  .comm-featured { gap: 12px; }
  .comm-feat-card { padding: 16px; gap: 14px; flex-direction: column; align-items: center; text-align: center; }
  .comm-feat-photo { width: 88px; height: 88px; }
  .comm-feat-meta { justify-content: center; }
  .comm-feat-link { text-align: center; }
  .comm-list { grid-template-columns: 1fr; }
  .commentary-page { padding: 0 16px 60px; }
}

/* ===== BOOKS INDEX PAGE ===== */
.books-page { padding: 0 48px 120px; }

/* Featured audio books — horizontal cards like commentary */
.books-featured {
  display: flex; flex-direction: column; gap: 16px; padding: 20px 0 40px;
}
.book-feat-card {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px 24px; border-radius: 10px;
  background: rgba(0,0,0,0.02); border: 1.5px solid rgba(0,0,0,0.06);
  text-decoration: none; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.book-feat-card:hover { border-color: rgba(0,0,0,0.15); box-shadow: 0 2px 12px rgba(0,0,0,0.06); color: var(--text); }
html.dark .book-feat-card { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
html.dark .book-feat-card:hover { border-color: rgba(255,255,255,0.15); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
.book-feat-photo {
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.book-feat-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.book-feat-name {
  font-size: 1.05rem; font-weight: 500; color: var(--olive); line-height: 1.3;
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.3); text-underline-offset: 2px;
}
.book-feat-card:hover .book-feat-name { text-decoration-color: var(--olive); }
html.dark .book-feat-name { color: var(--accent); text-decoration-color: rgba(212,175,55,0.3); }
html.dark .book-feat-card:hover .book-feat-name { text-decoration-color: var(--accent); }
.book-feat-author { font-size: 0.88rem; font-weight: 400; color: var(--text3); }
.book-feat-desc { font-size: 0.85rem; font-weight: 400; color: var(--text3); line-height: 1.55; }
.book-feat-meta { display: flex; gap: 6px; margin-top: 4px; }
.book-feat-meta span {
  font-size: 0.78rem; font-weight: 400; color: #fff;
  background: var(--olive); padding: 3px 12px; border-radius: 6px;
}
html.dark .book-feat-meta span { background: var(--accent); color: #1a1a0e; }
.book-feat-link {
  display: block; margin-top: 4px;
  font-size: 0.88rem; font-weight: 400; color: var(--olive);
  text-decoration: underline; text-decoration-color: rgba(112,112,53,0.3); text-underline-offset: 2px;
  text-align: right;
}
.book-feat-card:hover .book-feat-link { text-decoration-color: var(--olive); }
html.dark .book-feat-link { color: var(--accent); text-decoration-color: rgba(212,175,55,0.3); }
html.dark .book-feat-card:hover .book-feat-link { text-decoration-color: var(--accent); }

/* Book list entries — title + author inside grey cards */
.book-entry {
  display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%;
}
.book-title {
  font-size: 0.85rem; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1; min-width: 0;
}
.book-author {
  font-size: 0.75rem; font-weight: 400; color: var(--text3);
  white-space: nowrap; flex-shrink: 0; margin-left: auto; padding-left: 8px;
}

/* Audio icon on book rows */
.book-audio-icon {
  width: 14px; height: 14px; flex-shrink: 0; color: var(--olive); opacity: 0.7;
}
html.dark .book-audio-icon { color: var(--accent); }
.spk-row.has-audio { border-left: 2.5px solid var(--olive); }
html.dark .spk-row.has-audio { border-left-color: var(--accent); }

/* Book list — 2-column only (titles are long) */
.books-page .spk-list {
  grid-template-columns: repeat(2, 1fr);
}
.books-page .spk-letter {
  margin-top: 28px;
}

/* Responsive: books */
@media(max-width:960px){
  .books-page { padding: 0 32px 80px; }
  .books-page .spk-list { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:600px){
  .books-page { padding: 0 16px 60px; }
  .books-page .spk-list { grid-template-columns: 1fr; }
  .book-feat-card { padding: 16px; gap: 14px; flex-direction: column; align-items: center; text-align: center; }
  .book-feat-photo { width: 88px; height: 88px; }
  .book-feat-meta { justify-content: center; }
  .book-feat-link { text-align: center; }
  .book-author { display: none; }
}

/* ===== BOOK TOC PAGE ===== */
.book-toc-page { padding: 0 48px 120px; max-width: 860px; }
.book-toc-header {
  display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px;
}
.book-toc-photo {
  width: 80px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.08);
}
html.dark .book-toc-photo { border-color: rgba(255,255,255,0.08); }
.book-toc-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.book-toc-title {
  font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0; line-height: 1.3;
}
.book-toc-author {
  font-size: 0.95rem; color: var(--olive); text-decoration: none;
}
.book-toc-author:hover { text-decoration: underline; }
html.dark .book-toc-author { color: var(--accent); }
.book-toc-meta { display: flex; gap: 6px; margin-top: 4px; }

.book-toc-list { display: flex; flex-direction: column; gap: 0; margin-top: 12px; }
.book-toc-row {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 12px;
  text-decoration: none; color: var(--text); border-radius: 6px;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.book-toc-row:hover { background: rgba(123,138,94,0.06); }
html.dark .book-toc-row { border-bottom-color: rgba(255,255,255,0.04); }
html.dark .book-toc-row:hover { background: rgba(212,175,55,0.06); }
.book-toc-num {
  font-size: 0.72rem; font-weight: 600; color: var(--olive); min-width: 24px;
  text-align: right; flex-shrink: 0; padding-top: 1px;
}
html.dark .book-toc-num { color: var(--accent); }
.book-toc-ch-title {
  font-size: 0.95rem; color: var(--text); line-height: 1.45;
}

/* Circle photo in book bio box */
.book-bio-circle { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

/* ===== BOOK READING PAGE ===== */
.book-read-page { padding: 0 48px 120px; max-width: 780px; }
.book-read-breadcrumb {
  display: flex; align-items: center; gap: 6px; font-size: 0.82rem;
  color: var(--text3); margin-bottom: 12px;
}
.book-read-crumb { color: var(--olive); text-decoration: none; }
.book-read-crumb:hover { text-decoration: underline; }
html.dark .book-read-crumb { color: var(--accent); }
.book-read-sep { color: var(--text3); }
.book-read-header { margin-bottom: 16px; }
.book-read-title {
  font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0 0 4px; line-height: 1.3;
}
.book-read-author { font-size: 0.9rem; color: var(--text3); }
.book-read-content {
  font-size: 1.05rem; line-height: 1.85; color: var(--text);
  margin: 24px 0;
}
.book-read-content p { margin: 0 0 16px; }
.book-audio-player { margin: 16px 0; }

/* Responsive: book TOC + reading */
@media(max-width:600px){
  .book-toc-page { padding: 0 16px 60px; }
  .book-toc-header { gap: 14px; }
  .book-toc-photo { width: 60px; height: 60px; }
  .book-toc-title { font-size: 1.2rem; }
  .book-read-page { padding: 0 16px 60px; }
  .book-read-title { font-size: 1.15rem; }
  .book-read-content { font-size: 1rem; line-height: 1.75; }
}

/* ===== TOPICS INDEX PAGE ===== */
.topics-page { padding: 0 48px 120px; }

/* Popular topics — 3-col grid of olive-accented cards */
.topics-popular {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 0 40px;
}
.topic-pop {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-radius: 8px;
  background: rgba(123,138,94,0.06);
  border-left: 3px solid var(--olive);
  text-decoration: none; color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}
.topic-pop:hover { background: rgba(123,138,94,0.12); color: var(--text); }
html.dark .topic-pop { background: rgba(212,175,55,0.05); border-left-color: var(--accent); }
html.dark .topic-pop:hover { background: rgba(212,175,55,0.1); }
.topic-pop-name {
  font-size: 1.02rem; font-weight: 500; color: var(--olive);
}
html.dark .topic-pop-name { color: var(--accent); }
.topic-pop-count {
  font-size: 0.88rem; font-weight: 400; color: var(--text3);
  background: rgba(0,0,0,0.06); padding: 2px 8px; border-radius: 10px;
  flex-shrink: 0; margin-left: 8px;
}
html.dark .topic-pop-count { background: rgba(255,255,255,0.08); }

/* "View all" link in topic lists */
.topic-more { background: transparent; border: 1.5px dashed #ccc; justify-content: center; }
.topic-more:hover { background: rgba(0,0,0,0.02); border-color: #aaa; }
.topic-more .spk-row-name { color: var(--olive); font-size: 0.82rem; font-weight: 400; }
html.dark .topic-more { border-color: #555; background: transparent; }
html.dark .topic-more:hover { background: rgba(255,255,255,0.03); border-color: #777; }
html.dark .topic-more .spk-row-name { color: var(--accent); }

/* Letter page styles */
.letter-page-header { margin-bottom: 8px; }
.letter-back-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: Verdana, Geneva, sans-serif; font-size: 0.82rem;
  color: var(--olive, #6b5f3f); text-decoration: none; margin-bottom: 8px;
}
.letter-back-link:hover { text-decoration: underline; }
html.dark .letter-back-link { color: var(--accent, #d4af37); }
.alpha-nav a.alpha-active {
  background: var(--olive, #6b5f3f) !important; color: #fff !important; font-weight: 700;
}
html.dark .alpha-nav a.alpha-active { background: var(--accent, #d4af37) !important; color: #111 !important; }
.letter-full-list { margin-top: 12px; }

/* Topics uses 3-col list */
.topics-page .spk-list {
  grid-template-columns: repeat(3, 1fr);
}

/* Responsive: topics */
@media(max-width:960px){
  .topics-page { padding: 0 32px 80px; }
  .topics-popular { grid-template-columns: repeat(2, 1fr); }
  .topics-page .spk-list { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:600px){
  .topics-page { padding: 0 16px 60px; }
  .topics-popular { grid-template-columns: 1fr; }
  .topics-page .spk-list { grid-template-columns: 1fr; }
}

/* ===== TOPIC DETAIL PAGE ===== */
/* Topic detail page uses bch-columns two-column layout */
.topic-detail-page { padding: 0 48px 120px; }
.topic-detail-page .bch-title { font-size: 1.8rem; font-weight: 600; }
.topic-detail-page .topic-sidebar { padding-top: 1em; }

/* Description — same style as commentary content */
.topic-desc-text { padding: 0 0 24px; border-bottom: 1px solid rgba(0,0,0,0.06); margin-bottom: 24px; }
.topic-desc-text.comm-content { font-family: Verdana, Geneva, sans-serif; font-size: 1.05rem; line-height: 1.85; color: var(--text, #222); }
html.dark .topic-desc-text.comm-content { color: var(--text, #ddd); }
.topic-desc-text p { margin: 0 0 12px; }
html.dark .topic-desc-text { border-bottom-color: rgba(255,255,255,0.06); }

/* Sermon cards */
.topic-sermons { display: flex; flex-direction: column; gap: 0; }
.topic-sermon-hidden { display: none !important; }
.topic-sermon-card {
  display: flex; gap: 16px; padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
html.dark .topic-sermon-card { border-bottom-color: rgba(255,255,255,0.06); }
.topic-sermon-photo {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.06);
}
html.dark .topic-sermon-photo { border-color: rgba(255,255,255,0.06); }
.topic-sermon-right { flex: 1; min-width: 0; }
.topic-sermon-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.topic-sermon-title {
  font-family: Verdana, Geneva, sans-serif; font-size: 1.25rem; font-weight: 600;
  color: var(--olive, #6b5f3f); text-decoration: underline;
  text-decoration-color: rgba(107,95,63,0.3); text-underline-offset: 3px;
  line-height: 1.4; transition: text-decoration-color 0.15s;
}
.topic-sermon-title:hover { text-decoration-color: var(--olive, #6b5f3f); }
html.dark .topic-sermon-title { color: var(--accent, #d4af37); text-decoration-color: rgba(212,175,55,0.3); }
html.dark .topic-sermon-title:hover { text-decoration-color: var(--accent, #d4af37); }
.topic-sermon-duration {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; color: var(--text3, #999); white-space: nowrap;
}
.topic-sermon-speaker {
  display: inline-block; font-family: Verdana, Geneva, sans-serif;
  font-size: 0.92rem; color: var(--text2, #555); text-decoration: none;
  font-weight: 500; margin: 2px 0 6px;
}
.topic-sermon-speaker:hover { color: var(--olive, #6b5f3f); }
html.dark .topic-sermon-speaker { color: var(--text2, #aaa); }
html.dark .topic-sermon-speaker:hover { color: var(--accent, #d4af37); }

/* Description */
.topic-sermon-desc {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.84rem; line-height: 1.6;
  color: var(--text2, #666); margin: 4px 0 8px;
}
html.dark .topic-sermon-desc { color: var(--text2, #999); }

/* Meta row */
.topic-sermon-meta {
  display: flex; align-items: center; gap: 14px; font-size: 0.78rem; color: var(--text3, #999);
}
.topic-sermon-type, .topic-sermon-views {
  display: inline-flex; align-items: center; gap: 4px;
}

/* Sermon Filter Bar */
.sermon-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 0 16px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
html.dark .sermon-filter-bar { border-bottom-color: rgba(255,255,255,0.06); }
.sermon-filter-search {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px;
  background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px; padding: 8px 12px;
  transition: border-color 0.15s, background 0.15s;
}
.sermon-filter-search:focus-within {
  border-color: var(--olive); background: rgba(0,0,0,0.01);
}
html.dark .sermon-filter-search {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1);
}
html.dark .sermon-filter-search:focus-within {
  border-color: var(--accent); background: rgba(255,255,255,0.06);
}
.sermon-filter-search svg { color: rgba(0,0,0,0.35); flex-shrink: 0; }
html.dark .sermon-filter-search svg { color: rgba(255,255,255,0.35); }
.sermon-filter-search input {
  border: none; background: transparent; outline: none;
  font-family: var(--ff); font-size: 0.88rem; color: var(--text);
  width: 100%;
}
.sermon-filter-search input::placeholder { color: rgba(0,0,0,0.35); }
html.dark .sermon-filter-search input::placeholder { color: rgba(255,255,255,0.35); }
.sermon-filter-selects { display: flex; gap: 8px; }
.sermon-filter-select {
  font-family: var(--ff); font-size: 0.82rem; color: var(--text);
  background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px; padding: 7px 10px; cursor: pointer;
  outline: none; transition: border-color 0.15s;
}
.sermon-filter-select:focus { border-color: var(--olive); }
html.dark .sermon-filter-select {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: var(--text);
}
html.dark .sermon-filter-select:focus { border-color: var(--accent); }
.sermon-filter-status {
  width: 100%; font-family: var(--ff); font-size: 0.82rem;
  color: var(--text3); padding-top: 2px; display: none;
}
.sermon-filter-status.active { display: block; }
.topic-sermon-card.filter-hidden { display: none !important; }

/* Load More Button */
.topic-load-more-wrap { padding: 24px 0; text-align: center; }
.topic-load-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 32px; border: 1.5px solid var(--olive, #6b5f3f); border-radius: 8px;
  background: transparent; color: var(--olive, #6b5f3f);
  font-family: Verdana, Geneva, sans-serif; font-size: 0.92rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.topic-load-more-btn:hover { background: var(--olive, #6b5f3f); color: #fff; }
html.dark .topic-load-more-btn { border-color: var(--accent, #d4af37); color: var(--accent, #d4af37); }
html.dark .topic-load-more-btn:hover { background: var(--accent, #d4af37); color: #111; }
.topic-load-more-count { font-weight: 400; font-size: 0.82rem; opacity: 0.7; }

/* Sidebar — Related Scriptures */
.topic-sidebar-section { margin: 20px 0 0; }
.topic-sidebar-heading {
  display: flex; align-items: center; gap: 6px;
  font-family: Verdana, Geneva, sans-serif; font-size: 0.88rem; font-weight: 600;
  color: var(--text, #222); margin: 0 0 12px; padding: 0 0 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
html.dark .topic-sidebar-heading { color: var(--text, #eee); border-bottom-color: rgba(255,255,255,0.08); }
.topic-sidebar-badge {
  display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; background: rgba(34,100,34,0.1); color: #2a6b2a;
  letter-spacing: 0.5px; vertical-align: middle;
}
html.dark .topic-sidebar-badge { background: rgba(80,180,80,0.1); color: #6ecf6e; }

.topic-scripture-list { display: flex; flex-direction: column; gap: 0; }
.topic-scripture-item {
  padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
}
html.dark .topic-scripture-item { border-bottom-color: rgba(255,255,255,0.04); }
.topic-scripture-item:last-child { border-bottom: none; }
.topic-scripture-ref {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.88rem; font-weight: 600;
}
.topic-scripture-text {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.82rem; line-height: 1.55;
  color: var(--text2, #555); margin: 4px 0 3px; font-style: italic;
}
html.dark .topic-scripture-text { color: var(--text2, #aaa); }
.topic-scripture-count {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.72rem; color: var(--text3, #999);
}

/* Dictionary Bubbles */
.topic-dict-bubbles { display: flex; flex-direction: column; gap: 10px; }
.topic-dict-bubble {
  border-radius: 10px; padding: 12px 14px;
  border-left: 3px solid transparent;
}
.topic-dict-bubble .topic-dict-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 700; padding: 1px 5px;
  border-radius: 3px; letter-spacing: 0.5px; vertical-align: middle; margin-right: 6px;
}
.topic-dict-bubble .topic-dict-source {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.78rem; font-weight: 600;
  color: var(--text2, #555);
}
html.dark .topic-dict-bubble .topic-dict-source { color: var(--text2, #bbb); }
.topic-dict-text {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.8rem; line-height: 1.55;
  color: var(--text2, #555); margin: 6px 0 0;
}
html.dark .topic-dict-text { color: var(--text2, #aaa); }

/* Blue — Webster's */
.topic-dict-blue { background: rgba(59,130,246,0.06); border-left-color: #3b82f6; }
.topic-dict-blue .topic-dict-badge { background: rgba(59,130,246,0.15); color: #2563eb; }
html.dark .topic-dict-blue { background: rgba(59,130,246,0.08); border-left-color: #60a5fa; }
html.dark .topic-dict-blue .topic-dict-badge { background: rgba(96,165,250,0.15); color: #93bbfd; }

/* Green — Bridgeway */
.topic-dict-green { background: rgba(34,197,94,0.06); border-left-color: #22c55e; }
.topic-dict-green .topic-dict-badge { background: rgba(34,197,94,0.15); color: #16a34a; }
html.dark .topic-dict-green { background: rgba(34,197,94,0.08); border-left-color: #4ade80; }
html.dark .topic-dict-green .topic-dict-badge { background: rgba(74,222,128,0.15); color: #86efac; }

/* Purple — ISBE */
.topic-dict-purple { background: rgba(147,51,234,0.06); border-left-color: #9333ea; }
.topic-dict-purple .topic-dict-badge { background: rgba(147,51,234,0.15); color: #7c3aed; }
html.dark .topic-dict-purple { background: rgba(147,51,234,0.08); border-left-color: #a855f7; }
html.dark .topic-dict-purple .topic-dict-badge { background: rgba(168,85,247,0.15); color: #c084fc; }

/* Amber — Hastings */
.topic-dict-amber { background: rgba(245,158,11,0.06); border-left-color: #f59e0b; }
.topic-dict-amber .topic-dict-badge { background: rgba(245,158,11,0.15); color: #d97706; }
html.dark .topic-dict-amber { background: rgba(245,158,11,0.08); border-left-color: #fbbf24; }
html.dark .topic-dict-amber .topic-dict-badge { background: rgba(251,191,36,0.15); color: #fcd34d; }

/* Rose — extra color option */
.topic-dict-rose { background: rgba(244,63,94,0.06); border-left-color: #f43f5e; }
.topic-dict-rose .topic-dict-badge { background: rgba(244,63,94,0.15); color: #e11d48; }
html.dark .topic-dict-rose { background: rgba(244,63,94,0.08); border-left-color: #fb7185; }
html.dark .topic-dict-rose .topic-dict-badge { background: rgba(251,113,133,0.15); color: #fda4af; }

/* Green Relevance Bar */
.topic-relevance-bar {
  width: 100%; height: 4px; background: rgba(0,0,0,0.06); border-radius: 2px; margin-top: 4px; overflow: hidden;
}
html.dark .topic-relevance-bar { background: rgba(255,255,255,0.08); }
.topic-relevance-fill {
  height: 100%; background: linear-gradient(90deg, #22c55e, #4ade80); border-radius: 2px;
  transition: width 0.3s ease;
}
html.dark .topic-relevance-fill { background: linear-gradient(90deg, #16a34a, #22c55e); }

/* Cross References */
.topic-crossref-list { display: flex; flex-direction: column; gap: 0; }
.topic-crossref-item {
  padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
}
html.dark .topic-crossref-item { border-bottom-color: rgba(255,255,255,0.04); }
.topic-crossref-item:last-child { border-bottom: none; }

/* Related Topics Cloud */
.topic-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-cloud-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: Verdana, Geneva, sans-serif; font-size: 0.78rem;
  padding: 4px 10px; border-radius: 14px;
  background: rgba(107,95,63,0.08); color: var(--olive, #6b5f3f);
  text-decoration: none; transition: all 0.15s; white-space: nowrap;
}
.topic-cloud-tag:hover { background: var(--olive, #6b5f3f); color: #fff; }
html.dark .topic-cloud-tag { background: rgba(212,175,55,0.1); color: var(--accent, #d4af37); }
html.dark .topic-cloud-tag:hover { background: var(--accent, #d4af37); color: #111; }
.topic-cloud-count {
  font-size: 0.65rem; font-weight: 700; opacity: 0.6;
}
/* Scale tag sizes based on count using data attribute */
.topic-cloud-tag[data-count] { font-size: 0.78rem; }

/* Keywords */
.topic-keywords { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-keyword-tag {
  display: inline-block; font-family: Verdana, Geneva, sans-serif; font-size: 0.75rem;
  padding: 3px 10px; border-radius: 4px;
  background: rgba(0,0,0,0.04); color: var(--text2, #666);
  border: 1px solid rgba(0,0,0,0.06);
}
html.dark .topic-keyword-tag {
  background: rgba(255,255,255,0.05); color: var(--text2, #aaa);
  border-color: rgba(255,255,255,0.08);
}

/* Dictionary text auto-linked scriptures */
.topic-dict-text p { margin: 6px 0 0; }
.topic-dict-text .green-link { font-weight: 500; }

/* Responsive */
@media(max-width:960px){
  .topic-detail-page { padding: 0 32px 80px; }
}
@media(max-width:600px){
  .topic-detail-page { padding: 0 16px 60px; }
  .topic-sermon-photo { width: 44px; height: 44px; }
  .topic-sermon-title { font-size: 1.1rem; }
}

/* ===== BIBLE TRANSLATION PAGE ===== */
.bible-trans-page { padding: 0 48px 120px; }
.bible-testament {
  font-size: 1.2rem; font-weight: 500; margin: 32px 0 12px;
  color: var(--text);
}
.bible-books-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 0 8px;
}
.bible-book-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-radius: 8px;
  background: #e5e5e5; text-decoration: none; color: var(--text);
  transition: background 0.1s;
}
.bible-book-card:hover { background: #c8c8c8; color: var(--text); }
html.dark .bible-book-card { background: #3a3a3a; color: #ddd; }
html.dark .bible-book-card:hover { background: #4a4a4a; }
.bible-book-name { font-size: 0.88rem; font-weight: 400; }
.bible-book-chapters {
  font-size: 0.75rem; color: var(--text3);
  background: rgba(0,0,0,0.06); padding: 2px 8px; border-radius: 10px;
  flex-shrink: 0;
}
html.dark .bible-book-chapters { background: rgba(255,255,255,0.08); }
@media(max-width:960px){
  .bible-trans-page { padding: 0 32px 80px; }
  .bible-books-grid { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width:600px){
  .bible-trans-page { padding: 0 16px 60px; }
  .bible-books-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== BIBLE CHAPTER PAGE ===== */
.bible-chapter-page { padding: 0 48px 80px; }

.bch-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.bch-title { font-size: 1.8rem; font-weight: 600; margin: 0; }
.bch-trans-badge {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.05em;
  background: var(--olive); color: #fff; padding: 3px 10px; border-radius: 4px;
}
html.dark .bch-trans-badge { background: var(--accent); color: #1a1a1a; }

/* Nav */
.bch-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; margin: 6px 0 16px;
  border-top: 1.5px solid #e0e0e0; border-bottom: 1.5px solid #e0e0e0;
}
.bch-nav-bottom { margin: 24px 0 32px; }
html.dark .bch-nav { border-color: #3a3a3a; }
.bch-nav-btn { font-size: 0.84rem; color: var(--olive); text-decoration: none; padding: 4px 12px; border-radius: 6px; transition: background 0.1s; }
.bch-nav-btn:hover { background: rgba(123,138,94,0.08); color: var(--olive); }
html.dark .bch-nav-btn { color: var(--accent); }
html.dark .bch-nav-btn:hover { background: rgba(212,175,55,0.08); }
.bch-nav-disabled { color: #bbb; pointer-events: none; }
html.dark .bch-nav-disabled { color: #555; }
.bch-nav-center { font-size: 0.82rem; color: var(--text3); text-decoration: none; }
.bch-nav-center:hover { color: var(--olive); }
html.dark .bch-nav-center:hover { color: var(--accent); }

/* Two-column — NO independent scroll */
.bch-columns { display: grid; grid-template-columns: 1fr 340px; gap: 40px; }

/* Scripture */
.bch-content { font-size: 1.05rem; line-height: 1.85; color: var(--text); overflow-wrap: break-word; word-wrap: break-word; }
.bch-section { font-size: 1.1rem; font-weight: 500; margin: 28px 0 8px; color: var(--olive); letter-spacing: 0.01em; }
html.dark .bch-section { color: var(--accent); }
.bch-verse { display: block; margin: 0 0 12px; padding: 2px 0 2px 6px; }
.bch-vnum { font-size: 0.72rem; font-weight: 600; color: var(--olive); text-decoration: none; vertical-align: super; margin-right: 3px; padding: 1px 3px; border-radius: 3px; }
.bch-vnum:hover { background: rgba(123,138,94,0.1); }
html.dark .bch-vnum { color: var(--accent); }
html.dark .bch-vnum:hover { background: rgba(212,175,55,0.1); }
.bch-closing { font-style: italic; color: var(--text2); }
.bch-poetry { padding-left: 16px; }
.bch-content sup a { font-size: 0.68rem; color: var(--olive); text-decoration: none; font-weight: 600; margin-left: 1px; }
html.dark .bch-content sup a { color: var(--accent); }

/* Footnotes */
.bch-footnotes { margin: 32px 0 0; padding: 14px 18px; background: rgba(0,0,0,0.02); border-radius: 8px; border-left: 3px solid var(--olive); }
html.dark .bch-footnotes { background: rgba(255,255,255,0.02); border-left-color: var(--accent); }
.bch-footnotes h3 { font-size: 0.88rem; font-weight: 500; margin: 0 0 6px; color: var(--text2); }
.bch-footnotes p { font-size: 0.84rem; line-height: 1.5; margin: 3px 0; color: var(--text2); }
.bch-footnotes strong { font-weight: 600; color: var(--olive); margin-right: 4px; }
html.dark .bch-footnotes strong { color: var(--accent); }

/* ===== SIDEBAR — NOT sticky ===== */
.bch-sidebar { display: flex; flex-direction: column; gap: 12px; padding-top: 2.4em; }

/* ===== UNIFIED BUBBLE SYSTEM ===== */
.bch-bubble { padding: 16px 18px; border-radius: 10px; border-left: 3px solid; font-size: 0.9rem; line-height: 1.6; }
.bch-bubble h4 { font-size: 0.86rem; font-weight: 600; margin: 0 0 5px; letter-spacing: 0.02em; text-transform: uppercase; }
.bch-bubble h5 { font-size: 0.86rem; font-weight: 600; margin: 14px 0 6px 0; color: var(--text); }
.bch-bubble h5:first-child { margin-top: 0; }
.bch-bubble p { margin: 5px 0 0; color: var(--text2); }
.bch-bubble-sub { display: block; font-size: 0.84rem; font-weight: 500; margin-bottom: 4px; font-style: italic; }
.bch-bubble blockquote { margin: 8px 0; padding: 0; border: none; background: none; font-style: italic; font-size: 0.9rem; color: var(--text2); }
.bch-bubble blockquote cite { display: block; font-size: 0.82rem; font-style: normal; margin-top: 3px; color: var(--text3); }
.bch-bubble-refs { display: inline-block; font-size: 0.8rem; font-weight: 500; padding: 2px 8px; border-radius: 4px; margin-bottom: 4px; }

/* Listen box */
.bch-listen-box { border-radius: 10px; overflow: hidden; }
.bch-listen-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--main); color: #fff;
  font-size: 0.95rem; font-weight: 600;
}
html.dark .bch-listen-header { background: #2c2c14; }
.bch-listen-header svg { flex-shrink: 0; }
.bch-listen-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px 14px;
  background: var(--olive);
  border-radius: 0 0 10px 10px;
}
html.dark .bch-listen-body { background: #3a3a1e; }
button.bch-play-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.15); color: #fff;
  font-size: 0.92rem; font-weight: 500; cursor: pointer;
  font-family: var(--ff); transition: all 0.15s;
  appearance: none; -webkit-appearance: none;
}
button.bch-play-btn:hover { background: rgba(255,255,255,0.25); }
button.bch-play-btn.bch-playing { background: rgba(255,255,255,0.25); }
html.dark button.bch-play-btn { background: rgba(255,255,255,0.1); }
html.dark button.bch-play-btn:hover { background: rgba(255,255,255,0.18); }
.bch-dl-link {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.88rem; color: rgba(255,255,255,0.8); text-decoration: none; font-weight: 500;
  padding: 2px 0;
}
.bch-dl-link:hover { color: #fff; text-decoration: underline; }
html.dark .bch-dl-link { color: rgba(255,255,255,0.7); }

/* Cite trigger button */
button.bch-cite-trigger {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 10px 16px; border-radius: 10px;
  border: 1.5px solid var(--gray2);
  background: transparent; color: var(--text2);
  font-size: 0.95rem; font-weight: 500; cursor: pointer;
  font-family: var(--ff); transition: all 0.15s;
  appearance: none; -webkit-appearance: none;
}
button.bch-cite-trigger:hover { border-color: var(--olive); color: var(--olive); }
html.dark button.bch-cite-trigger { border-color: #444; color: #aaa; }
html.dark button.bch-cite-trigger:hover { border-color: var(--accent); color: var(--accent); }
.bch-cite-chevron { margin-left: auto; opacity: 0.5; }

/* Colour variants */
.bch-bubble-theme { background: rgba(123,138,94,0.06); border-left-color: var(--olive); }
.bch-bubble-theme h4 { color: var(--olive); }
html.dark .bch-bubble-theme { background: rgba(123,138,94,0.08); border-left-color: #8b9e6b; }
html.dark .bch-bubble-theme h4 { color: #a8b88a; }

.bch-bubble-summary { background: rgba(70,130,180,0.05); border-left-color: #4682b4; }
.bch-bubble-summary h4 { color: #3a6d96; }
html.dark .bch-bubble-summary { background: rgba(70,130,180,0.08); border-left-color: #5a9abf; }
html.dark .bch-bubble-summary h4 { color: #7ab3d4; }

.bch-bubble-key { background: rgba(212,175,55,0.05); border-left-color: #d4af37; }
.bch-bubble-key h4 { color: #b8960e; }
html.dark .bch-bubble-key { background: rgba(212,175,55,0.08); border-left-color: #d4af37; }
html.dark .bch-bubble-key h4 { color: var(--accent); }

.bch-bubble-christ { background: rgba(139,69,69,0.05); border-left-color: #8b4545; }
.bch-bubble-christ h4 { color: #7a3b3b; }
.bch-bubble-christ .bch-bubble-refs { background: rgba(139,69,69,0.08); color: #8b4545; }
html.dark .bch-bubble-christ { background: rgba(180,100,100,0.08); border-left-color: #b46464; }
html.dark .bch-bubble-christ h4 { color: #d48888; }
html.dark .bch-bubble-christ .bch-bubble-refs { background: rgba(180,100,100,0.12); color: #d48888; }

.bch-bubble-heart { background: rgba(180,120,100,0.05); border-left-color: #b47864; }
.bch-bubble-heart h4 { color: #9e6450; }
html.dark .bch-bubble-heart { background: rgba(180,120,100,0.08); border-left-color: #c08a74; }
html.dark .bch-bubble-heart h4 { color: #d4a48e; }

.bch-bubble-voices { background: rgba(120,100,160,0.05); border-left-color: #7864a0; }
.bch-bubble-voices h4 { color: #6a5690; }
html.dark .bch-bubble-voices { background: rgba(140,120,180,0.08); border-left-color: #9a84c0; }
html.dark .bch-bubble-voices h4 { color: #b4a0d4; }

.bch-bubble-context { background: rgba(100,120,100,0.05); border-left-color: #5a7a5a; }
.bch-bubble-context h4 { color: #4a6a4a; }
html.dark .bch-bubble-context { background: rgba(100,140,100,0.08); border-left-color: #6a9a6a; }
html.dark .bch-bubble-context h4 { color: #8aba8a; }

.bch-bubble-outline { background: rgba(123,138,94,0.04); border-left-color: var(--olive); }
.bch-bubble-outline h4 { color: var(--olive); }
html.dark .bch-bubble-outline { background: rgba(123,138,94,0.06); }
html.dark .bch-bubble-outline h4 { color: #a8b88a; }

.bch-bubble-doctrines { background: rgba(70,130,180,0.04); border-left-color: #4682b4; }
.bch-bubble-doctrines h4 { color: #3a6d96; }
html.dark .bch-bubble-doctrines { background: rgba(70,130,180,0.06); }
html.dark .bch-bubble-doctrines h4 { color: #7ab3d4; }

.bch-bubble-questions { background: rgba(212,175,55,0.04); border-left-color: #d4af37; }
.bch-bubble-questions h4 { color: #b8960e; }
html.dark .bch-bubble-questions { background: rgba(212,175,55,0.06); }
html.dark .bch-bubble-questions h4 { color: var(--accent); }

.bch-bubble-lessons { background: rgba(180,120,100,0.04); border-left-color: #b47864; }
.bch-bubble-lessons h4 { color: #9e6450; }
html.dark .bch-bubble-lessons { background: rgba(180,120,100,0.06); }
html.dark .bch-bubble-lessons h4 { color: #d4a48e; }

.bch-bubble-themes-list { background: rgba(120,100,160,0.04); border-left-color: #7864a0; }
.bch-bubble-themes-list h4 { color: #6a5690; }
html.dark .bch-bubble-themes-list { background: rgba(140,120,180,0.06); }
html.dark .bch-bubble-themes-list h4 { color: #b4a0d4; }

.bch-bubble-simple { background: rgba(123,138,94,0.04); border-left-color: #8b9e6b; }
.bch-bubble-simple h4 { color: var(--olive); }
html.dark .bch-bubble-simple { background: rgba(123,138,94,0.06); }
html.dark .bch-bubble-simple h4 { color: #a8b88a; }

.bch-bubble-detail { background: rgba(0,0,0,0.015); border-left-color: var(--olive); }
.bch-bubble-detail h4 { color: var(--olive); }
html.dark .bch-bubble-detail { background: rgba(255,255,255,0.02); border-left-color: var(--accent); }
html.dark .bch-bubble-detail h4 { color: var(--accent); }

.bch-bubble-faq { background: rgba(0,0,0,0.015); border-left-color: #8b9e6b; }
.bch-bubble-faq h4 { color: var(--olive); }
html.dark .bch-bubble-faq { background: rgba(255,255,255,0.02); border-left-color: #8b9e6b; }
html.dark .bch-bubble-faq h4 { color: #a8b88a; }

.bch-bubble-crossrefs { background: rgba(139,69,69,0.03); border-left-color: #8b4545; }
.bch-bubble-crossrefs h4 { color: #7a3b3b; }
html.dark .bch-bubble-crossrefs { background: rgba(180,100,100,0.06); border-left-color: #b46464; }
html.dark .bch-bubble-crossrefs h4 { color: #d48888; }


/* ===== CITE / SHARE MODAL ===== */
.si-cite-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.si-cite-modal {
  background: #fff; border-radius: 14px;
  width: 820px; max-width: 95vw; max-height: 90vh;
  box-shadow: 0 16px 50px rgba(0,0,0,0.22);
  overflow: hidden; display: flex; flex-direction: column;
}
html.dark .si-cite-modal { background: #2a2a2a; }
.si-cite-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px; background: var(--olive); color: #fff;
}
html.dark .si-cite-header { background: #3a3a3a; }
.si-cite-header h3 { margin: 0; font-size: 1.2rem; font-weight: 600; }
button.si-cite-close {
  background: none; border: none; color: #fff;
  font-size: 1.5rem; cursor: pointer; width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none;
}
.si-cite-close:hover { background: rgba(255,255,255,0.15); }

/* Tab bar */
.si-cite-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--gray);
  padding: 0 24px; background: rgba(0,0,0,0.02);
}
html.dark .si-cite-tabs { background: rgba(255,255,255,0.02); }
button.si-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px; border: none; border-bottom: 3px solid transparent;
  background: none; color: var(--text3); font-size: 0.95rem; font-weight: 500;
  cursor: pointer; font-family: var(--ff); transition: all 0.15s;
  appearance: none; -webkit-appearance: none;
}
button.si-tab:hover { color: var(--olive); }
html.dark button.si-tab:hover { color: var(--accent); }
button.si-tab[aria-selected="true"] {
  color: var(--olive); border-bottom-color: var(--olive);
}
html.dark button.si-tab[aria-selected="true"] {
  color: var(--accent); border-bottom-color: var(--accent);
}
button.si-tab svg { opacity: 0.6; }
button.si-tab[aria-selected="true"] svg { opacity: 1; }

/* Content area */
.si-cite-content { padding: 24px 28px 28px; overflow-y: auto; }

/* Panel grid: left styles + right output */
.si-panel-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: 20px;
}
.si-panel-left { display: flex; flex-direction: column; gap: 0; }
button.si-style-btn {
  display: block; width: 100%; text-align: left;
  padding: 11px 16px; border: 1px solid var(--gray);
  border-bottom: none; background: #fff; color: var(--text);
  font-size: 0.95rem; font-weight: 500; cursor: pointer;
  font-family: var(--ff); transition: all 0.1s;
  appearance: none; -webkit-appearance: none;
}
button.si-style-btn:first-child { border-radius: 8px 8px 0 0; }
button.si-style-btn:last-child { border-bottom: 1px solid var(--gray); border-radius: 0 0 8px 8px; }
button.si-style-btn:hover { background: rgba(123,138,94,0.04); }
button.si-style-btn[aria-selected="true"] {
  background: rgba(123,138,94,0.06);
  border-left: 4px solid var(--olive);
  font-weight: 600;
}
html.dark button.si-style-btn { background: #333; border-color: #444; color: #ddd; }
html.dark button.si-style-btn[aria-selected="true"] {
  background: rgba(212,175,55,0.08); border-left-color: var(--accent);
}

/* Text output box — click to copy, yellow flash on copied */
.si-text-box {
  padding: 16px 18px; border-radius: 8px;
  border: 1px solid var(--gray); background: rgba(0,0,0,0.015);
  font-size: 1.05rem; line-height: 1.65; color: var(--text2);
  cursor: pointer; transition: all 0.2s; min-height: 80px;
  word-break: break-word;
}
.si-text-box:hover { background: rgba(255,240,60,0.08); border-color: #d4c060; }
.si-text-box.si-copied {
  background: rgba(255,220,60,0.25) !important;
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.2);
}
html.dark .si-text-box { background: rgba(255,255,255,0.03); border-color: #444; }
html.dark .si-text-box:hover { background: rgba(255,240,60,0.06); }
html.dark .si-text-box.si-copied { background: rgba(255,220,60,0.12) !important; }

/* Copy / share buttons */
button.si-copy-btn, button.si-share-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 12px; padding: 10px 16px;
  border-radius: 8px; border: 2px solid var(--olive);
  background: transparent; color: var(--olive);
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
  font-family: var(--ff); transition: all 0.15s;
  appearance: none; -webkit-appearance: none;
}
button.si-copy-btn:hover, button.si-share-btn:hover {
  background: var(--olive); color: #fff;
}
button.si-copy-btn.si-copied {
  background: transparent; border-color: #16a34a; color: #16a34a;
  pointer-events: none;
}
html.dark button.si-copy-btn, html.dark button.si-share-btn {
  border-color: var(--accent); color: var(--accent);
}
html.dark button.si-copy-btn:hover, html.dark button.si-share-btn:hover {
  background: var(--accent); color: #1a1a1a;
}

.si-cite-note {
  text-align: center; font-size: 0.78rem; color: var(--text3);
  margin: 8px 0 0; font-style: italic;
}
.si-cite-data { display: none; }
.si-text-box-code { max-height: 280px; overflow-y: auto; }

/* Hide modal when printing */
@media print { .si-cite-overlay { display: none !important; } }

/* Responsive */
@media(max-width:640px){
  .si-panel-grid { grid-template-columns: 1fr; }
  .si-panel-left { order: 2; }
  .si-panel-right { order: 1; }
  .si-cite-tabs { padding: 0 12px; overflow-x: auto; }
  button.si-tab { padding: 10px 12px; font-size: 0.8rem; white-space: nowrap; }
  .si-cite-content { padding: 16px; }
}

/* Responsive */
@media(max-width:1100px){ .bch-columns { grid-template-columns: 1fr 280px; gap: 24px; } }
@media(max-width:960px){
  .bible-chapter-page { padding: 0 32px 60px; }
  .bch-columns { grid-template-columns: 1fr; }
  .bch-resource-row { grid-template-columns: 1fr; }
  .bch-faq-grid { grid-template-columns: 1fr; }
}
@media(max-width:600px){
  .bible-chapter-page { padding: 0 16px 40px; }
  .bch-header { flex-direction: column; gap: 6px; }
  .bch-nav { font-size: 0.78rem; }
  .bch-content { font-size: 0.98rem; }
}


/* ===== MARKDOWN PAGES (about, contact, etc.) ===== */
.md-page {
  padding: 0 48px 120px;
  font-size: 0.95rem; line-height: 1.7; color: var(--text);
}
.md-page h1 { font-size: 1.8rem; font-weight: 600; margin: 0 0 8px; }
.md-page h2 { font-size: 1.3rem; font-weight: 500; margin: 36px 0 12px; padding-bottom: 6px; border-bottom: 2px solid #d4d4d4; }
html.dark .md-page h2 { border-bottom-color: #404040; }
.md-page h3 { font-size: 1.1rem; font-weight: 500; margin: 24px 0 8px; }
.md-page p { margin: 0 0 14px; }
.md-page a { color: var(--olive); text-decoration: underline; text-decoration-color: rgba(112,112,53,0.3); }
.md-page a:hover { text-decoration-color: var(--olive); }
html.dark .md-page a { color: var(--accent); text-decoration-color: rgba(212,175,55,0.3); }
html.dark .md-page a:hover { text-decoration-color: var(--accent); }
.md-page blockquote {
  margin: 12px 0; padding: 12px 20px; border-left: 3px solid var(--olive);
  background: rgba(0,0,0,0.02); border-radius: 0 8px 8px 0; font-style: italic;
}
html.dark .md-page blockquote { background: rgba(255,255,255,0.02); border-left-color: var(--accent); }
.md-page ul, .md-page ol { margin: 0 0 14px; padding-left: 24px; }
.md-page li { margin: 4px 0; }
.md-page img { max-width: 120px; height: 120px; width: 120px; border-radius: 50%; object-fit: cover; margin: 8px 0; }
.md-page strong { font-weight: 500; }
.md-page .md-card {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 16px 20px; margin: 16px 0; border-radius: 10px;
  background: rgba(0,0,0,0.02); border: 1.5px solid rgba(0,0,0,0.06);
}
html.dark .md-page .md-card { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
.md-page .md-card img { margin: 0; flex-shrink: 0; }
.md-page .md-card blockquote { margin: 0; border: none; background: none; padding: 0; }
@media(max-width:960px){ .md-page { padding: 0 32px 80px; } }
@media(max-width:600px){
  .md-page { padding: 0 16px 60px; }
  .md-page .md-card { flex-direction: column; align-items: center; text-align: center; }
}

/* ===== SUPPORT STRIP — golden gradient, inline row, shadow fade ===== */
.support-strip {
  position: relative;
  background: linear-gradient(to bottom, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.14) 100%);
  border-top: 1px solid rgba(212,175,55,0.18);
  padding: 26px 32px;
}
.support-strip::before {
  content: '';
  position: absolute; top: -24px; left: 0; right: 0; height: 24px;
  background: linear-gradient(to bottom, transparent, rgba(212,175,55,0.06));
  pointer-events: none;
}
html.dark .support-strip { background: linear-gradient(to bottom, rgba(212,175,55,0.04), rgba(212,175,55,0.1)); border-top-color: rgba(212,175,55,0.1); }
.support-inner {
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.support-inner p {
  font-family: var(--ff); font-size: 1.08rem; font-weight: 700;
  color: var(--text); line-height: 1.5;
}
html.dark .support-inner p { color: var(--text); }
.free-link {
  color: var(--main); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--main);
  text-underline-offset: 2px;
}
.free-link:hover { color: var(--olive); text-decoration-color: var(--olive); }
html.dark .free-link { color: var(--accent); text-decoration-color: var(--accent); }
html.dark .free-link:hover { color: #C9A432; text-decoration-color: #C9A432; }
.btn-support {
  display: inline-block; flex-shrink: 0; padding: 10px 32px;
  background: var(--accent); border-radius: 6px;
  color: #2a2a14; font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 2px 10px rgba(212,175,55,0.3);
  transition: all 0.15s;
}
.btn-support:hover { background: #C9A432; color: #2a2a14; box-shadow: 0 4px 18px rgba(212,175,55,0.4); transform: translateY(-1px); }

/* ===== FOOTER TINT & OLIVE STRIP ===== */
.footer-tint { height: 36px; background: linear-gradient(to bottom, rgba(212,175,55,0.03), rgba(212,175,55,0.12)); }
html.dark .footer-tint { background: linear-gradient(to bottom, rgba(212,175,55,0.02), rgba(212,175,55,0.08)); }
.olive-strip { height: 4px; background: linear-gradient(to right, var(--olive), var(--accent), var(--olive)); opacity: 0.3; }
html.dark .olive-strip { opacity: 0.5; }

/* ===== FOOTER ===== */
.site-footer { background: var(--main); color: #fff; padding: 40px 40px 0; border-top: none; }
html.dark .site-footer { background: #232314; }
.footer-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-left { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { display: inline-block; }
.footer-logo img { height: 32px; }
html:not(.dark) .footer-logo img { filter: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a {
  color: #fff; font-size: 1rem;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,0.5);
  text-underline-offset: 3px; white-space: nowrap;
}
.footer-links a:hover { color: #fff; text-decoration-color: rgba(255,255,255,0.5); }
html.dark .footer-links a { color: #fff; text-decoration-color: rgba(255,255,255,0.4); }
html.dark .footer-links a:hover { color: #fff; text-decoration-color: rgba(255,255,255,0.4); }
.footer-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.footer-right h4 { font-size: 1rem; font-weight: 600; color: #fff; margin: 0; white-space: nowrap; }
.follow-icons { display: flex; gap: 8px; }
.soc {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--main);
  border: none; transition: all 0.15s;
}
.soc:hover { background: rgba(255,255,255,0.85); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
html.dark .soc { background: rgba(255,255,255,0.15); color: #fff; }
html.dark .soc:hover { background: rgba(255,255,255,0.25); color: #fff; }
.soc svg { width: 18px; height: 18px; fill: currentColor; }

/* Footer bottom — full width text */
.footer-bottom {
  padding: 24px 0 64px; text-align: left;
}
.footer-bottom p {
  font-size: 0.95rem; color: rgba(255,255,255,0.7); line-height: 1.7;
}
.footer-bottom a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }
html.dark .footer-bottom a:hover { color: rgba(255,255,255,0.7); }
/* Copying Permissions bubble */
.cp-bubble {
  display: inline-block;
  background: rgba(255,255,255,0.1); border-radius: 4px;
  padding: 1px 8px; color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.2);
  text-decoration: none;
  transition: all 0.15s;
}
.cp-bubble:hover { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); text-decoration: none; }
/* Greenspace bar at very bottom — matches footer */
.footer-greenspace { height: 140px; background: var(--main); }
html.dark .footer-greenspace { background: #232314; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1300px) { .site-shell { border: none; } }

/* Tablet */
@media (max-width: 960px) {
  .two-col { grid-template-columns: 1fr; padding: 0 24px 36px; gap: 0; }
  .col-main { border-right: none; padding-right: 0; }
  .col-side { padding-left: 0; }
  .side-cta { border-radius: 12px; height: 360px; }
  .side-padded { padding: 0; }
  .footer-row { flex-direction: column; gap: 24px; }
  .footer-right { align-self: flex-start; }
  /* Commentary: stack on tablet */
  .commentary-card { flex-direction: row; }
  /* Bible bar: hide overflow on tablet */
  .bible-bar { overflow: hidden; }
  .bible-bar a:nth-child(n+10) { display: none; }
  .bb-divider { display: none; }
  .bb-section-link { display: none !important; }
  .bb-partner {
    display: flex !important; align-items: center; margin-left: auto;
    background: var(--accent) !important; color: #2a2a14 !important;
    border-bottom: none !important; border-radius: 0; padding: 0 20px !important;
    font-weight: 700 !important; align-self: stretch;
  }
  .bb-partner:hover { background: #C9A432 !important; }
  .bible-nav-inner { height: 42px; }
  .bible-select { padding: 10px 36px 10px 14px; font-size: 0.9rem; height: 42px; }
  /* Hamburger + search icon replace full search + nav */
  .hamburger { display: flex; }
  .search-box { display: none; }
  .search-box.expanded {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    padding: 12px 16px; background: var(--main); z-index: 50;
  }
  .search-box.expanded input { width: 100%; }
  .search-icon-btn { display: flex; }
  .nav-bar { display: none; }
  /* Support strip stays inline row */
  .support-inner { gap: 16px; }
}

/* Mobile */
@media (max-width: 600px) {
  .header-inner { padding: 20px 16px; }
  .site-logo img { height: 36px; }
  /* Bible bar: fewer items */
  .bible-bar { padding: 8px 16px; gap: 0; overflow: hidden; }
  .bible-bar a { padding: 4px 8px; font-size: 0.92rem; }
  .bible-bar a:nth-child(n+8) { display: none; }
  .bb-partner { display: flex !important; }
  /* Bible nav: compact */
  .bible-sw-book { flex: 1 1 0; }
  .bible-sw-ref { flex: 1 1 0; }
  .bible-select { padding: 8px 30px 8px 10px; font-size: 0.85rem; height: 40px; }
  .bible-nav-inner { height: 40px; }
  .bible-go { width: 40px; height: 40px; }

  .two-col { padding: 0 16px 28px; }
  .breadcrumb { padding: 14px 16px; font-size: 0.85rem; }
  /* Card mobile: smaller image */
  .card-inner { gap: 12px; padding: 16px; }
  .sermon-img { width: 90px; height: 90px; }
  .sermon-title { font-size: 1.15rem; }
  .sermon-desc { font-size: 0.9rem; }
  .sermon-tags .tag { font-size: 0.82rem; padding: 3px 10px; }
  /* Commentary: stack on mobile */
  .commentary-card { flex-direction: column; }
  .commentary-img { width: 100%; height: 160px; }

  .spk-grid { grid-template-columns: repeat(3, 1fr); }
  .spk-photo { width: 56px; height: 56px; }
  .spk-name { font-size: 0.78rem; }
  .side-cta { height: 260px; border-radius: 10px; }
  .cta-overlay h3 { font-size: 1rem; }
  .cta-overlay h3 span { font-size: 1.2rem; }
  .soc { width: 36px; height: 36px; }
  .soc svg { width: 16px; height: 16px; }
  .site-footer { padding: 28px 20px 0; }
  .footer-row { flex-direction: column; gap: 20px; }
  .footer-right { align-self: flex-start; }
  .follow-icons { flex-wrap: wrap; }
  .support-inner { flex-direction: column; text-align: center; }
  .support-strip { padding: 22px 16px; }
}

@media(max-width:1100px){
  .bch-columns { grid-template-columns: 1fr 280px; gap: 24px; }
}
@media(max-width:960px){
  .bible-chapter-page { padding: 0 32px 80px; }
  .bch-columns { grid-template-columns: 1fr; }
  .bch-sidebar { position: static; }
  .bch-study-resources { grid-template-columns: 1fr; }
}
@media(max-width:600px){
  .bible-chapter-page { padding: 0 16px 60px; }
  .bch-header { flex-direction: column; gap: 6px; }
  .bch-nav { font-size: 0.78rem; }
  .bch-content { font-size: 0.98rem; }
}

/* ===== STUDY NOTES — plain prose (replaces old bubble system) ===== */
/* KEEP everything above this: .bible-chapter-page through .bch-sidebar */
/* KEEP the cite modal styles and responsive rules */
/* DELETE the old: .bch-bubble, .bch-below, .bch-resource-row, .bch-numbered-item, etc. */

/* ── Chapter Sermon Table (inside study notes) ── */
.bch-sermon-tbl img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #e8e8e8;
}
html.dark .bch-sermon-tbl img { background: #333; }

.bch-sermon-tbl-img {
  width: 54px;
  padding-right: 0 !important;
  vertical-align: middle;
}
.bch-sermon-tbl-title {
  vertical-align: middle;
  width: 280px;
  max-width: 280px;
}
.bch-sermon-tbl-title a {
  color: var(--olive, #5c6b2f);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.bch-sermon-tbl-title a:hover { text-decoration: underline; }
html.dark .bch-sermon-tbl-title a { color: var(--accent, #b8c97a); }

.bch-sermon-tbl-speaker {
  display: block;
  font-size: 0.82rem;
  color: #777;
  font-weight: 400;
  margin-top: 1px;
}
html.dark .bch-sermon-tbl-speaker { color: #999; }

.bch-sermon-tbl-desc {
  font-size: 0.88rem;
  color: #555;
  line-height: 1.5;
}
html.dark .bch-sermon-tbl-desc { color: #aaa; }

@media (max-width: 768px) {
  .bch-sermon-tbl-desc { display: none; }
  .bch-sermon-tbl-title { width: auto; max-width: none; }
}

.bch-study {
  padding-bottom: 40px;
}

.bch-study-heading {
  font-family: var(--ff);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gray);
  margin: 0 0 28px;
}

/* Each section: heading + prose, separated by a thin rule */
.bch-study-sec {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--gray);
}
.bch-study-sec:last-child { border-bottom: none; padding-bottom: 0; }

.bch-study-sec h3 {
  font-family: var(--ff);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 10px;
}

.bch-study-sec h4 {
  font-family: var(--ff);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--olive);
  margin: 18px 0 6px;
}
html.dark .bch-study-sec h4 { color: var(--accent); }
.bch-study-sec h4:first-child { margin-top: 0; }

.bch-study-sec p {
  font-family: var(--ff);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text2);
  margin: 0 0 8px;
}
.bch-study-sec p:last-child { margin-bottom: 0; }

/* Blockquotes — church voices */
.bch-study-bq {
  margin: 12px 0;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--gray);
  background: none;
}
html.dark .bch-study-bq { border-left-color: #444; }
.bch-study-bq p {
  font-family: var(--fs);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}
.bch-study-bq cite {
  display: block;
  font-family: var(--ff);
  font-style: normal;
  font-size: 0.92rem;
  color: var(--main);
  font-weight: 500;
  margin-top: 6px;
}
html.dark .bch-study-bq cite { color: var(--accent); }

/* Ordered lists — outline, lessons, themes, questions */
.bch-study-ol {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
  font-family: var(--ff);
}
.bch-study-ol li {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text2);
  margin-bottom: 6px;
  padding-left: 4px;
}
.bch-study-ol li:last-child { margin-bottom: 0; }
.bch-study-ol li strong {
  font-weight: 700;
  color: var(--text);
}
.bch-study-ol-italic li {
  font-style: italic;
}

/* Definition list — doctrines */
.bch-study-dl {
  margin: 0;
  font-family: var(--ff);
}
.bch-study-dl dt {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin-top: 10px;
}
.bch-study-dl dt:first-child { margin-top: 0; }
.bch-study-dl dd {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text2);
  margin: 2px 0 0 0;
  padding: 0;
}

/* Detailed outline groups */
.bch-study-ogroup {
  margin-bottom: 16px;
}
.bch-study-ogroup:last-child { margin-bottom: 0; }

.bch-study-otbl {
  width: 100%; border-collapse: collapse;
  margin-top: 6px;
}
.bch-study-otbl tr { vertical-align: top; }
.bch-study-otbl td { padding: 5px 0; }
td.bch-study-oref {
  width: 90px; white-space: nowrap;
  font-weight: 600; font-size: 0.88rem;
  color: var(--olive); padding-right: 12px;
}
td.bch-study-oref a { color: var(--olive); text-decoration: none; }
td.bch-study-oref a:hover { text-decoration: underline; }
html.dark td.bch-study-oref { color: var(--accent); }
html.dark td.bch-study-oref a { color: var(--accent); }
td.bch-study-otxt {
  font-size: 0.95rem; line-height: 1.6;
  color: var(--text2);
}

/* FAQ pairs */
.bch-study-faq {
  margin-bottom: 14px;
}
.bch-study-faq:last-child { margin-bottom: 0; }
.bch-study-faq-q {
  font-family: var(--ff);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 3px;
}
.bch-study-faq-a {
  font-family: var(--ff);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text2);
  margin: 0;
}

/* Cross-reference table */
.bch-study-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff);
  font-size: 0.95rem;
  margin-top: 4px;
}
.bch-study-tbl th {
  text-align: left;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border-bottom: 2px solid var(--gray);
}
.bch-study-tbl td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray);
  color: var(--text2);
  line-height: 1.5;
  vertical-align: top;
}
html.dark .bch-study-tbl th { border-bottom-color: #444; }
html.dark .bch-study-tbl td { border-bottom-color: #3a3a3a; }
.bch-study-tbl-num {
  width: 30px;
  color: var(--text3);
  font-weight: 500;
  text-align: center;
}
.bch-study-tbl-ref {
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
}

/* ===== STUDY NOTES RESPONSIVE ===== */
@media (max-width: 600px) {
  .bch-study-heading { font-size: 1.15rem; }
  .bch-study-tbl { font-size: 0.88rem; }
  .bch-study-tbl-ref { white-space: normal; }
  td.bch-study-oref { width: 70px; font-size: 0.82rem; }
}

/* ===== UNIVERSAL TOGGLE SWITCH (study, deity, quotes) ===== */
.bch-study-toggle, .bch-quote-toggle {
  display: flex; align-items: center; gap: 8px; padding: 2px 0;
}
.bch-switch {
  position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0;
}
.bch-switch input { opacity: 0; width: 0; height: 0; }
.bch-switch-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gray2); border-radius: 20px; transition: 0.2s;
}
html.dark .bch-switch-slider { background: #444; }
.bch-switch-slider::before {
  content: ""; position: absolute; width: 16px; height: 16px;
  left: 2px; bottom: 2px; background: #fff; border-radius: 50%;
  transition: 0.2s;
}
.bch-switch input:checked + .bch-switch-slider { background: var(--olive); }
html.dark .bch-switch input:checked + .bch-switch-slider { background: var(--accent); }
.bch-switch input:checked + .bch-switch-slider::before { transform: translateX(16px); }
.bch-switch-label { font-size: 0.78rem; color: var(--text3); font-weight: 500; }

/* ===== HIGHLIGHT LEGEND ===== */
.bch-hl-legend {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 12px; margin-top: 2px;
  background: rgba(0,0,0,0.015); border-radius: 8px;
  border: 1px solid var(--gray);
}
html.dark .bch-hl-legend { background: rgba(255,255,255,0.02); }
.bch-hl-legend-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.74rem; color: var(--text3); font-weight: 500;
}
.bch-hl-swatch {
  display: inline-block; width: 32px; height: 10px;
  border-radius: 3px; flex-shrink: 0;
}
.bch-hl-swatch-key { background: rgba(255,210,0,0.50); }
.bch-hl-swatch-christ { background: rgba(160,60,60,0.35); }
.bch-hl-swatch-spirit { background: rgba(220,140,40,0.45); }
.bch-hl-swatch-kw { background: rgba(75,130,110,0.40); }
.bch-hl-swatch-deity { background: rgba(110,90,158,0.35); }

/* ===== KEYWORDS BUBBLE — teal ===== */
.bch-bubble-keywords {
  background: rgba(75,130,110,0.06); border-left-color: #4b826e;
}
.bch-bubble-keywords h4 { color: #3d6b5a; }
html.dark .bch-bubble-keywords { background: rgba(75,130,110,0.10); border-left-color: #5ea08a; }
html.dark .bch-bubble-keywords h4 { color: #7ec0a8; }

.bch-keyword-item { display: flex; gap: 8px; margin-bottom: 10px; }
.bch-keyword-item:last-child { margin-bottom: 0; }
.bch-keyword-num {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #4b826e; color: #fff;
  font-size: 0.65rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
html.dark .bch-keyword-num { background: #5ea08a; color: #1a1a1a; }
.bch-keyword-phrase { display: block; font-size: 0.86rem; font-weight: 600; color: #4b826e; }
html.dark .bch-keyword-phrase { color: #7ec0a8; }
.bch-keyword-item p { font-size: 0.82rem; line-height: 1.45; color: var(--text2); margin: 2px 0 0; }

/* ===== HOLY SPIRIT BUBBLE — orange ===== */
.bch-bubble-spirit {
  background: rgba(220,140,40,0.08); border-left-color: #d48a20;
}
.bch-bubble-spirit h4 { color: #b06e10; }
html.dark .bch-bubble-spirit { background: rgba(220,140,40,0.10); border-left-color: #e0a030; }
html.dark .bch-bubble-spirit h4 { color: #f0c060; }

/* ===== NAMES OF DEITY BUBBLE — purple ===== */
.bch-bubble-deity {
  background: rgba(100,80,140,0.06); border-left-color: #6e5a9e;
}
.bch-bubble-deity h4 { color: #5c4a8a; }
html.dark .bch-bubble-deity { background: rgba(100,80,140,0.10); border-left-color: #8a70c0; }
html.dark .bch-bubble-deity h4 { color: #b0a0d4; }

/* Deity toggle — reuses .bch-switch but with purple active colour */
.bch-deity-toggle {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--gray);
}
.bch-deity-toggle .bch-switch input:checked + .bch-switch-slider { background: #6e5a9e; }
html.dark .bch-deity-toggle .bch-switch input:checked + .bch-switch-slider { background: #8a70c0; }

/* ===== VERSE-LEVEL HIGHLIGHTS ===== */

/* Key verse — bright yellow band */
.bch-study-mode .bch-hl-key {
  background: rgba(255,210,0,0.30);
  border-left: 4px solid #e6be00;
  padding-left: 12px;
  border-radius: 2px;
}
html.dark .bch-study-mode .bch-hl-key {
  background: rgba(255,210,0,0.18);
  border-left-color: #e6be00;
}

/* Christ — warm red band */
.bch-study-mode .bch-hl-christ {
  background: rgba(160,60,60,0.22);
  border-left: 4px solid #a03c3c;
  padding-left: 12px;
  border-radius: 2px;
}
html.dark .bch-study-mode .bch-hl-christ {
  background: rgba(180,80,80,0.14);
  border-left-color: #c06060;
}

/* Holy Spirit — orange band */
.bch-study-mode .bch-hl-spirit {
  background: rgba(220,140,40,0.28);
  border-left: 4px solid #d48a20;
  padding-left: 12px;
  border-radius: 2px;
}
html.dark .bch-study-mode .bch-hl-spirit {
  background: rgba(220,140,40,0.16);
  border-left-color: #e0a030;
}

/* Read mode: strip all */
.bch-read-mode .bch-hl-key,
.bch-read-mode .bch-hl-christ,
.bch-read-mode .bch-hl-spirit {
  background: none !important;
  border-left: none !important;
  padding-left: 0 !important;
}

/* ===== INLINE MARKS ===== */

/* Keyword phrases — teal */
mark.bch-kw-mark {
  background: rgba(75,130,110,0.30);
  color: inherit; padding: 1px 3px; border-radius: 2px;
  border-bottom: 2px solid #4b826e;
}
html.dark mark.bch-kw-mark {
  background: rgba(75,130,110,0.22);
  border-bottom-color: #5ea08a;
}

/* Spirit words — orange inline */
mark.bch-spirit-mark {
  background: rgba(220,140,40,0.40);
  color: inherit; padding: 1px 3px; border-radius: 2px;
}
html.dark mark.bch-spirit-mark { background: rgba(220,140,40,0.28); }

/* Deity names — purple */
mark.bch-deity-mark {
  background: rgba(110,90,158,0.25);
  color: inherit; padding: 1px 3px; border-radius: 2px;
}
html.dark mark.bch-deity-mark { background: rgba(138,112,192,0.20); }

/* Quote highlights in study notes — soft yellow */
mark.bch-quote-mark {
  background: rgba(255,220,60,0.30);
  color: inherit; padding: 1px 2px; border-radius: 2px;
}
html.dark mark.bch-quote-mark { background: rgba(255,220,60,0.18); }

/* ===== STUDY NOTES HEAD ROW (heading + quote toggle) ===== */
.bch-study-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gray);
  margin: 0 0 28px;
}
.bch-study-head-row .bch-study-heading {
  padding-bottom: 0; border-bottom: none; margin: 0;
}

/* ===== OBSERVATION SECTION ===== */
.bch-study-obs { margin-bottom: 14px; }
.bch-study-obs:last-child { margin-bottom: 0; }

/* ===== FAQ BOLD QUESTIONS ===== */
.bch-study-faq-q { font-weight: 600; }

/* ===== STUDY NOTES TOC ===== */
.bch-study-toc {
  padding: 10px 18px; margin-bottom: 24px;
  background: rgba(0,0,0,0.015); border: 1px solid var(--gray);
  border-radius: 8px;
}
html.dark .bch-study-toc { background: rgba(255,255,255,0.02); }
.bch-study-toc ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
}
.bch-study-toc li { font-size: 0.84rem; line-height: 1.6; }
.bch-study-toc a {
  color: var(--olive); text-decoration: none;
}
.bch-study-toc a:hover { text-decoration: underline; }
html.dark .bch-study-toc a { color: var(--accent); }

/* ===== HENRY COMMENTARY INLINE LINK ===== */
.bch-henry-inline {
  color: var(--olive); font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.bch-henry-inline:hover { text-decoration: underline; }
html.dark .bch-henry-inline { color: var(--accent); }

/* ===== BOLD SUB-HEADINGS IN STUDY NOTES ===== */
.bch-study-dl dt { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.bch-study-ogroup h4 { font-weight: 700; }

/* ===== BUBBLE COUNT TEXT ===== */
.bch-bubble-count {
  font-size: 0.72rem; color: var(--text3); font-style: italic; margin: 4px 0 0;
}

/* ===== CHRIST REFS INLINE ===== */
.bch-christ-refs {
  font-size: inherit; font-weight: 500;
}








/* ═════════════════════════════════════════════════════════════
   VERSE PAGE — /bible/parallel/{BOOK}/{CH}/{VERSE}
   ═════════════════════════════════════════════════════════════ */
.bible-verse-page { padding: 0 48px 80px; }
.bv-title { font-size: 2.2rem; font-weight: 600; color: var(--text); margin: 0 0 4px; text-align: center; }
.bv-breadcrumb { font-size: 0.8rem; color: var(--text3); margin-bottom: 14px; text-align: center; }
.bv-breadcrumb a { color: var(--olive); text-decoration: none; }
.bv-breadcrumb a:hover { text-decoration: underline; }
html.dark .bv-breadcrumb a { color: var(--accent); }
.bv-sep { margin: 0 4px; }

.bv-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 10px; }
.bv-nav-bottom { margin-top: 36px; margin-bottom: 0; padding-top: 20px; border-top: 1px solid var(--gray); }
.bv-nav-btn { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 5px; border: 1px solid var(--gray); background: #fff; color: var(--olive); font-size: 0.82rem; font-weight: 500; text-decoration: none; transition: all 0.15s; }
.bv-nav-btn:hover { background: rgba(123,138,94,0.06); border-color: var(--olive); }
html.dark .bv-nav-btn { background: #2a2a2a; color: var(--accent); border-color: #444; }
.bv-nav-disabled { color: var(--text3); pointer-events: none; opacity: 0.35; }

.bv-columns { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; }
.bv-main { min-width: 0; }
.bv-sidebar { display: flex; flex-direction: column; gap: 20px; }
.bv-section { margin-bottom: 32px; }
.bv-sec-heading { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 14px; padding-bottom: 6px; border-bottom: 2px solid var(--olive); }
html.dark .bv-sec-heading { border-bottom-color: var(--accent); }

/* Translations */
.bv-trans-list { display: flex; flex-direction: column; }
.bv-trans-row { padding: 12px 0; border-bottom: 1px solid var(--gray); }
.bv-trans-row:last-child { border-bottom: none; }
.bv-trans-label { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.bv-trans-link { font-size: 0.8rem; font-weight: 600; color: var(--olive); text-decoration: none; }
.bv-trans-link:hover { text-decoration: underline; }
html.dark .bv-trans-link { color: var(--accent); }
.bv-trans-abbr { font-size: 0.68rem; font-weight: 600; color: var(--text3); background: rgba(0,0,0,0.04); padding: 1px 5px; border-radius: 3px; }
html.dark .bv-trans-abbr { background: rgba(255,255,255,0.06); }
.bv-trans-text { font-size: 1.15rem; line-height: 1.75; color: var(--text); margin: 0; }
.bv-summary-text { font-size: 1rem; line-height: 1.7; color: var(--text2); margin: 0; }

/* Sidebar */
.bv-side-block { background: #fff; border: 1px solid var(--gray); border-radius: 10px; overflow: hidden; }
html.dark .bv-side-block { background: #2a2a2a; border-color: #444; }
.bv-side-heading { font-size: 0.88rem; font-weight: 700; color: #fff; margin: 0; padding: 10px 16px; background: var(--olive); }
html.dark .bv-side-heading { background: #3a3a3a; color: var(--accent); }
.bv-ctx-list { padding: 10px 12px; }
.bv-ctx-verse { font-size: 0.95rem; line-height: 1.65; color: var(--text2); margin: 0; padding: 6px 8px; border-radius: 4px; display: block; }
.bv-ctx-active { background: rgba(255,210,0,0.20); color: var(--text); font-weight: 500; }
a.bv-ctx-link { text-decoration: none; color: var(--text2); transition: background 0.12s; }
a.bv-ctx-link:hover { background: rgba(123,138,94,0.06); color: var(--text); }
.bv-ctx-num { font-size: 0.7rem; font-weight: 700; color: var(--olive); margin-right: 3px; vertical-align: super; }
html.dark .bv-ctx-num { color: var(--accent); }

/* Sermons */
.bv-sermon-list { display: flex; flex-direction: column; }
.bv-sermon-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; border-bottom: 1px solid var(--gray); }
.bv-sermon-row:last-child { border-bottom: none; }
html.dark .bv-sermon-row { border-bottom-color: #444; }
.bv-sermon-img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; transition: transform 0.15s; }
.bv-sermon-row:hover .bv-sermon-img { transform: scale(1.12); }
.bv-sermon-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bv-sermon-title { font-size: 0.92rem; font-weight: 600; color: var(--olive); line-height: 1.35; text-decoration: underline; text-decoration-color: rgba(144,143,81,0.35); text-underline-offset: 2px; }
.bv-sermon-row:hover .bv-sermon-title { text-decoration-color: var(--olive); }
html.dark .bv-sermon-title { color: var(--accent); text-decoration-color: rgba(212,175,55,0.35); }
.bv-sermon-speaker { font-size: 0.8rem; color: var(--text2); font-weight: 500; }
.bv-sermon-views { font-size: 0.76rem; color: var(--text3); font-weight: 500; flex-shrink: 0; }

/* ═══════════════════════════════════════════ */
/* INTERLINEAR DEEP STUDY                     */
/* ═══════════════════════════════════════════ */
.bv-interlinear { padding-top: 8px; }
.bv-il-grid { display: grid; grid-template-columns: 7fr 3fr; gap: 28px; align-items: start; }
.bv-il-left { min-width: 0; }

/* Shared verse box */
.bv-il-versebox { padding: 16px 20px; margin-bottom: 16px; border: 1px solid var(--gray); border-radius: 8px; text-align: center; }
html.dark .bv-il-versebox { border-color: #444; }

/* English verse */
.bv-il-english-verse { font-size: 1.2rem; line-height: 2.1; color: var(--text); background: rgba(0,0,0,0.02); }
html.dark .bv-il-english-verse { background: rgba(255,255,255,0.02); }
.bv-il-eng-text { font-size: 1.15rem; line-height: 1.75; color: var(--text); }

/* Hebrew full text */
.bv-il-fulltext { font-size: 1.65rem; line-height: 1.9; color: var(--text); background: rgba(0,0,0,0.015); }
html.dark .bv-il-fulltext { background: rgba(255,255,255,0.02); }
.bv-il-heb-word {
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
  transition: background 0.1s; border-bottom: 2px solid transparent;
}
.bv-il-heb-word:hover, .bv-il-heb-word.bv-il-active {
  background: rgba(255,210,0,0.30);
  border-bottom-color: rgba(190,155,0,0.65);
}
html.dark .bv-il-heb-word.bv-il-active, html.dark .bv-il-heb-word:hover {
  background: rgba(255,210,0,0.15); border-bottom-color: rgba(212,175,55,0.5);
}

/* Word cards */
.bv-il-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.bv-il-word {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 14px; min-width: 85px; max-width: 180px;
  border: 2px solid var(--gray); border-radius: 8px; background: #fff;
  cursor: pointer; transition: all 0.15s;
}
.bv-il-word:hover { background: rgba(255,210,0,0.10); border-color: rgba(200,165,0,0.5); }
.bv-il-word.bv-il-active {
  background: rgba(255,210,0,0.18); border-color: rgba(200,165,0,0.6);
  box-shadow: 0 2px 12px rgba(200,165,0,0.12);
}
html.dark .bv-il-word { background: #2a2a2a; border-color: #444; }
html.dark .bv-il-word:hover { background: rgba(255,210,0,0.06); border-color: rgba(212,175,55,0.4); }
html.dark .bv-il-word.bv-il-active { background: rgba(255,210,0,0.10); border-color: rgba(212,175,55,0.6); }
.bv-il-original { font-size: 1.5rem; line-height: 1.3; color: var(--text); font-weight: 500; }
.bv-il-translit { font-size: 0.78rem; color: #c07820; font-style: italic; }
html.dark .bv-il-translit { color: #e0a040; }
.bv-il-strongs-num { font-size: 0.72rem; font-weight: 600; color: #4a90d9; }
.bv-il-gloss { font-size: 0.82rem; font-weight: 600; color: var(--olive); }
html.dark .bv-il-gloss { color: var(--accent); }
.bv-il-morph {
  font-size: 0.68rem; color: var(--text3); margin-top: 2px;
  max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* LXX */
.bv-il-lxx { padding: 14px 18px; background: rgba(0,0,0,0.015); border: 1px solid var(--gray); border-radius: 8px; }
html.dark .bv-il-lxx { background: rgba(255,255,255,0.02); border-color: #444; }
.bv-il-lxx h4 { font-size: 0.82rem; font-weight: 700; color: var(--olive); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.05em; }
html.dark .bv-il-lxx h4 { color: var(--accent); }
.bv-il-lxx p { font-size: 1.15rem; line-height: 1.6; color: var(--text); margin: 0; }

/* ─── Strong's Panel (right 30%) ─── */
.bv-il-right { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; }
.bv-il-panel { background: #fff; border: 1px solid var(--gray); border-radius: 10px; overflow: hidden; }
html.dark .bv-il-panel { background: #2a2a2a; border-color: #444; }
.bv-il-panel-header {
  font-size: 0.88rem; font-weight: 700; color: #fff; margin: 0;
  padding: 10px 16px; background: var(--olive); text-align: center;
}
html.dark .bv-il-panel-header { background: #3a3a3a; color: var(--accent); }
.bv-il-panel-body { padding: 18px; }

/* Empty state */
.bv-il-panel-prompt {
  text-align: center; color: var(--text3);
}
.bv-il-panel-prompt svg {
  color: var(--olive); opacity: 0.4; margin-bottom: 10px;
}
html.dark .bv-il-panel-prompt svg { color: var(--accent); }
.bv-il-panel-prompt p {
  font-size: 0.85rem; line-height: 1.55; margin: 0; color: var(--text3);
}
.bv-il-panel-prompt strong { color: var(--text2); }

/* Filled state */
.bv-il-panel-content { padding: 0; }
#bv-panel-word { font-size: 2.2rem; text-align: center; color: var(--text); margin-bottom: 6px; line-height: 1.3; }
#bv-panel-translit { font-size: 0.92rem; text-align: center; color: #c07820; font-style: italic; margin-bottom: 4px; }
html.dark #bv-panel-translit { color: #e0a040; }
#bv-panel-id { font-size: 0.85rem; text-align: center; color: #4a90d9; font-weight: 700; margin-bottom: 4px; }
#bv-panel-gloss { font-size: 1.1rem; text-align: center; color: var(--olive); font-weight: 700; margin-bottom: 4px; }
html.dark #bv-panel-gloss { color: var(--accent); }
#bv-panel-morph { font-size: 0.78rem; text-align: center; color: var(--text3); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--gray); }
html.dark #bv-panel-morph { border-bottom-color: #444; }
#bv-panel-simple {
  font-size: 0.9rem; line-height: 1.6; color: var(--text); margin-bottom: 14px;
  padding: 12px 14px; background: rgba(255,210,0,0.08); border-radius: 6px;
  border-left: 3px solid var(--olive);
}
html.dark #bv-panel-simple { background: rgba(255,210,0,0.04); border-left-color: var(--accent); }
#bv-panel-def, #bv-panel-usage { font-size: 0.85rem; line-height: 1.6; color: var(--text2); margin-bottom: 10px; }
#bv-panel-def strong, #bv-panel-usage strong { color: var(--text); font-weight: 600; }

/* ═══════════════════════════════════════════ */
/* STRONG'S REFERENCE — static full-width     */
/* ═══════════════════════════════════════════ */
/* Definition truncation link */
.bv-read-full {
  display: inline-block; margin-top: 4px; font-size: 0.85rem; font-weight: 600;
  color: var(--accent); text-decoration: none; cursor: pointer;
}
.bv-read-full:hover { text-decoration: underline; }

.bv-strongs-ref { padding-top: 8px; }
.bv-sr-entry {
  padding: 20px 0; border-bottom: 1px solid var(--gray);
}
.bv-sr-entry:last-child { border-bottom: none; }
.bv-sr-header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-bottom: 10px;
}
.bv-sr-heb { font-size: 1.6rem; color: var(--text); font-weight: 500; }
.bv-sr-translit { font-size: 0.88rem; color: #c07820; font-style: italic; }
html.dark .bv-sr-translit { color: #e0a040; }
.bv-sr-id {
  font-size: 0.78rem; font-weight: 700; color: #fff; background: #4a90d9;
  padding: 2px 8px; border-radius: 4px;
}
.bv-sr-eng { font-size: 1rem; font-weight: 600; color: var(--olive); }
html.dark .bv-sr-eng { color: var(--accent); }
.bv-sr-morph { font-size: 0.75rem; color: var(--text3); background: rgba(0,0,0,0.04); padding: 2px 7px; border-radius: 3px; }
html.dark .bv-sr-morph { background: rgba(255,255,255,0.06); }
.bv-sr-simple {
  font-size: 0.95rem; line-height: 1.65; color: var(--text2);
  padding: 0; margin-bottom: 10px;
  background: none; border-radius: 0;
  border-left: none;
}
.bv-sr-simple::before {
  content: "Summary: ";
  font-weight: 700; color: var(--text);
}
html.dark .bv-sr-simple { background: none; border-left: none; }
.bv-sr-def, .bv-sr-usage {
  font-size: 0.9rem; line-height: 1.6; color: var(--text2); margin-bottom: 6px;
}
.bv-sr-def strong, .bv-sr-usage strong { color: var(--text); font-weight: 600; }

/* ═══════════════════════════════════════════ */
/* RESPONSIVE                                 */
/* ═══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .bv-columns { grid-template-columns: 1fr 280px; gap: 24px; }
  .bv-il-grid { grid-template-columns: 1fr 240px; gap: 20px; }
}
@media (max-width: 960px) {
  .bible-verse-page { padding: 0 32px 60px; }
  .bv-columns { grid-template-columns: 1fr; }
  .bv-sidebar { order: -1; }
  .bv-il-grid { grid-template-columns: 1fr; }
  .bv-il-right { position: static; }
  .bv-il-original { font-size: 1.3rem; }
}
@media (max-width: 600px) {
  .bible-verse-page { padding: 0 16px 40px; }
  .bv-title { font-size: 1.6rem; }
  .bv-nav-btn { font-size: 0.76rem; padding: 5px 8px; }
  .bv-sermon-img { width: 44px; height: 44px; }
  .bv-il-fulltext { font-size: 1.3rem; }
  .bv-il-word { min-width: 70px; padding: 10px 10px; }
  .bv-il-original { font-size: 1.15rem; }
  .bv-sr-heb { font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════════
   Commentary / Books – shared chapter-page styles
   (used by commentary/single.html & books/single.html)
   ═══════════════════════════════════════════════════ */

/* Commentary chapter page */
.comm-chapter-page .comm-content{font-family:Verdana,Geneva,sans-serif;font-size:1.05rem;line-height:1.85;color:var(--text,#222);overflow-wrap:break-word;word-break:break-word;min-width:0}
html.dark .comm-chapter-page .comm-content{color:var(--text,#ddd)}
.comm-chapter-page .comm-content p{margin:0 0 16px}
.comm-chapter-page .comm-content h2,.comm-chapter-page .comm-content h3{font-family:Verdana,Geneva,sans-serif;font-weight:600;margin:28px 0 10px;color:var(--text,#222)}
html.dark .comm-chapter-page .comm-content h2,html.dark .comm-chapter-page .comm-content h3{color:var(--text,#eee)}
.comm-chapter-page .comm-content blockquote{border-left:3px solid var(--olive,#6b5f3f);padding:8px 16px;margin:16px 0;font-style:italic;background:rgba(107,95,63,.04)}
html.dark .comm-chapter-page .comm-content blockquote{border-color:var(--accent,#d4af37);background:rgba(212,175,55,.05)}

/* Bio box in sidebar */
.comm-bio-box{background:var(--bg2,#faf9f6);border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:16px 18px;margin-top:12px;font-size:.9rem;line-height:1.6}
html.dark .comm-bio-box{background:var(--bg2,#1e1e1e);border-color:rgba(255,255,255,.06)}
.comm-bio-box-photo{width:64px;height:64px;object-fit:cover;border-radius:50%;float:left;margin:0 12px 8px 0;border:2px solid rgba(0,0,0,.08)}
html.dark .comm-bio-box-photo{border-color:rgba(255,255,255,.06)}
.comm-bio-box-abbr{width:64px;height:64px;border-radius:50%;float:left;margin:0 12px 8px 0;border:2px solid rgba(0,0,0,.08);background:var(--olive,#6b5f3f);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:.03em}
html.dark .comm-bio-box-abbr{border-color:rgba(255,255,255,.06);background:var(--accent,#d4af37);color:#1a1a0e}
.comm-bio-box-name{font-family:Verdana,Geneva,sans-serif;font-size:.86rem;font-weight:600;margin:0 0 4px;letter-spacing:.02em;color:var(--text,#222)}
html.dark .comm-bio-box-name{color:var(--text,#eee)}
.comm-bio-box-desc{font-family:Verdana,Geneva,sans-serif;font-size:.84rem;line-height:1.6;color:var(--text2,#666);margin:5px 0 8px}
html.dark .comm-bio-box-desc{color:var(--text2,#999)}
.comm-bio-box-tags{margin:6px 0 8px;display:flex;flex-wrap:wrap;gap:5px}
.comm-bio-box-link{font-family:Verdana,Geneva,sans-serif;font-size:.84rem;color:var(--olive,#6b5f3f);text-decoration:none;font-weight:500}
.comm-bio-box-link:hover{text-decoration:underline}
html.dark .comm-bio-box-link{color:var(--accent,#d4af37)}

/* Quick Jump sidebar */
.comm-quick-jump{margin-top:16px}
.comm-quick-jump h4{font-family:Verdana,Geneva,sans-serif;font-size:.86rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--text3,#999);margin:0 0 8px}
.comm-quick-links{display:flex;flex-wrap:wrap;gap:4px}
.comm-qj-link{font-family:Verdana,Geneva,sans-serif;font-size:.8rem;padding:3px 6px;border-radius:3px;text-decoration:none;color:var(--text2,#555);background:var(--bg2,#f5f4f0);border:1px solid rgba(0,0,0,.05)}
.comm-qj-link:hover{background:var(--olive,#6b5f3f);color:#fff}
html.dark .comm-qj-link{color:var(--text2,#aaa);background:var(--bg2,#252525);border-color:rgba(255,255,255,.05)}
html.dark .comm-qj-link:hover{background:var(--accent,#d4af37);color:#1a1a1a}
.comm-qj-active{background:var(--olive,#6b5f3f);color:#fff !important;border-color:var(--olive,#6b5f3f)}
html.dark .comm-qj-active{background:var(--accent,#d4af37);color:#1a1a1a !important;border-color:var(--accent,#d4af37)}

/* Bottom nav spacing */
.bch-nav-bottom{margin-top:32px}

/* Static featured card (section pages — commentary & books) */
.comm-feat-card-static{pointer-events:auto;cursor:default;margin-bottom:24px}
.comm-feat-card-static:hover{border-color:rgba(0,0,0,.08);box-shadow:none}
html.dark .comm-feat-card-static:hover{border-color:rgba(255,255,255,.06);box-shadow:none}
.comm-feat-card-static .comm-feat-name{text-decoration:none}
.comm-feat-card-static:hover .comm-feat-name{text-decoration:none}
.comm-feat-author{font-family:Verdana,Geneva,sans-serif;font-size:.84rem;color:var(--olive,#6b5f3f);font-weight:500}
html.dark .comm-feat-author{color:var(--accent,#d4af37)}
.comm-feat-card-static .comm-feat-link{pointer-events:auto}

/* ═══════════════════════════════════════════════════
   SPEAKER PAGE — gallery + layout
   ═══════════════════════════════════════════════════ */
.speaker-page { padding: 0 48px 120px; }

/* Inline photo gallery */
.spk-gallery { margin: 0 0 28px; }
.spk-gallery-title {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.88rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px; color: var(--text2, #666);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 12px;
}
html.dark .spk-gallery-title { color: var(--text2, #aaa); }
.spk-gallery-grid {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.spk-gallery-grid::-webkit-scrollbar { height: 4px; }
.spk-gallery-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
.spk-gallery-item {
  flex: 0 0 auto; width: 200px; scroll-snap-align: start; cursor: pointer;
}
.spk-gallery-img {
  width: 100%; height: 150px; object-fit: cover; border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06); transition: transform 0.2s;
}
.spk-gallery-img:hover { transform: scale(1.03); }
html.dark .spk-gallery-img { border-color: rgba(255,255,255,0.06); }
.spk-gallery-caption {
  display: block; font-size: 0.74rem; color: var(--text3, #999);
  margin-top: 4px; line-height: 1.3; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}

/* Sidebar photo grid */
.sidebar-photo-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.sidebar-photo-thumb {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}
.sidebar-photo-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
html.dark .sidebar-photo-thumb { border-color: rgba(255,255,255,0.08); }

/* Gallery lightbox overlay */
.spk-gallery-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.92); z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
}
.spk-gallery-inner {
  display: flex; align-items: center; gap: 16px; cursor: default;
  max-width: 95vw; max-height: 90vh;
}
.spk-gallery-full {
  display: block; flex: 0 1 auto; min-width: 0; min-height: 0;
  max-width: 85vw; max-height: 80vh; object-fit: contain; border-radius: 8px;
}
.spk-gallery-close {
  position: absolute; top: 16px; right: 24px; font-size: 2.2rem; color: #fff;
  cursor: pointer; line-height: 1; z-index: 2;
  opacity: 0.8; transition: opacity 0.15s;
}
.spk-gallery-close:hover { opacity: 1; }
.spk-gallery-nav {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 2rem; width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.15s;
  line-height: 1; padding-bottom: 2px;
}
.spk-gallery-nav:hover { background: rgba(255,255,255,0.25); }
.spk-gallery-full-caption {
  color: #ccc; font-size: 0.9rem; margin-top: 12px; text-align: center; max-width: 80vw;
}

/* Speaker sermon list — no photo since it's the speaker's own page */
.spk-sermon-list { }

/* ═══════════════════════════════════════════════════
   SERMON DETAIL PAGE — audio player, transcript, sidebar
   ═══════════════════════════════════════════════════ */
.sermon-page .bch-header { padding-bottom: 4px; }
.sermon-header-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: Verdana, Geneva, sans-serif; font-size: 0.88rem;
  color: var(--text2, #666); margin-top: 6px;
}
html.dark .sermon-header-meta { color: var(--text2, #aaa); }
.sermon-speaker-link {
  color: var(--olive, #6b5f3f); text-decoration: none; font-weight: 500;
}
.sermon-speaker-link:hover { text-decoration: underline; }
html.dark .sermon-speaker-link { color: var(--accent, #d4af37); }
.sermon-meta-sep { color: var(--text3, #bbb); }
.sermon-meta-dur, .sermon-meta-views { font-size: 0.84rem; }

/* Audio Player */
.sermon-player {
  background: var(--bg2, #faf9f6); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 24px;
}
html.dark .sermon-player { background: var(--bg2, #1e1e1e); border-color: rgba(255,255,255,0.06); }
.sermon-player audio { display: none; }
.sermon-player-controls {
  display: flex; align-items: center; gap: 12px;
}
.sermon-play-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--olive, #6b5f3f); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.15s;
}
.sermon-play-btn:hover { background: #5a503a; }
.sermon-play-btn.playing { background: var(--accent, #d4af37); color: #1a1a1a; }
html.dark .sermon-play-btn { background: var(--accent, #d4af37); color: #1a1a1a; }
html.dark .sermon-play-btn:hover { background: #c9a432; }
html.dark .sermon-play-btn.playing { background: var(--olive, #8a9a6a); color: #fff; }
.sermon-progress-wrap {
  flex: 1; height: 6px; background: rgba(0,0,0,0.1); border-radius: 3px;
  cursor: pointer; position: relative;
}
html.dark .sermon-progress-wrap { background: rgba(255,255,255,0.1); }
.sermon-progress-bar {
  height: 100%; background: var(--olive, #6b5f3f); border-radius: 3px; width: 0%;
  transition: width 0.1s linear;
}
html.dark .sermon-progress-bar { background: var(--accent, #d4af37); }
.sermon-time {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.76rem; color: var(--text3, #999);
  white-space: nowrap; min-width: 90px; text-align: right;
}
.sermon-speed-btn {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.74rem; font-weight: 600;
  background: rgba(0,0,0,0.06); border: none; border-radius: 4px;
  padding: 2px 8px; cursor: pointer; color: var(--text2, #666);
}
.sermon-speed-btn:hover { background: rgba(0,0,0,0.1); }
html.dark .sermon-speed-btn { background: rgba(255,255,255,0.06); color: var(--text2, #aaa); }

/* Video embed */
.sermon-video {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border-radius: 10px; margin-bottom: 24px;
}
.sermon-video iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 10px;
}

/* Description */
.sermon-description {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.95rem; line-height: 1.75;
  color: var(--text2, #555); margin-bottom: 24px;
}
html.dark .sermon-description { color: var(--text2, #aaa); }
.sermon-description p { margin: 0; }

/* Transcript */
.sermon-transcript {
  border-top: 1px solid rgba(0,0,0,0.06); padding-top: 16px; margin-top: 8px;
}
html.dark .sermon-transcript { border-top-color: rgba(255,255,255,0.06); }
.sermon-transcript-toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 8px 0;
}
.sermon-transcript-toggle:hover .sermon-transcript-title { color: var(--olive, #6b5f3f); }
html.dark .sermon-transcript-toggle:hover .sermon-transcript-title { color: var(--accent, #d4af37); }
.sermon-transcript-title {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.92rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px; color: var(--text, #222);
  transition: color 0.15s;
}
html.dark .sermon-transcript-title { color: var(--text, #eee); }
.sermon-transcript-arrow { font-size: 0.8rem; color: var(--text3, #999); }
.sermon-transcript-body {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.92rem; line-height: 1.85;
  color: var(--text, #333); padding-top: 16px;
}
html.dark .sermon-transcript-body { color: var(--text, #ddd); }
.sermon-transcript-body p { margin: 0 0 16px; }

/* Sidebar sections */
.sermon-sidebar-section {
  margin-bottom: 16px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
html.dark .sermon-sidebar-section { border-bottom-color: rgba(255,255,255,0.06); }
.sermon-sidebar-label {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3, #999);
  margin: 0 0 8px;
}

/* Download links */
.sermon-downloads { display: flex; flex-wrap: wrap; gap: 8px; }
.sermon-dl-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: Verdana, Geneva, sans-serif; font-size: 0.8rem; font-weight: 500;
  padding: 5px 12px; border-radius: 6px; text-decoration: none;
  background: rgba(107,95,63,0.08); color: var(--olive, #6b5f3f);
  border: 1px solid rgba(107,95,63,0.12); transition: background 0.15s;
}
.sermon-dl-link:hover { background: rgba(107,95,63,0.16); }
html.dark .sermon-dl-link {
  background: rgba(212,175,55,0.08); color: var(--accent, #d4af37);
  border-color: rgba(212,175,55,0.12);
}
html.dark .sermon-dl-link:hover { background: rgba(212,175,55,0.15); }

/* Responsive (old) */
@media(max-width:960px){
  .speaker-page { padding: 0 32px 80px; }
}
@media(max-width:600px){
  .speaker-page { padding: 0 16px 60px; }
  .spk-gallery-item { width: 160px; }
  .spk-gallery-img { height: 120px; }
  .sermon-player-controls { flex-wrap: wrap; }
  .sermon-time { min-width: auto; }
}


/* ═══════════════════════════════════════════════════
   SPEAKER CATEGORY PAGE V2 — hero bio, carousel, sidebar
   ═══════════════════════════════════════════════════ */
.speaker-page-v2 { padding: 0 0 80px; }

/* Hero bio card — matches book featured hero style */
.spk-hero-card {
  display: flex; gap: 24px; align-items: flex-start;
  padding: 28px 32px; text-decoration: none; color: var(--text);
  background: var(--bg2, #faf9f6);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  margin: 20px 32px 0;
}
html.dark .spk-hero-card { background: var(--bg2, #1e1e1e); border-color: rgba(255,255,255,0.06); }

.spk-hero-img-wrap {
  flex-shrink: 0; width: 155px; height: 155px;
  border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
html.dark .spk-hero-img-wrap { border-color: rgba(255,255,255,0.08); }
.spk-hero-img { width: 100%; height: 100%; object-fit: cover; }

.spk-hero-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.spk-hero-name {
  font-family: var(--ff);
  font-size: 1.65rem; font-weight: 700; line-height: 1.25;
  color: var(--text);
}
html.dark .spk-hero-name { color: var(--text); }
.spk-hero-badges {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px;
}
.spk-hero-badge {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 4px;
  background: var(--olive); color: #fff;
}
html.dark .spk-hero-badge { background: var(--accent); color: #1a1a0e; }

.spk-hero-bio {
  font-family: var(--ff); font-size: 1rem; line-height: 1.6;
  color: var(--text2);
  margin-top: 4px;
}
html.dark .spk-hero-bio { color: var(--text2); }

/* Non-linked tag bubbles for sermon listings */
.topic-tag-plain {
  display: inline-block;
  font-family: var(--ff); font-size: 0.72rem; font-weight: 500;
  padding: 2px 10px; border-radius: 12px;
  background: rgba(107,95,63,0.08); color: var(--olive);
  border: 1px solid rgba(107,95,63,0.12);
}
html.dark .topic-tag-plain { background: rgba(212,175,55,0.08); color: var(--accent); border-color: rgba(212,175,55,0.12); }
.topic-tag-bible-plain {
  background: rgba(107,95,63,0.04); color: var(--text2);
  border-color: rgba(107,95,63,0.1);
}
html.dark .topic-tag-bible-plain { background: rgba(212,175,55,0.04); color: var(--text3); border-color: rgba(212,175,55,0.1); }

/* Two-column layout */
.spk-v2-columns {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 0; padding: 0 32px;
}
.spk-v2-main {
  padding: 24px 28px 0 0;
  border-right: 1px solid rgba(0,0,0,0.06);
  min-width: 0;
  overflow: hidden;
}
html.dark .spk-v2-main { border-right-color: rgba(255,255,255,0.06); }
.spk-v2-sidebar { padding: 24px 0 0 24px; display: flex; flex-direction: column; gap: 16px; }

.spk-v2-sermon-header { margin-bottom: 12px; }
.spk-v2-section-title {
  font-family: var(--ff); font-size: 1.1rem; font-weight: 700;
  color: var(--text); margin: 0;
}

/* Sidebar boxes */
.spk-v2-sidebar-box {
  background: var(--bg2, #faf9f6); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px; padding: 14px 16px;
}
html.dark .spk-v2-sidebar-box { background: var(--bg2, #1e1e1e); border-color: rgba(255,255,255,0.06); }
.spk-v2-sidebar-label {
  font-family: var(--ff); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text3); margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.spk-v2-tag-list { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.spk-v2-tag-list small { opacity: 0.5; font-size: 0.8em; text-decoration: none; }
.spk-v2-tag-list a.topic-tag {
  display: inline-block; padding: 2px 0;
  font-family: var(--ff); font-size: 0.95rem; font-weight: 500;
  color: var(--olive); text-decoration: none;
  transition: color 0.15s;
}
.spk-v2-tag-list a.topic-tag .tag-name {
  text-decoration: underline; text-decoration-color: rgba(107,95,63,0.3);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s;
}
.spk-v2-tag-list a.topic-tag:hover .tag-name {
  text-decoration-color: rgba(107,95,63,0.7);
}
.spk-v2-tag-list a.topic-tag-bible {
  color: var(--text2);
}
html.dark .spk-v2-tag-list a.topic-tag {
  color: var(--accent);
}
html.dark .spk-v2-tag-list a.topic-tag .tag-name {
  text-decoration-color: rgba(212,175,55,0.3);
}
html.dark .spk-v2-tag-list a.topic-tag:hover .tag-name {
  text-decoration-color: rgba(212,175,55,0.6);
}
html.dark .spk-v2-tag-list a.topic-tag-bible {
  color: var(--text3);
}

/* ── Image Carousel ── */
.spk-carousel-section {
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
html.dark .spk-carousel-section { border-bottom-color: rgba(255,255,255,0.06); }
.spk-carousel-label {
  font-family: var(--ff); font-size: 0.88rem; font-weight: 700;
  color: var(--text); margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.spk-carousel-count { font-weight: 400; color: var(--text3); font-size: 0.82rem; }

.spk-carousel-wrap {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
.spk-carousel-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
}
.spk-carousel-track {
  display: flex; gap: 12px;
  transition: transform 0.35s ease;
  width: max-content;
}
.spk-carousel-item {
  flex: 0 0 180px; text-align: center;
  min-width: 0;
}
.spk-carousel-img {
  width: 180px; height: 140px; object-fit: cover;
  border-radius: 8px; border: 1px solid rgba(0,0,0,0.08);
  cursor: pointer; transition: transform 0.15s;
}
html.dark .spk-carousel-img { border-color: rgba(255,255,255,0.08); }
.spk-carousel-img:hover { transform: scale(1.03); }
.spk-carousel-caption {
  font-family: var(--ff); font-size: 0.72rem;
  color: var(--text3); margin-top: 4px; display: block;
}
.spk-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-70%);
  z-index: 2; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid rgba(0,0,0,0.12);
  background: var(--card-bg); color: var(--text);
  font-size: 1.4rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.15s, opacity 0.15s;
}
html.dark .spk-carousel-arrow { background: #2a2a2a; border-color: rgba(255,255,255,0.1); }
.spk-carousel-arrow:hover { background: var(--olive); color: #fff; }
html.dark .spk-carousel-arrow:hover { background: var(--accent); color: #1a1a0e; }
.spk-carousel-prev { left: 4px; }
.spk-carousel-next { right: 4px; }

@media(max-width:960px){
  .spk-v2-columns { grid-template-columns: 1fr; }
  .spk-v2-main { padding: 20px 0 0; border-right: none; padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,0.06); }
  html.dark .spk-v2-main { border-bottom-color: rgba(255,255,255,0.06); }
  .spk-v2-sidebar { padding: 20px 0 0; }
  .spk-hero-card { padding: 20px; gap: 20px; }
  .spk-hero-img-wrap { width: 120px; height: 120px; }
  .spk-hero-name { font-size: 1.5rem; }
}
@media(max-width:600px){
  .spk-hero-card { flex-direction: column; align-items: center; text-align: center; padding: 16px; }
  .spk-hero-img-wrap { width: 120px; height: 120px; }
  .spk-hero-badges { justify-content: center; }
  .spk-v2-columns { padding: 0 14px; }
  .spk-carousel-item { flex: 0 0 140px; }
  .spk-carousel-img { width: 140px; height: 110px; }
}

/* ═══════════════════════════════════════════════════
   SERMON PAGE V2 — redesigned layout with media player
   ═══════════════════════════════════════════════════ */
.sermon-page-v2 {
  padding: 0 0 80px;
}

/* Breadcrumb */
.sermon-breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--ff); font-size: 0.82rem; color: var(--text3);
  padding: 16px 32px 12px; border-bottom: 1px solid rgba(0,0,0,0.04);
}
html.dark .sermon-breadcrumb { border-bottom-color: rgba(255,255,255,0.04); }
.sermon-breadcrumb a { color: var(--main); }
.sermon-breadcrumb a:hover { color: var(--olive); text-decoration: underline; }
.sermon-breadcrumb span { color: var(--text2); font-weight: 500; }
.sermon-breadcrumb svg { color: var(--text3); flex-shrink: 0; }

/* ═══ SHARED SIDEBAR CONTROLS (book + sermon pages) ═══ */
.book-sidebar-box {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg2, #faf9f6); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px; padding: 12px 16px;
}
html.dark .book-sidebar-box { background: var(--bg2, #1e1e1e); border-color: rgba(255,255,255,0.06); }
.book-sidebar-label {
  font-family: var(--ff, Verdana, Geneva, sans-serif);
  font-size: 0.92rem; color: var(--text3, #999); font-weight: 500;
}
.book-sidebar-btns { display: flex; gap: 4px; }
.book-sidebar-btn {
  font-family: var(--ff, Verdana, Geneva, sans-serif);
  font-size: 0.92rem; padding: 6px 14px;
  border-radius: 6px; border: 1px solid rgba(0,0,0,0.1);
  background: none; cursor: pointer; color: var(--text2, #666);
  transition: all 0.15s;
}
.book-sidebar-btn:hover { background: rgba(123,138,94,0.08); border-color: var(--olive, #6b5f3f); color: var(--olive, #6b5f3f); }
.book-sidebar-btn.active { background: var(--olive, #6b5f3f); color: #fff; border-color: var(--olive, #6b5f3f); }
html.dark .book-sidebar-btn { border-color: rgba(255,255,255,0.1); color: var(--text2, #aaa); }
html.dark .book-sidebar-btn:hover { background: rgba(212,175,55,0.1); border-color: var(--accent); color: var(--accent); }
html.dark .book-sidebar-btn.active { background: var(--accent, #d4af37); color: #1a1a0e; border-color: var(--accent); }
.book-stats-box { flex-direction: column; align-items: stretch; gap: 10px; }
.book-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.book-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px; border-radius: 8px; background: rgba(0,0,0,0.02);
}
html.dark .book-stat { background: rgba(255,255,255,0.03); }
.book-stat-val {
  font-family: var(--ff, Verdana, Geneva, sans-serif);
  font-size: 1.0rem; font-weight: 700; color: var(--olive, #6b5f3f);
}
html.dark .book-stat-val { color: var(--accent, #d4af37); }
.book-stat-key { font-size: 0.72rem; color: var(--text3, #999); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }

/* ═══ SI MEDIA PLAYER ═══ */
.si-player {
  background: var(--bg2, #faf9f6);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  margin: 16px 32px 0;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}
html.dark .si-player {
  background: var(--bg2, #1e1e1e);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 2px 16px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.15);
}

/* Video container */
.si-player-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
}
.si-player-video-wrap video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
/* YouTube iframe: crop top/bottom to hide YT native title bar & end-screen recs */
.si-player-video-wrap iframe {
  position: absolute;
  top: -60px; left: 0;
  width: 100%;
  height: calc(100% + 120px);
  border: 0;
  pointer-events: none;
}
#si-yt-container {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
}
/* Transparent overlay to catch clicks on video (since YT iframe has pointer-events:none) */
.si-video-click-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; cursor: pointer;
}
/* Let our overlaid controls receive clicks above the overlay */
.si-player[data-type="video"] .si-player-header,
.si-player[data-type="video"] .si-progress-area,
.si-player[data-type="video"] .si-controls {
  pointer-events: auto;
}

/* When player has video, overlay all controls on top */
.si-player[data-type="video"] {
  position: relative;
}
.si-player[data-type="video"] .si-player-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 12;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
  padding: 16px 24px 28px;
}
.si-player[data-type="video"] .si-player-header .si-player-title { color: #fff; }
.si-player[data-type="video"] .si-player-header .si-player-speaker { color: rgba(255,255,255,0.7); }
.si-player[data-type="video"] .si-player-body {
  position: absolute; bottom: 80px; left: 0; right: 0; z-index: 11;
  min-height: auto;
  pointer-events: none;
}
.si-player[data-type="video"] .si-player-captions {
  padding: 8px 20px;
  min-height: auto;
}
.si-player[data-type="video"] .si-caption-line {
  color: transparent;
  font-size: 1rem;
  min-height: 0;
}
.si-player[data-type="video"] .si-caption-line.si-caption-active {
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.55);
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
}
.si-player[data-type="video"] .si-progress-area {
  position: absolute; bottom: 52px; left: 0; right: 0; z-index: 12;
  padding: 0 16px;
  background: transparent;
}
.si-player[data-type="video"] .si-progress-area .si-time-current,
.si-player[data-type="video"] .si-progress-area .si-time-end { color: rgba(255,255,255,0.7); }
.si-player[data-type="video"] .si-controls {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 12;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  padding-top: 20px;
}
.si-player[data-type="video"] .si-controls .si-btn { color: rgba(255,255,255,0.85); }
.si-player[data-type="video"] .si-controls .si-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.si-player[data-type="video"] .si-controls .si-play-btn { background: rgba(255,255,255,0.15); color: #fff; }
.si-player[data-type="video"] .si-controls .si-play-btn:hover { background: rgba(255,255,255,0.25); }
.si-player[data-type="video"] .si-controls .si-vol-slider { background: rgba(255,255,255,0.2); }
.si-player[data-type="video"] .si-progress-track { background: rgba(255,255,255,0.2); }
.si-player[data-type="video"] .si-progress-fill { background: var(--accent, #d4af37); }
.si-player[data-type="video"] .si-progress-buffered { background: rgba(255,255,255,0.15); }

/* Player header: title + speaker */
.si-player-header {
  padding: 16px 24px 0;
}
.si-player-title {
  font-family: var(--ff, Verdana, Geneva, sans-serif);
  font-size: 1rem; font-weight: 700;
  color: var(--text, #1a1a18); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.dark .si-player-title { color: #fff; }
.si-player-speaker {
  font-family: var(--ff); font-size: 0.78rem;
  color: var(--text3, #999); margin-top: 2px;
}
html.dark .si-player-speaker { color: rgba(255,255,255,0.45); }

/* Player body: captions + search side by side */
.si-player-body {
  display: flex; position: relative;
  min-height: 120px;
}

/* Caption display area */
.si-player-captions {
  flex: 1; min-width: 0;
  padding: 16px 24px 12px;
  text-align: center;
  min-height: 100px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
}
.si-caption-line {
  font-family: var(--ff, Verdana, Geneva, sans-serif);
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(0,0,0,0.3);
  max-width: 600px;
  min-height: 1.6em;
}
html.dark .si-caption-line { color: rgba(255,255,255,0.35); }
.si-caption-line.si-caption-active {
  color: var(--text, #1a1a18);
  font-weight: 500;
}
html.dark .si-caption-line.si-caption-active { color: #fff; }

/* Search panel — overlays the right side INSIDE the player */
.si-search-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 300px;
  max-width: 45%;
  background: rgba(250,249,246,0.97);
  border-left: 1px solid rgba(0,0,0,0.1);
  display: flex; flex-direction: column;
  z-index: 20;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
html.dark .si-search-panel {
  background: rgba(30,30,30,0.97);
  border-left-color: rgba(255,255,255,0.1);
}
/* When search is open — slide in from the right */
.si-player.si-search-open .si-search-panel {
  transform: translateX(0);
}
/* Video mode: dark semi-transparent panel over the video */
.si-player[data-type="video"] .si-search-panel {
  background: rgba(15,15,15,0.92);
  border-left-color: rgba(255,255,255,0.1);
}
.si-player[data-type="video"] .si-search-panel .si-search-input {
  background: rgba(255,255,255,0.12); color: #fff;
}
.si-player[data-type="video"] .si-search-panel .si-search-input::placeholder { color: rgba(255,255,255,0.45); }
.si-player[data-type="video"] .si-search-panel .si-search-close { color: rgba(255,255,255,0.5); }
.si-player[data-type="video"] .si-search-panel .si-search-close:hover { color: #fff; }
.si-player[data-type="video"] .si-search-panel .si-search-cue-time { color: rgba(255,255,255,0.4); }
.si-player[data-type="video"] .si-search-panel .si-search-cue-text { color: rgba(255,255,255,0.85); }
.si-player[data-type="video"] .si-search-panel .si-search-cue { border-bottom-color: rgba(255,255,255,0.06); }
.si-player[data-type="video"] .si-search-panel .si-search-cue:hover { background: rgba(255,255,255,0.08); }
.si-player[data-type="video"] .si-search-panel .si-search-cue-active { background: rgba(212,175,55,0.15); }
.si-player[data-type="video"] .si-search-panel .si-search-results {
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.si-search-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}
html.dark .si-search-header { border-bottom-color: rgba(255,255,255,0.08); }
.si-search-input {
  flex: 1; background: rgba(0,0,0,0.06); border: none;
  border-radius: 6px; padding: 7px 12px;
  font-family: var(--ff); font-size: 0.82rem; color: var(--text);
  outline: none;
}
html.dark .si-search-input { background: rgba(255,255,255,0.1); color: #fff; }
.si-search-input::placeholder { color: rgba(0,0,0,0.4); }
html.dark .si-search-input::placeholder { color: rgba(255,255,255,0.4); }
.si-search-input:focus { background: rgba(0,0,0,0.1); }
html.dark .si-search-input:focus { background: rgba(255,255,255,0.15); }
.si-search-close {
  background: none; border: none; color: rgba(0,0,0,0.4);
  cursor: pointer; font-size: 1.2rem; padding: 2px 6px; line-height: 1;
}
html.dark .si-search-close { color: rgba(255,255,255,0.5); }
.si-search-close:hover { color: var(--text); }
html.dark .si-search-close:hover { color: #fff; }
.si-search-results {
  flex: 1; overflow-y: auto; padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
html.dark .si-search-results { scrollbar-color: rgba(255,255,255,0.2) transparent; }
.si-search-results::-webkit-scrollbar { width: 6px; }
.si-search-results::-webkit-scrollbar-track { background: transparent; }
.si-search-results::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
.si-search-results::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
html.dark .si-search-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
html.dark .si-search-results::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }
.si-search-cue {
  display: flex; gap: 10px; padding: 8px 12px;
  cursor: pointer; transition: background 0.12s;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
html.dark .si-search-cue { border-bottom-color: rgba(255,255,255,0.04); }
.si-search-cue:hover { background: rgba(0,0,0,0.04); }
html.dark .si-search-cue:hover { background: rgba(255,255,255,0.06); }
.si-search-cue.si-search-cue-active { background: rgba(212,175,55,0.15); }
.si-search-cue-time {
  font-family: var(--ff); font-size: 0.72rem; color: rgba(0,0,0,0.4);
  white-space: nowrap; min-width: 40px; padding-top: 2px;
}
html.dark .si-search-cue-time { color: rgba(255,255,255,0.4); }
.si-search-cue-text {
  font-family: var(--ff); font-size: 0.82rem; color: var(--text, #1a1a18);
  line-height: 1.45;
}
html.dark .si-search-cue-text { color: rgba(255,255,255,0.85); }

/* Full-width progress bar */
.si-progress-bar {
  height: 20px;
  display: flex; align-items: center;
  cursor: pointer;
  padding: 0 24px;
  position: relative;
}
.si-progress-bar:hover .si-progress-track { height: 6px; }
.si-progress-bar:hover .si-progress-thumb { opacity: 1; }
.si-progress-track {
  width: 100%; height: 4px;
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
  position: relative;
  overflow: visible;
  transition: height 0.1s;
}
html.dark .si-progress-track { background: rgba(255,255,255,0.15); }
.si-progress-buffered {
  position: absolute; top: 0; left: 0; height: 100%;
  background: rgba(0,0,0,0.06);
  border-radius: 3px; width: 0%;
  pointer-events: none;
}
html.dark .si-progress-buffered { background: rgba(255,255,255,0.1); }
.si-progress-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--accent, #d4af37);
  border-radius: 3px; width: 0%;
  pointer-events: none;
}
.si-progress-thumb {
  position: absolute; top: 50%; left: 0%;
  width: 14px; height: 14px;
  background: var(--accent, #d4af37);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

/* Controls bar */
.si-controls {
  display: flex; align-items: center;
  padding: 6px 20px 14px;
}
.si-controls-left {
  display: flex; align-items: center; gap: 8px; flex: 1;
}
.si-controls-center {
  display: flex; align-items: center; gap: 6px;
}
.si-controls-right {
  display: flex; align-items: center; gap: 6px; flex: 1;
  justify-content: flex-end;
}

/* Generic player button */
.si-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(0,0,0,0.55); display: flex;
  align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
  padding: 6px; border-radius: 6px;
  min-width: 34px; min-height: 34px;
  position: relative;
}
html.dark .si-btn { color: rgba(255,255,255,0.7); }
.si-btn:hover { color: var(--text); background: rgba(0,0,0,0.06); }
html.dark .si-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.si-btn svg { flex-shrink: 0; }

/* Accent button (CC active, etc) */
.si-btn-accent {
  background: var(--accent, #d4af37); color: #1a1a1a;
  font-family: var(--ff); font-size: 0.78rem; font-weight: 800;
  padding: 4px 8px; border-radius: 4px;
  letter-spacing: 0.02em;
}
.si-btn-accent:hover { background: #c9a432; color: #1a1a1a; }
.si-btn-accent.si-cc-off {
  background: rgba(0,0,0,0.08); color: rgba(0,0,0,0.5);
}
html.dark .si-btn-accent.si-cc-off { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.si-btn-accent.si-cc-off:hover { background: rgba(0,0,0,0.14); color: var(--text); }
html.dark .si-btn-accent.si-cc-off:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* Play/Pause — large golden circle */
.si-play-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent, #d4af37);
  color: #1a1a1a;
  flex-shrink: 0;
  min-width: 52px; min-height: 52px;
}
.si-play-btn:hover { background: #c9a432; color: #1a1a1a; }
.si-play-btn.si-playing { background: #b8972e; color: #1a1a1a; }

/* Progress area: bar + time row underneath */
.si-progress-area {
  padding: 0;
}
.si-time-row {
  display: flex; justify-content: space-between;
  padding: 2px 24px 0;
}
.si-time-current, .si-time-end {
  font-family: var(--ff); font-size: 0.72rem;
  color: rgba(0,0,0,0.45);
  white-space: nowrap;
}
html.dark .si-time-current, html.dark .si-time-end { color: rgba(255,255,255,0.45); }
/* Progress tooltip on hover */
.si-progress-tooltip {
  position: absolute; top: -28px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85); color: #fff;
  font-family: var(--ff); font-size: 0.72rem;
  padding: 3px 8px; border-radius: 4px;
  white-space: nowrap; pointer-events: none;
  display: none; z-index: 5;
}

/* Volume slider */
.si-vol-slider {
  width: 70px; height: 4px;
  -webkit-appearance: none; appearance: none;
  background: rgba(0,0,0,0.15);
  border-radius: 2px; outline: none;
  cursor: pointer;
}
html.dark .si-vol-slider { background: rgba(255,255,255,0.2); }
.si-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent, #d4af37);
  cursor: pointer;
}
.si-vol-slider::-moz-range-thumb {
  width: 12px; height: 12px; border: none;
  border-radius: 50%; background: var(--accent, #d4af37);
}

/* 3-dot more menu */
.si-more-wrap { position: relative; }
.si-more-menu {
  position: absolute; bottom: 100%; right: 0;
  margin-bottom: 8px; min-width: 220px;
  background: #fff; border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 30;
}
html.dark .si-more-menu { background: #2a2a28; border-color: rgba(255,255,255,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.si-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 16px;
  background: none; border: none; cursor: pointer;
  font-family: var(--ff); font-size: 0.82rem;
  color: var(--text, #1a1a18);
  text-decoration: none;
  transition: background 0.12s;
}
html.dark .si-menu-item { color: rgba(255,255,255,0.85); }
.si-menu-item:hover { background: rgba(0,0,0,0.04); }
html.dark .si-menu-item:hover { background: rgba(255,255,255,0.06); }
.si-menu-item svg { flex-shrink: 0; color: rgba(0,0,0,0.4); }
html.dark .si-menu-item svg { color: rgba(255,255,255,0.5); }
.si-menu-val {
  margin-left: auto; font-size: 0.75rem;
  color: rgba(0,0,0,0.4); font-weight: 600;
}
html.dark .si-menu-val { color: rgba(255,255,255,0.4); }

/* Share popover — centered overlay */
.si-share-popover {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 35; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3);
  border-radius: 12px;
}
.si-share-popover-inner {
  background: #fff; border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px; padding: 20px 24px; width: 480px; max-width: 90%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
html.dark .si-share-popover-inner { background: #2a2a28; border-color: rgba(255,255,255,0.12); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.si-share-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.si-share-popover-header h4 {
  font-family: var(--ff); font-size: 0.95rem; font-weight: 700;
  color: var(--text, #1a1a18); margin: 0;
}
html.dark .si-share-popover-header h4 { color: #fff; }
.si-share-popover-close {
  background: none; border: none; font-size: 1.4rem; line-height: 1;
  color: rgba(0,0,0,0.4); cursor: pointer; padding: 2px 6px;
}
html.dark .si-share-popover-close { color: rgba(255,255,255,0.4); }
.si-share-popover-close:hover { color: var(--text); }
html.dark .si-share-popover-close:hover { color: #fff; }
.si-share-actions {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.si-share-action-btn {
  display: flex; align-items: center; gap: 8px;
  flex: 1; padding: 9px 12px; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.03); color: var(--text, #1a1a18);
  font-family: var(--ff); font-size: 0.8rem;
  cursor: pointer; transition: background 0.12s;
  justify-content: center;
}
html.dark .si-share-action-btn { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.si-share-action-btn:hover { background: rgba(0,0,0,0.08); }
html.dark .si-share-action-btn:hover { background: rgba(255,255,255,0.12); }
.si-share-action-btn svg { flex-shrink: 0; color: rgba(0,0,0,0.4); }
html.dark .si-share-action-btn svg { color: rgba(255,255,255,0.5); }
/* Embed code section */
.si-share-embed-section { margin-bottom: 8px; }
.si-share-embed-label {
  font-family: var(--ff); font-size: 0.78rem; font-weight: 600;
  color: var(--text3, #999); margin-bottom: 6px; display: block;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.si-share-embed-box {
  background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px; padding: 12px 14px;
  max-height: 80px; overflow-y: auto;
  cursor: text; user-select: all;
}
html.dark .si-share-embed-box { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.08); }
.si-share-embed-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.76rem; line-height: 1.5;
  color: var(--text2, #666); word-break: break-all;
}
html.dark .si-share-embed-code { color: rgba(255,255,255,0.65); }
.si-share-feedback {
  text-align: center; padding: 8px 0 2px;
  font-family: var(--ff); font-size: 0.78rem;
  color: var(--accent, #d4af37); font-weight: 600;
}

/* ═══ TWO-COLUMN LAYOUT ═══ */
.sermon-v2-columns {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  padding: 0 32px;
}

/* Main content column */
.sermon-v2-main {
  padding: 28px 36px 0 0;
  border-right: 1px solid rgba(0,0,0,0.06);
}
html.dark .sermon-v2-main { border-right-color: rgba(255,255,255,0.06); }

/* Header with speaker photo */
.sermon-v2-header {
  display: flex; align-items: flex-start; gap: 18px;
  margin-bottom: 18px;
}
.sermon-v2-speaker-photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(0,0,0,0.06);
}
html.dark .sermon-v2-speaker-photo { border-color: rgba(255,255,255,0.1); }
.sermon-v2-header-text { flex: 1; min-width: 0; }

.sermon-v2-title {
  font-family: var(--ff);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 6px;
}

.sermon-v2-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--ff); font-size: 0.85rem; color: var(--text2);
}
.sermon-v2-speaker-name {
  color: var(--olive); font-weight: 600; text-decoration: none;
}
.sermon-v2-speaker-name:hover { text-decoration: underline; color: var(--main); }
html.dark .sermon-v2-speaker-name { color: var(--accent); }
.sermon-v2-sep { color: var(--text3); }
.sermon-v2-duration { display: inline-flex; align-items: center; gap: 3px; }
.sermon-v2-views { font-size: 0.82rem; }
.sermon-v2-type-badge {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(107,95,63,0.08); color: var(--olive);
}
html.dark .sermon-v2-type-badge { background: rgba(212,175,55,0.1); color: var(--accent); }

/* Tags row */
.sermon-v2-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 20px;
}

/* Description */
.sermon-v2-desc {
  font-family: var(--ff);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text2);
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
html.dark .sermon-v2-desc { color: var(--text2); border-bottom-color: rgba(255,255,255,0.06); }
.sermon-v2-desc p { margin: 0; }

/* Sermon Outline — full-width */
.sermon-v2-outline-list {
  font-family: var(--ff); font-size: 1.05rem; line-height: 1.85;
  color: var(--text); padding-left: 24px; margin: 0;
}
.sermon-v2-outline-list li { margin-bottom: 10px; }
.sermon-v2-outline-list li::marker { color: var(--olive); font-weight: 700; }
html.dark .sermon-v2-outline-list li::marker { color: var(--accent); }
.sermon-v2-outline-list li strong { font-size: 1.05rem; }
.sermon-v2-outline-list ul { padding-left: 20px; margin: 4px 0 0; list-style: disc; }
.sermon-v2-outline-list ul li { margin-bottom: 2px; font-size: 1rem; line-height: 1.7; }
.sermon-v2-outline-list ul li::marker { color: var(--muted); font-weight: 400; }

/* ═══ ONE-LINER SUMMARY — bold, same font size as body, inside desc above the line ═══ */
.sermon-v2-oneliner {
  font-family: var(--ff); font-size: 1.05rem; line-height: 1.85;
  color: var(--text); margin: 12px 0 0;
}

/* ═══ ENRICHMENT (outline + quotes + application, in main column) ═══ */
.sermon-v2-section-heading {
  font-family: var(--ff); font-size: 0.95rem; font-weight: 700;
  color: var(--text); margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.sermon-v2-outline-section {
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
html.dark .sermon-v2-outline-section { border-bottom-color: rgba(255,255,255,0.06); }
.sermon-v2-quotes-section {
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
html.dark .sermon-v2-quotes-section { border-bottom-color: rgba(255,255,255,0.06); }

/* Quotes — no green border-left */
.sermon-v2-quotes-list { display: flex; flex-direction: column; gap: 12px; }
.sermon-v2-quote {
  font-family: var(--ff); font-size: 1.05rem; line-height: 1.85;
  color: var(--text); margin: 0; padding: 0;
  border: none; background: none;
  font-style: italic;
}
.sermon-v2-quote-attr {
  display: block; font-style: normal; font-size: 0.88rem;
  color: var(--muted); margin-top: 2px; font-weight: 600;
}

/* ═══ APPLICATION POINTS ═══ */
.sermon-v2-application { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.06); }
html.dark .sermon-v2-application { border-bottom-color: rgba(255,255,255,0.06); }
.sermon-v2-application-title {
  font-family: var(--ff); font-size: 0.95rem; font-weight: 700;
  color: var(--text); margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.sermon-v2-application-list {
  font-family: var(--ff); font-size: 1.05rem; line-height: 1.85;
  color: var(--text); padding-left: 20px; margin: 0; list-style: disc;
}
.sermon-v2-application-list li { margin-bottom: 6px; }
.sermon-v2-application-list li::marker { color: var(--olive); }
html.dark .sermon-v2-application-list li::marker { color: var(--accent); }

/* ═══ TRANSCRIPT — always visible, bible-sized serif font ═══ */
.sermon-v2-transcript {
  margin-top: 8px;
}
.sermon-v2-transcript-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
html.dark .sermon-v2-transcript-header { border-bottom-color: rgba(255,255,255,0.06); }

.sermon-v2-transcript-title {
  font-family: var(--ff);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
  margin: 0;
}

/* Font size control */
.sermon-v2-font-controls {
  background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px; padding: 5px 10px;
  cursor: pointer; color: var(--text2);
  display: flex; align-items: center; gap: 4px;
  font-family: var(--ff); font-size: 0.72rem;
  transition: background 0.15s;
}
.sermon-v2-font-controls:hover { background: rgba(0,0,0,0.08); }
html.dark .sermon-v2-font-controls {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08);
  color: var(--text2);
}

/* Transcript body — Verdana by default, serif toggle available */
.sermon-v2-transcript-body {
  font-family: var(--ff);
  font-size: 1.05rem;
  line-height: 1.95;
  color: var(--text);
}
html.dark .sermon-v2-transcript-body { color: var(--text); }
.sermon-v2-transcript-body p {
  margin: 0 0 18px;
  text-indent: 0;
}
.sermon-v2-transcript-body p:last-child { margin-bottom: 0; }
.sermon-v2-transcript-body.font-serif {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.12rem; line-height: 2.05;
}

/* Font size variants */
.sermon-v2-transcript-body.si-font-small { font-size: 0.92rem; line-height: 1.8; }
.sermon-v2-transcript-body.si-font-normal { font-size: 1.05rem; line-height: 1.95; }
.sermon-v2-transcript-body.si-font-large { font-size: 1.2rem; line-height: 2.1; }
.sermon-v2-transcript-body.si-font-xlarge { font-size: 1.35rem; line-height: 2.15; }

/* ═══ SIDEBAR ═══ */
.sermon-v2-sidebar {
  padding: 28px 0 0 32px;
  display: flex; flex-direction: column; gap: 16px;
}

.sermon-v2-sidebar-section {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
html.dark .sermon-v2-sidebar-section { border-bottom-color: rgba(255,255,255,0.06); }

.sermon-v2-sidebar-label {
  font-family: var(--ff); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text3); margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}

.sermon-v2-tag-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}

/* Download buttons */
.sermon-v2-downloads {
  display: flex; flex-direction: column; gap: 6px;
}
.sermon-v2-dl-btn {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff); font-size: 0.92rem; font-weight: 500;
  padding: 8px 14px; border-radius: 8px;
  text-decoration: none;
  background: rgba(107,95,63,0.06); color: var(--olive);
  border: 1px solid rgba(107,95,63,0.1);
  transition: background 0.15s, border-color 0.15s;
}
.sermon-v2-dl-btn:hover {
  background: rgba(107,95,63,0.14);
  border-color: rgba(107,95,63,0.2);
}
html.dark .sermon-v2-dl-btn {
  background: rgba(212,175,55,0.06); color: var(--accent);
  border-color: rgba(212,175,55,0.1);
}
html.dark .sermon-v2-dl-btn:hover {
  background: rgba(212,175,55,0.14);
  border-color: rgba(212,175,55,0.2);
}
.sermon-v2-dl-mirror {
  font-size: 0.82rem; font-weight: 400;
  opacity: 0.7;
  padding: 6px 12px;
}
.sermon-v2-dl-mirror:hover { opacity: 1; }

/* Bio section — full text, no scrollbar */
.sermon-v2-sidebar .comm-bio-box { margin-top: 16px; }
.sermon-v2-sidebar .comm-bio-box-desc { max-height: none !important; overflow: visible !important; }

/* FAQ Section */
.sermon-v2-faq {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
html.dark .sermon-v2-faq { border-top-color: rgba(255,255,255,0.06); }
.sermon-v2-faq-title {
  font-family: var(--ff); font-size: 0.95rem; font-weight: 700;
  color: var(--text); margin: 0 0 16px;
  display: flex; align-items: center; gap: 8px;
}
.sermon-v2-faq-list { display: flex; flex-direction: column; gap: 16px; }
.sermon-v2-faq-item {
  background: var(--bg2, #faf9f6); border: 1px solid rgba(0,0,0,0.05);
  border-radius: 10px; padding: 14px 18px;
}
html.dark .sermon-v2-faq-item { background: var(--bg2, #1e1e1e); border-color: rgba(255,255,255,0.05); }
.sermon-v2-faq-q {
  font-family: var(--ff); font-size: 1.05rem; font-weight: 700;
  color: var(--text); margin-bottom: 6px;
}
.sermon-v2-faq-a {
  font-family: var(--ff); font-size: 1.05rem; line-height: 1.85;
  color: var(--text2);
}

/* Fullscreen player — title at top, spacer grows, captions + controls at bottom */
.si-player.si-fullscreen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000; border-radius: 0; margin: 0; border: none;
  display: flex; flex-direction: column; justify-content: flex-start;
  background: #1a1a18;
}
.si-player.si-fullscreen .si-player-header {
  flex-shrink: 0; padding: 20px 32px 0;
}
.si-player.si-fullscreen .si-player-title { font-size: 1.2rem; color: #fff; }
.si-player.si-fullscreen .si-player-speaker { color: rgba(255,255,255,0.45); }
.si-player.si-fullscreen .si-player-body { flex: 1; min-height: 0; }
.si-player.si-fullscreen .si-player-captions {
  flex: none; min-height: auto;
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 24px 8px;
  will-change: contents;
}
.si-player.si-fullscreen .si-caption-line {
  font-size: 1.4rem; transition: none; will-change: contents; color: rgba(255,255,255,0.35);
}
.si-player.si-fullscreen .si-caption-line.si-caption-active { font-size: 1.4rem; transition: none; color: #fff; }
.si-player.si-fullscreen .si-progress-area { flex-shrink: 0; }
.si-player.si-fullscreen .si-progress-track { background: rgba(255,255,255,0.15); }
.si-player.si-fullscreen .si-progress-buffered { background: rgba(255,255,255,0.1); }
.si-player.si-fullscreen .si-controls { flex-shrink: 0; }
.si-player.si-fullscreen .si-btn { color: rgba(255,255,255,0.7); }
.si-player.si-fullscreen .si-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.si-player.si-fullscreen .si-time-current,
.si-player.si-fullscreen .si-time-end { color: rgba(255,255,255,0.45); }
.si-player.si-fullscreen .si-vol-slider { background: rgba(255,255,255,0.2); }
.si-player.si-fullscreen .si-player-video-wrap { flex: 1; padding-bottom: 0; height: auto; }

/* Keyboard shortcuts in sidebar */
.sermon-v2-shortcuts-list {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
}
.sermon-v2-shortcut {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--ff); font-size: 0.9rem; color: var(--text2);
}
.sermon-v2-shortcut kbd {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1);
  font-family: var(--ff); font-size: 0.82rem; font-weight: 600;
  color: var(--text); min-width: 22px; text-align: center;
}
html.dark .sermon-v2-shortcut kbd {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: var(--text);
}
.sermon-v2-shortcut span {
  color: var(--text3); font-size: 0.86rem;
}
.sermon-v2-shortcut-row {
  display: flex; gap: 16px;
}

/* Bubble-style tags */
.topic-tag-bubble {
  background: rgba(107,95,63,0.08);
  border: 1px solid rgba(107,95,63,0.15);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.topic-tag-bubble:hover {
  background: rgba(107,95,63,0.16);
  border-color: rgba(107,95,63,0.25);
}
html.dark .topic-tag-bubble {
  background: rgba(212,175,55,0.08);
  border-color: rgba(212,175,55,0.15);
}
html.dark .topic-tag-bubble:hover {
  background: rgba(212,175,55,0.16);
  border-color: rgba(212,175,55,0.25);
}

/* Scripture auto-links in body text */
a.scripture-link {
  color: var(--olive, #6b5f3f);
  text-decoration: underline;
  text-decoration-color: rgba(107,95,63,0.3);
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
a.scripture-link:hover {
  color: var(--main, #707035);
  text-decoration-color: var(--main, #707035);
}
html.dark a.scripture-link {
  color: var(--accent, #d4af37);
  text-decoration-color: rgba(212,175,55,0.3);
}
html.dark a.scripture-link:hover {
  color: #e8c844;
  text-decoration-color: #e8c844;
}

/* ═══ TRANSCRIPT HIGHLIGHTING ═══ */
/* Gold left bar on active paragraph */
.sermon-v2-transcript-body p {
  padding-left: 14px; border-left: 3px solid transparent;
  margin-left: -17px; transition: border-color 0.2s;
}
.sermon-v2-transcript-body p.si-cue-active {
  border-left-color: var(--accent, #d4af37);
}
html.dark .sermon-v2-transcript-body p.si-cue-active {
  border-left-color: var(--accent, #d4af37);
}
/* Faint bar on paragraph hover (when browsing transcript) */
.sermon-v2-transcript-body p:hover {
  border-left-color: rgba(212,175,55,0.25);
}
html.dark .sermon-v2-transcript-body p:hover {
  border-left-color: rgba(212,175,55,0.3);
}
/* Active overrides hover */
.sermon-v2-transcript-body p.si-cue-active:hover {
  border-left-color: var(--accent, #d4af37);
}

/* Clickable cue spans */
.si-cue-span {
  cursor: pointer; border-radius: 2px;
  transition: background 0.15s;
}
.si-cue-span:hover {
  background: rgba(212,175,55,0.12);
}

/* Yellow highlight on the currently playing phrase */
.si-cue-span.si-cue-highlight {
  background: rgba(212,175,55,0.3);
  text-decoration: underline;
  text-decoration-color: rgba(160,130,30,0.8);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}
html.dark .si-cue-span.si-cue-highlight {
  background: rgba(212,175,55,0.25);
  text-decoration-color: rgba(212,175,55,0.7);
  text-decoration-thickness: 2.5px;
}

/* ═══ ENRICHMENT BLOCK — 2-column grid: outline left, quotes+application right ═══ */
.sermon-v2-enrichment-block {
  margin: 32px 0 24px; padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
html.dark .sermon-v2-enrichment-block { border-top-color: rgba(255,255,255,0.06); }
.sermon-v2-enrichment-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.sermon-v2-enrichment-left, .sermon-v2-enrichment-right { min-width: 0; }
@media(max-width:768px){
  .sermon-v2-enrichment-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ═══ STICKY BOTTOM PLAYER BAR — single-row, full-width ═══ */
.si-sticky-player {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #1a1a18; border-top: 1px solid rgba(255,255,255,0.12);
  z-index: 9990; display: none;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.si-sticky-content {
  max-width: var(--w, 1280px); margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px;
}
.si-sticky-photo {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.12);
}
.si-sticky-info {
  flex-shrink: 0; min-width: 0; max-width: 200px;
}
.si-sticky-title {
  font-family: var(--ff); font-size: 0.85rem; font-weight: 700;
  color: rgba(255,255,255,0.9); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.si-sticky-speaker {
  font-family: var(--ff); font-size: 0.74rem;
  color: rgba(255,255,255,0.45); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.si-sticky-play {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent, #d4af37); color: #1a1a1a;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.15s;
}
.si-sticky-play:hover { background: #c9a432; }
.si-sticky-time {
  font-family: var(--ff); font-size: 0.75rem;
  color: rgba(255,255,255,0.5); white-space: nowrap; flex-shrink: 0;
  min-width: 36px; text-align: center;
}
.si-sticky-time-end { color: rgba(255,255,255,0.35); }
.si-sticky-progress {
  flex: 1; height: 6px; background: rgba(255,255,255,0.12);
  border-radius: 3px; cursor: pointer; position: relative;
  transition: height 0.1s; min-width: 80px;
}
.si-sticky-progress:hover { height: 10px; }
.si-sticky-progress-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--accent, #d4af37); border-radius: 3px; width: 0%;
  pointer-events: none;
}
.si-sticky-progress-thumb {
  position: absolute; top: 50%; width: 12px; height: 12px;
  background: #fff; border-radius: 50%; transform: translate(-50%, -50%);
  left: 0%; pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  opacity: 0; transition: opacity 0.15s;
}
.si-sticky-progress:hover .si-sticky-progress-thumb { opacity: 1; }
.si-sticky-speed {
  font-family: var(--ff); font-size: 0.75rem; font-weight: 700;
  color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08);
  border: none; border-radius: 4px; padding: 4px 10px;
  cursor: pointer; flex-shrink: 0; transition: background 0.15s;
}
.si-sticky-speed:hover { background: rgba(255,255,255,0.15); }
.si-sticky-close {
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 1.5rem; cursor: pointer; padding: 0 2px 0 8px; flex-shrink: 0;
  line-height: 1; transition: color 0.15s; margin-left: auto;
}
.si-sticky-close:hover { color: rgba(255,255,255,0.85); }

@media(max-width:600px){
  .si-sticky-content { padding: 8px 12px; gap: 8px; }
  .si-sticky-photo { width: 34px; height: 34px; }
  .si-sticky-play { width: 30px; height: 30px; }
  .si-sticky-info { max-width: 100px; }
  .si-sticky-title { font-size: 0.78rem; }
  .si-sticky-speaker { display: none; }
  .si-sticky-time { font-size: 0.68rem; min-width: 28px; }
  .si-search-panel { width: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10001; max-height: none; }
  .si-share-popover-inner { width: 240px; }
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:960px){
  .sermon-v2-columns {
    grid-template-columns: 1fr;
  }
  .sermon-v2-main {
    padding: 24px 0 0;
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-bottom: 32px;
  }
  html.dark .sermon-v2-main { border-bottom-color: rgba(255,255,255,0.06); }
  .sermon-v2-sidebar {
    padding: 24px 0 0;
  }
  .si-player { margin: 16px 20px 0; }
  #si-search-toggle { display: none !important; }
  #si-cc { display: none !important; }
  .si-search-panel { display: none !important; }
  .si-player-body { display: none; }
  .si-player[data-type="video"] .si-player-body { display: none; }
  .sermon-v2-columns { padding: 0 20px; }
  .sermon-breadcrumb { padding: 16px 20px 12px; }
}
@media(max-width:600px){
  .si-player { margin: 12px 12px 0; border-radius: 8px; }
  .si-controls { gap: 6px; padding: 8px 14px 12px; }
  .si-play-btn { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
  .si-vol-slider { display: none; }
  .si-controls-left, .si-controls-right { flex: 1; }
  .si-controls-center { flex: 0; }
  .sermon-v2-columns { padding: 0 14px; }
  .sermon-breadcrumb { padding: 12px 14px 10px; }
  .sermon-v2-title { font-size: 1.3rem; }
  .sermon-v2-speaker-photo { width: 50px; height: 50px; }
  .sermon-v2-transcript-body { font-size: 1rem; line-height: 1.9; }
}

/* ═══════════════════════════════════════════════════════════
   HYMNS SECTION
   ═══════════════════════════════════════════════════════════ */

/* Intro paragraph */
.hymns-intro {
  font-size: 1rem; line-height: 1.7; color: var(--text2);
  max-width: 680px; margin: 0 0 24px;
}

/* Category chips */
.hymn-categories {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 0 8px;
}
.hymn-cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 20px;
  background: var(--bg2, #faf9f6);
  border: 1px solid rgba(0,0,0,0.08);
  text-decoration: none; color: var(--text);
  font-size: 0.88rem; font-weight: 400;
  transition: all 0.15s;
}
.hymn-cat-chip:hover {
  border-color: var(--olive, #908F51);
  background: #f0efe8;
}
.hymn-cat-count {
  font-size: 0.72rem; font-weight: 600;
  background: #d4d4d4; color: #1a1a1a;
  padding: 1px 7px; border-radius: 10px;
}

/* Browse All chip */
.hymn-cat-browse-all {
  background: var(--olive, #908F51); color: #fff;
  border-color: var(--olive, #908F51);
}
.hymn-cat-browse-all .hymn-cat-name { color: #fff; }
.hymn-cat-browse-all:hover {
  background: #7a7944; border-color: #7a7944;
}
html.dark .hymn-cat-browse-all {
  background: var(--accent); border-color: var(--accent); color: #1a1a1a;
}
html.dark .hymn-cat-browse-all .hymn-cat-name { color: #1a1a1a; }

/* Hymn list rows */
.hymn-row {
  display: flex; align-items: center; gap: 12px;
}
.hymn-row-title {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Category page styles */
.hymn-cat-header { margin-bottom: 20px; }
.hymn-cat-desc {
  font-size: 1rem; line-height: 1.7; color: var(--text2);
  max-width: 680px; margin: 12px 0 0;
}
.hymn-cat-verses {
  font-size: 0.92rem; color: var(--text3); margin: 12px 0 0;
}
.hymn-cat-verses-label {
  font-weight: 600; color: var(--olive, #908F51);
}
.hymn-cat-verse {
  color: var(--text2);
}
html.dark .hymn-cat-verses-label { color: var(--accent); }

/* ─── Hymn Detail Page ──────────────────────────────────── */

.hymn-detail-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}

/* Header with optional author circle image */
.hymn-header {
  display: flex; align-items: flex-start; gap: 20px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--gray, #DEE2E6);
  margin-bottom: 32px;
}
.hymn-author-img-wrap {
  flex-shrink: 0;
  width: 80px; height: 80px;
  border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.hymn-author-img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hymn-header-info {
  flex: 1; min-width: 0;
}
.hymn-title {
  font-size: 1.6rem; font-weight: 700; line-height: 1.3;
  color: var(--text); margin: 0 0 6px;
}
.hymn-author-line {
  margin-bottom: 10px;
}
.hymn-author-link, .hymn-author-name {
  font-size: 1rem; color: var(--olive, #908F51);
  font-weight: 500; text-decoration: none;
}
.hymn-author-link:hover {
  text-decoration: underline;
}
.hymn-meta-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.hymn-badge {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 10px; border-radius: 4px;
  background: #e8e7df; color: #555;
  text-decoration: none;
}
.hymn-badge-cat {
  background: var(--olive, #908F51); color: #fff;
}
.hymn-badge-cat:hover {
  opacity: 0.85;
  text-decoration: none;
  color: #fff;
}
a.hymn-badge {
  text-decoration: none;
}
a.hymn-badge:hover {
  text-decoration: none;
  color: inherit;
}

/* Hymn body — large readable text */
.hymn-body {
  padding: 0;
}
.hymn-stanza {
  margin-bottom: 28px;
}
.hymn-stanza-label {
  font-size: 0.88rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--olive, #908F51);
  margin-bottom: 8px;
}
.hymn-stanza-text {
  font-size: 1.25rem;
  line-height: 1.85;
  color: var(--text);
  font-family: Georgia, 'Times New Roman', serif;
  padding-left: 16px;
  border-left: 3px solid rgba(0,0,0,0.06);
}

/* Navigation */
.hymn-nav {
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid var(--gray, #DEE2E6);
}
.hymn-back-link {
  font-size: 0.92rem; color: var(--olive);
  text-decoration: none;
}
.hymn-back-link:hover {
  text-decoration: underline;
}

/* ─── Dark mode overrides ───────────────────────────────── */
html.dark .hymn-cat-chip {
  background: var(--bg2, #1e1e1e);
  border-color: rgba(255,255,255,0.08);
  color: #ddd;
}
html.dark .hymn-cat-chip:hover {
  background: #2a2a2a;
  border-color: var(--olive);
}
html.dark .hymn-cat-count {
  background: #525252; color: #fff;
}
html.dark .hymn-author-img-wrap {
  border-color: rgba(255,255,255,0.1);
}
html.dark .hymn-stanza-text {
  color: #ddd;
  border-left-color: rgba(255,255,255,0.08);
}
html.dark .hymn-stanza-label {
  color: var(--accent, #D4AF37);
}
html.dark .hymn-badge {
  background: #3a3a3a; color: #ccc;
}
html.dark .hymn-badge-cat {
  background: var(--olive); color: #fff;
}

/* ─── Responsive ────────────────────────────────────────── */
@media(max-width:768px){
  .hymn-detail-page { padding: 16px 16px 40px; }
  .hymn-header { flex-direction: column; align-items: center; text-align: center; }
  .hymn-meta-badges { justify-content: center; }
  .hymn-stanza-text { font-size: 1.12rem; line-height: 1.8; padding-left: 12px; }
  .hymn-title { font-size: 1.35rem; }
  .hymn-categories { gap: 6px; }
  .hymn-cat-chip { font-size: 0.82rem; padding: 5px 10px; }
}
@media(max-width:480px){
  .hymn-stanza-text { font-size: 1.05rem; padding-left: 10px; }
  .hymn-author-img-wrap { width: 64px; height: 64px; }
}

/* ═══ BIBLE TOPICS ═══════════════════════════════════════════════════ */

/* Single page */
.bible-topic-page { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.bt-main-content { min-width: 0; }

/* Verse cards */
.bt-verses { display: flex; flex-direction: column; gap: 16px; }
.bt-verse-card {
  padding: 20px 24px; background: var(--bg, #fff);
  border: 1px solid rgba(0,0,0,0.06); border-radius: 10px;
  border-left: 4px solid var(--olive, #6b5f3f);
  transition: box-shadow 0.2s;
}
.bt-verse-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
html.dark .bt-verse-card {
  background: var(--bg2, #1e1e1e); border-color: rgba(255,255,255,0.06);
  border-left-color: var(--accent, #d4af37);
}
.bt-verse-ref {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.bt-verse-ref a {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.05rem; font-weight: 700; color: var(--olive, #6b5f3f);
  text-decoration: none;
}
.bt-verse-ref a:hover { text-decoration: underline; }
html.dark .bt-verse-ref a { color: var(--accent, #d4af37); }
.bt-verse-star { color: var(--olive, #6b5f3f); font-size: 0.85rem; }
html.dark .bt-verse-star { color: var(--accent, #d4af37); }
.bt-verse-text {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.16rem; line-height: 1.75; color: var(--text, #222);
}
html.dark .bt-verse-text { color: var(--text, #eee); }

/* Verse action buttons (copy, share) */
.bt-verse-actions {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.04);
}
html.dark .bt-verse-actions { border-top-color: rgba(255,255,255,0.06); }
.bt-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--text2, #777);
  background: var(--bg2, #f5f3ee); border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer; text-decoration: none; transition: all 0.15s;
  line-height: 1;
}
.bt-action-btn:hover {
  background: var(--olive, #6b5f3f); color: #fff;
  border-color: var(--olive, #6b5f3f);
}
.bt-action-btn:hover svg { stroke: #fff; fill: #fff; }
html.dark .bt-action-btn {
  background: var(--bg2, #2a2a2a); color: var(--text2, #999);
  border-color: rgba(255,255,255,0.08);
}
html.dark .bt-action-btn:hover {
  background: var(--accent, #d4af37); color: #1a1a0e;
  border-color: var(--accent, #d4af37);
}
.bt-copy-btn { font-family: inherit; }
.bt-btn-label { font-size: 0.78rem; }

/* Bottom spacer between last verse and footer */
.bt-bottom-spacer { height: 48px; }

/* Sidebar */
.bt-sidebar-section {
  margin-top: 20px; padding: 16px;
  background: var(--bg2, #faf9f6); border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
}
html.dark .bt-sidebar-section { background: var(--bg2, #1e1e1e); border-color: rgba(255,255,255,0.06); }
.bt-sidebar-heading {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.95rem; font-weight: 700; color: var(--text, #222);
  margin: 0 0 12px 0;
}
html.dark .bt-sidebar-heading { color: var(--text, #eee); }
.bt-sermon-list { display: flex; flex-direction: column; gap: 10px; }
.bt-browse-link {
  font-size: 0.9rem; font-weight: 600; color: var(--olive, #6b5f3f);
  text-decoration: none;
}
.bt-browse-link:hover { text-decoration: underline; }
html.dark .bt-browse-link { color: var(--accent, #d4af37); }

/* Score bar */
.bt-score-section { margin-bottom: 24px; }
.bt-score-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.85rem; color: var(--text2, #666); margin-bottom: 6px;
}
.bt-score-value { font-weight: 700; color: var(--olive, #6b5f3f); }
html.dark .bt-score-value { color: var(--accent, #d4af37); }
.bt-score-track {
  height: 8px; background: rgba(0,0,0,0.06); border-radius: 4px; overflow: hidden;
}
html.dark .bt-score-track { background: rgba(255,255,255,0.08); }
.bt-score-fill {
  height: 100%; border-radius: 4px; transition: width 0.4s;
  background: linear-gradient(90deg, var(--olive, #6b5f3f), #8a7d5a);
}
html.dark .bt-score-fill { background: linear-gradient(90deg, var(--accent, #d4af37), #e8c84a); }

/* ─── List page ─────────────────────────────────────────── */
.bible-topic-list-page { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.bt-list-search { margin-bottom: 16px; }

/* A-Z nav */
.bt-alpha-link {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px;
  font-size: 0.85rem; font-weight: 700; text-decoration: none;
  color: var(--text, #333); background: var(--bg2, #f5f3ee);
  transition: all 0.15s;
}
.bt-alpha-link:hover { background: var(--olive, #6b5f3f); color: #fff; }
html.dark .bt-alpha-link { color: var(--text, #ddd); background: var(--bg2, #2a2a2a); }
html.dark .bt-alpha-link:hover { background: var(--accent, #d4af37); color: #1a1a0e; }

/* Topic card grid */
.bt-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; margin-bottom: 8px;
}
.bt-topic-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; text-decoration: none; color: var(--text, #222);
  background: var(--bg, #fff); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px; transition: all 0.2s;
}
.bt-topic-card:hover {
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
html.dark .bt-topic-card { background: var(--bg2, #1e1e1e); border-color: rgba(255,255,255,0.06); color: var(--text, #eee); }
html.dark .bt-topic-card:hover { border-color: rgba(255,255,255,0.15); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }

.bt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bt-card-title {
  font-family: var(--ff, Verdana, Geneva, sans-serif);
  font-size: 1.05rem; font-weight: 700; line-height: 1.3;
}
.bt-card-badge {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 4px;
  background: var(--olive, #6b5f3f); color: #fff;
  white-space: nowrap;
}
html.dark .bt-card-badge { background: var(--accent, #d4af37); color: #1a1a0e; }
.bt-card-desc {
  font-size: 0.88rem; color: var(--text2, #666); line-height: 1.5;
  margin: 0; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
html.dark .bt-card-desc { color: var(--text2, #999); }
.bt-card-sermons {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; color: #2e7d32; font-weight: 600;
}
.bt-card-sermons svg { stroke: #2e7d32; }
html.dark .bt-card-sermons { color: #66bb6a; }
html.dark .bt-card-sermons svg { stroke: #66bb6a; }

/* View all link under card grid */
.bt-view-all-link {
  display: inline-block; margin: 4px 0 20px;
  font-size: 0.9rem; font-weight: 600; color: var(--olive, #6b5f3f);
  text-decoration: none;
}
.bt-view-all-link:hover { text-decoration: underline; }
html.dark .bt-view-all-link { color: var(--accent, #d4af37); }

@media(max-width:700px){
  .bt-card-grid { grid-template-columns: 1fr; }
  .bt-verse-card { padding: 14px 16px; }
  .bt-verse-text { font-size: 1.05rem; }
  .bt-verse-ref a { font-size: 0.95rem; }
  .bt-verse-actions { flex-wrap: wrap; }
  .bt-alpha-link { width: 28px; height: 28px; font-size: 0.8rem; }
}

/* ═══════════════════════════════════════════════════
   Reference Tools Page
   ═══════════════════════════════════════════════════ */
.ref-page { padding: 28px 24px 60px; }
.ref-intro { color: var(--text2); font-size: 1.05rem; margin: -8px 0 28px; line-height: 1.6; }

.ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.ref-section-label {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7b6b2f;
  background: #fdf6e0;
  padding: 5px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  margin-top: 4px;
}
.ref-section-label-extra {
  color: #6b6b6b;
  background: #f0f0ee;
  margin-top: 28px;
}

.ref-card {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 24px 26px; text-decoration: none; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--gray2);
  border-radius: 14px; transition: all 0.2s;
}
.ref-card:hover {
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.ref-card-icon {
  flex-shrink: 0; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: #f5f3ed; color: var(--olive);
}
.ref-card-icon-devo { background: #eef4e8; color: #5c6b2f; }
.ref-card-icon-topics { background: #f0ede4; color: #8b7b3e; }
.ref-card-icon-comm { background: #e8eef4; color: #3e5c8b; }
.ref-card-icon-parallel { background: #f4ece8; color: #8b5c3e; }
.ref-card-icon-hymns { background: #eee8f4; color: #5c3e8b; }
.ref-card-icon-music { background: #f0e8f4; color: #6b3e8b; }
.ref-card-icon-books { background: #e8f4f0; color: #3e8b6b; }
.ref-card-icon-speakers { background: #f5f0e4; color: #6b5c2f; }
.ref-card-icon-sermons { background: #f4f0e4; color: #7b6b2f; }

.ref-card.ref-card-main {
  background: #fdfaf2;
  border-color: rgba(177,152,112,0.25);
}
.ref-card.ref-card-main:hover {
  border-color: rgba(177,152,112,0.4);
  box-shadow: 0 4px 20px rgba(177,152,112,0.1);
}

.ref-card-body { flex: 1; min-width: 0; }
.ref-card-title { display: block; font-size: 1.15rem; font-weight: 700; color: var(--main); margin-bottom: 6px; }
.ref-card-desc { display: block; font-size: 0.9rem; color: var(--text2); line-height: 1.55; margin-bottom: 10px; }
.ref-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ref-card-link { display: block; font-size: 0.88rem; color: var(--olive); font-weight: 600; }
.ref-card:hover .ref-card-link { text-decoration: underline; }

@media (max-width: 768px) {
  .ref-grid { grid-template-columns: 1fr; }
  .ref-card { padding: 18px 20px; }
}

/* ═══════════════════════════════════════════════════
   Featured Hero Cards (shared: commentary, devotionals, books)
   ═══════════════════════════════════════════════════ */
.books-featured-new {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 28px;
}
.book-feat-hero {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 26px 30px; text-decoration: none; color: var(--text);
  background: var(--bg2, #faf9f6);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px; transition: all 0.2s;
}
.book-feat-hero:hover {
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
html.dark .book-feat-hero { background: var(--bg2, #1e1e1e); border-color: rgba(255,255,255,0.06); color: var(--text); }
html.dark .book-feat-hero:hover { border-color: rgba(255,255,255,0.15); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.book-feat-hero-img-wrap {
  flex-shrink: 0; width: 125px; height: 125px;
  border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
html.dark .book-feat-hero-img-wrap { border-color: rgba(255,255,255,0.08); }
.book-feat-hero-img { width: 100%; height: 100%; object-fit: cover; }
.book-feat-hero-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.book-feat-hero-title {
  font-family: var(--ff, Verdana, Geneva, sans-serif);
  font-size: 1.4rem; font-weight: 700; line-height: 1.25;
  color: var(--text, #222);
}
html.dark .book-feat-hero-title { color: var(--text, #eee); }
.book-feat-hero-author { font-size: 0.98rem; color: var(--olive, #6b5f3f); font-weight: 500; }
html.dark .book-feat-hero-author { color: var(--accent, #d4af37); }
.book-feat-hero-desc { font-size: 0.92rem; color: var(--text2, #666); line-height: 1.55; }
html.dark .book-feat-hero-desc { color: var(--text2, #999); }
.book-feat-hero-badges { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.book-feat-hero-badge {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 4px;
  background: var(--olive, #6b5f3f); color: #fff;
}
html.dark .book-feat-hero-badge { background: var(--accent, #d4af37); color: #1a1a0e; }
.book-feat-hero-badge-audio { display: flex; align-items: center; gap: 4px; }
.book-feat-hero-link { font-size: 0.95rem; font-weight: 600; color: var(--olive, #6b5f3f); margin-top: 4px; }
html.dark .book-feat-hero-link { color: var(--accent, #d4af37); }
.book-feat-hero:hover .book-feat-hero-link { text-decoration: underline; }
@media(max-width:800px){ .books-featured-new { grid-template-columns: 1fr; } }
@media(max-width:500px){
  .book-feat-hero { flex-direction: column; align-items: center; text-align: center; padding: 18px; gap: 12px; }
  .book-feat-hero-badges { justify-content: center; }
  .book-feat-hero-link { text-align: center; }
}

/* ═══════════════════════════════════════════════════
   Devotionals List Page
   ═══════════════════════════════════════════════════ */
.dvlist-page { padding: 28px 24px 60px; }

/* Featured cards with author images */
.dvlist-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.dvlist-feat-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; text-decoration: none; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--gray2);
  border-radius: 12px; transition: all 0.2s;
}
.dvlist-feat-card:hover {
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 3px 16px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
.dvlist-feat-img {
  flex-shrink: 0; width: 56px; height: 56px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gray2);
}
.dvlist-feat-body { flex: 1; min-width: 0; }
.dvlist-feat-title { display: block; font-weight: 700; font-size: 0.98rem; color: var(--main); }
.dvlist-feat-author { display: block; font-size: 0.84rem; color: var(--text3); margin-top: 2px; }
.dvlist-feat-meta { display: block; font-size: 0.78rem; color: var(--text3); margin-top: 4px; }
.dvlist-feat-arrow { font-size: 1.2rem; color: var(--olive); flex-shrink: 0; }

/* Today's readings banner (green) */
.dvlist-today-banner {
  padding: 20px 24px; margin-bottom: 32px;
  background: #eef4e8; border: 1px solid #d4e4c4;
  border-radius: 12px;
}
html.dark .dvlist-today-banner { background: #2a3320; border-color: #3d4a2e; }
.dvlist-today-head {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.1rem; color: #3d5a1e;
  margin-bottom: 16px;
}
html.dark .dvlist-today-head { color: #b0c890; }
.dvlist-today-date { font-weight: 400; font-size: 0.95rem; color: #5c7a3e; }
.dvlist-today-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.dvlist-today-item {
  display: block; padding: 10px 14px; text-decoration: none;
  background: rgba(255,255,255,0.7); border-radius: 8px;
  border: 1px solid rgba(93,130,52,0.15); transition: all 0.15s;
}
html.dark .dvlist-today-item { background: rgba(255,255,255,0.05); border-color: rgba(176,200,144,0.15); }
.dvlist-today-item:hover { background: rgba(255,255,255,0.95); border-color: rgba(93,130,52,0.3); }
html.dark .dvlist-today-item:hover { background: rgba(255,255,255,0.08); }
.dvlist-today-item-title { display: block; font-weight: 600; font-size: 0.88rem; color: #3d5a1e; }
html.dark .dvlist-today-item-title { color: #c8e0a0; }
.dvlist-today-item-author { display: block; font-size: 0.78rem; color: #5c7a3e; margin-top: 2px; }
html.dark .dvlist-today-item-author { color: #8aaa68; }

/* All devotionals grid */
.dvlist-all-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dvlist-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; text-decoration: none; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--gray2);
  border-radius: 10px; transition: all 0.15s;
}
.dvlist-card:hover {
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.dvlist-card-img {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--gray2);
}
.dvlist-card-body { flex: 1; min-width: 0; }
.dvlist-card-title { display: block; font-weight: 600; font-size: 0.88rem; color: var(--main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvlist-card-author { display: block; font-size: 0.78rem; color: var(--text3); margin-top: 2px; }
.dvlist-card-count { flex-shrink: 0; font-size: 0.75rem; color: var(--text3); background: var(--gray2); padding: 2px 8px; border-radius: 10px; }
html.dark .dvlist-card-count { background: #333; }

@media (max-width: 900px) {
  .dvlist-all-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .dvlist-featured { grid-template-columns: 1fr; }
  .dvlist-all-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   Devotional Section Page (calendar/book view)
   ═══════════════════════════════════════════════════ */
.dvsec-page { padding: 28px 24px 60px; }

.dvsec-header {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 28px;
}
.dvsec-author-img {
  flex-shrink: 0; width: 80px; height: 80px;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--gray2);
}
.dvsec-header-text { flex: 1; }
.dvsec-title { font-size: 1.8rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.dvsec-author { font-size: 1.05rem; color: var(--text2); margin-bottom: 4px; }
.dvsec-count { font-size: 0.88rem; color: var(--text3); }

/* Today's reading highlight on section page */
.dvsec-today {
  background: #eef4e8; border: 1px solid #d4e4c4;
  border-radius: 12px; padding: 18px 22px; margin-bottom: 28px;
}
html.dark .dvsec-today { background: #2a3320; border-color: #3d4a2e; }
.dvsec-today-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 1rem; color: #3d5a1e;
  margin-bottom: 10px;
}
html.dark .dvsec-today-head { color: #b0c890; }
.dvsec-today-link {
  display: inline-block; padding: 10px 20px;
  background: #5d8234; color: #fff; font-weight: 600;
  font-size: 0.95rem; border-radius: 8px;
  text-decoration: none; transition: background 0.15s;
}
.dvsec-today-link:hover { background: #4a6929; }

/* Month nav pills */
.dvsec-month-nav {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 28px; padding-bottom: 16px;
  border-bottom: 1px solid var(--gray);
}
.dvsec-month-pill {
  padding: 6px 14px; font-size: 0.84rem; font-weight: 600;
  color: var(--text2); background: var(--card-bg);
  border: 1px solid var(--gray2); border-radius: 20px;
  text-decoration: none; transition: all 0.15s; cursor: pointer;
}
.dvsec-month-pill:hover { border-color: var(--olive); color: var(--olive); }
.dvsec-pill-active {
  background: var(--olive); color: #fff; border-color: var(--olive);
}

/* Calendar grid */
.dvsec-month-block { margin-bottom: 32px; }
.dvsec-month-heading {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--gray);
}
.dvsec-day-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
}
.dvsec-day-cell {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 0; text-decoration: none; color: var(--text2);
  background: var(--card-bg); border: 1px solid var(--gray2);
  border-radius: 8px; font-size: 0.92rem; font-weight: 600;
  transition: all 0.15s;
}
.dvsec-day-cell:hover { border-color: var(--olive); color: var(--olive); background: #f8f6f0; }
.dvsec-day-today {
  background: var(--olive) !important; color: #fff !important; border-color: var(--olive) !important;
}

.dvsec-footer {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid var(--gray); text-align: center;
}
.dvsec-back-link {
  font-size: 0.95rem; font-weight: 600; color: var(--olive);
  text-decoration: none;
}
.dvsec-back-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .dvsec-header { flex-direction: column; text-align: center; gap: 12px; }
  .dvsec-author-img { width: 64px; height: 64px; }
  .dvsec-title { font-size: 1.4rem; }
  .dvsec-day-grid { gap: 5px; }
  .dvsec-day-cell { padding: 10px 0; font-size: 0.84rem; }
}

/* ═══════════════════════════════════════════════════
   Devotional Day Page (individual reading)
   ═══════════════════════════════════════════════════ */
.dvday-page { padding: 20px 24px 60px; }

/* Reading body */
.dvday-content { font-family: Verdana, Geneva, sans-serif; font-size: 1.05rem; line-height: 1.85; color: var(--text, #222); }
html.dark .dvday-content { color: var(--text, #ddd); }
.dvday-body p { margin: 0 0 16px; }
.dvday-body em { font-style: italic; }
.dvday-body strong { font-weight: 700; }
.dvday-body .green-link { color: var(--olive); font-weight: 600; text-decoration: none; }
.dvday-body .green-link:hover { text-decoration: underline; }
.dvday-body blockquote {
  border-left: 3px solid var(--olive, #6b5f3f); padding: 8px 16px;
  margin: 16px 0; font-style: italic; background: rgba(107,95,63,.04);
}
html.dark .dvday-body blockquote { border-color: var(--accent, #d4af37); background: rgba(212,175,55,.05); }
.dvday-body h2, .dvday-body h3 { font-family: Verdana, Geneva, sans-serif; font-weight: 600; margin: 28px 0 10px; }

/* Mini calendar in sidebar */
.dvday-month-cal { margin-top: 16px; }
.dvday-cal-heading {
  font-family: Verdana, Geneva, sans-serif; font-size: .86rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; color: var(--text3, #999);
  margin: 0 0 8px;
}
.dvday-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.dvday-cal-cell {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0; font-size: .8rem; font-weight: 600;
  text-decoration: none; color: var(--text2, #555);
  background: var(--bg2, #f5f4f0); border: 1px solid rgba(0,0,0,.05);
  border-radius: 4px; transition: all .15s;
}
.dvday-cal-cell:hover { background: var(--olive, #6b5f3f); color: #fff; }
html.dark .dvday-cal-cell { color: var(--text2, #aaa); background: var(--bg2, #252525); border-color: rgba(255,255,255,.05); }
html.dark .dvday-cal-cell:hover { background: var(--accent, #d4af37); color: #1a1a1a; }
.dvday-cal-active {
  background: var(--olive, #6b5f3f) !important; color: #fff !important;
  border-color: var(--olive, #6b5f3f) !important;
}
html.dark .dvday-cal-active {
  background: var(--accent, #d4af37) !important; color: #1a1a1a !important;
  border-color: var(--accent, #d4af37) !important;
}

/* Jump to Reading in sidebar */
.dvday-jump { margin-top: 16px; }
.dvday-jump-heading {
  font-family: Verdana, Geneva, sans-serif; font-size: .86rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; color: var(--text3, #999);
  margin: 0 0 8px;
}
.dvday-jump-selects { display: flex; gap: 6px; }
.dvday-jump-select {
  flex: 1; padding: 7px 10px; font-size: .84rem;
  font-family: Verdana, Geneva, sans-serif;
  border: 1px solid var(--gray2, #ddd); border-radius: 6px;
  background: var(--card-bg, #fff); color: var(--text, #222);
  cursor: pointer; appearance: auto;
}
html.dark .dvday-jump-select { background: var(--bg2, #252525); color: var(--text, #ddd); border-color: #444; }
.dvday-jump-btn {
  padding: 7px 14px; font-size: .84rem; font-weight: 600;
  font-family: Verdana, Geneva, sans-serif;
  background: var(--olive, #6b5f3f); color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
  transition: background .15s;
}
.dvday-jump-btn:hover { background: #5a5035; }
html.dark .dvday-jump-btn { background: var(--accent, #d4af37); color: #1a1a1a; }
html.dark .dvday-jump-btn:hover { background: #c4a030; }

@media (max-width: 600px) {
  .dvday-page { padding: 16px 16px 48px; }
  .dvday-cal-grid { gap: 3px; }
  .dvday-cal-cell { padding: 5px 0; font-size: .75rem; }
  .dvday-jump-selects { flex-wrap: wrap; }
  .dvday-jump-select { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   BIBLE ENCYCLOPEDIAS — Term-centric Wikipedia-style layout
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared Layout ── */
.dict-page {
  max-width: var(--w, 1280px); margin: 0 auto;
  padding: 32px 24px 64px; font-family: var(--ff);
  overflow: hidden; box-sizing: border-box;
}
.dict-title {
  font-size: 2rem; font-weight: 800; color: var(--text);
  margin: 0 0 6px; line-height: 1.2;
}
.dict-description {
  font-size: 1.05rem; line-height: 1.75; color: var(--text);
  max-width: 720px; margin: 0 0 16px;
}

/* ── Hero Section (index page) ── */
.dict-hero { margin-bottom: 28px; }
.dict-hero-title {
  font-size: 2.4rem; font-weight: 800; color: var(--text);
  margin: 0 0 12px; line-height: 1.15;
}
.dict-hero-sub {
  font-size: 1.1rem; line-height: 1.8; color: var(--text);
  max-width: 720px; margin: 0 0 24px; opacity: 0.85;
}
.dict-hero-pills {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 4px;
}
.dict-hero-pill {
  font-size: 1rem; color: var(--muted); font-weight: 500;
  letter-spacing: 0.01em;
}
.dict-hero-pill-num {
  font-weight: 800; color: var(--olive, #556b2f);
  font-size: 1.15rem;
}
html.dark .dict-hero-pill-num { color: var(--accent); }
.dict-hero-pill-sep {
  color: var(--muted); opacity: 0.4; font-size: 1.1rem;
}

/* ── Section Headings ── */
.dict-section-heading {
  font-size: 1.25rem; font-weight: 700; color: var(--text);
  margin: 0 0 16px; padding-bottom: 8px;
  border-bottom: 2px solid var(--olive, #556b2f);
  display: inline-block;
}
html.dark .dict-section-heading { border-bottom-color: var(--accent); }

/* ── Featured Articles (index page) — 2 horizontal cards ── */
.dict-featured-section { margin-bottom: 40px; }
.dict-featured-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.dict-featured-hz {
  display: flex; gap: 16px; align-items: stretch;
  padding: 16px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08); text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--bg, #fff);
}
html.dark .dict-featured-hz { border-color: rgba(255,255,255,0.08); }
.dict-featured-hz:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.dict-featured-hz-img {
  flex-shrink: 0; width: 120px; border-radius: 6px; overflow: hidden;
}
.dict-featured-hz-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.dict-featured-hz-body {
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
}
.dict-featured-hz-term {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  margin: 0 0 6px; line-height: 1.2;
}
.dict-featured-hz-source {
  font-size: 0.78rem; color: var(--muted); line-height: 1.4;
  margin-bottom: 8px;
}
.dict-featured-hz-cta {
  font-size: 0.82rem; font-weight: 600; color: var(--olive, #556b2f);
}
html.dark .dict-featured-hz-cta { color: var(--accent); }

/* ── A-Z Navigation Bar ── */
.dict-alpha-nav {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 12px 0; margin-bottom: 24px;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dict-alpha-nav-sm { margin-bottom: 16px; }
html.dark .dict-alpha-nav { border-color: rgba(255,255,255,0.06); }
.dict-alpha-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 6px;
  font-size: 0.88rem; font-weight: 700; color: var(--text);
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.dict-alpha-link:hover { background: var(--accent); color: #fff; }
.dict-alpha-active { background: var(--olive, #556b2f); color: #fff; }
html.dark .dict-alpha-active { background: var(--accent); }

/* ── Search ── */
.dict-search-wrap { position: relative; margin-bottom: 28px; max-width: 520px; }
.dict-search-box {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 8px;
  padding: 10px 14px; background: var(--bg, #fff);
  transition: border-color 0.15s;
}
html.dark .dict-search-box { border-color: rgba(255,255,255,0.12); }
.dict-search-box:focus-within { border-color: var(--accent); }
.dict-search-icon { color: var(--muted); flex-shrink: 0; }
.dict-search-input {
  flex: 1; border: none; outline: none; background: none;
  font-family: var(--ff); font-size: 0.95rem; color: var(--text);
}
.dict-search-input::placeholder { color: var(--muted); }
.dict-search-kbd {
  font-family: var(--ff); font-size: 0.7rem; font-weight: 700;
  color: var(--muted); background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08); border-radius: 4px;
  padding: 2px 6px; flex-shrink: 0;
}
html.dark .dict-search-kbd { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.dict-search-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg, #fff); border: 1px solid rgba(0,0,0,0.12);
  border-radius: 0 0 8px 8px; max-height: 360px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); z-index: 100;
}
html.dark .dict-search-results { border-color: rgba(255,255,255,0.12); }
.dict-sr-item {
  display: block; padding: 10px 16px; font-size: 0.92rem;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.dict-sr-item:hover { background: rgba(0,0,0,0.02); }
html.dark .dict-sr-item:hover { background: rgba(255,255,255,0.03); }
.dict-sr-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 0.88rem; }

/* ── Letter Card Grid (index page) ── */
.dict-letter-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px; margin-bottom: 40px;
}
.dict-letter-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 12px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06); text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
html.dark .dict-letter-card { border-color: rgba(255,255,255,0.06); }
.dict-letter-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.dict-letter-big { font-size: 2rem; font-weight: 800; color: var(--olive, #556b2f); line-height: 1; }
html.dark .dict-letter-big { color: var(--accent); }
.dict-letter-count { font-size: 0.75rem; color: var(--muted); margin-top: 6px; }

/* ── Source Dictionary Cards (index page) ── */
.dict-sources-section { margin-top: 24px; }
.dict-sources-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dict-source-card {
  display: flex; gap: 16px; align-items: center;
  padding: 16px 20px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08); background: var(--bg, #fff);
}
html.dark .dict-source-card { border-color: rgba(255,255,255,0.08); }
.dict-source-icon {
  width: 44px; height: 44px; border-radius: 8px;
  background: rgba(85,107,47,0.08); color: var(--olive, #556b2f);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
html.dark .dict-source-icon { background: rgba(212,175,55,0.1); color: var(--accent); }
.dict-source-name { font-size: 1rem; font-weight: 600; color: var(--text); }
.dict-source-meta { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }

/* ── Letter Page ── */
.dict-letter-header { margin-bottom: 16px; }
.dict-letter-title {
  font-size: 2.5rem; font-weight: 800; color: var(--text);
  margin: 0; line-height: 1;
}
.dict-letter-subtitle {
  font-size: 0.88rem; color: var(--muted); margin-top: 4px; display: block;
}

/* ── Two-column: sidebar + content ── */
.dict-columns {
  display: grid; grid-template-columns: 240px 1fr; gap: 32px;
  align-items: start;
}
.dict-sidebar {
  position: sticky; top: 80px; max-height: calc(100vh - 100px);
  overflow-y: auto; border-right: 1px solid rgba(0,0,0,0.06);
  padding-right: 16px;
}
html.dark .dict-sidebar { border-right-color: rgba(255,255,255,0.06); }
.dict-toc-header {
  font-size: 0.82rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.dict-toc-input {
  width: 100%; border: 1px solid rgba(0,0,0,0.1); border-radius: 5px;
  padding: 6px 10px; font-size: 0.8rem; font-family: var(--ff);
  color: var(--text); background: var(--bg, #fff);
  margin-bottom: 8px; outline: none; box-sizing: border-box;
}
html.dark .dict-toc-input { border-color: rgba(255,255,255,0.1); }
.dict-toc-input:focus { border-color: var(--accent); }
.dict-toc-list { list-style: none; padding: 0; margin: 0; }
.dict-toc-list li { margin: 0; }
.dict-toc-link {
  display: block; padding: 4px 8px; font-size: 0.82rem;
  color: var(--text); text-decoration: none; border-radius: 4px;
  transition: background 0.1s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dict-toc-link:hover { background: rgba(0,0,0,0.03); }
html.dark .dict-toc-link:hover { background: rgba(255,255,255,0.04); }
.dict-toc-count { font-size: 0.72rem; color: var(--muted); font-weight: 400; }
.dict-main { min-width: 0; }

/* ── Term List Cards (letter page main area) ── */
.dict-term-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.dict-term-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.05); text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
html.dark .dict-term-card { border-color: rgba(255,255,255,0.05); }
.dict-term-card:hover { border-color: var(--accent); background: rgba(85,107,47,0.03); }
html.dark .dict-term-card:hover { background: rgba(212,175,55,0.05); }
.dict-term-name { font-size: 0.92rem; font-weight: 500; color: var(--text); }
.dict-term-sources { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }

/* ══════════════════════════════════════════════════
   TERM PAGE — Wikipedia-style article layout
   ══════════════════════════════════════════════════ */

/* Cite/share in right sidebar */
.dict-aside-cite { margin-top: 16px; }
.dict-aside-refs {
  margin-top: 16px; padding: 14px 16px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08); background: var(--bg, #fff);
}
html.dark .dict-aside-refs { border-color: rgba(255,255,255,0.08); }
.dict-aside-refs-title {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--olive, #556b2f); margin-bottom: 10px;
}
html.dark .dict-aside-refs-title { color: var(--accent); }
.dict-aside-refs-list {
  list-style: decimal; padding-left: 20px; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.dict-aside-ref-link {
  font-size: 0.82rem; color: var(--text); text-decoration: none;
  transition: color 0.15s;
}
.dict-aside-ref-link:hover { color: var(--olive, #556b2f); text-decoration: underline; }
html.dark .dict-aside-ref-link:hover { color: var(--accent); }

/* Illustration source attribution */
.dict-infobox-source-attr {
  display: block; font-size: 0.72rem; font-weight: 400;
  color: rgba(0,0,0,0.45); margin-top: 2px;
}
html.dark .dict-infobox-source-attr { color: rgba(255,255,255,0.35); }

/* Additional illustrations gallery in sidebar */
.dict-illustrations {
  margin-top: 16px; padding: 14px 16px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08); background: var(--bg, #fff);
}
html.dark .dict-illustrations { border-color: rgba(255,255,255,0.08); }
.dict-illustrations-title {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--olive, #556b2f); margin-bottom: 10px;
}
html.dark .dict-illustrations-title { color: var(--accent); }
.dict-illustration-item {
  margin-bottom: 12px;
}
.dict-illustration-item:last-child { margin-bottom: 0; }
.dict-illustration-item img {
  width: 100%; border-radius: 4px; display: block;
}
.dict-illustration-caption {
  text-align: center; font-size: 0.75rem; color: rgba(0,0,0,0.5);
  margin-top: 4px;
}
html.dark .dict-illustration-caption { color: rgba(255,255,255,0.4); }

/* Article wrap — 2-column grid: main article + right sidebar */
.dict-article-wrap {
  display: grid; grid-template-columns: 1fr 280px;
  gap: 32px; align-items: start;
}
.dict-aside { position: sticky; top: 80px; }

/* Article header */
.dict-article { min-width: 0; }
.dict-article-header { margin-bottom: 24px; padding-top: 8px; }
.dict-article-title {
  font-size: 2.6rem; font-weight: 800; color: var(--text);
  margin: 0; line-height: 1.1;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  font-family: 'Georgia', 'Times New Roman', serif;
}
html.dark .dict-article-title { border-bottom-color: rgba(255,255,255,0.1); }

/* Wikipedia-style infobox (in right column) */
.dict-infobox {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px; background: rgba(85,107,47,0.03);
  font-size: 0.85rem;
}
html.dark .dict-infobox { border-color: rgba(255,255,255,0.1); background: rgba(212,175,55,0.03); }
.dict-infobox-img { padding: 8px; }
.dict-infobox-img img {
  width: 100%; border-radius: 3px; display: block;
}
.dict-infobox-caption {
  text-align: center; padding: 4px 12px 8px;
  font-weight: 600; color: var(--text); font-size: 0.88rem;
}
.dict-infobox-meta { border-top: 1px solid rgba(0,0,0,0.08); }
html.dark .dict-infobox-meta { border-top-color: rgba(255,255,255,0.06); }
.dict-infobox-row {
  display: flex; justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
html.dark .dict-infobox-row { border-bottom-color: rgba(255,255,255,0.04); }
.dict-infobox-row:last-child { border-bottom: none; }
.dict-infobox-label { color: var(--muted); font-weight: 600; }
.dict-infobox-value { color: var(--text); }
.dict-infobox-value a { color: var(--olive, #556b2f); text-decoration: none; }
html.dark .dict-infobox-value a { color: var(--accent); }

/* Wikipedia-style TOC box */
.dict-toc-box {
  display: inline-block; padding: 12px 20px;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 4px;
  background: rgba(0,0,0,0.015); margin-bottom: 20px;
}
html.dark .dict-toc-box { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
.dict-toc-box-title {
  font-size: 0.88rem; font-weight: 700; color: var(--text);
  margin-bottom: 6px;
}
.dict-toc-box-list {
  margin: 0; padding-left: 20px; font-size: 0.85rem;
}
.dict-toc-box-list li { margin: 2px 0; }
.dict-toc-box-list a {
  color: var(--olive, #556b2f); text-decoration: none;
}
html.dark .dict-toc-box-list a { color: var(--accent); }
.dict-toc-box-list a:hover { text-decoration: underline; }

/* Cross-reference links */
.dict-xref-link {
  color: var(--olive, #556b2f); text-decoration: none; font-weight: 500;
}
html.dark .dict-xref-link { color: var(--accent); }
.dict-xref-link:hover { text-decoration: underline; }

/* Definitions from each source */
.dict-definition {
  margin-bottom: 36px; padding-bottom: 32px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
html.dark .dict-definition { border-bottom-color: rgba(255,255,255,0.06); }
.dict-definition:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.dict-def-source {
  margin-bottom: 16px; padding: 10px 14px;
  background: rgba(85,107,47,0.05); border-radius: 6px;
  border-left: 3px solid var(--olive, #556b2f);
  display: flex; align-items: center; flex-wrap: wrap;
}
.dict-def-top {
  margin-left: auto; text-decoration: none; font-size: 1.1rem;
  color: var(--muted); padding: 2px 8px; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.dict-def-top:hover { color: var(--olive, #556b2f); background: rgba(85,107,47,0.08); }
html.dark .dict-def-top:hover { color: var(--accent); background: rgba(212,175,55,0.08); }
html.dark .dict-def-source { background: rgba(212,175,55,0.06); border-left-color: var(--accent); }
.dict-def-source-name {
  font-size: 0.95rem; font-weight: 700; color: var(--text);
}
.dict-def-source-meta {
  font-size: 0.82rem; color: var(--muted); margin-left: 4px;
}

/* Images — Wikipedia-style float right */
.dict-entry-img {
  float: right; clear: right;
  max-width: 280px; width: 100%;
  margin: 0 0 16px 24px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
}
html.dark .dict-entry-img { border-color: rgba(255,255,255,0.1); }

/* Definition body text */
.dict-def-body {
  font-family: var(--ff); font-size: 1.05rem; line-height: 1.85;
  color: var(--text);
}
.dict-def-body p { margin: 0 0 12px; }
.dict-def-body p:last-child { margin-bottom: 0; }
.dict-def-body i, .dict-def-body em { font-style: italic; }
.dict-def-body ref { color: var(--olive, #556b2f); font-weight: 500; }
html.dark .dict-def-body ref { color: var(--accent); }
.dict-def-body .scripture-link {
  color: var(--olive, #556b2f); font-weight: 500; text-decoration: none;
  border-bottom: 1px dotted var(--olive, #556b2f);
}
html.dark .dict-def-body .scripture-link { color: var(--accent); border-bottom-color: var(--accent); }
.dict-def-body .scripture-link:hover { text-decoration: underline; }

/* Prev / Next navigation */
.dict-prev-next {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.06);
  gap: 16px;
}
html.dark .dict-prev-next { border-top-color: rgba(255,255,255,0.06); }
.dict-pn-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 6px;
  font-size: 0.88rem; font-weight: 500;
  color: var(--olive, #556b2f); text-decoration: none;
  border: 1px solid rgba(0,0,0,0.08);
  transition: border-color 0.15s, background 0.15s;
}
html.dark .dict-pn-link { color: var(--accent); border-color: rgba(255,255,255,0.08); }
.dict-pn-link:hover { border-color: var(--accent); background: rgba(85,107,47,0.04); }
html.dark .dict-pn-link:hover { background: rgba(212,175,55,0.06); }
.dict-pn-arrow { font-size: 1.1rem; }
.dict-pn-next { margin-left: auto; }

/* ── Pagination ── */
.dict-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
html.dark .dict-pagination { border-top-color: rgba(255,255,255,0.06); }
.dict-pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  border-radius: 6px; font-size: 0.85rem; font-weight: 500;
  color: var(--olive, #556b2f); text-decoration: none;
  border: 1px solid rgba(0,0,0,0.08); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
html.dark .dict-pg-btn { color: var(--accent); border-color: rgba(255,255,255,0.08); }
.dict-pg-btn:hover { border-color: var(--accent); background: rgba(85,107,47,0.04); }
html.dark .dict-pg-btn:hover { background: rgba(212,175,55,0.06); }
.dict-pg-active {
  background: var(--olive, #556b2f); color: #fff; border-color: var(--olive, #556b2f);
  cursor: default;
}
html.dark .dict-pg-active { background: var(--accent); color: #000; border-color: var(--accent); }
.dict-pg-disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.dict-pg-ellipsis { padding: 0 4px; color: var(--muted); }
.dict-pg-info {
  width: 100%; text-align: center; margin-top: 6px;
  font-size: 0.78rem; color: var(--muted);
}

/* ── Responsive ── */
@media(max-width:768px){
  .dict-columns { grid-template-columns: 1fr; }
  .dict-sidebar {
    position: static; max-height: 280px; border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-right: 0; padding-bottom: 16px; margin-bottom: 16px;
    overflow-y: auto;
  }
  .dict-letter-title { font-size: 2rem; }
  .dict-alpha-link { width: 30px; height: 30px; font-size: 0.8rem; }
  .dict-entry-img { max-width: 200px; }
  .dict-article-title { font-size: 1.75rem; }
  .dict-term-list { grid-template-columns: 1fr 1fr; }
  .dict-featured-row { grid-template-columns: 1fr; }
  .dict-sources-list { grid-template-columns: 1fr; }
  .dict-article-wrap { grid-template-columns: 1fr; }
  .dict-aside { position: static; }
  .dict-infobox { max-width: 320px; }
  .dict-hero-title { font-size: 1.8rem; }
}
@media(max-width:480px){
  .dict-page { padding: 20px 16px 48px; }
  .dict-title { font-size: 1.5rem; }
  .dict-entry-img { float: none; max-width: 100%; margin: 0 0 16px 0; }
  .dict-article-title { font-size: 1.5rem; }
  .dict-term-list { grid-template-columns: 1fr; }
  .dict-featured-row { grid-template-columns: 1fr; }
  .dict-featured-hz { flex-direction: column; }
  .dict-featured-hz-img { width: 100%; max-height: 160px; }
  .dict-hero-title { font-size: 1.5rem; }
  .dict-prev-next { flex-direction: column; }
  .dict-pn-next { margin-left: 0; }
  .dict-infobox { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════
   Encyclopedia Redesign — topics-style pages
   ═══════════════════════════════════════════════════ */

/* Index page uses topics-page class for padding/grid */
.enc-index-page .enc-source-pop { cursor: default; }

/* Entry page — uses topic-detail-page + bch-columns */
.enc-entry-page { padding: 0 48px 120px; }
.enc-entry-page .bch-title { font-size: 1.8rem; font-weight: 600; }
.enc-entry-page .topic-sidebar { padding-top: 1em; }

/* Article body — Verdana, same as comm-content */
.enc-article-body {
  font-family: Verdana, Geneva, sans-serif; font-size: 1.05rem;
  line-height: 1.85; color: var(--text, #222);
}
html.dark .enc-article-body { color: var(--text, #ddd); }
.enc-article-body p { margin: 0 0 14px; }
.enc-article-body h2, .enc-article-body h3 {
  font-family: Verdana, Geneva, sans-serif; font-weight: 600; margin: 28px 0 10px;
}

/* Keep existing dict-def styling inside the new layout */
.enc-article-body .dict-def-block { margin-bottom: 28px; }
.enc-article-body .dict-def-heading {
  font-family: Verdana, Geneva, sans-serif; font-size: 1.1rem;
  font-weight: 700; color: var(--text); margin: 0 0 6px;
  padding: 8px 0; border-bottom: 2px solid var(--olive, #6b5f3f);
}
html.dark .enc-article-body .dict-def-heading { border-bottom-color: var(--accent, #d4af37); }

/* Sidebar infobox */
.enc-infobox {
  border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; overflow: hidden;
  background: var(--bg2, #faf9f6);
}
html.dark .enc-infobox { background: var(--bg2, #1e1e1e); border-color: rgba(255,255,255,0.06); }
.enc-infobox-img {
  width: 100%; max-height: 250px; object-fit: cover; display: block;
}
.enc-infobox-caption {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.82rem;
  color: var(--text2, #555); padding: 10px 12px; line-height: 1.4;
}
html.dark .enc-infobox-caption { color: var(--text2, #aaa); }
.enc-infobox-attr {
  display: block; font-size: 0.72rem; color: var(--text3, #999); margin-top: 2px;
}

/* Illustrations */
.enc-illustration-item {
  margin-top: 10px; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}
html.dark .enc-illustration-item { border-color: rgba(255,255,255,0.06); }
.enc-illustration-item img { width: 100%; display: block; }
.enc-illustration-caption {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.78rem;
  color: var(--text2, #555); padding: 8px 10px;
}
html.dark .enc-illustration-caption { color: var(--text2, #aaa); }

/* Source links in sidebar */
.enc-source-list { display: flex; flex-direction: column; gap: 4px; }
.enc-source-link {
  display: block; font-family: Verdana, Geneva, sans-serif;
  font-size: 0.84rem; color: var(--olive, #6b5f3f);
  text-decoration: none; padding: 4px 0;
}
.enc-source-link:hover { text-decoration: underline; }
html.dark .enc-source-link { color: var(--accent, #d4af37); }

/* Letter page filter input */
.enc-letter-filter {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 16px;
}
.enc-filter-input {
  flex: 1; max-width: 360px; padding: 9px 14px;
  font-family: Verdana, Geneva, sans-serif; font-size: 0.88rem;
  border: 1px solid var(--gray2, #ddd); border-radius: 8px;
  background: var(--card-bg, #fff); color: var(--text, #222);
  outline: none; transition: border-color 0.15s;
}
.enc-filter-input:focus { border-color: var(--olive, #6b5f3f); }
html.dark .enc-filter-input { background: var(--bg2, #252525); color: var(--text, #ddd); border-color: #444; }
html.dark .enc-filter-input:focus { border-color: var(--accent, #d4af37); }
.enc-filter-count {
  font-family: Verdana, Geneva, sans-serif; font-size: 0.82rem;
  color: var(--text3, #999);
}

/* Responsive */
@media(max-width:960px){
  .enc-entry-page { padding: 0 32px 80px; }
}
@media(max-width:600px){
  .enc-entry-page { padding: 0 16px 60px; }
  .enc-filter-input { max-width: 100%; }
}

/* ===== INSTANT SEARCH DROPDOWN ===== */
.si-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e2e0da);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 420px;
  overflow-y: auto;
  z-index: 2000;
  font-family: var(--ff, Verdana, Geneva, sans-serif);
}
html.dark .si-search-dropdown {
  background: #262620;
  border-color: #3a3a3a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.si-search-section {
  padding: 8px 14px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3, #999);
}
.si-search-section[data-type="speaker"] { color: var(--accent, #D4AF37); }
.si-search-section[data-type="sermon"] { color: var(--olive, #908F51); }
.si-search-section[data-type="verse"] { color: #6b8f5e; }
html.dark .si-search-section[data-type="verse"] { color: #8bc67a; }

.si-search-item {
  display: flex;
  flex-direction: column;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--text, #222);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: background 0.1s;
}
html.dark .si-search-item {
  color: var(--text, #e4e4da);
  border-bottom-color: rgba(255,255,255,0.04);
}
.si-search-item:hover,
.si-search-item.si-search-active {
  background: var(--bg-hover, #f5f4f0);
}
html.dark .si-search-item:hover,
html.dark .si-search-item.si-search-active {
  background: rgba(255,255,255,0.06);
}

.si-search-primary {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text, #222);
}
html.dark .si-search-primary { color: var(--text, #e4e4da); }

.si-search-primary mark {
  background: rgba(212,175,55,0.25);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
html.dark .si-search-primary mark {
  background: rgba(212,175,55,0.3);
}

.si-search-secondary {
  font-size: 0.78rem;
  color: var(--text2, #666);
  line-height: 1.3;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .si-search-secondary { color: var(--text2, #999); }

.si-search-empty {
  padding: 16px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text3, #999);
}

/* Scrollbar styling */
.si-search-dropdown::-webkit-scrollbar { width: 6px; }
.si-search-dropdown::-webkit-scrollbar-track { background: transparent; }
.si-search-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
html.dark .si-search-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

@media(max-width:600px) {
  .si-search-dropdown { border-radius: 0 0 6px 6px; max-height: 350px; }
  .si-search-primary { font-size: 0.85rem; }
}