/*
 * Brand the DocFX navbar with our two-state logo — the chat-bubble "M" that
 * cross-fades to the branching-pipeline graph on hover, matching the visualization
 * report and the demo landing. Pure CSS: the default logo <img id="logo"> is sized
 * and given a gap before the wordmark, and the pipeline graph is an overlay drawn by
 * .navbar-brand::before, positioned exactly over the logo and revealed on hover.
 *
 * This file lives at a fixed path (public/main.css), so the ../ image URL always
 * resolves to the site-root logo regardless of which page loads it.
 */
.navbar-brand {
  position: relative;
}

.navbar-brand > #logo {
  width: 24px;
  height: 24px;
  margin-right: 0.55rem;
  transition: opacity 0.25s ease;
}

.navbar-brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: url("../logo-pipeline.svg") center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.navbar-brand:hover > #logo {
  opacity: 0;
}

.navbar-brand:hover::before {
  opacity: 1;
}

/*
 * A cozier, more centered reading width than DocFX modern's very wide default
 * (max-width 1768px on large screens) — closer to MDN's feel: shorter lines and
 * more breathing room on the sides. Applies to the navbar too, so it stays aligned.
 */
@media (min-width: 1400px) {
  .container-xxl {
    max-width: 1320px;
  }
}

/*
 * Error-code reference (guide/error-codes.md): theme-aware severity indicators
 * and change highlighting. A single hex cannot meet contrast on both the light
 * and dark backgrounds (amber especially), so each color is defined per theme.
 * Color never carries meaning alone — the severity word and the Bad/Fix labels
 * stay as text for accessibility.
 */
.dd-sev {
  font-weight: 700;
}

.dd-sev--error {
  color: #cf222e;
}

.dd-sev--warning {
  color: #9a6700;
}

.dd-sev--info {
  color: #0969da;
}

.dd-eg-bad {
  color: #cf222e;
  font-weight: 600;
}

.dd-eg-fix {
  color: #1a7f37;
  font-weight: 600;
}

[data-bs-theme="dark"] .dd-sev--error,
[data-bs-theme="dark"] .dd-eg-bad {
  color: #ff7b72;
}

[data-bs-theme="dark"] .dd-sev--warning {
  color: #e3b341;
}

[data-bs-theme="dark"] .dd-sev--info {
  color: #79c0ff;
}

[data-bs-theme="dark"] .dd-eg-fix {
  color: #3fb950;
}

/*
 * Error-code example blocks: give the <pre class="dd-example"> the familiar
 * "code card" look (subtle fill, border, rounded corners) so an example reads as
 * code, not body text. The block is rendered as raw HTML with class="nohighlight"
 * so the <mark> change-highlights survive (the highlighter would otherwise wipe
 * them), which means it does not inherit the theme's .hljs fill — so it is styled
 * here directly, theme-aware.
 */
pre.dd-example {
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 0.85rem 1rem;
  overflow-x: auto;
}

pre.dd-example > code {
  background: none;
  padding: 0;
  border: 0;
  font-size: 0.9em;
}

[data-bs-theme="dark"] pre.dd-example {
  background: #161b22;
  border-color: #30363d;
}

/*
 * Change highlights inside the example code cards: red tint marks the offending
 * token in the broken script, green tint marks the correction in the fix. The
 * <mark> uses class="nohighlight"'s sibling code block, so it is styled here
 * (theme-aware) rather than relying on the browser's default yellow highlight.
 */
mark.dd-mark-bad,
mark.dd-mark-fix {
  border-radius: 3px;
  padding: 0 2px;
}

mark.dd-mark-bad {
  background-color: #ffebe9;
  color: #1f2328;
}

mark.dd-mark-fix {
  background-color: #dafbe1;
  color: #1f2328;
}

[data-bs-theme="dark"] mark.dd-mark-bad {
  background-color: #6e2a2f;
  color: #ffdcd7;
}

[data-bs-theme="dark"] mark.dd-mark-fix {
  background-color: #1f5129;
  color: #d3f9d8;
}