/* 修復內聯代碼元素顯示反引號的問題 */
code:before, code:after {
    display: none !important;
}

/* 代碼區塊全寬顯示和方角優化 */
/* Full-width code blocks that break out of container padding */
.article-content pre[class*="language-"] {
    /* Break out of container padding */
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);

    /* Square corners */
    border-radius: 0 !important;

    /* Better spacing */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;

    /* Ensure proper padding inside */
    padding: 1rem !important;
}

/* Responsive breakpoints to match container padding */
@media (min-width: 640px) {
    .article-content pre[class*="language-"] {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        width: calc(100% + 3rem);
    }
}

@media (min-width: 1024px) {
    .article-content pre[class*="language-"] {
        margin-left: -2rem;
        margin-right: -2rem;
        width: calc(100% + 4rem);
    }
}

/* 確保 code-toolbar 容器也是全寬 */
.article-content .code-toolbar {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .article-content .code-toolbar {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        width: calc(100% + 3rem);
    }
}

@media (min-width: 1024px) {
    .article-content .code-toolbar {
        margin-left: -2rem;
        margin-right: -2rem;
        width: calc(100% + 4rem);
    }
}

/* 確保 code-toolbar 內的 pre 元素不再有額外邊距 */
.article-content .code-toolbar pre[class*="language-"] {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

/* Prism.js 工具欄增強 */
/* Enhanced toolbar styling */
div.code-toolbar > .toolbar {
    opacity: 1 !important; /* Always show toolbar */
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

/* 工具欄項目樣式 - 精確定位在header bar內 */
div.code-toolbar > .toolbar {
    position: absolute;
    top: 0; /* 從頂部開始 */
    height: 2.5rem; /* 與header高度一致 */
    right: 1rem; /* 增加右邊距，避免踩界 */
    background: transparent;
    display: flex;
    align-items: center; /* 垂直置中 */
    padding: 0;
    z-index: 10;
}

div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
    background: rgba(0, 0, 0, 0.3) !important; /* 調整為更協調的顏色 */
    color: #f8f8f2 !important; /* 使用Okaidia主題文字顏色 */
    border-radius: 0.25rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    margin-left: 0.25rem;
    transition: all 0.2s ease;
}

div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:hover {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.3);
}

/* 現代化代碼區塊頭部設計 - 統一顏色，方角設計 */
/* Modern code block header design - unified colors, square corners */
div.code-toolbar {
    border-radius: 0; /* 全寬代碼區塊使用方角 */
    overflow: hidden;
    position: relative;
}

/* 創建頂部header bar - 使用與代碼區塊相同的背景色 */
div.code-toolbar::before {
    content: attr(data-language);
    display: block;
    width: 100%;
    background: #272822; /* 與Okaidia主題代碼背景相同 */
    color: #f8f8f2;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #49483e; /* 使用主題邊框顏色 */
    margin: 0;
    position: relative;
    z-index: 5;
    height: 2.5rem; /* 固定header高度 */
    line-height: 1.5rem; /* 垂直置中文字 */
    box-sizing: border-box;
}

/* 確保pre元素在header下方，移除所有圓角 */
div.code-toolbar pre {
    margin-top: 0 !important;
    border-radius: 0 !important; /* 完全移除圓角 */
}

/* 從 pre 元素的 class 獲取語言名稱 */
div.code-toolbar pre[class*="language-bash"]::after { --language: "Bash"; }
div.code-toolbar pre[class*="language-javascript"]::after { --language: "JavaScript"; }
div.code-toolbar pre[class*="language-typescript"]::after { --language: "TypeScript"; }
div.code-toolbar pre[class*="language-php"]::after { --language: "PHP"; }
div.code-toolbar pre[class*="language-css"]::after { --language: "CSS"; }
div.code-toolbar pre[class*="language-html"]::after { --language: "HTML"; }
div.code-toolbar pre[class*="language-json"]::after { --language: "JSON"; }
div.code-toolbar pre[class*="language-sql"]::after { --language: "SQL"; }
div.code-toolbar pre[class*="language-python"]::after { --language: "Python"; }
div.code-toolbar pre[class*="language-java"]::after { --language: "Java"; }
div.code-toolbar pre[class*="language-c"]::after { --language: "C"; }
div.code-toolbar pre[class*="language-cpp"]::after { --language: "C++"; }

/* 暗色主題支援 */
/* Dark mode support */
.dark div.code-toolbar::before {
    background: #272822; /* 保持與代碼區塊相同的背景色 */
    color: #f8f8f2;
    border-bottom-color: #49483e; /* 使用主題邊框顏色 */
}

.dark div.code-toolbar > .toolbar > .toolbar-item > a,
.dark div.code-toolbar > .toolbar > .toolbar-item > button,
.dark div.code-toolbar > .toolbar > .toolbar-item > span {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #f7fafc !important;
    border-color: rgba(255, 255, 255, 0.25);
}

.dark div.code-toolbar > .toolbar > .toolbar-item > a:hover,
.dark div.code-toolbar > .toolbar > .toolbar-item > button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.35);
}