/* Blog Styles - Dark Theme Compatible */
.prose {
  max-width: none;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 1.7;
  background: transparent;
  border: none;
  padding: 0;
}

/* Prevent text overflow - break long words */
.prose p, .prose li, .prose td, .prose th, .prose div, 
.prose span, .prose strong, .prose em, .prose ul, .prose ol,
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  background: transparent !important;
}

/* Ensure content doesn't overflow containers */
.prose * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Force all children to stay within bounds */
.prose img,
.prose video,
.prose iframe,
.prose table,
.prose pre {
  max-width: 100% !important;
  height: auto !important;
  overflow-x: auto !important;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: #f8fafc !important;
  font-weight: 700;
}

.prose h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #ffffff !important;
}

.prose h2 {
  font-size: 2rem;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #475569;
  padding-bottom: 0.5rem;
  color: #f1f5f9 !important;
}

.prose h3 {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #e2e8f0 !important;
}

.prose p {
  color: #cbd5e1 !important;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.prose a {
  color: #60a5fa !important;
  text-decoration: underline;
  text-decoration-color: #93c5fd;
  text-underline-offset: 2px;
  transition: all 0.2s ease;
}

.prose a:hover {
  color: #93c5fd !important;
  text-decoration-color: #60a5fa;
}

.prose ul, .prose ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.prose li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #cbd5e1 !important;
}

.prose blockquote {
  border-left: 4px solid #60a5fa;
  background-color: #1e293b;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #94a3b8 !important;
}

.prose code {
  background-color: #374151;
  color: #fbbf24;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.prose pre {
  background-color: #0f172a;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid #334155;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.prose pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.prose img {
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  margin: 1.5rem 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.prose th, .prose td {
  border: 1px solid #475569;
  padding: 0.75rem;
  text-align: left;
  color: #cbd5e1 !important;
}

.prose th {
  background-color: #334155;
  font-weight: 600;
  color: #f1f5f9 !important;
}

/* Reading Progress Bar */
#reading-progress {
  transition: width 0.3s ease;
}

/* Line Clamp Utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Responsive Typography */
@media (max-width: 768px) {
  .prose h1 {
    font-size: 2rem;
  }
  
  .prose h2 {
    font-size: 1.75rem;
  }
  
  .prose h3 {
    font-size: 1.25rem;
  }
}

/* Animation Classes */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus Styles */
.focus-visible:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  .prose {
    color: #000;
  }
  
  .prose a {
    color: #000;
    text-decoration: underline;
  }
  
  #reading-progress {
    display: none;
  }
}