/* Support Astro's pre rendering (rehype-pretty-code / astro-code)
   Render code blocks with a consistent dark background and readable padding */
pre.astro-code,
.astro-code {
	position: relative;
	background: var(--vh-bg-dark) !important;
	padding: 1rem 1.25rem !important;
	border-radius: 0.5rem !important;
	overflow: auto !important;
}

/* Ensure hljs blocks also use the dark background when present */
.hljs {
	background: var(--vh-bg-dark) !important;
	padding: 1rem 1.25rem;
	border-radius: 0.5rem;
}

/* Tokens */
.hljs-comment,
.hljs-quote {
	color: var(--vh-comment);
	font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
	color: var(--vh-purple);
}
.hljs-number,
.hljs-literal,
.hljs-params,
.hljs-built_in,
.hljs-builtin-name,
.hljs-variable,
.hljs-template-variable {
	color: var(--vh-orange);
}
.hljs-string,
.hljs-regexp,
.hljs-link {
	color: var(--vh-green);
}
.hljs-title,
.hljs-section,
.hljs-selector-id {
	color: var(--vh-cyan);
}
.hljs-attr,
.hljs-class .hljs-title {
	color: var(--vh-yellow);
}
.hljs-function,
.hljs-method {
	color: var(--vh-cyan);
}
.hljs-operator,
.hljs-punctuation {
	color: inherit;
}
.hljs-strong {
	color: var(--vh-pink);
	font-weight: 700;
}
.hljs-emphasis {
	font-style: italic;
}

/* Inline code */
code:not(pre code) {
	background: color-mix(in srgb, var(--vh-bg-light) 90%, transparent);
	padding: 0.15em 0.4em;
	border-radius: 0.25rem;
}
.dark code:not(pre code) {
	background: color-mix(in srgb, var(--vh-bg-dark) 90%, transparent);
}

/* Make sure pre > code uses hljs classes */
pre {
	overflow: auto;
}

/* Language label: read from data-language attribute on the pre element */
pre.astro-code::before,
.astro-code::before {
	content: attr(data-language);
	position: absolute;
	top: 0.5rem;
	/* place to the right, leaving space for the copy button at the far right */
	right: 3.2rem;
	background: rgba(255, 255, 255, 0.06);
	color: var(--vh-fg-dark);
	font-size: 0.65rem;
	padding: 0.12rem 0.5rem;
	border-radius: 0.25rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	pointer-events: none;
}

/* Keep inline-styled token colors visible; do not override token color styles */
pre.astro-code span[style],
.astro-code span[style] {
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* If renderers inject inline backgrounds/styles, override them to our dark background */
pre[style],
pre[style] code,
pre[style] span,
pre[style] *,
.astro-code[style],
.astro-code[style] code,
.astro-code[style] span,
.astro-code[style] *,
code[style],
code[style] * {
	background: var(--vh-bg-dark) !important;
	background-color: var(--vh-bg-dark) !important;
	box-shadow: none !important;
}

/* Some renderers add background via CSS variables on the element; set them to our dark bg */
pre[style] {
	--bg: var(--vh-bg-dark) !important;
}