/* =========================================================
   HS Code Highlighter 1.1.0
   Syntaxfarben, Akzentlinien und Zeilennummern
   ========================================================= */

.hs-code-highlighter-active {
	--hs-code-bg: #f5f1ee;
	--hs-code-text: #292526;
	--hs-code-border: rgba(91, 74, 62, .20);
	--hs-code-toolbar-bg: rgba(255, 255, 255, .52);
	--hs-code-muted: #786f68;
	--hs-code-gutter: #9b948e;
	--hs-code-accent: #b91c3a;
	--hs-code-accent-dark: #8f342b;
	--hs-code-language-accent: #b91c3a;

	/* MicroLighter-Palette */
	--syntax-background: var(--hs-code-bg);
	--syntax-foreground: var(--hs-code-text);
	--syntax-comment: #77716d;
	--syntax-keyword: #a62d48;
	--syntax-operator: #57504c;
	--syntax-string: #3d7a4b;
	--syntax-constant: #b0522f;
	--syntax-function: #1655a0;
	--syntax-type: #7b4387;
	--syntax-variable: #8a5a16;
	--syntax-property: #1655a0;
	--syntax-tag: #a62d48;
	--syntax-selector: #1655a0;
	--syntax-inserted: #3d7a4b;
	--syntax-deleted: #a62d48;
}

/* =========================================================
   MicroLighter – CSS Custom Highlight API
   ========================================================= */

::highlight(comment),
::highlight(quote) {
	color: var(--syntax-comment);
	font-style: italic;
}

::highlight(keyword),
::highlight(storage),
::highlight(at-rule),
::highlight(doctype),
::highlight(important),
::highlight(section) {
	color: var(--syntax-keyword);
	font-weight: 620;
}

::highlight(operator),
::highlight(punctuation) {
	color: var(--syntax-operator);
}

::highlight(string),
::highlight(regexp),
::highlight(attribute-value),
::highlight(link),
::highlight(raw) {
	color: var(--syntax-string);
}

::highlight(numeric),
::highlight(boolean),
::highlight(constant),
::highlight(symbol),
::highlight(character-entity),
::highlight(anchor),
::highlight(entity) {
	color: var(--syntax-constant);
}

::highlight(function),
::highlight(decorator),
::highlight(animation) {
	color: var(--syntax-function);
	font-weight: 590;
}

::highlight(type),
::highlight(support) {
	color: var(--syntax-type);
}

::highlight(variable),
::highlight(interpolation) {
	color: var(--syntax-variable);
}

::highlight(property),
::highlight(key),
::highlight(attribute-name) {
	color: var(--syntax-property);
}

::highlight(tag) {
	color: var(--syntax-tag);
}

::highlight(selector) {
	color: var(--syntax-selector);
	font-weight: 590;
}

::highlight(inserted) {
	color: var(--syntax-inserted);
}

::highlight(deleted) {
	color: var(--syntax-deleted);
}

/* =========================================================
   Außenrahmen
   ========================================================= */

.hs-code-wrap {
	position: relative;
	margin: 1.65rem 0;
	border: 1px solid var(--hs-code-border);
	border-radius: 12px;
	background: var(--hs-code-bg);
	overflow: hidden;
	box-shadow: 0 8px 26px rgba(42, 35, 31, .055);
	--hs-code-language-accent: #b91c3a;
}

/* Unterschiedliche, aber zurückhaltende Akzente je Sprache. */
.hs-code-lang-php {
	--hs-code-language-accent: #b73727;
}

.hs-code-lang-css {
	--hs-code-language-accent: #245b93;
}

.hs-code-lang-html {
	--hs-code-language-accent: #8e4d36;
}

.hs-code-lang-javascript,
.hs-code-lang-js {
	--hs-code-language-accent: #9a6a16;
}

.hs-code-lang-json {
	--hs-code-language-accent: #74518a;
}

.hs-code-lang-bash,
.hs-code-lang-shell {
	--hs-code-language-accent: #4f725b;
}

.hs-code-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: .38rem .55rem .38rem .85rem;
	background: var(--hs-code-toolbar-bg);
	border-bottom: 2px solid var(--hs-code-language-accent);
}

.hs-code-language {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: .72rem;
	font-weight: 750;
	line-height: 1;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--hs-code-language-accent);
}

/* =========================================================
   Kopierbutton
   ========================================================= */

.hs-code-copy {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	border: 1px solid var(--hs-code-border);
	border-radius: 7px;
	background: rgba(255, 255, 255, .58);
	color: var(--hs-code-text);
	font: inherit;
	font-size: .76rem;
	font-weight: 650;
	line-height: 1;
	padding: .5rem .68rem;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.hs-code-copy::before {
	content: "";
	width: .72rem;
	height: .82rem;
	box-sizing: border-box;
	border: 1.5px solid currentColor;
	border-radius: 2px;
	box-shadow: -.22rem -.22rem 0 -.07rem var(--hs-code-toolbar-bg), -.22rem -.22rem 0 0 currentColor;
	opacity: .82;
}

.hs-code-copy:hover {
	border-color: color-mix(in srgb, var(--hs-code-language-accent) 45%, transparent);
	background: color-mix(in srgb, var(--hs-code-language-accent) 7%, white);
	color: var(--hs-code-language-accent);
	transform: translateY(-1px);
}

.hs-code-copy.is-copied {
	color: var(--hs-code-language-accent);
}

/* =========================================================
   Code + Zeilennummern
   ========================================================= */

.hs-code-block,
.hs-code-wrap pre.hs-code-block {
	position: relative;
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: stretch;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--hs-code-bg) !important;
	color: var(--hs-code-text);
	overflow: hidden !important;
	tab-size: 4;
}

.hs-code-line-numbers {
	display: block;
	box-sizing: border-box;
	min-width: 3.15rem;
	padding: 1.05rem .72rem 1.15rem .8rem;
	border-right: 1px solid var(--hs-code-border);
	background: color-mix(in srgb, var(--hs-code-bg) 88%, white);
	color: var(--hs-code-gutter);
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: .84em;
	font-weight: 450;
	line-height: 1.62;
	text-align: right;
	user-select: none;
	pointer-events: none;
}

.hs-code-block code {
	display: block;
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	padding: 1.05rem 1.15rem 1.15rem;
	background: transparent !important;
	color: inherit;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: .84em;
	font-weight: 450;
	line-height: 1.62;
	white-space: pre;
	word-break: normal;
	overflow-wrap: normal;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Ein sehr feiner optischer Abschluss unter langen Blöcken. */
.hs-code-wrap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: color-mix(in srgb, var(--hs-code-language-accent) 24%, transparent);
	pointer-events: none;
}

/* =========================================================
   Darkmode des Blogs
   ========================================================= */

html.hs-darkmode .hs-code-highlighter-active,
html.hs-darkmode body.hs-code-highlighter-active {
	--hs-code-bg: #171d2c;
	--hs-code-text: #edf0f4;
	--hs-code-border: rgba(255, 255, 255, .13);
	--hs-code-toolbar-bg: rgba(255, 255, 255, .035);
	--hs-code-muted: #aeb5c0;
	--hs-code-gutter: #7f8997;
	--hs-code-accent: #ff8b81;
	--hs-code-accent-dark: #ffc0ba;

	--syntax-background: var(--hs-code-bg);
	--syntax-foreground: var(--hs-code-text);
	--syntax-comment: #96a1ad;
	--syntax-keyword: #ff8b94;
	--syntax-operator: #d6dae0;
	--syntax-string: #9fd1b4;
	--syntax-constant: #f1b08b;
	--syntax-function: #a9bcff;
	--syntax-type: #d0ace2;
	--syntax-variable: #e5bf83;
	--syntax-property: #a9bcff;
	--syntax-tag: #ffaaa1;
	--syntax-selector: #a9bcff;
	--syntax-inserted: #9fd1b4;
	--syntax-deleted: #ff8b94;
}

html.hs-darkmode .hs-code-line-numbers {
	background: rgba(255, 255, 255, .025);
}

html.hs-darkmode .hs-code-copy {
	background: rgba(255, 255, 255, .055);
	color: var(--hs-code-text);
}

html.hs-darkmode .hs-code-copy:hover {
	background: rgba(255, 255, 255, .09);
	color: var(--hs-code-language-accent);
}

/* =========================================================
   Mobil
   ========================================================= */

@media (max-width: 600px) {
	.hs-code-wrap {
		margin: 1.25rem 0;
		border-radius: 9px;
	}

	.hs-code-toolbar {
		min-height: 40px;
		padding-left: .72rem;
	}

	.hs-code-line-numbers {
		min-width: 2.7rem;
		padding: .9rem .58rem 1rem .62rem;
		font-size: .8em;
		line-height: 1.55;
	}

	.hs-code-block code {
		padding: .9rem .9rem 1rem;
		font-size: .8em;
		line-height: 1.55;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hs-code-copy {
		transition: none;
	}

	.hs-code-copy:hover {
		transform: none;
	}
}