/**
 * VitePress-style markdown content styles
 * Based on VitePress's vp-doc styling
 */

/* CSS Custom Properties matching VitePress */
:root {
	--vp-c-brand-1: #3451b2;
	--vp-c-brand-2: #3a5ccc;
	--vp-c-brand-soft: rgba(100, 108, 255, 0.14);
	--vp-c-text-1: rgba(60, 60, 67);
	--vp-c-text-2: rgba(60, 60, 67, 0.78);
	--vp-c-text-3: rgba(60, 60, 67, 0.56);
	--vp-c-divider: rgba(60, 60, 67, 0.12);
	--vp-c-bg: #ffffff;
	--vp-c-bg-soft: #f6f6f7;
	--vp-c-bg-alt: #f6f6f7;
	--vp-c-border: rgba(60, 60, 67, 0.12);
	--vp-c-gutter: rgba(60, 60, 67, 0.05);

	/* Tip colors - Green */
	--vp-c-tip-1: #059669;
	--vp-c-tip-2: rgba(5, 150, 105, 0.16);
	--vp-c-tip-3: rgba(5, 150, 105, 0.08);

	/* Warning colors - Orange */
	--vp-c-warning-1: #ea580c;
	--vp-c-warning-2: rgba(234, 88, 12, 0.16);
	--vp-c-warning-3: rgba(234, 88, 12, 0.08);

	/* Danger colors */
	--vp-c-danger-1: #b8272c;
	--vp-c-danger-2: rgba(244, 63, 94, 0.16);
	--vp-c-danger-3: rgba(244, 63, 94, 0.08);

	/* Note/Info colors */
	--vp-c-note-1: #3451b2;
	--vp-c-note-2: rgba(100, 108, 255, 0.16);
	--vp-c-note-3: rgba(100, 108, 255, 0.08);

	/* Important colors */
	--vp-c-important-1: #8250df;
	--vp-c-important-2: rgba(130, 80, 223, 0.16);
	--vp-c-important-3: rgba(130, 80, 223, 0.08);

	/* Caution colors */
	--vp-c-caution-1: #b8272c;
	--vp-c-caution-2: rgba(244, 63, 94, 0.16);
	--vp-c-caution-3: rgba(244, 63, 94, 0.08);

	--vp-code-font-size: 0.9375em;
	--vp-code-line-height: 1.6;
}

/* Base markdown body styles */
.markdown-wc-body {
	color: var(--vp-c-text-1);
	line-height: 1.7;
	font-size: 16px;
}

/* Headings */
.markdown-wc-body h1,
.markdown-wc-body h2,
.markdown-wc-body h3,
.markdown-wc-body h4,
.markdown-wc-body h5,
.markdown-wc-body h6 {
	position: relative;
	font-weight: 600;
	outline: none;
	color: var(--vp-c-text-1);
}

.markdown-wc-body h1 {
	letter-spacing: -0.02em;
	line-height: 40px;
	font-size: 28px;
	margin: 0 0 16px 0;
}

.markdown-wc-body h2 {
	margin: 48px 0 16px;
	border-top: 1px solid var(--vp-c-divider);
	padding-top: 24px;
	letter-spacing: -0.02em;
	line-height: 32px;
	font-size: 24px;
}

.markdown-wc-body h3 {
	margin: 32px 0 0;
	letter-spacing: -0.01em;
	line-height: 28px;
	font-size: 20px;
}

.markdown-wc-body h4 {
	margin: 24px 0 0;
	letter-spacing: -0.01em;
	line-height: 24px;
	font-size: 18px;
}

/* Anchor scroll offset so hash links don't stick to viewport top */
.markdown-wc-body h2[id],
.markdown-wc-body h3[id],
.markdown-wc-body h4[id],
.markdown-wc-body h5[id],
.markdown-wc-body h6[id] {
	scroll-margin-top: 180px;
}

/* Heading anchor hash on hover (VitePress-style) */
.markdown-wc-body h2:has(> a),
.markdown-wc-body h3:has(> a),
.markdown-wc-body h4:has(> a),
.markdown-wc-body h5:has(> a),
.markdown-wc-body h6:has(> a) {
	position: relative;
}

.markdown-wc-body h2:has(> a)::before,
.markdown-wc-body h3:has(> a)::before,
.markdown-wc-body h4:has(> a)::before,
.markdown-wc-body h5:has(> a)::before,
.markdown-wc-body h6:has(> a)::before {
	content: "#";
	position: absolute;
	left: 0;
	top: 0;
	transform: translateX(-1.1em);
	color: var(--vp-c-brand-1);
	opacity: 0;
	font-weight: 600;
	line-height: inherit;
	transition: opacity 0.25s;
}

/* h2 has extra padding-top for the divider; align hash with text */
.markdown-wc-body h2:has(> a)::before {
	top: 24px;
}

/* First h2 after h1 has no divider/padding */
.markdown-wc-body h1 + h2:has(> a)::before {
	top: 0;
}

.markdown-wc-body h2:has(> a):hover::before,
.markdown-wc-body h3:has(> a):hover::before,
.markdown-wc-body h4:has(> a):hover::before,
.markdown-wc-body h5:has(> a):hover::before,
.markdown-wc-body h6:has(> a):hover::before,
.markdown-wc-body h2:has(> a):focus-within::before,
.markdown-wc-body h3:has(> a):focus-within::before,
.markdown-wc-body h4:has(> a):focus-within::before,
.markdown-wc-body h5:has(> a):focus-within::before,
.markdown-wc-body h6:has(> a):focus-within::before {
	opacity: 1;
}

/* First h2 should not have border-top */
.markdown-wc-body h1 + h2 {
	margin-top: 24px;
	border-top: none;
	padding-top: 0;
}

/* Paragraphs */
.markdown-wc-body p {
	margin: 16px 0;
	line-height: 28px;
}

/* First paragraph after heading */
.markdown-wc-body h1 + p,
.markdown-wc-body h2 + p,
.markdown-wc-body h3 + p,
.markdown-wc-body h4 + p {
	margin-top: 8px;
}

/* Links */
.markdown-wc-body a {
	font-weight: 500;
	color: var(--vp-c-brand-1);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition:
		color 0.25s,
		opacity 0.25s;
}

.markdown-wc-body a:hover {
	color: var(--vp-c-brand-2);
}

/* Links inside headings should inherit heading styles */
.markdown-wc-body h1 a,
.markdown-wc-body h2 a,
.markdown-wc-body h3 a,
.markdown-wc-body h4 a,
.markdown-wc-body h5 a,
.markdown-wc-body h6 a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.markdown-wc-body h1 a:hover,
.markdown-wc-body h2 a:hover,
.markdown-wc-body h3 a:hover,
.markdown-wc-body h4 a:hover,
.markdown-wc-body h5 a:hover,
.markdown-wc-body h6 a:hover {
	color: inherit;
}

/* Lists */
.markdown-wc-body ul,
.markdown-wc-body ol {
	padding-left: 1.25rem;
	margin: 16px 0;
}

.markdown-wc-body ul {
	list-style: disc;
}

.markdown-wc-body ol {
	list-style: decimal;
}

.markdown-wc-body li + li {
	margin-top: 8px;
}

.markdown-wc-body li > ol,
.markdown-wc-body li > ul {
	margin: 8px 0 0;
}

/* Inline code */
.markdown-wc-body :not(pre) > code {
	font-size: var(--vp-code-font-size);
	color: var(--vp-c-text-1);
	background-color: var(--vp-c-bg-soft);
	border-radius: 4px;
	padding: 2px 6px;
	font-weight: 500;
	transition:
		color 0.25s,
		background-color 0.5s;
}

/* Ensure code inside pre doesn't have nested background */
.markdown-wc-body pre code {
	background: transparent !important;
}

/* Syntax highlighting color overrides for better contrast */
.markdown-wc-body pre .hljs {
	color: var(--vp-c-text-1);
}

/* Keywords (export, default, const, etc.) */
.markdown-wc-body pre .hljs-keyword,
.markdown-wc-body pre .hljs-selector-tag,
.markdown-wc-body pre .hljs-built_in {
	color: #d73a49;
}

/* Strings */
.markdown-wc-body pre .hljs-string,
.markdown-wc-body pre .hljs-attr {
	color: #032f62;
}

/* Object property names / attributes */
.markdown-wc-body pre .hljs-attr {
	color: #005cc5;
}

/* Comments */
.markdown-wc-body pre .hljs-comment,
.markdown-wc-body pre .hljs-quote {
	color: #6a737d;
	font-style: italic;
}

/* Numbers */
.markdown-wc-body pre .hljs-number {
	color: #005cc5;
}

/* Functions */
.markdown-wc-body pre .hljs-title,
.markdown-wc-body pre .hljs-title.function_ {
	color: #6f42c1;
}

/* Types */
.markdown-wc-body pre .hljs-type,
.markdown-wc-body pre .hljs-class {
	color: #d73a49;
}

/* Diff styling for code blocks */
.markdown-wc-body pre code .hljs-deletion {
	background-color: #ffebee;
	color: #b71c1c;
	padding: 0 2px;
}

.markdown-wc-body pre code .hljs-addition {
	background-color: #e8f5e9;
	color: #1b5e20;
	padding: 0 2px;
}

.markdown-wc-body pre code .hljs-deletion * {
	color: #b71c1c !important;
}

.markdown-wc-body pre code .hljs-addition * {
	color: #1b5e20 !important;
}

.markdown-wc-body pre code .hljs-meta {
	color: inherit;
	font-weight: 600;
}

.markdown-wc-body a > code {
	color: var(--vp-c-brand-1);
}

/* Code blocks */
.markdown-wc-body pre {
	margin: 16px 0;
	padding: 8px 12px;
	background-color: var(--vp-c-bg-soft);
	border-radius: 8px;
	overflow-x: auto;
	position: relative;
}

/* Copy button for code blocks */
.markdown-wc-body pre {
	position: relative;
}

.markdown-wc-body pre > button.mwc-copy-button {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 6px;
	background: var(--vp-c-bg);
	color: var(--vp-c-text-2);
	border: 1px solid var(--vp-c-divider);
	opacity: 0;
	cursor: pointer;
	transition:
		opacity 0.2s,
		color 0.2s,
		border-color 0.2s,
		background-color 0.2s;
}

.markdown-wc-body pre:hover > button.mwc-copy-button {
	opacity: 1;
}

.markdown-wc-body pre > button.mwc-copy-button:hover {
	color: var(--vp-c-text-1);
	border-color: var(--vp-c-border);
	background: var(--vp-c-bg-soft);
}

.markdown-wc-body pre code {
	display: block;
	padding: 0;
	width: fit-content;
	min-width: 100%;
	line-height: var(--vp-code-line-height);
	font-size: var(--vp-code-font-size);
	color: var(--vp-c-text-1);
	background: transparent;
	border-radius: 0;
	font-weight: 400;
	transition: color 0.25s;
}

/* Blockquotes */
.markdown-wc-body blockquote {
	margin: 16px 0;
	border-left: 2px solid var(--vp-c-divider);
	padding-left: 16px;
	color: var(--vp-c-text-2);
	transition:
		border-color 0.5s,
		color 0.5s;
}

.markdown-wc-body blockquote > p {
	margin: 0;
	font-size: 16px;
	line-height: 28px;
}

.markdown-wc-body blockquote[data-mwc-alert] > p {
	font-size: 0.875rem;
	line-height: 1.5rem;
}

/* GitHub-style alerts/callouts */
.markdown-wc-body blockquote[data-mwc-alert] {
	border-left: none;
	border-radius: 8px;
	padding: 16px;
	margin: 16px 0;
	color: var(--vp-c-text-1);
	font-size: 0.875rem;
	line-height: 1.5rem;
}

.markdown-wc-body blockquote[data-mwc-alert] [data-mwc-alert-marker] {
	display: none;
}

.markdown-wc-body blockquote[data-mwc-alert]::before {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.markdown-wc-body blockquote[data-mwc-alert="note"] {
	background-color: var(--vp-c-note-3);
	border: 1px solid var(--vp-c-note-2);
}
.markdown-wc-body blockquote[data-mwc-alert="note"]::before {
	content: "Note";
	color: var(--vp-c-note-1);
}

.markdown-wc-body blockquote[data-mwc-alert="tip"] {
	background-color: var(--vp-c-tip-3);
	border: 1px solid var(--vp-c-tip-2);
}
.markdown-wc-body blockquote[data-mwc-alert="tip"]::before {
	content: "Tip";
	color: var(--vp-c-tip-1);
}

.markdown-wc-body blockquote[data-mwc-alert="important"] {
	background-color: var(--vp-c-important-3);
	border: 1px solid var(--vp-c-important-2);
}
.markdown-wc-body blockquote[data-mwc-alert="important"]::before {
	content: "Important";
	color: var(--vp-c-important-1);
}

.markdown-wc-body blockquote[data-mwc-alert="warning"] {
	background-color: var(--vp-c-warning-3);
	border: 1px solid var(--vp-c-warning-2);
}
.markdown-wc-body blockquote[data-mwc-alert="warning"]::before {
	content: "Warning";
	color: var(--vp-c-warning-1);
}

.markdown-wc-body blockquote[data-mwc-alert="caution"] {
	background-color: var(--vp-c-caution-3);
	border: 1px solid var(--vp-c-caution-2);
}
.markdown-wc-body blockquote[data-mwc-alert="caution"]::before {
	content: "Caution";
	color: var(--vp-c-caution-1);
}

/* Custom callout styling */
.markdown-wc-body .callout,
.markdown-wc-body .custom-block {
	margin: 16px 0;
	border-radius: 8px;
	padding: 16px 16px 8px;
	line-height: 24px;
	font-size: 14px;
	color: var(--vp-c-text-1);
}

.markdown-wc-body .callout p,
.markdown-wc-body .custom-block p {
	margin: 8px 0;
	line-height: 24px;
}

.markdown-wc-body .callout-title,
.markdown-wc-body .custom-block-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	margin-bottom: 8px;
}

/* TIP callout */
.markdown-wc-body .callout.tip,
.markdown-wc-body .custom-block.tip {
	background-color: var(--vp-c-tip-3);
	border: 1px solid var(--vp-c-tip-2);
}

.markdown-wc-body .callout.tip .callout-title,
.markdown-wc-body .custom-block.tip .custom-block-title {
	color: var(--vp-c-tip-1);
}

/* NOTE/INFO callout */
.markdown-wc-body .callout.note,
.markdown-wc-body .callout.info,
.markdown-wc-body .custom-block.info {
	background-color: var(--vp-c-note-3);
	border: 1px solid var(--vp-c-note-2);
}

.markdown-wc-body .callout.note .callout-title,
.markdown-wc-body .callout.info .callout-title,
.markdown-wc-body .custom-block.info .custom-block-title {
	color: var(--vp-c-note-1);
}

/* WARNING callout */
.markdown-wc-body .callout.warning,
.markdown-wc-body .custom-block.warning {
	background-color: var(--vp-c-warning-3);
	border: 1px solid var(--vp-c-warning-2);
}

.markdown-wc-body .callout.warning .callout-title,
.markdown-wc-body .custom-block.warning .custom-block-title {
	color: var(--vp-c-warning-1);
}

/* DANGER/CAUTION callout */
.markdown-wc-body .callout.danger,
.markdown-wc-body .callout.caution,
.markdown-wc-body .custom-block.danger {
	background-color: var(--vp-c-danger-3);
	border: 1px solid var(--vp-c-danger-2);
}

.markdown-wc-body .callout.danger .callout-title,
.markdown-wc-body .callout.caution .callout-title,
.markdown-wc-body .custom-block.danger .custom-block-title {
	color: var(--vp-c-danger-1);
}

/* IMPORTANT callout */
.markdown-wc-body .callout.important {
	background-color: var(--vp-c-important-3);
	border: 1px solid var(--vp-c-important-2);
}

.markdown-wc-body .callout.important .callout-title {
	color: var(--vp-c-important-1);
}

/* Tables */
.markdown-wc-body table {
	display: block;
	border-collapse: collapse;
	margin: 20px 0;
	overflow-x: auto;
}

.markdown-wc-body tr {
	background-color: var(--vp-c-bg);
	border-top: 1px solid var(--vp-c-divider);
	transition: background-color 0.5s;
}

.markdown-wc-body tr:nth-child(2n) {
	background-color: var(--vp-c-bg-soft);
}

.markdown-wc-body th,
.markdown-wc-body td {
	border: 1px solid var(--vp-c-divider);
	padding: 8px 16px;
}

.markdown-wc-body th {
	font-size: 14px;
	font-weight: 600;
	color: var(--vp-c-text-1);
	background-color: var(--vp-c-bg-soft);
}

.markdown-wc-body td {
	font-size: 14px;
}

/* Horizontal rule */
.markdown-wc-body hr {
	margin: 16px 0;
	border: none;
	border-top: 1px solid var(--vp-c-divider);
}

/* Images - General */
.markdown-wc-body img {
	max-width: 100%;
	border-radius: 8px;
}

/* Respect explicit height/width attributes on images */
.markdown-wc-body img[height] {
	height: attr(height px);
}

.markdown-wc-body img[width] {
	width: attr(width px);
}

/* Fallback for browsers that don't support attr() for height/width */
.markdown-wc-body img[height="14"] {
	height: 14px;
}
.markdown-wc-body img[height="18"] {
	height: 18px;
}
.markdown-wc-body img[height="20"] {
	height: 20px;
}
.markdown-wc-body img[height="24"] {
	height: 24px;
}
.markdown-wc-body img[height="32"] {
	height: 32px;
}
.markdown-wc-body img[width="18"] {
	width: 18px;
}
.markdown-wc-body img[width="20"] {
	width: 20px;
}
.markdown-wc-body img[width="24"] {
	width: 24px;
}
.markdown-wc-body img[width="32"] {
	width: 32px;
}

/* Images - Standalone content images */
.markdown-wc-body p > img:only-child {
	display: block;
	margin: 16px auto;
}

/* Images inside links - Always inline (badges, logos, icons) */
.markdown-wc-body a > img {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	border: none;
	border-radius: 3px;
	background-color: transparent;
}

/* Links containing images - inline with spacing */
.markdown-wc-body a:has(> img) {
	display: inline-block;
	text-decoration: none;
}

/* Badge-only paragraphs (no br, sub, or other block content) - flex layout */
.markdown-wc-body p:has(a > img):not(:has(br)):not(:has(sub)):not(:has(sup)) {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

/* Paragraphs with mixed content (br, sub, etc.) - keep normal flow */
.markdown-wc-body p:has(a > img):has(br),
.markdown-wc-body p:has(a > img):has(sub) {
	display: block;
}

.markdown-wc-body p:has(a > img):has(br) a:has(> img),
.markdown-wc-body p:has(a > img):has(sub) a:has(> img) {
	margin-right: 8px;
}

/* Centered content via align attribute */
.markdown-wc-body [align="center"],
.markdown-wc-body p[align="center"],
.markdown-wc-body div[align="center"] {
	text-align: center;
}

/* Badge-only centered paragraphs need justify-content */
.markdown-wc-body p[align="center"]:has(a > img):not(:has(br)):not(:has(sub)):not(:has(sup)) {
	justify-content: center;
}

/* Strong/Bold */
.markdown-wc-body strong {
	font-weight: 600;
}

/* Definition lists */
.markdown-wc-body dt {
	font-weight: 600;
	margin-top: 16px;
}

.markdown-wc-body dd {
	margin-left: 1.25rem;
	margin-top: 4px;
}

/* Keyboard shortcuts */
.markdown-wc-body kbd {
	display: inline-block;
	padding: 0 6px;
	font-size: 12px;
	font-weight: 500;
	line-height: 20px;
	color: var(--vp-c-text-1);
	background-color: var(--vp-c-bg-soft);
	border: 1px solid var(--vp-c-border);
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}