/* Post Typography Styles */

/* Enhanced CSS Custom Properties for Post Content */
:root {
  /* Tailwind UI colors for prose elements */
  --tw-prose-body: #52525b;
  --tw-prose-links: #D2691E; /* Using terracotta for links */
  --tw-prose-links-hover: #8B4513; /* Coffee brown on hover */
  --tw-prose-underline: rgba(210, 105, 30, 0.2);
  --tw-prose-underline-hover: #D2691E;
  --tw-prose-bold: var(--coffee-brown);
  --tw-prose-counters: var(--coffee-brown);
  --tw-prose-bullets: var(--terracotta);
  --tw-prose-hr: #f4f4f5;
  --tw-prose-quote-borders: var(--terracotta);
  --tw-prose-captions: #a1a1aa;
  --tw-prose-code: #374151;
  --tw-prose-code-bg: rgba(161, 161, 170, 0.1);
  --tw-prose-pre-code: #f4f4f5;
  --tw-prose-pre-bg: #18181b;
  --tw-prose-pre-border: transparent;
}

/* Base Post Content Styling */
.post-content {
  color: var(--tw-prose-body);
  line-height: 1.8;
  font-size: 1.125rem; /* Slightly larger base size */
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

/* Paragraphs - Matching Spotlight exactly */
.post-content p {
  margin-top: 1.75rem; /* 28px - matching Spotlight */
  margin-bottom: 1.75rem;
  line-height: 1.75rem; /* line-height: 7 in Tailwind */
}

/* First paragraph - Slightly larger */
.post-content > .lexxy-content > p:first-child {
  font-size: 1.125rem;
  line-height: 1.8rem;
  color: var(--text-dark);
}

/* Article-level headings matching Spotlight hierarchy */
.post-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem; /* text-4xl equivalent */
  font-weight: 700;
  line-height: 1.2;
  color: var(--coffee-brown);
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .post-content h1 {
    font-size: 3rem; /* text-5xl on larger screens */
  }
}

.post-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.875rem; /* Back to our dramatic size! */
  font-weight: 600;
  line-height: 1.3;
  color: var(--coffee-brown);
  margin-top: 3rem; /* Reasonable spacing */
  margin-bottom: 1rem;
}

.post-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.375rem; /* Back to our dramatic size! */
  font-weight: 600;
  line-height: 1.4;
  color: var(--coffee-brown);
  margin-top: 2.5rem; /* Reasonable spacing */
  margin-bottom: 0.75rem;
}

.post-content h4 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.125rem; /* text-lg */
  font-weight: 600;
  line-height: 1.5;
  color: var(--coffee-brown);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.post-content :is(h2, h3) + * {
  margin-top: 0;
}

/* Links */
.post-content a {
  color: var(--tw-prose-links);
  font-weight: 600; /* font-semibold */
  text-decoration: underline;
  text-decoration-color: var(--tw-prose-underline);
  transition-property: color, text-decoration-color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.post-content a:hover {
  color: var(--tw-prose-links-hover);
  text-decoration-color: var(--tw-prose-underline-hover);
}

/* Strong and Code in headings */
.post-content strong {
  color: var(--tw-prose-bold);
  font-weight: 600; /* font-semibold */
}

.post-content code {
  display: inline-block;
  color: var(--tw-prose-code);
  font-size: 0.875rem; /* text-sm */
  font-weight: 600; /* font-semibold */
  background-color: var(--tw-prose-code-bg);
  border-radius: 0.5rem; /* rounded-lg */
  padding-left: 0.25rem; /* spacing-1 */
  padding-right: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.post-content a code {
  color: inherit;
}

.post-content :is(h2, h3) code {
  font-weight: 700; /* font-bold */
}

/* Blockquotes */
.post-content blockquote {
  padding-left: 1.5rem;
  border-left-width: 3px;
  border-left-color: var(--tw-prose-quote-borders);
  font-style: italic;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  background: rgba(242, 229, 188, 0.05);
  padding: 1.25rem 1.5rem;
  border-radius: 0.5rem;
  color: var(--text-dark);
}

/* Lists - Tighter spacing */
.post-content ul {
  list-style-type: disc;
}

.post-content ol {
  list-style-type: decimal;
}

.post-content ul,
.post-content ol {
  padding-left: 1.5rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.post-content li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}

.post-content li::marker {
  font-size: 0.875rem;
  font-weight: 600;
}

.post-content ol > li::marker {
  color: var(--tw-prose-counters);
}

.post-content ul > li::marker {
  color: var(--tw-prose-bullets);
}

.post-content li :is(ol, ul) {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.post-content li :is(li, p) {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Code blocks */
.post-content pre {
  color: var(--tw-prose-pre-code);
  font-size: 0.875rem;
  font-weight: 500;
  background-color: var(--tw-prose-pre-bg);
  border-radius: 0.75rem; /* Less extreme rounding */
  padding: 1.5rem;
  overflow-x: auto;
  border: 1px solid;
  border-color: var(--tw-prose-pre-border);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.post-content pre code {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}

/* Horizontal rules */
.post-content hr {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  border-top-width: 1px;
  border-color: var(--tw-prose-hr);
}

/* Images */
.post-content img {
  border-radius: 0.75rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Figures and captions */
.post-content figcaption {
  color: var(--tw-prose-captions);
  font-size: 0.875rem; /* text-sm */
  line-height: 1.5rem; /* line-height-6 */
  margin-top: 0.75rem; /* spacing-3 */
}

.post-content figcaption > p {
  margin: 0;
}