/* ==========================================================================
   Code blocks. Highlighting is done server-side by the "Syntax-highlighting
   Code Block" plugin (highlight.js grammars) on the core code block, so any
   language in future posts is highlighted the same way. This file only themes
   the hljs tokens for light + dark and styles the block container — the rest
   of the site stays monochrome.
   ========================================================================== */

:root{
  --sx-comment:#6a737d; --sx-key:#d73a49; --sx-str:#0a7d4e; --sx-num:#005cc5;
  --sx-fn:#6f42c1; --sx-cls:#b5691a; --sx-var:#e36209; --sx-builtin:#005cc5;
  --sx-tag:#22863a; --sx-meta:#6a737d; --sx-del:#b31d28;
  --code-head-bg:#e5e3dc;
}
:root[data-theme="dark"]{
  --sx-comment:#8b949e; --sx-key:#ff7b72; --sx-str:#7ee787; --sx-num:#79c0ff;
  --sx-fn:#d2a8ff; --sx-cls:#ffa657; --sx-var:#ffa657; --sx-builtin:#79c0ff;
  --sx-tag:#7ee787; --sx-meta:#8b949e; --sx-del:#ffa198;
  --code-head-bg:#161616;
}

/* ---- Block container (wrapped by post.js with a header bar) ---- */
.entry-content .code-wrap{
  max-width:var(--prose);margin:var(--space-3) 0;
  background:var(--code-bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;
  direction:ltr;text-align:left;
}
/* Code is always left-to-right, even inside the Arabic (RTL) post */
.entry-content pre.wp-block-code,.entry-content pre.wp-block-code code{direction:ltr;text-align:left}
.entry-content .code-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 12px 7px 14px;background:var(--code-head-bg);border-bottom:1px solid var(--border);
  font-family:var(--font-mono);font-size:11px;color:var(--muted);
}
.entry-content .code-lang{text-transform:uppercase;letter-spacing:.09em}
.entry-content .code-copy{
  appearance:none;background:transparent;border:1px solid var(--border);border-radius:4px;
  color:var(--muted);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;
  padding:3px 9px;cursor:pointer;line-height:1.4;text-transform:uppercase;
}
.entry-content .code-copy:hover,.entry-content .code-copy.copied{color:var(--text);border-color:var(--text)}

/* pre inside the wrapper — just the scroll area */
.entry-content .code-wrap pre.wp-block-code{
  margin:0;border:0;border-radius:0;background:transparent;
  padding:var(--space-2) var(--space-3);overflow-x:auto;
  font-family:var(--font-mono);font-size:var(--fs-code);line-height:1.6;-moz-tab-size:4;tab-size:4;
}
/* standalone (pre-JS / no-JS) fallback styling */
.entry-content pre.wp-block-code{
  max-width:var(--prose);background:var(--code-bg);border:1px solid var(--border);border-radius:8px;
  padding:var(--space-2) var(--space-3);overflow-x:auto;font-family:var(--font-mono);font-size:var(--fs-code);line-height:1.6
}
.entry-content pre.wp-block-code > span{display:block}
.entry-content .wp-block-code code,
.entry-content .wp-block-code .hljs{background:transparent;color:var(--text);padding:0;border:0;font-size:inherit}

/* The plugin's verbose "Code language: …" caption is replaced by our header bar */
.entry-content .shcb-language{display:none}

/* ---- highlight.js tokens → themed for light + dark ---- */
.entry-content .hljs-comment,.entry-content .hljs-quote{color:var(--sx-comment);font-style:italic}
.entry-content .hljs-keyword,.entry-content .hljs-selector-tag,.entry-content .hljs-subst{color:var(--sx-key);font-weight:600}
.entry-content .hljs-literal,.entry-content .hljs-number,.entry-content .hljs-symbol,.entry-content .hljs-bullet{color:var(--sx-num)}
.entry-content .hljs-string,.entry-content .hljs-regexp,.entry-content .hljs-addition,.entry-content .hljs-meta .hljs-string{color:var(--sx-str)}
.entry-content .hljs-title,.entry-content .hljs-title.function_,.entry-content .hljs-name,.entry-content .hljs-section{color:var(--sx-fn);font-weight:600}
.entry-content .hljs-title.class_,.entry-content .hljs-class .hljs-title,.entry-content .hljs-type,.entry-content .hljs-built_in{color:var(--sx-cls)}
.entry-content .hljs-variable,.entry-content .hljs-template-variable,.entry-content .hljs-attr,.entry-content .hljs-attribute,.entry-content .hljs-selector-attr,.entry-content .hljs-selector-pseudo,.entry-content .hljs-selector-id,.entry-content .hljs-selector-class{color:var(--sx-var)}
.entry-content .hljs-params{color:var(--text)}
.entry-content .hljs-tag,.entry-content .hljs-punctuation{color:var(--text)}
.entry-content .hljs-doctag,.entry-content .hljs-meta,.entry-content .hljs-meta .hljs-keyword{color:var(--sx-meta)}
.entry-content .hljs-link{color:var(--sx-num);text-decoration:underline}
.entry-content .hljs-deletion{color:var(--sx-del)}
.entry-content .hljs-emphasis{font-style:italic}
.entry-content .hljs-strong{font-weight:700}