/* styles.css — minimal custom styles beyond Tailwind CDN */

/* Smooth expand/collapse transitions */
.expand-container {
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

/* Prose styling for expanded article content */
.prose { line-height: 1.7; }
.prose h1, .prose h2, .prose h3 { margin-top: 1.5em; margin-bottom: 0.5em; font-weight: 600; }
.prose p { margin-bottom: 1em; }
.prose a { color: #2563eb; text-decoration: underline; }
.prose img { max-width: 100%; border-radius: 0.5rem; margin: 1em 0; }
.prose pre { background: #f3f4f6; padding: 1em; border-radius: 0.5rem; overflow-x: auto; font-size: 0.85em; }
.dark .prose pre { background: #1f2937; }
.prose code { font-size: 0.9em; }
.prose blockquote { border-left: 3px solid #d1d5db; padding-left: 1em; color: #6b7280; }
.dark .prose blockquote { border-left-color: #4b5563; color: #9ca3af; }
.prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1em; }
.prose li { margin-bottom: 0.25em; }

/* Responsive tweaks */
@media (max-width: 640px) {
  header h1 { font-size: 1.25rem; }
  .article-card { padding: 0.75rem; }
}

/* Loading spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.loading::after {
  content: '';
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid #d1d5db;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 0.5em;
  vertical-align: middle;
}