/*
 * PromptUp Blog — Design System Overrides
 * Applies PromptUp's "refined editorial" aesthetic to nextra-theme-blog.
 *
 * Nextra primary color is controlled via HSL custom properties:
 *   --nextra-primary-hue / saturation / lightness
 * Background via --nextra-bg (RGB triplet without commas for rgb()).
 */

/* ─── Color & Background ─── */
:root {
  /* Forest green (#2d6f4d) → HSL(149, 42%, 31%) */
  --nextra-primary-hue: 149deg;
  --nextra-primary-saturation: 42%;
  --nextra-primary-lightness: 31%;

  /* Warm neutral backgrounds matching PromptUp */
  --nextra-bg: 253 252 251; /* #fdfcfb */
}

.dark {
  --nextra-primary-hue: 149deg;
  --nextra-primary-saturation: 42%;
  --nextra-primary-lightness: 55%;

  --nextra-bg: 26 24 21; /* #1a1815 */
}

/* ─── Typography ─── */
html {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}

/* Headings → Newsreader serif */
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  font-family: 'Newsreader', 'Georgia', serif;
  letter-spacing: -0.02em;
}

article h1 {
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 600;
}

/* ─── h2: top border + green accent pip ─── */
article h2 {
  font-size: 1.625rem;
  line-height: 1.3;
  font-weight: 500;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e3df;
  position: relative;
}

article h2::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: #2d6f4d;
}

.dark article h2 {
  border-top-color: #333;
}

.dark article h2::before {
  background: #5db87d;
}

/* ─── h3: left accent border ─── */
article h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 500;
  margin-top: 1.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(45, 111, 77, 0.3);
}

.dark article h3 {
  border-left-color: rgba(93, 184, 125, 0.3);
}

/* Blog post title on index/listing */
article a h2,
article a h3 {
  font-family: 'Newsreader', 'Georgia', serif;
}

/* Body text refinements */
article p,
article li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #3a3835;
}

.dark article p,
.dark article li {
  color: #d4d2cf;
}

/* ─── Links ─── */
article a {
  color: #2d6f4d;
  text-decoration: underline;
  text-decoration-color: rgba(45, 111, 77, 0.3);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}

article a:hover {
  text-decoration-color: #2d6f4d;
}

.dark article a {
  color: #5db87d;
  text-decoration-color: rgba(93, 184, 125, 0.3);
}

.dark article a:hover {
  text-decoration-color: #5db87d;
}

/* ─── Code blocks ─── */
article pre {
  border: 1px solid #e5e3df;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  margin: 1.75rem 0;
}

.dark article pre {
  border-color: #333;
}

article :not(pre) > code {
  background: #f3f1ee;
  color: #2d6f4d;
  padding: 0.15em 0.35em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.dark article :not(pre) > code {
  background: #2a2825;
  color: #5db87d;
}

/* ─── Blockquotes ─── */
article blockquote {
  border-left: 3px solid #2d6f4d;
  padding-left: 1.25rem;
  color: #5f5d5a;
  font-style: italic;
}

.dark article blockquote {
  border-left-color: #5db87d;
  color: #908e8b;
}

/* ─── Horizontal rules — gradient fade ─── */
article hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #d4d2cf 20%, #d4d2cf 80%, transparent);
  margin: 3rem 0;
}

.dark article hr {
  background: linear-gradient(to right, transparent, #444 20%, #444 80%, transparent);
}

/* ─── Tables — rounded, striped, hover ─── */
article table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e5e3df;
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}

article thead th {
  background: #f3f1ee;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e3df;
  color: #5f5d5a;
}

article tbody td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid #f0efec;
}

article tbody tr:nth-child(even) {
  background: rgba(243, 241, 238, 0.5);
}

article tbody tr:hover {
  background: rgba(45, 111, 77, 0.04);
}

article tbody tr:last-child td {
  border-bottom: none;
}

.dark article table {
  border-color: #333;
}

.dark article thead th {
  background: #2a2825;
  border-bottom-color: #333;
  color: #908e8b;
}

.dark article tbody td {
  border-bottom-color: #2a2825;
}

.dark article tbody tr:nth-child(even) {
  background: rgba(42, 40, 37, 0.5);
}

.dark article tbody tr:hover {
  background: rgba(93, 184, 125, 0.04);
}

/* ─── Lists — custom bullets ─── */
article ul {
  list-style: none;
  padding-left: 1.5rem;
}

article ul > li {
  position: relative;
  padding-left: 0.25rem;
}

article ul > li::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2d6f4d;
}

.dark article ul > li::before {
  background: #5db87d;
}

article ol {
  padding-left: 1.5rem;
}

article ol > li::marker {
  color: #2d6f4d;
  font-weight: 600;
}

.dark article ol > li::marker {
  color: #5db87d;
}

/* Nested list indent */
article ul ul,
article ol ol,
article ul ol,
article ol ul {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* ─── Images — rounded + shadow ─── */
article img {
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dark article img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ─── Spacing rhythm ─── */
article > * + * {
  margin-top: 1.25rem;
}

article > h2 + * {
  margin-top: 0.75rem;
}

article > h3 + * {
  margin-top: 0.5rem;
}

/* ─── Navbar refinement ─── */
nav a {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ─── Footer ─── */
footer {
  color: #908e8b;
}

/* ─── Post metadata (date, tags) ─── */
article time {
  color: #908e8b;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* ─── Smooth transitions ─── */
* {
  transition-property: color, background-color, border-color;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

/* ═══════════════════════════════════════════════
   Custom MDX Components
   ═══════════════════════════════════════════════ */

/* ─── KeyTakeaway ─── */
.blog-key-takeaway {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid #2d6f4d;
  border-radius: 0 0.5rem 0.5rem 0;
  background: linear-gradient(135deg, rgba(45, 111, 77, 0.06) 0%, rgba(93, 184, 125, 0.04) 100%);
}

.blog-key-takeaway-title {
  font-family: 'Newsreader', 'Georgia', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #2d6f4d;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.blog-key-takeaway-content {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #3a3835;
}

.blog-key-takeaway-content ol,
.blog-key-takeaway-content ul {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.dark .blog-key-takeaway {
  border-left-color: #5db87d;
  background: linear-gradient(135deg, rgba(93, 184, 125, 0.08) 0%, rgba(45, 111, 77, 0.04) 100%);
}

.dark .blog-key-takeaway-title {
  color: #5db87d;
}

.dark .blog-key-takeaway-content {
  color: #d4d2cf;
}

/* ─── CompareBlock ─── */
.blog-compare-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.75rem 0;
}

@media (max-width: 640px) {
  .blog-compare-block {
    grid-template-columns: 1fr;
  }
}

.blog-compare-side {
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid;
}

.blog-compare-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.blog-compare-content {
  font-size: 0.9375rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Before / Bad — red tones */
.blog-compare-side--before,
.blog-compare-side--bad {
  background: rgba(220, 53, 69, 0.04);
  border-color: rgba(220, 53, 69, 0.2);
}

.blog-compare-side--before .blog-compare-label,
.blog-compare-side--bad .blog-compare-label {
  color: #c0392b;
}

/* After / Good — green tones */
.blog-compare-side--after,
.blog-compare-side--good {
  background: rgba(45, 111, 77, 0.04);
  border-color: rgba(45, 111, 77, 0.2);
}

.blog-compare-side--after .blog-compare-label,
.blog-compare-side--good .blog-compare-label {
  color: #2d6f4d;
}

/* Dark mode — CompareBlock */
.dark .blog-compare-side--before,
.dark .blog-compare-side--bad {
  background: rgba(220, 53, 69, 0.08);
  border-color: rgba(220, 53, 69, 0.25);
}

.dark .blog-compare-side--before .blog-compare-label,
.dark .blog-compare-side--bad .blog-compare-label {
  color: #e74c3c;
}

.dark .blog-compare-side--after,
.dark .blog-compare-side--good {
  background: rgba(93, 184, 125, 0.08);
  border-color: rgba(93, 184, 125, 0.25);
}

.dark .blog-compare-side--after .blog-compare-label,
.dark .blog-compare-side--good .blog-compare-label {
  color: #5db87d;
}

.dark .blog-compare-content {
  color: #d4d2cf;
}