/* ==========================================================================
   Code blocks — Prism.js syntax highlighting + copy button
   Applies to pre[class*="language-"] elements highlighted by Prism.
   Inline code (plain <code>) styling remains in main.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Custom properties — light (default) and dark overrides
   --------------------------------------------------------------------------- */

:root {
    --code-bg:          #f6f8fa;
    --code-fg:          #24292f;
    --code-border:      #d0d7de;
    --code-header-bg:   #f0f2f4;
    --code-ln:          #8c959f;

    /* Tokens */
    --code-comment:     #6e7781;
    --code-punctuation: #24292f;
    --code-string:      #0a3069;
    --code-number:      #0550ae;
    --code-keyword:     #cf222e;
    --code-operator:    #0550ae;
    --code-function:    #8250df;
    --code-class:       #953800;
    --code-tag:         #116329;
    --code-attr:        #0550ae;
    --code-selector:    #8250df;
    --code-variable:    #e36209;
    --code-builtin:     #8250df;
    --code-deleted:     #82071e;
    --code-inserted:    #116329;
}

[data-theme="dark"] {
    --code-bg:          #1e1e2e;
    --code-fg:          #cdd6f4;
    --code-border:      #313244;
    --code-header-bg:   #181825;
    --code-ln:          #585b70;

    --code-comment:     #6c7086;
    --code-punctuation: #cdd6f4;
    --code-string:      #a6e3a1;
    --code-number:      #fab387;
    --code-keyword:     #cba6f7;
    --code-operator:    #89dceb;
    --code-function:    #89b4fa;
    --code-class:       #f38ba8;
    --code-tag:         #f38ba8;
    --code-attr:        #fab387;
    --code-selector:    #cba6f7;
    --code-variable:    #fab387;
    --code-builtin:     #cba6f7;
    --code-deleted:     #f38ba8;
    --code-inserted:    #a6e3a1;
}

/* ---------------------------------------------------------------------------
   Inline code  (plain <code> without a language class)
   --------------------------------------------------------------------------- */

code:not([class*="language-"]) {
    background-color: var(--clr-neutral);
    color: var(--clr-text-highcontrast);
    padding: 0.1em 0.45em;
    border-radius: 4px;
    font-size: 0.913em;
    font-family: var(--ff-mono);
}

/* ---------------------------------------------------------------------------
   Plain <pre> blocks (no language class — raw output, shell snippets, etc.)
   --------------------------------------------------------------------------- */

pre:not(:has(> code[class*="language-"])) {
    background-color: var(--clr-neutral);
    color: var(--clr-text-highcontrast);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--clr-accent);
    overflow-x: auto;
    white-space: pre;
    font-family: var(--ff-mono);
    font-size: 0.973rem;
    line-height: 1.7;
}

pre:not(:has(> code[class*="language-"])) code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
}

/* ---------------------------------------------------------------------------
   Outer wrapper (injected by code.js around each <pre>)
   --------------------------------------------------------------------------- */

.code-block-outer {
    margin: 1.25rem 0;
    border: 1px solid var(--code-border);
    border-radius: 8px;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Header bar — language label + copy button
   --------------------------------------------------------------------------- */

.code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.9rem;
    background: var(--code-header-bg);
    border-bottom: 1px solid var(--code-border);
    gap: 0.5rem;
}

.code-lang {
    font-family: var(--ff-mono);
    font-size: 0.753rem;
    color: var(--code-ln);
    letter-spacing: 0.04em;
    user-select: none;
}

.code-copy-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid var(--code-border);
    color: var(--code-ln);
    border-radius: 4px;
    padding: 0.15rem 0.55rem;
    font-size: 0.733rem;
    font-family: var(--ff-mono);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.4;
}

.code-copy-btn:hover {
    background: var(--code-border);
    color: var(--code-fg);
}

.code-copy-btn--success {
    border-color: var(--code-inserted);
    color: var(--code-inserted);
}

/* ---------------------------------------------------------------------------
   Code body — flex row: line-number gutter + pre
   --------------------------------------------------------------------------- */

.code-body {
    display: flex;
    background: var(--code-bg);
    overflow: hidden;
}

.code-line-numbers {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 1rem 0.75rem 1rem 1rem;
    background: var(--code-bg);
    color: var(--code-ln);
    font-family: var(--ff-mono);
    font-size: 0.908rem;
    line-height: 1.75;
    user-select: none;
    border-right: 1px solid var(--code-border);
    flex-shrink: 0;
}

.code-line-numbers span {
    display: block;
    line-height: 1.75;
}

/* ---------------------------------------------------------------------------
   Pre and code elements
   Python-Markdown puts language-* only on <code>, not <pre>, so we target
   pre:has(> code[class*="language-"]) for block-level styling.
   --------------------------------------------------------------------------- */

pre:has(> code[class*="language-"]) {
    flex: 1;
    min-width: 0;        /* allow shrinking inside flex .code-body */
    margin: 0;
    padding: 1rem 1.25rem;
    background: var(--code-bg);
    color: var(--code-fg);
    border: none;
    border-radius: 0;
    border-left: none;   /* override main.css accent border */
    overflow-x: auto;
    white-space: pre;    /* explicit — don't rely on browser default */
    font-family: var(--ff-mono);
    font-size: 0.908rem;
    line-height: 1.75;
    tab-size: 4;
    -moz-tab-size: 4;
}

pre:has(> code[class*="language-"]) > code[class*="language-"] {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
    white-space: inherit;
}

/* ---------------------------------------------------------------------------
   Prism token colors
   --------------------------------------------------------------------------- */

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--code-comment);
    font-style: italic;
}

.token.punctuation {
    color: var(--code-punctuation);
}

.token.namespace {
    opacity: 0.7;
}

/* Tags (HTML/XML element names) */
.token.tag,
.token.tag > .token.punctuation {
    color: var(--code-tag);
}

/* Attributes */
.token.attr-name {
    color: var(--code-attr);
}

.token.attr-value,
.token.attr-value > .token.punctuation:not(:first-child) {
    color: var(--code-string);
}

/* Strings */
.token.string,
.token.char,
.token.inserted {
    color: var(--code-string);
}

/* Numbers, booleans, constants */
.token.number,
.token.boolean,
.token.constant,
.token.symbol {
    color: var(--code-number);
}

/* Keywords */
.token.keyword,
.token.atrule {
    color: var(--code-keyword);
}

/* Functions */
.token.function,
.token.function-definition {
    color: var(--code-function);
}

/* Class names, types */
.token.class-name {
    color: var(--code-class);
}

/* Operators and URLs */
.token.operator,
.token.entity,
.token.url {
    color: var(--code-operator);
}

/* CSS-specific: strings inside style rules */
.language-css .token.string,
.style .token.string {
    color: var(--code-string);
}

/* CSS selectors */
.token.selector {
    color: var(--code-selector);
}

/* CSS properties */
.token.property {
    color: var(--code-attr);
}

/* Variables */
.token.variable,
.token.regex,
.token.important {
    color: var(--code-variable);
}

/* Deleted (diff) */
.token.deleted {
    color: var(--code-deleted);
}

/* Builtins */
.token.builtin {
    color: var(--code-builtin);
}

.token.important,
.token.bold {
    font-weight: 600;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}