/* Make sure section headings in the content body are obvious */
.content h1,
.content h2,
.content h3 {
  color: #0f172a; /* dark slate */
}

.content h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.content p {
  margin-bottom: 0.75rem;
  color: #334155; /* slate-700 */
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Style Markdown images globally */
.content img {
  display: block;           /* make it centerable */
  margin-left: auto;        /* center horizontally */
  margin-right: auto;
  max-width: 70%;           /* scale down to half width */
  border-radius: 0.5rem;    /* rounded corners like Tailwind */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* soft shadow */
}

.content em {
  display: block;
  text-align: center;
  font-size: 0.9rem;
  color: #6b7280; /* slate-500 */
  margin-top: 0.5rem;
}

code {
  @apply bg-gray-100 text-pink-600 font-mono text-sm px-1 py-0.5 rounded;
}