/**
 * WebberZone Code Block Highlighting — Frontend utilities
 */

:root {
	--wzcbh-font-size: inherit;
	--wzcbh-toolbar-color: #fff;
	--wzcbh-toolbar-bg: rgba(0, 0, 0, 0.65);
	--wzcbh-toolbar-bg-hover: rgba(0, 0, 0, 0.85);
	--wzcbh-toolbar-outline: rgba(255, 255, 255, 0.6);
	--wzcbh-toolbar-radius: 0.3em;
	--wzcbh-toolbar-padding: 0.1em 0.5em;
}

#wzcbh-copy-live-region {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

pre[class*='language-'],
code[class*='language-'] {
	font-size: var(--wzcbh-font-size);
}

pre.word-wrap,
pre.word-wrap code[class*='language-'] {
	white-space: pre-wrap;
	word-break: break-all;
	overflow-wrap: break-word;
}

/**
 * Line highlight — override Prism's near-invisible defaults (8–10% opacity)
 * and fix vertical alignment.
 *
 * Prism's `padding: inherit 0` makes each stripe inherit the pre's top/bottom
 * padding, causing it to render taller than one line and appear misaligned.
 * Reset padding to zero so the stripe height matches exactly one line row.
 */
.line-highlight {
	padding-top: 0;
	padding-bottom: 0;
	background: hsla(24, 20%, 50%, 0.3);
	background: linear-gradient(to right, hsla(24, 20%, 50%, 0.35) 70%, hsla(24, 20%, 50%, 0));
}

/**
 * Toolbar buttons — accessible across all Prism themes.
 *
 * Prism's defaults use rgba(224,224,224,0.2) background with #bbb text,
 * which fails contrast on light themes. Override with a solid dark background
 * and white text so contrast holds on both light and dark code themes.
 */
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
	color: var(--wzcbh-toolbar-color);
	background: var(--wzcbh-toolbar-bg);
	box-shadow: none;
	border-radius: var(--wzcbh-toolbar-radius);
	padding: var(--wzcbh-toolbar-padding);
}

div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus {
	color: var(--wzcbh-toolbar-color);
	background: var(--wzcbh-toolbar-bg-hover);
	outline: 2px solid var(--wzcbh-toolbar-outline);
	outline-offset: 1px;
}