/* Blog code blocks: dark surface matching the docs site's treatment, with a
   header bar (language + copy) added by code-blocks.js. Token colours are
   the dev docs' proven dark palette. */

.entry-content pre {
	background: var(--wpus-gray-900);
	color: var(--wpus-gray-100);
	padding: var(--wpus-space-4);
	border-radius: var(--wpus-radius-md);
	overflow-x: auto;
	font-size: var(--wpus-text-sm);
}

.wpus-code {
	background: var(--wpus-gray-900);
	border-radius: var(--wpus-radius-md);
	overflow: hidden;
	margin: 0 0 var(--wpus-space-4);
}

.wpus-code__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wpus-space-3);
	padding: var(--wpus-space-2) var(--wpus-space-3);
	border-bottom: 1px solid var(--wpus-gray-800);
}

.wpus-code__lang {
	font-size: var(--wpus-text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wpus-gray-400);
}

.wpus-code-copy {
	font: inherit;
	font-size: var(--wpus-text-xs);
	color: var(--wpus-gray-100);
	background: var(--wpus-gray-800);
	border: 0;
	border-radius: var(--wpus-radius-xs);
	padding: 2px 10px;
	cursor: pointer;
}

.wpus-code-copy:hover,
.wpus-code-copy:focus-visible {
	background: var(--wpus-gray-700);
}

.wpus-code pre {
	margin: 0;
	border-radius: 0;
}

/* Highlight.js tokens (dark). */
.hljs { color: var(--wpus-gray-100); background: transparent; }
.hljs-keyword, .hljs-literal, .hljs-selector-tag, .hljs-built_in { color: #b89dff; }
.hljs-string, .hljs-regexp, .hljs-addition { color: #5fd0a5; }
.hljs-comment, .hljs-quote { color: #9aa0ab; font-style: italic; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-deletion { color: #e3b341; }
.hljs-title, .hljs-section, .hljs-function, .hljs-name { color: #7aa7f0; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-meta { color: #e0a96d; }