/* ─────────────────────────────────────────────────────────────
   CODE — pure black, Dracula syntax palette
───────────────────────────────────────────────────────────── */

/* Inline code — explicitly exclude code inside pre */
code, kbd, samp,
.entry-content :not(pre) > code,
.wp-block-paragraph code,
.wp-block-heading code,
.wp-block-list code,
p code, li code, td code, th code {
  font-family: var(--f-mono) !important;
  font-size: 0.84em !important;
  background: #000 !important;
  color: var(--cyan) !important;
  padding: 0.14em 0.44em !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid rgba(0, 220, 255, 0.22) !important;
  white-space: nowrap !important;
}

/* Code block wrapper — position context for rainbow + copy btn, never scrolls */
.code-block-wrap {
  position: relative;
  display: block;
  margin: var(--s6) 0;
}

.code-block-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--cyan)   0%,
    var(--blue)  35%,
    var(--purple) 65%,
    var(--pink)  100%);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  z-index: 1;
  pointer-events: none;
}

/* Block code */
pre {
  font-family: var(--f-mono);
  font-size: 0.875rem;
  line-height: 1.72;
  background: #000;
  color: var(--syn-plain);
  padding: 1rem 1.25rem;
  border-radius: var(--r-lg);
  overflow-x: auto;
  margin: var(--s6) 0;
  border: 1px solid rgba(0, 220, 255, 0.14);
  scrollbar-width: thin;
  scrollbar-color: var(--cyan) transparent;
  box-shadow:
    0 0  0 1px rgba(0,0,0,0.9),
    0 24px 60px rgba(0, 0, 0, 0.8);
}

/* When wrapped by JS, reset margin on pre — wrapper owns it */
.code-block-wrap > pre {
  margin: 0;
  padding-right: 3rem;
}

pre code,
.entry-content pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border: none !important;
  font-size: inherit !important;
  white-space: pre !important;
  border-radius: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

pre::-webkit-scrollbar        { height: 5px; }
pre::-webkit-scrollbar-track  { background: transparent; }
pre::-webkit-scrollbar-thumb  { background: rgba(0, 220, 255, 0.4); border-radius: 3px; }
pre::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* Gutenberg code block */
.wp-block-code {
  background: #000 !important;
  border: 1px solid rgba(0, 220, 255, 0.14) !important;
  border-radius: var(--r-lg) !important;
}

.wp-block-code code {
  font-family: var(--f-mono) !important;
  font-size: 0.875rem !important;
  color: var(--syn-plain) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  white-space: pre !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Copy button — px values so it never shifts at different root font sizes */
.code-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(17, 26, 40, 0.85);
  border: 1px solid rgba(1, 191, 255, 0.2);
  border-radius: 6px;
  color: var(--text-mid);
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
  z-index: 10;
}
.code-copy-btn:hover {
  background: rgba(1, 191, 255, 0.12);
  color: var(--cyan);
  border-color: rgba(1, 191, 255, 0.5);
}
.code-copy-btn--copied {
  background: rgba(1, 191, 255, 0.15) !important;
  color: var(--cyan) !important;
  border-color: var(--cyan) !important;
}

/* Preformatted */
.wp-block-preformatted {
  background: #000;
  font-family: var(--f-mono);
  font-size: 0.875rem;
  padding: var(--s6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(0, 220, 255, 0.14);
  overflow-x: auto;
  color: var(--syn-plain);
}

/* ── Prism.js / highlight.js / SyntaxHighlighter compatibility ── */
.token.comment,    .hljs-comment,    .hljs-quote      { color: var(--syn-comment);  font-style: italic; }
.token.keyword,    .hljs-keyword,    .hljs-selector-tag { color: var(--syn-keyword); }
.token.string,                       .hljs-string,
.token.attr-value, .hljs-attr                          { color: var(--syn-string);  }
.token.function,   .hljs-function,   .hljs-title       { color: var(--syn-function);}
.token.variable,   .hljs-variable,   .hljs-name        { color: var(--syn-variable);}
.token.number,     .hljs-number,     .hljs-literal      { color: var(--syn-number);  }
.token.operator,   .hljs-operator,   .hljs-punctuation  { color: var(--syn-operator);}
.token.tag,        .hljs-tag                            { color: var(--syn-tag);     }
.token.attr-name,  .hljs-attr                           { color: var(--syn-attr);    }
.token.class-name, .hljs-class .hljs-title              { color: var(--syn-variable);}
.token.boolean,    .hljs-built_in                       { color: var(--syn-number);  }
.token.property                                         { color: var(--syn-variable);}
.token.selector                                         { color: var(--syn-keyword); }
.token.unit, .token.constant                            { color: var(--syn-string);  }
.token.regex                                            { color: var(--syn-function);}
.token.deleted                                          { color: var(--syn-operator);}
.token.inserted                                         { color: var(--syn-function);}