/* ============================================= */
/* Christian Bible Discipleship Lines – FULL CSS */
/* ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Cambria:wght@400;700&family=Poppins:wght@400;600&display=swap');

/* ---------- 1. Reset & Base ---------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:100%; }
body {
  font-family:'Cambria',Georgia,serif;
  line-height:1.7;
  color:#333;
  background:#f9f9f9;
  overflow-x:hidden;
  padding-left:300px;               /* sidebar space on desktop */
  transition:padding-left .3s ease;
}

/* ---------- 2. Layout ---------- */
.container { max-width:1200px; margin:0 auto; padding:0 15px; }
.main-content { background:#fff; padding:30px; min-height:100vh; box-shadow:0 0 20px rgba(0,0,0,.05); }

/* ---------- 3. Header ---------- */
.header-area { background:#123456; color:#fff; padding:18px 0; position:sticky; top:0; z-index:998; box-shadow:0 2px 10px rgba(0,0,0,.1); }
.logo a { color:#fff; font-size:28px; font-weight:bold; text-decoration:none; text-transform:uppercase; letter-spacing:.5px; display:block; text-align:center; }

/* ---------- 4. Hamburger (mobile) ---------- */
.hamburger-icon { display:none; flex-direction:column; justify-content:space-between; width:32px; height:24px; background:transparent; border:none; cursor:pointer; z-index:1001; }
.hamburger-icon span { display:block; height:3px; width:100%; background:#fff; border-radius:3px; transition:all .3s ease; }
.hamburger-icon.open span:nth-child(1){ transform:rotate(45deg) translate(6px,6px); }
.hamburger-icon.open span:nth-child(2){ opacity:0; }
.hamburger-icon.open span:nth-child(3){ transform:rotate(-45deg) translate(7px,-6px); }

/* ---------- 5. Sidebar ---------- */
.sidebar-container {
  width:300px; background:#fff; border-right:1px solid #f39f03; padding:30px 20px;
  height:100vh; position:fixed; top:0; left:0; overflow-y:auto; transition:transform .3s ease;
  z-index:999; box-shadow:2px 0 15px rgba(0,0,0,.1);
}
.sidebar-content h1 { font-size:19px; margin:0 0 8px; color:#123456; font-weight:bold; }
.sidebar-content p { font-size:14px; margin:8px 0 16px; color:#555; line-height:1.5; }
.read_more { display:inline-block; background:#123456; color:#fff; font-size:13px; font-weight:bold; text-transform:uppercase;
  padding:10px 20px; border-radius:4px; text-decoration:none; transition:background .3s ease; }
.read_more:hover { background:#39b54a; }
.titlepage { margin-bottom:28px; }
.titlepage a { color:inherit; text-decoration:none; }
.titlepage a:hover h1 { color:#39b54a; }

/* ---------- 6. Chapter / Verse Menu (horizontal) ---------- */
.av-subnav-menu {
  list-style:none; padding:0; margin:20px 0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.av-subnav-menu li { margin:0; }
.av-subnav-menu a {
  color:#123456; font-weight:bold; font-size:16px; text-decoration:none; padding:6px 12px;
  border-radius:4px; transition:background .2s, color .2s;
}
.av-subnav-menu a:hover { background:#f0f8ff; color:#39b54a; }

/* ---------- 7. Verse Blocks ---------- */
.av_textblock_section {
  margin:30px 0; padding:20px; background:#f9f9f9; border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.av_textblock_section h3 {
  text-align:center; color:#d35400; margin-bottom:15px; font-size:1.4rem;
}
.av_textblock_section .col-lg-6 { font-size:small; line-height:1.6; }
.av_textblock_section hr { margin:20px 0; border:none; border-top:1px solid #eee; }

/* ---------- 8. Search Box ---------- */
.search-container { margin:20px auto; max-width:600px; }
.search-box { width:100%; padding:12px; font-size:1rem; border:2px solid #ddd; border-radius:8px; transition:border-color .2s; }
.search-box:focus { outline:none; border-color:#123456; }

/* ---------- 9. Hide Utility ---------- */
.hidden { display:none !important; }

/* ---------- 10. Footer ---------- */
footer {
  background:#123456; color:#fff; text-align:center; padding:50px 30px; margin-top:60px; font-size:14px;
}
footer p { margin:0; line-height:1.6; }

/* ---------- 11. Dark-Mode ---------- */
.dark-mode { --bg:#1a1a1a; --text:#eee; --post-bg:#2d2d2d; --border:#ff6b35; }
.dark-mode body { background:#111; color:#eee; }
.dark-mode .av_textblock_section { background:var(--post-bg); }
.dark-mode .sidebar-container { background:#222; }
.dark-mode .header-area, .dark-mode .logo a { background:#111; color:#ff8c00; }

/* ---------- 12. Responsive ---------- */
@media (max-width:992px) {
  body { padding-left:0 !important; }
  .sidebar-container { transform:translateX(-100%); }
  .sidebar-container.sidebar-visible { transform:translateX(0); }
  .hamburger-icon { display:flex; position:fixed; top:20px; right:20px; }
  .main-content { padding:20px; box-shadow:none; }
  footer { padding:40px 20px; }
}
@media (min-width:993px) {
  .hamburger-icon { display:none; }
  .sidebar-container { transform:translateX(0) !important; }
}

/* Search term highlight */
.search-highlight {
  background-color: #fff3cd !important;
  color: #d35400 !important;
  padding: 0 3px;
  border-radius: 3px;
  font-weight: bold;
}

/* Search Results Panel */
.search-results-panel {
  margin-top: 12px;
  padding: 10px;
  background: #f0f8ff;
  border-radius: 6px;
  font-size: 0.95rem;
  color: #123456;
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.search-results-panel.show {
  display: flex;
}

.search-results-panel .count {
  font-weight: bold;
  color: #d35400;
  margin-right: 8px;
}

.search-results-panel .jump-link {
  background: #123456;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.search-results-panel .jump-link:hover {
  background: #39b54a;
}

.dark-mode .search-results-panel {
  background: #2d2d2d;
  color: #eee;
}

.dark-mode .search-results-panel .jump-link {
  background: #ff8c00;
}

.dark-mode .search-results-panel .jump-link:hover {
  background: #39b54a;
}

/* Search Results Panel – Snippets */
.search-results-panel .count {
  font-size: 1rem;
  color: #d35400;
  margin-bottom: 8px;
}

.search-results-panel .snippets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9rem;
  color: #123456;
}

.snippet-link {
  background: #e6f7ff;
  color: #123456;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  font-style: italic;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  transition: background 0.2s;
}

.snippet-link:hover {
  background: #b3e0ff;
  text-decoration: underline;
}

.more {
  color: #7f8c8d;
  font-style: italic;
}

.dark-mode .search-results-panel .snippets { color: #ddd; }
.dark-mode .snippet-link { background: #2d2d2d; color: #ff8c00; }
.dark-mode .snippet-link:hover { background: #444; }

/* Voice Reader Controls */
.voice-reader-controls {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.voice-btn {
  background: #123456;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.voice-btn:hover:not(:disabled) {
  background: #39b54a;
}

.voice-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

#voiceSelect {
  font-family: 'Cambria', serif;
  font-size: 1rem;
}

#status {
  min-width: 120px;
}

.dark-mode .voice-reader-controls {
  background: #2d2d2d;
}

.dark-mode .voice-btn {
  background: #ff8c00;
}

.dark-mode .voice-btn:hover:not(:disabled) {
  background: #39b54a;
}

/* Voice Hint (New) */
.voice-hint {
  margin-left: 10px;
  cursor: help;
  color: #ff8c00;
  font-size: 1rem;
}