/* Article content styles - scoped to article tag */
article {
  color: #374151; /* text-gray-700 */
  line-height: 1.7; /* Improved readability */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #ffffff;
  padding: 2rem;
  /*border-radius: 0.75rem;*/
  /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);*/
}

/* Headings */
article h1, article h2, article h3, article h4, article h5, article h6 {
  position: relative;
  scroll-margin-top: 2rem;
  transition: color 0.2s ease;
}

article h1 {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 800; /* font-extrabold */
  color: #111827; /* text-gray-900 */
  margin-top: 3rem; /* mt-12 */
  margin-bottom: 1.5rem; /* mb-6 */
  padding-bottom: 0.75rem;
  /*border-bottom: 1px solid #e5e7eb;*/
}
article h1:first-child { margin-top: 0; }
article h1::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 3px;
  /*background: linear-gradient(90deg, #3b82f6, #8b5cf6);*/
}

article h2 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700; /* font-bold */
  color: #111827; /* text-gray-900 */
  margin-top: 2.5rem; /* mt-10 */
  margin-bottom: 1.25rem; /* mb-5 */
  /*padding-left: 0.75rem;*/
}
article h2:first-child { margin-top: 0; }

article h3 {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600; /* font-semibold */
  color: #111827; /* text-gray-900 */
  margin-top: 2rem; /* mt-8 */
  margin-bottom: 1rem; /* mb-4 */
  position: relative;
  /*padding-left: 1.5rem;*/
}
article h3:first-child { margin-top: 0; }
article h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  /*background-color: #8b5cf6;*/
}

article h4 {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  color: #111827; /* text-gray-900 */
  margin-top: 1.5rem; /* mt-6 */
  margin-bottom: 0.75rem; /* mb-3 */
  position: relative;
  padding-bottom: 0.25rem;
}
article h4:first-child { margin-top: 0; }
article h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: #e5e7eb;
}

article h5 {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: #111827; /* text-gray-900 */
  margin-top: 1.25rem; /* mt-5 */
  margin-bottom: 0.75rem; /* mb-3 */
}
article h5:first-child { margin-top: 0; }

article h6 {
  font-size: 1rem; /* text-base */
  font-weight: 600; /* font-semibold */
  color: #4b5563; /* text-gray-600 */
  margin-top: 1rem; /* mt-4 */
  margin-bottom: 0.5rem; /* mb-2 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
article h6:first-child { margin-top: 0; }

/* Paragraphs */
article p {
  margin-bottom: 1.5rem; /* mb-6 */
  text-align: justify;
  text-justify: inter-word;
}
article p:last-child { margin-bottom: 0; }

/* Links */
article a {
  color: #2563EB; /* text-blue-600 */
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}
article a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #2563EB;
  transition: width 0.3s ease;
}
article a:hover {
  color: #1D4ED8; /* hover:text-blue-700 */
}
article a:hover::after {
  width: 100%;
}

/* Lists */
article ul,
article ol {
  margin-bottom: 1.5rem; /* mb-6 */
  padding-left: 1.5rem; /* pl-6 */
}
article ul:last-child,
article ol:last-child { margin-bottom: 0; }

article ul {
  list-style-type: none;
  padding-left: 0;
}

article ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem; /* mb-2 */
}
article ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  /*color: #3b82f6;*/
  font-weight: bold;
}

article ol {
  list-style-type: none;
  counter-reset: item;
  padding-left: 0;
}

article ol li {
  counter-increment: item;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.5rem; /* mb-2 */
}
article ol li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  font-weight: 600;
  /*color: #3b82f6;*/
}

article li:last-child { margin-bottom: 0; }

article li > p {
  margin-bottom: 0.5rem; /* mb-2 */
}

/* Blockquotes */
article blockquote {
  border-left-width: 4px;
  /*border-color: #3b82f6;*/
  padding: 1.5rem; /* p-6 */
  margin: 1.5rem 0; /* my-6 */
  background: linear-gradient(to right, #eff6ff, #ffffff);
  border-radius: 0.5rem; /* rounded-lg */
  position: relative;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
article blockquote::before {
  content: '"';
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  font-size: 3rem;
  color: #dbeafe;
  font-family: Georgia, serif;
  line-height: 1;
}

article blockquote p {
  color: #374151; /* text-gray-700 */
  font-style: italic;
  margin-bottom: 0;
  font-size: 1.125rem; /* text-lg */
}

/* Code */
article code {
  background-color: #f3f4f6; /* bg-gray-100 */
  color: #1f2937; /* text-gray-800 */
  padding: 0.25rem 0.5rem; /* px-2 py-1 */
  border-radius: 0.25rem; /* rounded */
  font-size: 0.875rem; /* text-sm */
  font-family: 'Fira Code', 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

article pre {
  background-color: #1f2937; /* bg-gray-800 */
  color: #f3f4f6; /* text-gray-100 */
  padding: 1.5rem; /* p-6 */
  border-radius: 0.5rem; /* rounded-lg */
  overflow-x: auto;
  margin: 1.5rem 0; /* my-6 */
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
article pre::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  /*background: linear-gradient(90deg, #3b82f6, #8b5cf6);*/
  border-radius: 0.5rem 0.5rem 0 0;
}

article pre code {
  background-color: transparent;
  color: #f3f4f6; /* text-gray-100 */
  padding: 0;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.5;
}

/* Tables */
article table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb; /* border-gray-200 */
  margin: 1.5rem 0; /* my-6 */
  border-radius: 0.5rem; /* rounded-lg */
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

article th,
article td {
  border: 1px solid #e5e7eb; /* border-gray-200 */
  padding: 0.75rem 1rem; /* px-4 py-3 */
  text-align: left;
}

article th {
  background: linear-gradient(to bottom, #f9fafb, #f3f4f6);
  font-weight: 600; /* font-semibold */
  color: #111827; /* text-gray-900 */
  position: relative;
}

article tr:nth-child(even) {
  background-color: #f9fafb; /* bg-gray-50 */
}

article tr:hover {
  background-color: #eff6ff; /* bg-blue-50 */
  transition: background-color 0.2s ease;
}

/* Images */
article img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin: 1.5rem 0; /* my-6 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
article img:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Horizontal rules */
article hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(229, 231, 235, 0), rgba(229, 231, 235, 0.75), rgba(229, 231, 235, 0));
  margin: 2rem 0; /* my-8 */
}

/* Strong and emphasis */
article strong {
  font-weight: 600; /* font-semibold */
  color: #111827; /* text-gray-900 */
  position: relative;
  display: inline-block;
}
article strong::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: rgba(251, 191, 36, 0.3);
  border-radius: 2px;
}

article em {
  font-style: italic;
  color: #4b5563;
}
/* text-gray-600 */