/* ============================================================
   ARTICLE CONTENT STYLES (Old Version Reference)
   ============================================================ */

.article {
  display: block;
  max-width: 896px !important; /* Matches Tailwind's max-w-4xl */
  margin: 0 auto !important;
  padding: 15px !important;
  font-family: 'Noto Sans SC', sans-serif !important;
  line-height: 1.6 !important;
  color: #333 !important;
  font-size: 1.1rem !important;
  background-color: transparent !important;
}

@media (min-width: 768px) {
  .article {
    font-size: 1.25rem !important;
  }
}

.article h1 {
  display: block;
  font-family: 'Noto Serif SC', serif !important;
  font-size: 1.75rem !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
  color: #333 !important;
  font-weight: 700 !important;
}

@media (min-width: 768px) {
  .article h1 {
    font-size: 2.25rem !important;
  }
}

.article h2 {
  display: block;
  font-family: 'Noto Serif SC', serif !important;
  font-size: 1.5rem !important;
  margin-top: 25px !important;
  margin-bottom: 15px !important;
  color: #333 !important;
  font-weight: 700 !important;
}

@media (min-width: 768px) {
  .article h2 {
    font-size: 1.75rem !important;
  }
}

.article p {
  display: block;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  color: #333 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.article ul {
  display: block;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  padding-left: 40px !important;
  list-style-type: disc !important;
  color: #333 !important;
}

.article li {
  display: list-item;
  margin-bottom: 5px !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.article img {
  display: block;
  width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  margin-bottom: 20px !important;
}

.article blockquote {
  display: block;
  border-left: 4px solid #4f46e5 !important;
  padding-left: 15px !important;
  margin: 15px 0 !important;
  font-style: italic !important;
  color: #555 !important;
}

.article .highlight {
  background-color: #fef9c3 !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
}

.article .meta-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.article .meta {
  display: block;
  color: #666 !important;
  font-style: italic !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
}

.article #voice-btn {
  display: inline-block;
  background-color: #e0e7ff !important;
  color: #4f46e5 !important;
  border: none !important;
  padding: 5px 10px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  font-weight: normal !important;
  transition: none !important;
}

.article #voice-btn:hover {
  background-color: #d1d9ff !important;
}

/* Highlight for voice reading */
.highlight-reading {
  background-color: #fef08a !important;
  transition: background-color 0.2s !important;
}

/* ============================================================
   END ARTICLE CONTENT STYLES
   ============================================================ */