/**
 * WP GFM Renderer - Code Block Styles
 * 
 * インデント・フェンス付きコードブロックの視認性確保
 * プレーンテキスト表示・Shikiハイライト両対応
 * 
 * @package WpGfmRenderer
 * @since 1.0.0
 */

/* ==========================================================================
   Markdown Source Hiding - Markdownソース要素の確実な非表示
   ========================================================================== */

/* Markdownソース要素を確実に非表示にする（多重保護） */
.wp-gfm-markdown-source {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    white-space: nowrap !important;
}

/* screen readerにも隠す */
.wp-gfm-markdown-source[aria-hidden="true"] {
    speak: none !important;
}

/* ==========================================================================
   Base Code Block Styles - 視認性確保
   ========================================================================== */

/* インデントコードブロック（4スペース・タブ） */
.wp-gfm-markdown-rendered pre,
.wp-gfm-markdown-rendered-preview pre,
.wp-gfm-markdown-container pre {
    background-color: var(--wp-gfm-code-bg) !important;
    color: var(--wp-gfm-code-text) !important;
    border: 1px solid var(--wp-gfm-border-color) !important;
    border-radius: var(--wp-gfm-border-radius-base) !important;
    padding: var(--wp-gfm-space-4) !important;
    margin: var(--wp-gfm-space-4) 0 !important;
    font-family: var(--wp-gfm-font-family-mono) !important;
    font-size: var(--wp-gfm-font-size-sm) !important;
    line-height: var(--wp-gfm-line-height-base) !important;
    overflow-x: auto !important;
    white-space: pre !important;
    word-wrap: normal !important;
    tab-size: 4 !important;
}

/* フェンス付きコードブロック（```） */
.wp-gfm-markdown-rendered pre code,
.wp-gfm-markdown-rendered-preview pre code,
.wp-gfm-markdown-container pre code {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: pre !important;
    word-wrap: normal !important;
}

/* インラインコード */
.wp-gfm-markdown-rendered code:not(pre code),
.wp-gfm-markdown-rendered-preview code:not(pre code),
.wp-gfm-markdown-container code:not(pre code) {
    background-color: var(--wp-gfm-bg-code-inline) !important;
    color: var(--wp-gfm-text-primary) !important;
    border: 1px solid var(--wp-gfm-border-muted) !important;
    border-radius: var(--wp-gfm-border-radius-sm) !important;
    padding: var(--wp-gfm-space-1) var(--wp-gfm-space-2) !important;
    margin: 0 var(--wp-gfm-space-1) !important;
    font-family: var(--wp-gfm-font-family-mono) !important;
    font-size: 0.9em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    word-break: break-word !important;
}

/* ==========================================================================
   Shiki Integration - ハイライト有効時
   ========================================================================== */

/* Shikiによるハイライト済みコードブロック */
.shiki {
    border: 1px solid var(--wp-gfm-border-color) !important;
    border-radius: var(--wp-gfm-border-radius-base) !important;
    margin: var(--wp-gfm-space-4) 0 !important;
    font-family: var(--wp-gfm-font-family-mono) !important;
    font-size: var(--wp-gfm-font-size-sm) !important;
    line-height: var(--wp-gfm-line-height-base) !important;
    overflow-x: auto !important;
    tab-size: 4 !important;
}

/* Shiki内のコード要素 */
.shiki code {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: pre !important;
    word-wrap: normal !important;
}

/* Shiki色の保護 - 重要なスタイル保持（テーマ互換性強化） */
.shiki,
.shiki pre,
.shiki code {
    background-color: inherit !important;

    /* color: inherit !important; ← 削除：Shikiの色指定を保持 */
}

.shiki .line,
.shiki span {
    background-color: transparent !important;

    /* color: inherit !important; ← 削除：Shikiの色指定を保持 */
}

/* ==========================================================================
   Fallback Styles - Shiki読み込み失敗時
   ========================================================================== */

/* プレーンテキスト表示時の基本スタイリング */
.wp-gfm-markdown-rendered pre:not(.shiki),
.wp-gfm-markdown-rendered-preview pre:not(.shiki),
.wp-gfm-markdown-container pre:not(.shiki) {
    background-color: var(--wp-gfm-code-bg) !important;
    color: var(--wp-gfm-code-text) !important;
    border: 1px solid var(--wp-gfm-border-color) !important;
}

/* エラー時フォールバックスタイル - Shikiハイライト失敗時 */
.wp-gfm-highlight-fallback {
    background-color: var(--wp-gfm-code-bg) !important;
    color: var(--wp-gfm-code-text) !important;
    border: 1px solid var(--wp-gfm-border-color) !important;
    border-radius: var(--wp-gfm-border-radius-base) !important;
    position: relative;
}

/* フォールバック状態表示 */
.wp-gfm-highlight-fallback::after {
    content: "fallback";
    position: absolute;
    top: var(--wp-gfm-space-1);
    right: var(--wp-gfm-space-2);
    background-color: var(--wp-gfm-bg-warning, #fff3cd);
    color: var(--wp-gfm-text-warning, #856404);
    padding: 1px var(--wp-gfm-space-1);
    border-radius: var(--wp-gfm-border-radius-sm);
    font-size: var(--wp-gfm-font-size-xs);
    font-family: var(--wp-gfm-font-family-base);
    opacity: 0.6;
    z-index: 2;
    transition: var(--wp-gfm-transition-fast);
}

/* 言語ラベル表示（オプション） */
.wp-gfm-code-container[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: var(--wp-gfm-space-2);
    right: var(--wp-gfm-space-3);
    background-color: var(--wp-gfm-bg-muted);
    color: var(--wp-gfm-text-secondary);
    padding: var(--wp-gfm-space-1) var(--wp-gfm-space-2);
    border-radius: var(--wp-gfm-border-radius-sm);
    font-size: var(--wp-gfm-font-size-xs);
    font-family: var(--wp-gfm-font-family-base);
    font-weight: var(--wp-gfm-font-weight-medium);
    text-transform: lowercase;
    z-index: 1;
    opacity: 0.7;
    transition: var(--wp-gfm-transition-fast);
}

.wp-gfm-code-container:hover[data-language]::before {
    opacity: 1;
}

/* ==========================================================================
   Indent Code Block Detection - インデントコードブロック専用
   ========================================================================== */

/* インデントコードブロックの明示的スタイリング */
.wp-gfm-indent-code,
.wp-gfm-code-container.wp-gfm-indent-code,
pre.wp-gfm-indent-code {
    background-color: var(--wp-gfm-code-bg) !important;
    color: var(--wp-gfm-code-text) !important;
    border: 1px solid var(--wp-gfm-border-color) !important;
    border-left: 4px solid var(--wp-gfm-border-default) !important;
    border-radius: var(--wp-gfm-border-radius-base) !important;
    padding: var(--wp-gfm-space-4) !important;
    margin: var(--wp-gfm-space-4) 0 !important;
    font-family: var(--wp-gfm-font-family-mono) !important;
    position: relative;
}

/* インデントコードブロック内のcode要素 */
.wp-gfm-indent-code code,
pre.wp-gfm-indent-code code {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   Copy Button Integration
   ========================================================================== */

/* コピーボタン付きコンテナ */
.wp-gfm-code-container {
    position: relative !important;
    margin: var(--wp-gfm-space-4) 0 !important;
}

/* コピーボタンとコードブロックの間隔調整 */
.wp-gfm-code-container .wp-gfm-copy-button {
    position: absolute !important;
    top: var(--wp-gfm-space-2) !important;
    right: var(--wp-gfm-space-2) !important;
    z-index: 10 !important;
}

/* コピーボタン表示時のコードブロック右パディング調整 */
.wp-gfm-code-container:has(.wp-gfm-copy-button) pre {
    padding-right: calc(var(--wp-gfm-space-4) + var(--wp-gfm-copy-btn-size) + var(--wp-gfm-space-2)) !important;
}

/* ==========================================================================
   Dark Theme Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {

    :root:not(.wp-admin) {
        
        /* コードブロック背景色 - ダークテーマ */
        --wp-gfm-code-bg: var(--wp-gfm-dark-bg-code) !important;
        --wp-gfm-code-text: var(--wp-gfm-dark-text-primary) !important;
        --wp-gfm-bg-code-inline: var(--wp-gfm-dark-bg-code-inline) !important;
        
        /* ボーダー色 - ダークテーマ */
        --wp-gfm-border-color: var(--wp-gfm-dark-border-default) !important;
        --wp-gfm-border-muted: var(--wp-gfm-dark-border-muted) !important;
    }
}

/* ダークテーマクラス適用時 */
.wp-gfm-dark {
    --wp-gfm-code-bg: var(--wp-gfm-dark-bg-code) !important;
    --wp-gfm-code-text: var(--wp-gfm-dark-text-primary) !important;
    --wp-gfm-bg-code-inline: var(--wp-gfm-dark-bg-code-inline) !important;
    --wp-gfm-border-color: var(--wp-gfm-dark-border-default) !important;
    --wp-gfm-border-muted: var(--wp-gfm-dark-border-muted) !important;
}

/* ライトテーマクラス適用時 */
.wp-gfm-light {
    --wp-gfm-code-bg: #f6f8fa !important;
    --wp-gfm-code-text: #24292f !important;
    --wp-gfm-bg-code-inline: rgba(175, 184, 193, 0.2) !important;
    --wp-gfm-border-color: #d0d7de !important;
    --wp-gfm-border-muted: #d8dee4 !important;
}

/* ==========================================================================
   WordPress Admin Override
   ========================================================================== */

/* WordPress管理画面では常にライトテーマ */
.wp-admin .wp-gfm-markdown-rendered pre,
.wp-admin .wp-gfm-markdown-rendered-preview pre,
.wp-admin .wp-gfm-markdown-container pre,
body.wp-admin .wp-gfm-markdown-rendered pre,
body.wp-admin .wp-gfm-markdown-rendered-preview pre,
body.wp-admin .wp-gfm-markdown-container pre {
    background-color: #f6f8fa !important;
    color: #24292f !important;
    border-color: #d0d7de !important;
}

.wp-admin .wp-gfm-markdown-rendered code:not(pre code),
.wp-admin .wp-gfm-markdown-rendered-preview code:not(pre code),
.wp-admin .wp-gfm-markdown-container code:not(pre code),
body.wp-admin .wp-gfm-markdown-rendered code:not(pre code),
body.wp-admin .wp-gfm-markdown-rendered-preview code:not(pre code),
body.wp-admin .wp-gfm-markdown-container code:not(pre code) {
    background-color: rgba(175, 184, 193, 0.2) !important;
    color: #24292f !important;
    border-color: #d8dee4 !important;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    
    /* モバイル用フォントサイズ調整 */
    .wp-gfm-markdown-rendered pre,
    .wp-gfm-markdown-rendered-preview pre,
    .wp-gfm-markdown-container pre,
    .shiki {
        font-size: 13px !important;
        padding: var(--wp-gfm-space-3) !important;
    }
    
    /* コピーボタンサイズ調整 */
    .wp-gfm-code-container:has(.wp-gfm-copy-button) pre {
        padding-right: calc(var(--wp-gfm-space-3) + 28px + var(--wp-gfm-space-2)) !important;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* ハイコントラスト対応 */
@media (prefers-contrast: high) {
    
    .wp-gfm-markdown-rendered pre,
    .wp-gfm-markdown-rendered-preview pre,
    .wp-gfm-markdown-container pre,
    .shiki {
        border-width: 2px !important;
        border-color: #000 !important;
    }
    
    .wp-gfm-markdown-rendered code:not(pre code),
    .wp-gfm-markdown-rendered-preview code:not(pre code),
    .wp-gfm-markdown-container code:not(pre code) {
        border-width: 2px !important;
        border-color: #000 !important;
        background-color: #fff !important;
        color: #000 !important;
    }
}

/* フォーカス対応 */
.wp-gfm-markdown-rendered pre:focus,
.wp-gfm-markdown-rendered-preview pre:focus,
.wp-gfm-markdown-container pre:focus,
.shiki:focus {
    outline: 2px solid var(--wp-gfm-color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    
    .wp-gfm-markdown-rendered pre,
    .wp-gfm-markdown-rendered-preview pre,
    .wp-gfm-markdown-container pre,
    .shiki {
        background-color: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        page-break-inside: avoid;
    }
    
    .wp-gfm-copy-button {
        display: none !important;
    }
}

/* フォールバックスタイル（統一ハイライターが利用できない場合） */
.wp-gfm-code-fallback {
    background-color: var(--wp-gfm-code-bg) !important;
    color: var(--wp-gfm-code-text) !important;
    border: 1px solid var(--wp-gfm-border-color) !important;
    border-radius: var(--wp-gfm-border-radius-base) !important;
    padding: var(--wp-gfm-space-4) !important;
    margin: var(--wp-gfm-space-4) 0 !important;
    font-family: var(--wp-gfm-font-family-mono) !important;
    font-size: var(--wp-gfm-font-size-sm) !important;
    line-height: var(--wp-gfm-line-height-relaxed) !important;
    overflow-x: auto !important;
    white-space: pre !important;
}

.wp-gfm-code-fallback code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

/* ==========================================================================
   Twenty Twenty-Five テーマ特化修正 - Shikiカラー保護
   ========================================================================== */

/* テーマの白色テキスト上書きを防止（最高優先度） */
body.wp-theme-twentytwentyfive .shiki,
body.wp-theme-twentytwentyfive .shiki span,
body.wp-theme-twentytwentyfive .shiki code,
body.wp-theme-twentytwentyfive pre.shiki,
body.wp-theme-twentytwentyfive pre.shiki span,
body.wp-theme-twentytwentyfive pre.shiki code,
.wp-theme-twentytwentyfive .entry-content .shiki,
.wp-theme-twentytwentyfive .entry-content .shiki span,
.wp-theme-twentytwentyfive .entry-content .shiki code,
.wp-theme-twentytwentyfive .entry-content pre.shiki,
.wp-theme-twentytwentyfive .entry-content pre.shiki span,
.wp-theme-twentytwentyfive .entry-content pre.shiki code,
.wp-theme-twentytwentyfive .post-content .shiki,
.wp-theme-twentytwentyfive .post-content .shiki span,
.wp-theme-twentytwentyfive .post-content .shiki code {

    /* color: unset !important; ← 削除：Shikiのインライン色指定を無効化していた */
}

/* Twenty Twenty-Five での Shiki スパン要素の色保護（インラインスタイル強制適用） */
body.wp-theme-twentytwentyfive .shiki span[style*="color"],
body.wp-theme-twentytwentyfive pre.shiki span[style*="color"],
.wp-theme-twentytwentyfive .entry-content .shiki span[style*="color"],
.wp-theme-twentytwentyfive .entry-content pre.shiki span[style*="color"],
.wp-theme-twentytwentyfive .post-content .shiki span[style*="color"],
.wp-theme-twentytwentyfive .post-content pre.shiki span[style*="color"] {
    color: revert !important; /* インラインスタイルのcolorを完全に復元 */
}

/* 最高優先度でのShiki色保護（全テーマ対応） */
.shiki span[style*="color"],
pre.shiki span[style*="color"],
.wp-gfm-code-container .shiki span[style*="color"],
.entry-content .shiki span[style*="color"],
.post-content .shiki span[style*="color"] {
    color: revert !important; /* どんなテーマでもインラインスタイルを優先 */
}

/* グローバルコードブロックへの基本スタイル適用 */
pre:not(.wp-gfm-markdown-rendered pre):not(.wp-gfm-markdown-container pre) code,
.wp-block-code code,
.wp-block-preformatted {
    background-color: var(--wp-gfm-code-bg) !important;
    color: var(--wp-gfm-code-text) !important;
    font-family: var(--wp-gfm-font-family-mono) !important;
}