/**
 * Code Block Styles for BlogSite Theme
 * Dark theme wrapper, copy button, language label, responsive scroll
 */

/* ── Wrapper ── */
.blogsite-code-block {
    position: relative;
    margin: 1.5em 0;
    border-radius: 8px;
    overflow: hidden;
    background: #282c34;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    font-size: 0.88em;
}

/* ── Language label ── */
.blogsite-code-block .code-lang-label {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px 10px;
    background: rgba(255,255,255,0.08);
    color: #abb2bf;
    font-size: 0.75em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0 0 6px 0;
    pointer-events: none;
    z-index: 2;
    line-height: 1.8;
}

/* ── Copy button ── */
.blogsite-code-block .code-copy-btn {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.10);
    color: #abb2bf;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    font-size: 0.75em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.5;
    user-select: none;
    -webkit-user-select: none;
}

.blogsite-code-block .code-copy-btn:hover,
.blogsite-code-block .code-copy-btn:focus-visible {
    background: rgba(255,255,255,0.18);
    color: #e5c07b;
    border-color: rgba(229,192,123,0.5);
    outline: none;
}

.blogsite-code-block .code-copy-btn:active {
    transform: scale(0.97);
}

.blogsite-code-block .code-copy-btn.copied {
    background: rgba(152,195,121,0.18);
    color: #98c379;
    border-color: rgba(152,195,121,0.4);
}

.blogsite-code-block .code-copy-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    fill: currentColor;
}

/* ── Pre / Code ── */
.blogsite-code-block pre[class*="language-"],
.blogsite-code-block pre {
    margin: 0 !important;
    padding: 2.6em 1.2em 1.2em !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 1em;
    line-height: 1.6;
    tab-size: 4;
    -moz-tab-size: 4;
    box-shadow: none !important;
    /* Preserve newlines — overrides theme reset and wpautop side-effects */
    white-space: pre !important;
    word-wrap: normal !important;
    word-break: normal !important;
}

/* Push code down if both label and button are present */
.blogsite-code-block.has-lang-label pre[class*="language-"],
.blogsite-code-block.has-lang-label pre {
    padding-top: 2.8em !important;
}

.blogsite-code-block code[class*="language-"],
.blogsite-code-block code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
    font-size: 1em;
    background: none !important;
    color: #abb2bf;
    text-shadow: none !important;
    /* Must be explicit: Prism rewrites innerHTML and code loses inherited white-space */
    white-space: pre !important;
    word-wrap: normal !important;
    word-break: normal !important;
}

/* ── Gutenberg Code block (wp-block-code) — cover the unwrapped case ── */
.entry-content .wp-block-code,
.entry-content .wp-block-code code,
.entry-content pre code,
.page-content .wp-block-code,
.page-content .wp-block-code code,
.page-content pre code {
    white-space: pre !important;
    word-wrap: normal !important;
    word-break: normal !important;
}

/* ── Scrollbar styling ── */
.blogsite-code-block pre::-webkit-scrollbar {
    height: 6px;
}
.blogsite-code-block pre::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 0 0 8px 8px;
}
.blogsite-code-block pre::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 3px;
}
.blogsite-code-block pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.30);
}

/* ── Inline code (not in pre) ── */
.entry-content code:not([class*="language-"]),
.entry-content :not(pre) > code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    background: #2c313c;
    color: #e06c75;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
    vertical-align: baseline;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .blogsite-code-block {
        border-radius: 6px;
        font-size: 0.82em;
    }
    .blogsite-code-block pre[class*="language-"],
    .blogsite-code-block pre {
        padding: 2.4em 0.9em 0.9em !important;
    }
    .blogsite-code-block .code-copy-btn {
        padding: 3px 8px;
        font-size: 0.70em;
    }
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
    .blogsite-code-block .code-copy-btn {
        transition: none;
    }
    .blogsite-code-block .code-copy-btn:active {
        transform: none;
    }
}