/*
  Neon Hacker Blog — Code Blocks (Simple Modern)
  - Clean light-gradient snippet surface
  - Header bar with title (left) + copy button (right)
  - Works with Gutenberg .wp-block-code and raw <pre><code>
  - Copy button injected by assets/js/code-copy.js
*/

:root{
  /* Inline code */
  --nhb-inline-bg: #f1f5f9;
  --nhb-inline-border: rgba(15,23,42,0.14);
  --nhb-inline-text: #0f172a;

  /* Block code */
  --nhb-code-surface: #ffffff;
  --nhb-code-border: rgba(15,23,42,0.14);
  --nhb-code-text: #0b1220;
  --nhb-code-muted: rgba(2,6,23,0.62);

  /* Header */
  --nhb-code-header-bg: linear-gradient(180deg, rgba(99,102,241,0.14), rgba(14,165,233,0.08));
  --nhb-code-header-border: rgba(15,23,42,0.10);

  /* Copy button */
  --nhb-copy-bg: rgba(255,255,255,0.82);
  --nhb-copy-border: rgba(15,23,42,0.16);
  --nhb-copy-text: rgba(2,6,23,0.85);
}

pre, code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Inline code — simple, modern */
.entry-content :not(pre) > code,
.comment-content :not(pre) > code,
.nhb-md :not(pre) > code{
  background: var(--nhb-inline-bg) !important;
  color: var(--nhb-inline-text) !important;
  border: 1px solid var(--nhb-inline-border) !important;
  border-radius: 8px !important;
  padding: 0.14em 0.38em !important;
  font-size: 0.95em;
}

/* Block code — light gradient card */
.entry-content pre,
.nhb-md pre,
.wp-block-code pre,
pre.wp-block-code,
pre{
  position: relative;
  background:
    radial-gradient(900px circle at 15% 0%, rgba(99,102,241,0.12), transparent 42%),
    radial-gradient(900px circle at 85% 0%, rgba(14,165,233,0.10), transparent 45%),
    var(--nhb-code-surface) !important;
  color: var(--nhb-code-text) !important;
  border: 1px solid var(--nhb-code-border) !important;
  border-radius: 14px !important;
  padding: 54px 16px 16px !important; /* space for header */
  margin: 1rem 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  box-shadow:
    0 18px 44px rgba(2,6,23,0.10),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

/* Header bar */
.entry-content pre::before,
.nhb-md pre::before,
.wp-block-code pre::before,
pre.wp-block-code::before,
pre::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  border-radius: 14px 14px 0 0;
  background: var(--nhb-code-header-bg);
  border-bottom: 1px solid var(--nhb-code-header-border);
  pointer-events: none;
}

/* Header title (left) — comes from JS via data-nhb-title */
.entry-content pre::after,
.nhb-md pre::after,
.wp-block-code pre::after,
pre.wp-block-code::after,
pre::after{
  content: attr(data-nhb-title);
  position: absolute;
  top: 11px;
  left: 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nhb-code-muted);
  pointer-events: none;
}

/* Code inside */
.entry-content pre code,
.nhb-md pre code,
.wp-block-code pre code,
pre.wp-block-code code,
pre code{
  display: block;
  background: transparent !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-size: 13.5px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
}

/* Copy button (top-right) */
.entry-content pre .copy-btn,
.nhb-md pre .copy-btn,
.wp-block-code pre .copy-btn,
pre.wp-block-code .copy-btn,
pre .copy-btn{
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--nhb-copy-border);
  background: var(--nhb-copy-bg);
  color: var(--nhb-copy-text);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.entry-content pre .copy-btn:hover,
.nhb-md pre .copy-btn:hover,
.wp-block-code pre .copy-btn:hover,
pre .copy-btn:hover{
  background: rgba(255,255,255,0.98);
  border-color: rgba(37,99,235,0.32);
}
pre .copy-btn:active{ transform: translateY(1px); }
pre .copy-btn:focus-visible{ outline: 2px solid rgba(37,99,235,0.55); outline-offset: 2px; }

pre .copy-btn.is-copied{ background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.38); }
pre .copy-btn.is-failed{ background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.38); }

/* Screen-reader helper */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
  Gutenberg wrapper: keep WRAPPER invisible (avoid double container)
  Gutenberg can output either:
   1) <pre class="wp-block-code"><code>...</code></pre>
   2) <figure class="wp-block-code"><pre><code>...</code></pre></figure>

  We only reset the wrapper element (figure/div), NOT a <pre.wp-block-code>.
*/
.wp-block-code:not(pre){
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}