/* -- Site-level style overrides --
   Loaded after the compiled Blowfish bundle (see layouts/partials/extend-head.html).
   Never edit themes/blowfish/ directly. */

/* ---------------------------------------------------------------
   Code blocks
   Blowfish renders code as a flat white panel with no border, so it
   blends into the page. Give it a distinct panel instead.
   Blowfish's chroma rules are unlayered, so these rules deliberately
   mirror its specificity to win: `.highlight-wrapper pre.chroma`
   (0,2,1) against its `.chroma` (0,1,0).
   --------------------------------------------------------------- */

.highlight-wrapper {
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  background-color: #f6f8fa;
  border-color: #d0d7de;
}

html.dark .highlight-wrapper {
  background-color: #161b22;
  border-color: #30363d;
}

.highlight-wrapper pre.chroma,
.highlight-wrapper pre {
  background-color: transparent;
  font-size: 0.875rem;
  line-height: 1.7;
}

/* Horizontal padding lives on the panel so highlighted lines
   (`.chroma .hl`, negative-margined in the theme) line up. */
.highlight-wrapper .chroma {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Neutralise the theme's negative margin on highlighted lines so
   they cannot bleed outside the rounded panel. */
.chroma .hl {
  margin-left: 0;
  margin-right: 0;
}

/* Inline code: keep it visually distinct from fenced blocks. */
.prose :not(pre) > code {
  background-color: #f0f1f3;
  border-radius: 0.25rem;
  padding: 0.15em 0.4em;
  font-size: 0.875em;
}

.prose :not(pre) > code::before,
.prose :not(pre) > code::after {
  content: none;
}

html.dark .prose :not(pre) > code {
  background-color: #21262d;
}

/* Copy button: Blowfish only reveals it on hover; make it readable. */
.highlight-wrapper > .copy-button {
  border-radius: 0.375rem;
}