/* addon-markdown.css */
/* Styles specifically for content within .markdown-body */

.markdown-body h1:first-child {
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
}

.markdown-body blockquote,
.markdown-body details,
.markdown-body dl,
.markdown-body ol,
.markdown-body p,
.markdown-body pre,
.markdown-body table,
.markdown-body ul {
  margin-bottom: 16px;
  margin-top: 0;
}

.markdown-body h1 {
  font-size: 2em;
  line-height: 1.2;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
}

.markdown-body h2 {
  font-size: 1.75em;
  line-height: 1.25;
  margin-top: 1.4em;
  margin-bottom: 0.7em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
}

.markdown-body h3 {
  font-size: 1.5em;
  line-height: 1.3;
  margin-top: 1.3em;
  margin-bottom: 0.6em;
}

.markdown-body h4 {
  font-size: 1.25em;
  line-height: 1.35;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
}

.markdown-body h5 {
  font-size: 1.1em;
  line-height: 1.4;
  margin-top: 1.1em;
  margin-bottom: 0.4em;
}

.markdown-body h6 {
  font-size: 1em;
  line-height: 1.4;
  margin-top: 1em;
  margin-bottom: 0.3em;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-family: inherit;
  font-weight: bold;
}

.markdown-body p, /* For word wrap on paragraphs */
.markdown-body li, /* For word wrap on list items */
.markdown-body h1, /* For word wrap on headings */
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* --- Blockquotes --- */
.markdown-body blockquote {
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 1em;
  padding-inline-end: 1em;
  padding-block-start: 0.5em;
  padding-block-end: 0.5em;
  border-inline-start: 0.25em solid var(--surface-3);
}
.markdown-body blockquote p {
  margin-bottom: 0.5em;
}
.markdown-body blockquote p:last-child {
  margin-bottom: 0;
}

/* --- Images --- */
.markdown-body img {
  display: inline-block;
  height: auto;
  max-width: 100%; /* Essential for responsiveness */
}
/* If the source had specific light/dark mode image swapping logic via #gh-dark-mode-only etc., keep that. */
html:not(.dark) .markdown-body img[src$="#gh-dark-mode-only"],
html:not([class*="dark"]) .markdown-body img[src$="#gh-dark-mode-only"] /* Broader check for no dark class */ {
  display: none;
}
.dark .markdown-body img[src$='#gh-light-mode-only'] {
  display: none;
}

/* --- Code Blocks & Inline Code --- */
.markdown-body pre {
  background-color: var(--surface-2); /* YOUR theme's surface color */
  border: 1px solid var(--border); /* YOUR theme's border color */
  border-radius: var(--radius-md, 0.375rem); /* YOUR theme's radius or source's */
  overflow-x: auto;
  padding: 1em; /* From source or adjusted */
  font-family: var(
    --font-mono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    Liberation Mono,
    monospace
  ); /* Your monospace font */
  font-size: 0.875em; /* Typically slightly smaller */
  line-height: 1.6; /* Adjust for readability */
}

.markdown-body pre code {
  background-color: transparent !important; /* Ensure no nested background */
  padding: 0 !important;
  border: none !important;
  font-size: inherit !important; /* Inherit from parent <pre> */
  color: inherit !important; /* Inherit from parent <pre> */
  font-family: inherit !important; /* Inherit from parent <pre> */
}

.markdown-body code {
  /* Inline code */
  background-color: var(--surface-2); /* YOUR theme's surface color */
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.2em 0.4em;
  font-family: var(
    --font-mono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    Liberation Mono,
    monospace
  ); /* Your monospace font */
  font-size: 0.875em; /* Match pre code or slightly different */
  /* color: var(--accent); /* Optional: Use an accent color for inline code text */
}

/* --- Horizontal Rules --- */
.markdown-body hr {
  border: 0;
  border-top: 1px solid var(--border); /* YOUR theme's border color */
  margin: 2em 0; /* From source or adjusted (20px from source) */
}

/* --- Tables --- */
.markdown-body table {
  width: 100%; /* Or max-content from source, but 100% is often better for responsiveness */
  max-width: 100%;
  margin-bottom: 1em; /* Consistent spacing */
  border-collapse: collapse; /* Or 'separate' from source if specific spacing/radius is needed */
  border-spacing: 0; /* If collapse is separate, source used 0 */
  border: 1px solid var(--border); /* YOUR theme's border color for the outer table border */
  /* border-radius: var(--radius-md); /* If using border-collapse: separate and source had radius */
  /* display: block; /* Only if you need overflow:auto on the table itself */
  /* overflow: auto; */
}
.markdown-body th,
.markdown-body td {
  padding: 0.5em 0.75em; /* From source (e.g. .4rem .85rem) or adjusted */
  border: 1px solid var(--border); /* YOUR theme's border for cells */
  text-align: left;
  line-height: 1.5; /* From source */
}
.markdown-body th {
  font-weight: 600; /* From source */
  background-color: var(--surface-2); /* Optional: Slight background for headers using YOUR theme */
}
.markdown-body tr:nth-child(2n) td {
  /* Table striping for data rows */
  background-color: var(
    --surface-1
  ); /* YOUR theme's subtle stripe color, ensure it's different from default row bg */
  /* If your default table row bg is transparent, this would be var(--surface-1) or similar */
}

/* --- Details & Summary (Collapsible sections) --- */
.markdown-body details {
  border: 1px solid var(--border); /* YOUR theme's border */
  border-radius: var(--radius-md, 0.375rem);
  padding: 0.75em; /* Simplified padding, or use source's complex padding */
  margin-bottom: 1em;
  background-color: var(--surface-1); /* Optional background */
}
.markdown-body details summary {
  cursor: pointer;
  font-weight: 600; /* From source */
  padding: 0.5em; /* Adjust for clickability */
  margin: -0.75em -0.75em 0.75em -0.75em; /* Pull out to align with details padding if details has bg */
  background-color: var(--surface-2); /* Optional: different bg for summary */
  border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0; /* Round top corners if details has bg */
  list-style-position: inside; /* Or remove default marker and add custom one */
}
.markdown-body details[open] summary {
  margin-bottom: 0.75em; /* Add space below summary when open */
  border-bottom: 1px solid var(--border); /* Optional: separator when open */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.markdown-body details > *:not(summary) {
  margin-top: 0.75em;
}
.markdown-body details[open] > :last-child:not(summary) {
  margin-bottom: 0 !important;
}

/* --- iFrames and Videos --- */
.markdown-body iframe,
.markdown-body video {
  display: block; /* Ensures margins work correctly */
  max-width: 100%;
  /* width: 850px; /* Source had this, but max-width: 100% makes it responsive */
  aspect-ratio: 16 / 9; /* Keep from source */
  height: auto; /* Derived from aspect-ratio and width */
  margin: 1em auto; /* Center it and add vertical space */
  border-radius: var(--radius-lg, 0.5rem); /* Optional: if you want rounded embeds */
  border: 1px solid var(--border); /* Optional: border around embeds */
}
/* @media screen and (max-width: 850px) { /* Adjust breakpoint if using fixed width initially */
/* .markdown-body iframe, */
/* .markdown-body video { */
/* width: 100%; */
/* } */
/* } */

/* --- Lists (ul, ol) --- */
.markdown-body ul,
.markdown-body ol {
  padding-inline-start: 2em; /* Or value from source (e.g., 40px) */
}
.markdown-body li {
  margin-bottom: 0.5em; /* Spacing between list items */
}
.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ul,
.markdown-body ol ol {
  margin-bottom: 0; /* Remove bottom margin for nested lists from the general rule */
  margin-top: 0.5em; /* Space before nested list */
}

/* --- Syntax Highlighting (HLJS) - Colors adapted to YOUR theme --- */
/* This part requires manual mapping. For each .hljs-* class from the source, */
/* decide which of YOUR theme colors (var(--primary), var(--secondary), var(--accent), */
/* var(--foreground-muted), etc.) is most appropriate. */
/* You might need to define new semantic color variables in your :root if you don't have good matches. */

.markdown-body .hljs {
  /* Base text color for code blocks */
  color: var(--foreground); /* Or a slightly muted version: var(--foreground-muted) */
  background: none; /* Pre already has background */
}

.markdown-body .hljs-comment,
.markdown-body .hljs-quote {
  color: var(--muted-foreground); /* Example: use your muted text color */
  /* font-style: italic; /* Optional for comments */
}

.markdown-body .hljs-keyword,
.markdown-body .hljs-selector-tag,
.markdown-body .hljs-subst {
  color: var(--primary); /* Example: use your primary color */
  /* font-weight: bold; /* Optional */
}

.markdown-body .hljs-number,
.markdown-body .hljs-literal, /* true, false, null */
.markdown-body .hljs-variable,
.markdown-body .hljs-template-variable,
.markdown-body .hljs-regexp {
  color: var(--accent); /* Example: use your accent color */
}

.markdown-body .hljs-string,
.markdown-body .hljs-doctag {
  color: var(--success); /* Example: use your success color (often green for strings) */
}

.markdown-body .hljs-title, /* Class and function names */
.markdown-body .hljs-section, /* Markdown section headers in code */
.markdown-body .hljs-selector-id,
.markdown-body .hljs-selector-class {
  color: var(--secondary); /* Example: use your secondary color */
  /* font-weight: bold; /* Optional */
}

.markdown-body .hljs-emphasis {
  font-style: italic;
}

.markdown-body .hljs-strong {
  font-weight: bold;
}

.markdown-body .hljs-meta, /* Annotations, !important, etc. */
.markdown-body .hljs-link {
  color: var(--warning); /* Example */
}

.markdown-body .hljs-attribute {
  color: var(--blueprint); /* Example */
}

.markdown-body .hljs-addition {
  /* background-color: rgba(0, 255, 0, 0.1); /* Example subtle green background */
  color: var(--success);
}
.markdown-body .hljs-deletion {
  /* background-color: rgba(255, 0, 0, 0.1); /* Example subtle red background */
  color: var(--destructive);
}
