/* 🌤️ Base popup styling (light mode) */
.verse-ref {
  cursor: help;
  border-bottom: 1px dotted #444;
}

.verse-ref:hover {
  border-bottom-color: #000;
}

.scripture-popup, .verse-popup {
  position: absolute;
  background: #fefefe;
  color: #111;
  border: 1px solid #aaa;
  padding: 8px 10px;
  max-width: 320px;
  z-index: 9999;
  font-size: 0.9rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  display: block;
}

/* 🌙 BlogHash + system dark mode styling */
@media (prefers-color-scheme: dark), body.dark, html.dark {
  .verse-ref {
    border-bottom-color: #888 !important;
  }

  .verse-ref:hover {
    border-bottom-color: #fff !important;
  }

  .scripture-popup, .verse-popup {
    background: #1e1e1e !important;
    color: #eee !important;
    border: 1px solid #555 !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1) !important;
    z-index: 9999 !important;
  }
}