/* ============================================
   Enhanced Code Blocks with Prism.js
   ============================================ */

/* Code block wrapper */
.code-block-wrapper {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Language label */
.code-block-wrapper .code-lang-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.25rem 0.75rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background-color: #5a5a5a;
  border-radius: 0 0 0.375rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
}

/* Copy button */
.code-block-wrapper .copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.35rem 0.65rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  color: #ccc;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.3rem;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 1;
}

.code-block-wrapper:hover .copy-button {
  opacity: 1;
}

.code-block-wrapper .copy-button:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}

.code-block-wrapper .copy-button.copied {
  color: #4ade80;
  border-color: #4ade80;
}

/* Prism overrides */
.code-block-wrapper pre[class*="language-"] {
  margin: 0;
  padding: 2.5rem 1rem 1rem;
  border-radius: 0;
  background: #2d2d2d;
}

.code-block-wrapper pre[class*="language-"] code {
  font-family: 'Fira Code', 'Source Code Pro', 'Consolas', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Line numbers */
.code-block-wrapper .line-numbers {
  padding: 2.5rem 0 1rem 3.5rem !important;
}

.code-block-wrapper .line-numbers-rows {
  top: 2.5rem !important;
}

/* Dark mode support */
[data-theme="dark"] .code-block-wrapper {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .code-block-wrapper pre[class*="language-"] {
  background: #1e1e1e;
}

[data-theme="dark"] .code-block-wrapper .code-lang-label {
  background-color: #4a4a4a;
}