/* Dark mode toggle styles */
.theme-toggle-container {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.375rem;
  color: #64748b; /* slate-500 */
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.theme-toggle-btn:hover {
  background-color: #f1f5f9; /* slate-100 */
  color: #334155; /* slate-700 */
}

.theme-toggle-btn:focus {
  outline: 2px solid #3b82f6; /* blue-500 */
  outline-offset: 2px;
}

.dark .theme-toggle-btn {
  color: #94a3b8; /* slate-400 */
}

.dark .theme-toggle-btn:hover {
  background-color: #334155; /* slate-700 */
  color: #e2e8f0; /* slate-200 */
}

@media (min-width: 768px) {
  .theme-toggle-btn {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Search styles */
.search-container input {
  transition: all 0.2s ease;
}

.search-container input:focus {
  width: 14rem;
}

@media (min-width: 768px) {
  .search-container input:focus {
    width: 18rem;
  }
}

/* Dark theme syntax highlighting override */
.dark .hljs {
  background: #1e293b !important; /* slate-800 */
  color: #e2e8f0 !important; /* slate-200 */
}

/* Custom dark mode styles that extend Tailwind */
.dark .markdown-content code:not(pre code) {
  background-color: rgba(30, 41, 59, 0.5) !important; /* slate-800 with opacity */
  color: #e2e8f0 !important; /* slate-200 */
}

.dark .markdown-content a {
  color: #93c5fd !important; /* blue-300 */
}

.dark .markdown-content blockquote {
  border-color: #475569 !important; /* slate-600 */
}