/* Inline text highlighter ({{ highlight(color="green|red") }}) */
span.highlight-green,
span.highlight-red {
    white-space: normal;
    display: inline;
    padding: 0 .15em;
    border-radius: var(--bz-radius-xs);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

span.highlight-green {
    background-color: var(--bz-light-green);
}

span.highlight-red {
    background-color: var(--color-error-light);
}

/*
  CODE BLOCKS (site-wide)
  bonsai.io CodeSnippet: --bz-code-bg ground, --bz-gray-light text,
  --bz-code-snippet-green accents, 6px radius, 24px padding, 14/20 mono.

  config.toml sets highlight_theme = "css", so Zola emits TextMate scope
  classes (z-keyword, z-string, …) and no inline colours; the brand palette
  below maps those scopes.

  `body` prefix lifts specificity over docs.css / blog.css (.docs-content pre,
  .content pre), which load around this file.
*/
body pre.z-code,
body pre[data-lang],
body :is(.docs-content, .content) pre {
    background-color: var(--bz-code-bg);
    color: var(--bz-gray-light);
    border-radius: var(--bz-radius-md);
    padding: 24px;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body pre.z-code > code,
body pre[data-lang] > code,
body :is(.docs-content, .content) pre > code {
    display: block;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: transparent;
    color: inherit;
    padding: 0;
    border: 0;
    border-radius: 0;
    white-space: pre;
    word-break: normal;
}

/* Highlighted lines (```lang,hl_lines=…) */
body pre mark {
    display: block;
    background-color: var(--bz-deep-green-2);
    color: inherit;
}

/* Scope palette */
.z-code .z-keyword,
.z-code .z-storage,
.z-code .z-support,
.z-code .z-entity.z-name.z-function,
.z-code .z-variable.z-function,
.z-code .z-string.z-regexp,
.z-code .z-constant.z-character.z-escape {
    color: var(--bz-code-snippet-green);
}
.z-code .z-string {
    color: var(--bz-medium-green);
}
.z-code .z-variable,
.z-code .z-entity.z-name.z-tag,
.z-code .z-meta.z-mapping.z-key .z-string,
.z-code .z-support.z-type.z-property-name {
    color: var(--bz-white);
}
.z-code .z-constant,
.z-code .z-entity.z-name.z-class,
.z-code .z-entity.z-name.z-type,
.z-code .z-entity.z-other.z-attribute-name {
    color: var(--bz-light-green);
}
.z-code .z-punctuation,
.z-code .z-invalid {
    color: var(--bz-gray-light);
    background: transparent;
}
.z-code .z-punctuation.z-definition.z-string {
    color: inherit;
}
.z-code .z-comment,
.z-code .z-comment .z-punctuation {
    /* ~5:1 on code-bg */
    color: color-mix(in srgb, var(--bz-gray-light) 72%, var(--bz-code-bg));
    font-style: italic;
}

/* Inline code: light-grey chip, dark-blue text */
body :is(.docs-content, .content) :not(pre) > code {
    font-family: var(--font-mono);
    font-size: .875em;
    background-color: var(--bz-light-grey);
    color: var(--bz-dark-blue);
    border: var(--bz-border-hairline) solid var(--bz-gray-light);
    border-radius: var(--bz-radius-sm);
    padding: .1em .35em;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Inline code inside links keeps the link colour */
body :is(.docs-content, .content) a > code {
    color: inherit;
}