/**
 * Markdown Content Spacing
 * Ensures proper spacing between consecutive paragraphs and other markdown elements
 */

/* Ensure paragraphs have proper spacing */
.rendered-markdown-content p {
  margin-bottom: 1em;
}

/* Add extra spacing between consecutive paragraphs */
.rendered-markdown-content p + p {
  margin-top: 1em;
}

/* Handle <br> tags that appear between paragraphs (from multiple newlines) */
.rendered-markdown-content br {
  display: block;
  content: "";
  margin-top: 0.5em;
}

/* Ensure standalone <br> tags create proper spacing */
.rendered-markdown-content p + br {
  margin-top: 0.5em;
}

.rendered-markdown-content br + p {
  margin-top: 0.5em;
}

/* Handle multiple consecutive <br> tags */
.rendered-markdown-content br + br {
  margin-top: 0.5em;
}

/* Lists should have proper spacing */
.rendered-markdown-content ul,
.rendered-markdown-content ol {
  margin-bottom: 1em;
}

/* Spacing between list and paragraph */
.rendered-markdown-content p + ul,
.rendered-markdown-content p + ol {
  margin-top: 0.5em;
}

.rendered-markdown-content ul + p,
.rendered-markdown-content ol + p {
  margin-top: 1em;
}


/* First heading doesn't need top margin */
.rendered-markdown-content h1:first-child,
.rendered-markdown-content h2:first-child,
.rendered-markdown-content h3:first-child,
.rendered-markdown-content h4:first-child,
.rendered-markdown-content h5:first-child,
.rendered-markdown-content h6:first-child {
  margin-top: 0;
}

/* Code blocks should have proper spacing */
.rendered-markdown-content pre {
  margin-top: 1em;
  margin-bottom: 1em;
}

.rendered-markdown-content p + pre {
  margin-top: 1em;
}

.rendered-markdown-content pre + p {
  margin-top: 1em;
}

/* Blockquotes should have proper spacing */
.rendered-markdown-content blockquote {
  margin-top: 1em;
  margin-bottom: 1em;
}

.rendered-markdown-content p + blockquote {
  margin-top: 1em;
}

.rendered-markdown-content blockquote + p {
  margin-top: 1em;
}

/* Tables should have proper spacing */
.rendered-markdown-content table {
  margin-top: 1em;
  margin-bottom: 1em;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-color, #e1e4e8);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.95em;
}

.rendered-markdown-content table thead {
  background-color: var(--table-header-bg, #f6f8fa);
}

.rendered-markdown-content table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--border-color, #e1e4e8);
  color: var(--text-primary, #24292f);
}

.rendered-markdown-content table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color, #e1e4e8);
  color: var(--text-primary, #24292f);
}

.rendered-markdown-content table tbody tr:last-child td {
  border-bottom: none;
}

.rendered-markdown-content table tbody tr:hover {
  background-color: var(--table-row-hover, #f6f8fa);
}

/* Alternate row colors for better readability */
.rendered-markdown-content table tbody tr:nth-child(even) {
  background-color: var(--table-row-alt, #fafbfc);
}

.rendered-markdown-content table tbody tr:nth-child(even):hover {
  background-color: var(--table-row-hover, #f6f8fa);
}

/* Center alignment for table headers if specified */
.rendered-markdown-content table th[align="center"],
.rendered-markdown-content table td[align="center"] {
  text-align: center;
}

.rendered-markdown-content table th[align="right"],
.rendered-markdown-content table td[align="right"] {
  text-align: right;
}

/* Dark mode support */
:root[data-theme="dark"] .rendered-markdown-content table {
  border-color: var(--color-border-primary);
}

:root[data-theme="dark"] .rendered-markdown-content table thead {
  background-color: var(--color-bg-primary);
}

:root[data-theme="dark"] .rendered-markdown-content table th {
  border-bottom-color: var(--color-border-primary);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .rendered-markdown-content table td {
  border-bottom-color: var(--color-border-primary);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .rendered-markdown-content table tbody tr:nth-child(even) {
  background-color: var(--color-bg-primary);
}

:root[data-theme="dark"] .rendered-markdown-content table tbody tr:hover {
  background-color: var(--color-bg-secondary);
}

:root[data-theme="dark"] .rendered-markdown-content table tbody tr:nth-child(even):hover {
  background-color: var(--color-bg-secondary);
}

.rendered-markdown-content p + table {
  margin-top: 1em;
}

.rendered-markdown-content table + p {
  margin-top: 1em;
}

/* Horizontal rules should have proper spacing */
.rendered-markdown-content hr {
  margin-top: 2em;
  margin-bottom: 2em;
}

/* Images should be responsive and have proper spacing */
.rendered-markdown-content img,
.rendered-markdown-content .content-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5em auto;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rendered-markdown-content img:hover,
.rendered-markdown-content .content-image:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* SVG-specific styling for better rendering */
.rendered-markdown-content img[src$=".svg"],
.rendered-markdown-content .content-image[src$=".svg"] {
  /* SVGs often look better without border-radius */
  border-radius: 0;
  /* Allow SVGs to use their intrinsic size or explicit width attribute */
  max-width: 100%;
  /* Optional: Add a subtle background for transparent SVGs */
  background: transparent;
}

/* Images in paragraphs */
.rendered-markdown-content p img {
  margin: 1em auto;
}

/* Spacing between paragraph and image */
.rendered-markdown-content p + img,
.rendered-markdown-content p + .content-image {
  margin-top: 1.5em;
}

.rendered-markdown-content img + p,
.rendered-markdown-content .content-image + p {
  margin-top: 1.5em;
}

/* Image captions (if using title attribute) */
.rendered-markdown-content img[title]::after,
.rendered-markdown-content .content-image[title]::after {
  content: attr(title);
  display: block;
  text-align: center;
  font-size: 0.9em;
  color: #666;
  font-style: italic;
  margin-top: 0.5em;
}

/* Image modal for full-size viewing */
.image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  cursor: pointer;
  animation: fadeIn 0.2s ease;
}

.image-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.image-modal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s;
}

.image-modal-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}