/* =====================================================
   PYPATH — CODE BLOCKS
   Syntax highlighting cards, copy button, output blocks
===================================================== */

/* ── Code Block Wrapper ── */
.code-block {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
}

.code-lang-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.code-lang-label .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 6px var(--accent-emerald);
}
.code-lang-label .dot.py  { background: #4ecca3; box-shadow: 0 0 6px #4ecca3; }
.code-lang-label .dot.bash{ background: #e2b96f; box-shadow: 0 0 6px #e2b96f; }
.code-lang-label .dot.json{ background: #53c0f0; box-shadow: 0 0 6px #53c0f0; }
.code-lang-label .dot.html{ background: #f97316; box-shadow: 0 0 6px #f97316; }
.code-lang-label .dot.yaml{ background: #e2b96f; box-shadow: 0 0 6px #e2b96f; }
.code-lang-label .dot.sql { background: #a855f7; box-shadow: 0 0 6px #a855f7; }
.code-lang-label .dot.toml{ background: #84cc16; box-shadow: 0 0 6px #84cc16; }

.code-filename {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-left: 0.5rem;
  opacity: 0.7;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}
.copy-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-default); }
.copy-btn.copied { color: var(--accent-emerald); border-color: var(--accent-emerald); }
.copy-btn svg { width: 12px; height: 12px; }

/* ── Prism Overrides ── */
pre[class*="language-"] {
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: var(--bg-code) !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  tab-size: 4;
  padding: 1.25rem 1.5rem !important;
  overflow-x: auto;
}

code[class*="language-"] {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: inherit !important;
  background: none !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: unset;
  text-shadow: none !important;
}

/* Prism token colors for dark theme */
[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata { color: #6e7a8a; font-style: italic; }

[data-theme="dark"] .token.keyword,
[data-theme="dark"] .token.important { color: #c792ea; }

[data-theme="dark"] .token.string,
[data-theme="dark"] .token.char,
[data-theme="dark"] .token.attr-value { color: #c3e88d; }

[data-theme="dark"] .token.number,
[data-theme="dark"] .token.boolean { color: #f78c6c; }

[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name { color: #82aaff; }

[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.punctuation { color: #89ddff; }

[data-theme="dark"] .token.builtin { color: #4ecca3; }

[data-theme="dark"] .token.decorator { color: #e2b96f; }

/* Light theme Prism overrides */
[data-theme="light"] pre[class*="language-"] {
  background: #f5f3ef !important;
}
[data-theme="light"] .token.comment  { color: #6a7785; }
[data-theme="light"] .token.keyword  { color: #7c3aed; }
[data-theme="light"] .token.string   { color: #166534; }
[data-theme="light"] .token.number   { color: #c2410c; }
[data-theme="light"] .token.function { color: #1d4ed8; }
[data-theme="light"] .token.builtin  { color: #2a7a62; }

/* Left accent border on code blocks */
.code-block pre[class*="language-"] {
  border-left: 3px solid var(--border-code) !important;
}

/* ── Output Block ── */
.output-block {
  position: relative;
  margin: 0.25rem 0 1.5rem;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-top: none;
}
.output-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: var(--bg-output);
  border-bottom: 1px solid var(--border-subtle);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.output-block pre {
  margin: 0 !important;
  padding: 0.75rem 1.5rem !important;
  background: var(--bg-output) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.82rem !important;
  color: #a8d5a2 !important;
  line-height: 1.6 !important;
  overflow-x: auto;
  border: none !important;
  border-radius: 0 !important;
}
[data-theme="light"] .output-block pre { color: #2d4a2a !important; }

/* ── Inline code in prose ── */
p code, li code, td code, h4 code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875em;
  background: var(--bg-code);
  color: var(--accent-emerald);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}
[data-theme="light"] p code,
[data-theme="light"] li code { color: #1a6a50; }

/* ── Code block wrapping for simple pre/code (non-enhanced) ── */
.lesson pre:not(.code-block pre) {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 10px;
  border-left: 3px solid var(--border-code);
  overflow: hidden;
}