/* === Base === */
html { scroll-behavior: smooth; }

/* =============================================
   PROSE — Article Typography
   !important needed to override Tailwind preflight reset
   ============================================= */

.prose {
  font-size: 1.125rem !important;
  line-height: 1.9 !important;
  color: #1c1917 !important;
  letter-spacing: -0.01em;
}

/* Spacing between all direct children */
.prose > * + * {
  margin-top: 1.75em !important;
}

/* === Headings === */
.prose h1 {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: #1c1917 !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  letter-spacing: -0.025em;
}

.prose h2 {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #0d9488 !important;
  line-height: 1.3 !important;
  margin-top: 3rem !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.6rem !important;
  border-bottom: 2px solid #ccfbf1 !important;
  letter-spacing: -0.02em;
}

.prose h3 {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: #292524 !important;
  line-height: 1.35 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}

.prose h4 {
  font-size: 1.175rem !important;
  font-weight: 600 !important;
  color: #44403c !important;
  line-height: 1.4 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
}

/* === Paragraphs === */
.prose p {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  color: #292524 !important;
  line-height: 1.9 !important;
}

.prose strong {
  font-weight: 700 !important;
  color: #1c1917 !important;
}

.prose em {
  font-style: italic !important;
}

/* === Links === */
.prose a {
  color: #0d9488 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: #99f6e4 !important;
  transition: all 0.2s !important;
}
.prose a:hover {
  color: #0f766e !important;
  text-decoration-color: #0d9488 !important;
}

/* === Lists === */
.prose ul, .prose ol {
  padding-left: 2rem !important;
  margin-top: 1.25rem !important;
  margin-bottom: 1.75rem !important;
}

.prose ul {
  list-style-type: disc !important;
}

.prose ol {
  list-style-type: decimal !important;
}

.prose li {
  margin-bottom: 0.65rem !important;
  line-height: 1.8 !important;
  color: #292524 !important;
  padding-left: 0.25rem !important;
}

.prose ul > li::marker {
  color: #0d9488 !important;
}

.prose ol > li::marker {
  color: #0d9488 !important;
  font-weight: 600 !important;
}

/* === Blockquote === */
.prose blockquote {
  border-left: 4px solid #0d9488 !important;
  background: #f0fdfa !important;
  padding: 1.5rem 2rem !important;
  margin: 2rem 0 !important;
  border-radius: 0 12px 12px 0 !important;
  font-style: italic !important;
  color: #44403c !important;
  line-height: 1.75 !important;
}
.prose blockquote p {
  margin-bottom: 0.5rem !important;
}
.prose blockquote p:last-child {
  margin-bottom: 0 !important;
}

/* === Tables === */
.prose table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 2rem 0 !important;
  font-size: 0.95rem !important;
  display: table !important;
}
.prose thead {
  border-bottom: 2px solid #0d9488 !important;
}
.prose th {
  background: #f0fdfa !important;
  color: #0d9488 !important;
  padding: 0.85rem 1rem !important;
  text-align: left !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
}
.prose td {
  padding: 0.85rem 1rem !important;
  border-bottom: 1px solid #e7e5e4 !important;
  color: #292524 !important;
}
.prose tr:nth-child(even) {
  background: #fafaf9 !important;
}
.prose tr:hover {
  background: #f5f5f4 !important;
}

/* === FAQ — details/summary === */
.prose details {
  border: 1px solid #d6d3d1 !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  background: #fafaf9 !important;
  transition: all 0.2s !important;
}
.prose details:hover {
  border-color: #0d9488 !important;
  box-shadow: 0 2px 8px rgba(13,148,136,0.08) !important;
}
.prose summary {
  cursor: pointer !important;
  font-weight: 700 !important;
  color: #1c1917 !important;
  font-size: 1.05rem !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  line-height: 1.5 !important;
}
.prose summary::-webkit-details-marker { display: none !important; }
.prose summary::before {
  content: '▸' !important;
  color: #0d9488 !important;
  font-size: 0.9rem !important;
  transition: transform 0.2s !important;
  flex-shrink: 0 !important;
}
.prose details[open] summary::before {
  transform: rotate(90deg) !important;
}
.prose details > *:not(summary) {
  margin-top: 1rem !important;
}
.prose details p {
  color: #44403c !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}

/* === Images === */
.prose figure {
  margin: 2.5rem 0 !important;
  text-align: center !important;
}
.prose figure img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
}
.prose figcaption {
  font-size: 0.85rem !important;
  color: #78716c !important;
  margin-top: 0.75rem !important;
}
.prose img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
}

/* === Horizontal rule === */
.prose hr {
  border: none !important;
  border-top: 2px solid #e7e5e4 !important;
  margin: 3rem 0 !important;
}

/* === Code === */
.prose code {
  background: #f5f5f4 !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 6px !important;
  font-size: 0.9em !important;
  color: #0d9488 !important;
  font-family: ui-monospace, monospace !important;
}
.prose pre {
  background: #1c1917 !important;
  color: #e7e5e4 !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 12px !important;
  overflow-x: auto !important;
  margin: 2rem 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}

/* =============================================
   END PROSE
   ============================================= */

/* === Liked state === */
.stat-like.liked {
  border-color: #0d9488 !important;
  color: #0d9488 !important;
  background: #f0fdfa !important;
}

/* === Animation === */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* === No underline helper === */
a.no-underline { text-decoration: none !important; }

/* === Hero image === */
.article-hero { border-radius: 16px; overflow: hidden; margin-bottom: 2rem; }
.article-hero img { width: 100%; height: auto; display: block; }

/* === Blog card image === */
.blog-card img { transition: transform 0.3s ease; }
.blog-card:hover img { transform: scale(1.03); }