/* ============================================================
   PARKR READER — SYNTAX HIGHLIGHTING
   Based on a warm dark theme tuned for the amber color scheme.
   All schemes share this code block base; only accent tokens vary.
   ============================================================ */

/* ============================================================
   CODE BLOCK WRAPPER
   ============================================================ */

.parkr-code-block,
.wp-block-code,
pre[class*="language-"] {
	position: relative;
	background: var(--pr-code-bg, #1e1c1a);
	border-radius: 8px;
	overflow: hidden;
	margin-block: 2em;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Code block header bar */
.parkr-code-header {
	background: rgba(255, 255, 255, 0.04);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: 0.55rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 2.25rem;
}

.parkr-code-dots {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-shrink: 0;
}

.parkr-code-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.parkr-code-dot--red    { background: #ff5f57; }
.parkr-code-dot--yellow { background: #febc2e; }
.parkr-code-dot--green  { background: #28c840; }

.parkr-code-filename {
	font-family: var(--pr-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.6875rem;
	color: rgba(255, 255, 255, 0.38);
	letter-spacing: 0.04em;
	flex: 1;
}

.parkr-code-lang {
	font-family: var(--pr-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.5625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pr-code-accent, #e8a96e);
	opacity: 0.7;
	flex-shrink: 0;
}

/* Copy button */
.parkr-copy-btn {
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	padding: 0.2rem 0.6rem;
	font-family: var(--pr-font-mono, monospace);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
	user-select: none;
	line-height: 1.6;
}

.parkr-copy-btn:hover {
	background: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.25);
}

.parkr-copy-btn.copied {
	background: rgba(40, 200, 64, 0.15);
	color: #28c840;
	border-color: rgba(40, 200, 64, 0.3);
}

/* Code scroll area */
.parkr-code-body,
.parkr-code-block code,
.wp-block-code code,
pre[class*="language-"] code {
	display: block;
	padding: 1.375rem 1.25rem;
	overflow-x: auto;
	font-family: var(--pr-font-mono, 'JetBrains Mono', 'Courier New', monospace);
	font-size: var(--pr-type-mono, 0.9375rem);
	line-height: var(--pr-lead-code, 1.6);
	color: var(--pr-code-text, #e8dfd4);
	background: transparent;
	white-space: pre;
	tab-size: 4;
}

/* Line numbers (optional, added by JS) */
.parkr-code-body .line-number {
	display: inline-block;
	width: 2rem;
	color: rgba(255, 255, 255, 0.2);
	user-select: none;
	margin-right: 1rem;
	text-align: right;
	font-size: 0.8em;
}

/* ============================================================
   SYNTAX TOKENS
   ============================================================ */

/* Comments & documentation */
.tok-comment,
.hljs-comment,
.hljs-quote {
	color: #6b7280;
	font-style: italic;
}

/* Keywords: if, else, return, import, export, function, const, let, var… */
.tok-keyword,
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
	color: #c084fc;
}

/* Strings */
.tok-string,
.hljs-string,
.hljs-attribute,
.hljs-template-variable,
.hljs-template-tag {
	color: #6ee7b7;
}

/* Numbers & booleans */
.tok-number,
.tok-boolean,
.hljs-number,
.hljs-literal {
	color: #fb923c;
}

/* CSS properties, JSON keys, object keys */
.tok-property,
.hljs-attr,
.hljs-selector-class,
.hljs-selector-id {
	color: #93c5fd;
}

/* Values: CSS values, JSON values */
.tok-value,
.hljs-type,
.hljs-class,
.hljs-title {
	color: var(--pr-code-accent, #e8a96e);
}

/* Units & measurements in CSS */
.tok-unit {
	color: #86efac;
}

/* Punctuation: braces, brackets, semicolons */
.tok-punct,
.hljs-punctuation,
.hljs-operator,
.hljs-delimiter {
	color: #9ca3af;
}

/* CSS selectors */
.tok-selector {
	color: #f9a8d4;
}

/* Variables: CSS custom props, JS variables */
.tok-var,
.hljs-variable,
.hljs-params {
	color: #fcd34d;
}

/* Functions */
.tok-function,
.hljs-function {
	color: #60a5fa;
}

/* HTML tag names */
.tok-tag,
.hljs-section {
	color: #f87171;
}

/* Regex */
.tok-regex,
.hljs-regexp {
	color: #f59e0b;
}

/* Symbol / special */
.tok-symbol {
	color: #a78bfa;
}

/* Deletion / insertion (diff) */
.hljs-deletion  { color: #f87171; }
.hljs-addition  { color: #86efac; }
.hljs-emphasis  { font-style: italic; }
.hljs-strong    { font-weight: bold; }

/* ============================================================
   LANGUAGE LABELS ON CODE BLOCKS (auto-inserted by JS)
   ============================================================ */

.parkr-code-block[data-lang]::before {
	/* Language label is rendered in the header, not here */
	content: none;
}

/* ============================================================
   INLINE CODE
   ============================================================ */

:not(pre) > code {
	font-family: var(--pr-font-mono, monospace);
	font-size: 0.875em;
	background: var(--pr-color-paper-warm);
	padding: 0.1em 0.35em;
	border-radius: 3px;
	color: var(--pr-color-accent);
	border: 1px solid var(--pr-color-rule);
}

[data-theme="dark"] :not(pre) > code {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--pr-code-accent, #e8a96e);
}

/* ============================================================
   SCROLLBAR IN CODE BLOCKS
   ============================================================ */

.parkr-code-body::-webkit-scrollbar,
.parkr-code-block code::-webkit-scrollbar,
pre[class*="language-"] code::-webkit-scrollbar {
	height: 5px;
}

.parkr-code-body::-webkit-scrollbar-track,
.parkr-code-block code::-webkit-scrollbar-track,
pre[class*="language-"] code::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04);
}

.parkr-code-body::-webkit-scrollbar-thumb,
.parkr-code-block code::-webkit-scrollbar-thumb,
pre[class*="language-"] code::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 3px;
}

/* ============================================================
   RESPONSIVE CODE
   ============================================================ */

@media (max-width: 640px) {
	.parkr-code-body,
	.parkr-code-block code,
	.wp-block-code code,
	pre[class*="language-"] code {
		font-size: 0.8125rem;
		padding: 1rem 0.875rem;
	}

	.parkr-code-header {
		padding: 0.4rem 0.75rem;
	}

	.parkr-code-filename {
		display: none;
	}
}