/*
 This CSS file overrides theme defaults for article content.
 - restores normal list behavior
 - adds heading fallbacks
 - makes links visible
 - ensures bold/italic are visible
 - styles inline and block code with good contrast
*/

/* Use standard list markers and spacing so Markdown lists render normally */
.content ul,
.content ol {
  margin: 0 0 1rem 0;
  padding-left: 1.25rem;
  list-style-position: outside;
}

/* Keep nested lists slightly indented */
.content ul ul,
.content ol ol,
.content ul ol,
.content ol ul {
  margin-top: 0.25rem;
  margin-left: 0.75rem;
}

/* Ensure list items use default list rendering (undo card styling) */
.content li {
  background: transparent;
  color: inherit;
  margin: 0 0 0.5rem 0;
  padding: 0;
  border-left: none;
  border-radius: 0;
  display: list-item;
}

/* Paragraph spacing */
.content p {
  margin-bottom: 1rem;
  color: #0f172a;
}

/* Headings fallback (applies whether or not .prose exists) */
.content.prose h1,
.content.prose h2,
.content.prose h3,
.content.prose h4,
.content h1,
.content h2,
.content h3,
.content h4 {
  color: #0b2540;
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.content.prose h1,
.content h1 { font-size: 2.25rem; }
.content.prose h2,
.content h2 { font-size: 1.5rem; }
.content.prose h3,
.content h3 { font-size: 1.25rem; }
.content.prose h4,
.content h4 { font-size: 1.125rem; }

/* Links: color + underline for visibility */
.content.prose a,
.content a {
  color: #0b63d6;
  text-decoration: no-underline;
  text-underline-offset: 2px;
}
.content.prose a:hover,
.content a:hover {
  color: #a32708;
  text-decoration-thickness: 2px;
}

/* Bold / italic */
.content strong,
.content b { font-weight: 700; }
.content em,
.content i { font-style: italic; }

/* Inline code */
.content code {
  background: #f3f4f6;
  color: #b91c1c;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size: 0.95em;
}

/* Code blocks */
.content pre {
	/* background: #0f172a; near-black background */
  background: #353f55; /* near-black background */
  color: #e6eef8; /* light text for contrast */
  padding: 1rem 1.25rem;
  border-radius: 8px;
  overflow: auto;
  margin-bottom: 1rem;
}
.content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 0.95em;
  display: block;
}

/* Override inline styles and highlighter table cells so pre blocks match
   the desired background color and do not show heavy borders or shadows */
pre[style],
pre.hljs,
pre[class*="language-"],
.content pre,
.content pre[class*="language-"],
.content pre.hljs {
  background-color: #353f55 !important;   /* change to your preferred color */
  /* border: 1px solid #aaaaaa !important;   match to make border invisible */
  box-shadow: none !important;
  outline: none !important;
  color: #0f172a !important; /* ensure text remains readable */
}

/* Ensure inner code elements and line-number cells don't add their own bg */
pre[style] code,
pre[style] .hljs,
pre[style] .hljs-ln,
pre[style] .hljs-ln td,
.content pre code,
.content pre .hljs,
.content pre .hljs-ln,
.content pre .hljs-ln td {
  background-color: transparent !important;
  color: inherit !important;
}

/* Remove focus outline/box-shadow that can look like a thick border when pre is focused */
pre[tabindex],
pre[tabindex]:focus,
pre[tabindex]:focus-visible,
pre.hljs:focus,
pre[class*="language-"]:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* Reset line-number table visuals added by highlighters */
.hljs-ln,
.hljs-ln tbody,
.hljs-ln tr,
.hljs-ln td,
.hljs-ln td.hljs-ln-numbers,
.hljs-ln td.hljs-ln-code {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* If any element still draws a thick border, remove common outline styles */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Stronger fallbacks in case theme CSS overrides our rules */
.content strong,
.content b {
  font-weight: 700 !important;
}

/* Target highlight.js and common language-* class names used by code highlighters */
.content code[class*="language-"],
pre code[class*="language-"],
code[class*="language-"],
pre[class*="language-"],
.hljs,
.content .hljs,
pre.hljs {
  background: #353f55 !important;
  color: #e6eef8 !important;
}

/* Inline code should have a light subtle background and visible text */
.content code,
.content :not(pre) > code {
  background: #f3f4f6 !important;
  color: #b91c1c !important;
  padding: 0.12rem 0.32rem !important;
  border-radius: 4px !important;
}

/* Ensure pre blocks that use hljs or language classes are padded and scrollable */
pre[class*="language-"],
pre.hljs,
.content pre {
  padding: 1rem 1.25rem !important;
  border-radius: 8px !important;
  overflow: auto !important;
	border-color: #4e5f86 !important;
}