/* ==========================================================================
   Code blocks. Markup comes from the core Code block; assets/js/code-blocks.js
   wraps each <pre> in .fcs-code with a header bar (file path or language
   badge + copy button). Before JS runs the raw block still looks right.
   ========================================================================== */

:root {
  --fcs-code-bg: #0f172a;
  --fcs-code-bar: #111a2e;
  --fcs-code-border: #1f2a44;
  --fcs-code-text: #e2e8f0;
  --fcs-code-muted: #94a3b8;
  --fcs-code-inline-bg: #eef2f7;
  --fcs-code-inline-fg: #0f172a;
}
:root[data-theme="dark"] {
  --fcs-code-bg: #0b1220;
  --fcs-code-bar: #0f172a;
  --fcs-code-border: #1f2a44;
  --fcs-code-inline-bg: #172238;
  --fcs-code-inline-fg: #e2e8f0;
}

.fcs-code {
  margin: 1.5em 0;
  border: 1px solid var(--fcs-code-border);
  border-radius: var(--fcs-radius);
  background: var(--fcs-code-bg);
  overflow: hidden;
  box-shadow: var(--fcs-shadow-sm);
}
.fcs-code__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 40px;
  padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  background: var(--fcs-code-bar);
  border-bottom: 1px solid var(--fcs-code-border);
  color: var(--fcs-code-muted);
  font-family: var(--fcs-font-mono);
  font-size: 12px;
}
.fcs-code__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcs-code__lang {
  padding: 0.1rem 0.5rem;
  border-radius: var(--fcs-radius-pill);
  background: rgba(148, 163, 184, 0.15);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.fcs-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 30px;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--fcs-code-border);
  border-radius: var(--fcs-radius-sm);
  background: transparent;
  color: var(--fcs-code-muted);
  font: 600 12px/1 var(--fcs-font-sans);
  cursor: pointer;
  transition: background var(--fcs-dur) var(--fcs-ease), color var(--fcs-dur) var(--fcs-ease);
}
.fcs-copy:hover, .fcs-copy:focus-visible { background: rgba(148, 163, 184, 0.15); color: #fff; }
.fcs-copy.is-copied { color: #4ade80; border-color: #4ade80; }

/* The <pre> itself, with and without the wrapper */
body:not(.is-root-container) .wp-block-code {
  position: relative;
  margin: 1.5em 0;
  padding: 0;
  border: 1px solid var(--fcs-code-border);
  border-radius: var(--fcs-radius);
  background: var(--fcs-code-bg);
  color: var(--fcs-code-text);
  font-family: var(--fcs-font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  -webkit-font-smoothing: auto;
}
.fcs-code > .wp-block-code { margin: 0; border: 0; border-radius: 0; box-shadow: none; }

body:not(.is-root-container) .wp-block-code code {
  display: block;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  font: inherit;
  color: inherit;
  background: transparent;
  tab-size: 4;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}

/* File-path label above a block (before JS moves it into the bar) */
body:not(.is-root-container) .code-path {
  margin: 1.5em 0 0;
  padding: 0.4rem 0.9rem;
  background: var(--fcs-code-bar);
  border: 1px solid var(--fcs-code-border);
  border-bottom: 0;
  border-radius: var(--fcs-radius) var(--fcs-radius) 0 0;
  color: var(--fcs-code-muted);
  font-family: var(--fcs-font-mono);
  font-size: 12px;
  overflow-x: auto;
  white-space: nowrap;
}
body:not(.is-root-container) .code-path code { font: inherit; color: inherit; background: none; padding: 0; }
body:not(.is-root-container) .code-path + .wp-block-code { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* Inline code in running text */
.entry-content :not(pre):not(.code-path) > code {
  font-family: var(--fcs-font-mono);
  font-size: 0.875em;
  padding: 0.12em 0.4em;
  border-radius: 4px;
  background: var(--fcs-code-inline-bg);
  color: var(--fcs-code-inline-fg);
  font-variant-ligatures: none;
  overflow-wrap: anywhere;
}
.entry-content a > code { color: inherit; }

/* Prism tokens on the dark background (one palette for both themes) */
.wp-block-code .token.comment, .wp-block-code .token.prolog, .wp-block-code .token.doctype, .wp-block-code .token.cdata { color: #7c8aa5; font-style: italic; }
.wp-block-code .token.punctuation { color: #94a3b8; }
.wp-block-code .token.property, .wp-block-code .token.tag, .wp-block-code .token.constant, .wp-block-code .token.symbol { color: #7dd3fc; }
.wp-block-code .token.boolean, .wp-block-code .token.number { color: #fbbf24; }
.wp-block-code .token.selector, .wp-block-code .token.attr-name, .wp-block-code .token.string, .wp-block-code .token.char, .wp-block-code .token.builtin, .wp-block-code .token.inserted { color: #86efac; }
.wp-block-code .token.operator, .wp-block-code .token.entity, .wp-block-code .token.url { color: #cbd5e1; background: none; }
.wp-block-code .token.atrule, .wp-block-code .token.attr-value, .wp-block-code .token.keyword { color: #c4b5fd; }
.wp-block-code .token.function, .wp-block-code .token.class-name { color: #93c5fd; }
.wp-block-code .token.regex, .wp-block-code .token.important, .wp-block-code .token.variable { color: #fda4af; }
.wp-block-code .token.deleted { color: #fca5a5; }
.wp-block-code .token.important, .wp-block-code .token.bold { font-weight: 700; }

@media (max-width: 768px) {
  body:not(.is-root-container) .wp-block-code { font-size: 12.5px; }
  body:not(.is-root-container) .wp-block-code code { padding: 0.85rem 0.9rem; }
  .fcs-copy .fcs-copy__label { display: none; }
  .fcs-copy { padding: 0.2rem 0.45rem; }
}