/* ============================================
   MODERN SOFT HIGHLIGHT COLORS
   ============================================
   
   4 carefully selected modern but soft highlight colors
   Perfect for minimalist Bible app UI - avoiding harsh neons
   Each color includes multiple tonal variations
*/

:root {
  /* ==========================================
     HIGHLIGHT COLOR 1: SAGE MINT
     Modern green with gray undertones - calming and natural
     ========================================== */
  --highlight-sage-50: #F8FBF8;
  --highlight-sage-100: #EDF5ED;
  --highlight-sage-200: #D8E8D8;
  --highlight-sage-300: #B8D4B8;
  --highlight-sage-400: #8FB98F;
  --highlight-sage-500: #6B9B6B;  /* Primary sage */
  --highlight-sage-600: #527A52;
  --highlight-sage-700: #3F5E3F;
  
  /* ==========================================
     HIGHLIGHT COLOR 2: WARM AMBER
     Soft golden tone - wisdom and enlightenment
     ========================================== */
  --highlight-amber-50: #FDF9F0;
  --highlight-amber-100: #FBF2E0;
  --highlight-amber-200: #F6E4BF;
  --highlight-amber-300: #F0D394;
  --highlight-amber-400: #E8BE5D;
  --highlight-amber-500: #D4A73A;  /* Primary amber */
  --highlight-amber-600: #B88A2F;
  --highlight-amber-700: #926A24;
  
  /* ==========================================
     HIGHLIGHT COLOR 3: SOFT LAVENDER
     Gentle purple - spirituality and reflection
     ========================================== */
  --highlight-lavender-50: #F9F8FF;
  --highlight-lavender-100: #F3F0FF;
  --highlight-lavender-200: #E6DFFF;
  --highlight-lavender-300: #D1C4FF;
  --highlight-lavender-400: #B8A5FF;
  --highlight-lavender-500: #9D85F2;  /* Primary lavender */
  --highlight-lavender-600: #7C63D4;
  --highlight-lavender-700: #5F4AB1;
  
  /* ==========================================
     HIGHLIGHT COLOR 4: OCEAN MIST
     Soft blue-gray - peace and tranquility
     ========================================== */
  --highlight-ocean-50: #F7FAFC;
  --highlight-ocean-100: #EDF4F7;
  --highlight-ocean-200: #D7E7ED;
  --highlight-ocean-300: #B8D4DF;
  --highlight-ocean-400: #8BB8CA;
  --highlight-ocean-500: #5E9BB0;  /* Primary ocean */
  --highlight-ocean-600: #4A7C91;
  --highlight-ocean-700: #375F72;
}

/* ==========================================
   BIBLE CONTENT STYLING WITH SOFT HIGHLIGHTS
   ========================================== */

/* Enhanced Bible content container */
.bible-main-content {
  background: linear-gradient(135deg, #FEFEFE 0%, #F8F9FA 100%);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-family: 'Georgia', 'Times New Roman', serif;
  line-height: 1.7;
}
/* Chapter form styling */
#chapter-form {
  background: var(--highlight-sage-50);
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--highlight-sage-200);
  margin-bottom: 2rem;
}

#chapter-form label {
  color: var(--highlight-sage-700);
  font-weight: 600;
  margin-right: 1rem;
}

#chapter-select {
  background: white;
  border: 2px solid var(--highlight-sage-300);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: var(--highlight-sage-700);
  transition: all 0.3s ease;
}

#chapter-select:focus {
  outline: none;
  border-color: var(--highlight-sage-500);
  box-shadow: 0 0 0 3px var(--highlight-sage-100);
}

/* Chapter content with improved readability */
.chapter-content {
  background: white;
  padding: 2.5rem;
  border-radius: 12px;
  border: 1px solid var(--highlight-ocean-200);
  font-size: 1.1rem;
  line-height: 1.8;
  color: #2D3748;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Verse numbers with soft styling */
.verse-number {
  color: var(--highlight-amber-600);
  font-weight: 600;
  font-size: 0.9rem;
  margin-right: 0.5rem;
  vertical-align: super;
  line-height: 1;
}

/* Verse selection highlighting */
.verse {
  padding: 0.2rem 0.4rem;
  margin: 0.1rem 0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  min-height: 1.5em;
}

.verse:hover {
  background-color: var(--highlight-sage-100);
  transform: translateY(-1px);
}

.verse.selected {
  background-color: var(--highlight-amber-200);
  border-left: 4px solid var(--highlight-amber-500);
  padding-left: 0.8rem;
  box-shadow: 0 2px 8px rgba(212, 167, 58, 0.2);
}

.verse.multiple-selected {
  background-color: var(--highlight-lavender-200);
  border-left: 4px solid var(--highlight-lavender-500);
  padding-left: 0.8rem;
  box-shadow: 0 2px 8px rgba(157, 133, 242, 0.2);
}

/* Poetic content styling */
.chapter-content.poetic {
  text-align: center;
  font-style: italic;
  background: linear-gradient(135deg, var(--highlight-ocean-50) 0%, var(--highlight-lavender-50) 100%);
  border: 1px solid var(--highlight-ocean-200);
}

.chapter-content.poetic .verse {
  display: block;
  margin: 0.8rem 0;
  padding: 0.6rem 1rem;
}

/* Verse controls with modern button styling */
.verse-controls {
  background: var(--highlight-ocean-50);
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--highlight-ocean-200);
  text-align: center;
}

#clear-verses-btn {
  background: linear-gradient(135deg, var(--highlight-ocean-500), var(--highlight-ocean-600));
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(94, 155, 176, 0.3);
}

#clear-verses-btn:hover {
  background: linear-gradient(135deg, var(--highlight-ocean-600), var(--highlight-ocean-700));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(94, 155, 176, 0.4);
}

.text-muted {
  color: var(--highlight-ocean-600);
  font-size: 0.9rem;
  margin-top: 0.5rem;
  display: block;
}

/* Sidebar styling with soft highlights */
.custom-sidebar {
  background: linear-gradient(135deg, var(--highlight-sage-50) 0%, var(--highlight-amber-50) 100%);
  border-right: 2px solid var(--highlight-sage-200);
}

.custom-sidebar .w3-bar-item.w3-button {
  color: var(--highlight-sage-700);
  transition: all 0.3s ease;
  border-radius: 6px;
  margin: 0.25rem 0.5rem;
}

.custom-sidebar .w3-bar-item.w3-button:hover {
  background: var(--highlight-amber-200) !important;
  color: var(--highlight-amber-700) !important;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(212, 167, 58, 0.2);
}

/* Legacy sidebar toggle button - now handled by new sidebar */
.sidebar-toggle-btn {
  background: linear-gradient(135deg, var(--highlight-sage-500), var(--highlight-sage-600));
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(107, 155, 107, 0.3);
}

.sidebar-toggle-btn:hover {
  background: linear-gradient(135deg, var(--highlight-sage-600), var(--highlight-sage-700));
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(107, 155, 107, 0.4);
}

/* ==========================================
   RESPONSIVE DESIGN WITH SOFT HIGHLIGHTS
   ========================================== */

@media (max-width: 768px) {
  .bible-main-content {
    padding: 1rem;
    margin: 0.5rem;
  }
  
  .chapter-content {
    padding: 1.5rem;
    font-size: 1rem;
  }
  
  .chapter-title-top {
    font-size: 1.5rem;
    padding: 0.75rem;
  }
  
  #chapter-form {
    padding: 1rem;
  }
}

/* ==========================================
   ACCESSIBILITY & INTERACTION STATES
   ========================================== */

/* Focus states with soft highlights */
*:focus {
  outline: 2px solid var(--highlight-lavender-400);
  outline-offset: 2px;
}

/* Selection highlight */
::selection {
  background-color: var(--highlight-amber-200);
  color: var(--highlight-amber-800);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Loading states */
.loading {
  background: linear-gradient(90deg, var(--highlight-sage-100), var(--highlight-sage-200), var(--highlight-sage-100));
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================
   SEARCH CONTEXT HIGHLIGHTING - ENHANCED
   ============================================ */

/* Search context highlight - similar to AI verse glow but with different colors */
.search-context-highlight {
  background: rgba(255, 193, 7, 0.15) !important; /* Much more subtle background */
  border: none !important; /* Remove the box border completely */
  border-radius: 0 !important; /* Remove rounded corners */
  box-shadow: none !important; /* Remove the glow effect */
  padding: 0 !important; /* Remove extra padding */
  margin: 0 !important; /* Remove margins */
  display: inline !important; /* Keep it inline with text flow */
  position: relative !important;
  transition: all 0.3s ease !important;
}

/* Pulse animation for search context */
.search-pulse {
  animation: searchContextPulse 2s ease-in-out !important;
}

@keyframes searchContextPulse {
  0% {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.4), rgba(255, 193, 7, 0.3)) !important;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.6) !important;
    transform: scale(1.02) !important;
  }
  50% {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3), rgba(255, 193, 7, 0.2)) !important;
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.5) !important;
    transform: scale(1.03) !important;
  }
  100% {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.15)) !important;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.4) !important;
    transform: scale(1) !important;
  }
}

/* Mobile-specific adjustments for search highlighting */
@media (max-width: 768px) {
  .search-context-highlight {
    border-width: 1px !important;
    padding: 3px 4px !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3) !important;
  }
  
  @keyframes searchContextPulse {
    0% {
      box-shadow: 0 0 15px rgba(255, 193, 7, 0.5) !important;
      transform: scale(1.01) !important;
    }
    50% {
      box-shadow: 0 0 20px rgba(255, 193, 7, 0.4) !important;
      transform: scale(1.02) !important;
    }
    100% {
      box-shadow: 0 0 10px rgba(255, 193, 7, 0.3) !important;
      transform: scale(1) !important;
    }
  }
}

/* Legacy verse context highlight - keeping for backward compatibility */
.verse-context-highlight {
  background: #F6E4BF !important;
  border-radius: 3px !important;
  padding: 2px 4px !important;
  box-shadow: 0 1px 3px rgba(212, 167, 58, 0.3) !important;
  animation: searchHighlightPulse 2s ease-in-out !important;
  display: inline !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  border: 1px solid #D4A73A !important;
  transform: none !important;
  transition: background-color 0.3s ease !important;
}

@keyframes searchHighlightPulse {
  0% {
    background: #E6D19D !important;
    box-shadow: 0 2px 5px rgba(212, 167, 58, 0.4) !important;
  }
  50% {
    background: #F6E4BF !important;
    box-shadow: 0 1px 3px rgba(212, 167, 58, 0.3) !important;
  }
  100% {
    background: #F6E4BF !important;
    box-shadow: 0 1px 3px rgba(212, 167, 58, 0.3) !important;
  }
}

/* Fade out effect after highlighting */
.verse-context-highlight.fade-out {
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  transition: all 1s ease !important;
  border: none !important;
}