/**
 * WP GFM Renderer - Code Block Styles
 *
 * Visibility for indented and fenced code blocks
 * Supports both plain text display and Shiki highlighting
 *
 * @package WpGfmRenderer
 * @since 1.0.0
 */

/* ==========================================================================
   FOUC Prevention - Hide unprocessed elements to prevent source code exposure
   ========================================================================== */

/* Immediately hide unprocessed code elements (complete FOUC prevention) */
pre code:not([data-gfmr-processed]) {
    visibility: hidden !important;
    opacity: 0 !important;
    position: relative !important;
}

/* Show processed code elements immediately */
pre code[data-gfmr-processed] {
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 0.05s ease-out !important;
}

/* Hide Mermaid diagrams before processing */
.gfmr-mermaid-container:not([data-gfmr-processed]) {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Show Mermaid diagrams after processing */
.gfmr-mermaid-container[data-gfmr-processed] {
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 0.05s ease-out !important;
}

/* ==========================================================================
   Markdown Source Hiding - Ensure Markdown source elements are hidden
   ========================================================================== */

/* Ensure Markdown source elements are completely hidden (multiple protection) */
.gfmr-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;
}

/* Hide from screen readers as well */
.gfmr-markdown-source[aria-hidden="true"] {
    speak: none !important;
}

/* ==========================================================================
   Base Code Block Styles - Visibility
   ========================================================================== */

/* Indented code blocks (4 spaces or tab) */
.gfmr-markdown-rendered pre,
.gfmr-markdown-rendered-preview pre,
.gfmr-markdown-container pre {
    background-color: var(--gfmr-code-bg) !important;
    color: var(--gfmr-code-text) !important;
    border: 1px solid var(--gfmr-border-color) !important;
    border-radius: var(--gfmr-border-radius-base) !important;
    padding: var(--gfmr-space-4) !important;
    margin: var(--gfmr-space-4) 0 !important;
    font-family: var(--gfmr-font-family-mono) !important;
    font-size: var(--gfmr-font-size-sm) !important;
    line-height: var(--gfmr-line-height-base) !important;
    overflow-x: auto !important;
    white-space: pre !important;
    word-wrap: normal !important;
    tab-size: 4 !important;
}

/* Fenced code blocks (```) */
.gfmr-markdown-rendered pre code,
.gfmr-markdown-rendered-preview pre code,
.gfmr-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;
}

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

/* ==========================================================================
   Shiki Integration - When highlighting is enabled
   ========================================================================== */

/* Shiki highlighted code blocks */
.shiki {
    border: 1px solid var(--gfmr-border-color) !important;
    border-radius: var(--gfmr-border-radius-base) !important;
    margin: var(--gfmr-space-4) 0 !important;
    font-family: var(--gfmr-font-family-mono) !important;
    font-size: var(--gfmr-font-size-sm) !important;
    line-height: var(--gfmr-line-height-base) !important;
    overflow-x: auto !important;
    tab-size: 4 !important;
}

/* Code elements within 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 color protection - Important style preservation (theme compatibility) */
.shiki,
.shiki pre,
.shiki code {
    background-color: inherit !important;

    /* color: inherit !important; - Removed: preserve Shiki color specification */
}

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

    /* color: inherit !important; - Removed: preserve Shiki color specification */
}

/* ==========================================================================
   Fallback Styles - When Shiki fails to load
   ========================================================================== */

/* Basic styling for plain text display */
.gfmr-markdown-rendered pre:not(.shiki),
.gfmr-markdown-rendered-preview pre:not(.shiki),
.gfmr-markdown-container pre:not(.shiki) {
    background-color: var(--gfmr-code-bg) !important;
    color: var(--gfmr-code-text) !important;
    border: 1px solid var(--gfmr-border-color) !important;
}

/* Error fallback style - When Shiki highlighting fails */
.gfmr-highlight-fallback {
    background-color: var(--gfmr-code-bg) !important;
    color: var(--gfmr-code-text) !important;
    border: 1px solid var(--gfmr-border-color) !important;
    border-radius: var(--gfmr-border-radius-base) !important;
    position: relative;
}

/* Fallback status display */
.gfmr-highlight-fallback::after {
    content: "fallback";
    position: absolute;
    top: var(--gfmr-space-1);
    right: var(--gfmr-space-2);
    background-color: var(--gfmr-bg-warning, #fff3cd);
    color: var(--gfmr-text-warning, #856404);
    padding: 1px var(--gfmr-space-1);
    border-radius: var(--gfmr-border-radius-sm);
    font-size: var(--gfmr-font-size-xs);
    font-family: var(--gfmr-font-family-base);
    opacity: 0.6;
    z-index: 2;
    transition: var(--gfmr-transition-fast);
}

/* Language label display (optional) */
.gfmr-code-container[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: var(--gfmr-space-2);
    right: var(--gfmr-space-3);
    background-color: var(--gfmr-bg-muted);
    color: var(--gfmr-text-secondary);
    padding: var(--gfmr-space-1) var(--gfmr-space-2);
    border-radius: var(--gfmr-border-radius-sm);
    font-size: var(--gfmr-font-size-xs);
    font-family: var(--gfmr-font-family-base);
    font-weight: var(--gfmr-font-weight-medium);
    text-transform: lowercase;
    z-index: 1;
    opacity: 0.7;
    transition: var(--gfmr-transition-fast);
}

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

/* ==========================================================================
   Indent Code Block Detection - Indented code block specific
   ========================================================================== */

/* Explicit styling for indented code blocks */
.gfmr-indent-code,
.gfmr-code-container.gfmr-indent-code,
pre.gfmr-indent-code {
    background-color: var(--gfmr-code-bg) !important;
    color: var(--gfmr-code-text) !important;
    border: 1px solid var(--gfmr-border-color) !important;
    border-left: 4px solid var(--gfmr-border-default) !important;
    border-radius: var(--gfmr-border-radius-base) !important;
    padding: var(--gfmr-space-4) !important;
    margin: var(--gfmr-space-4) 0 !important;
    font-family: var(--gfmr-font-family-mono) !important;
    position: relative;
}

/* Code elements within indented code blocks */
.gfmr-indent-code code,
pre.gfmr-indent-code code {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

/* Container with copy button */
.gfmr-code-container {
    position: relative !important;
    margin: var(--gfmr-space-4) 0 !important;
}

/* Spacing between copy button and code block */
.gfmr-code-container .gfmr-copy-button {
    position: absolute !important;
    top: var(--gfmr-space-2) !important;
    right: var(--gfmr-space-2) !important;
    z-index: 10 !important;
}

/* Adjust right padding when copy button is displayed */
.gfmr-code-container:has(.gfmr-copy-button) pre {
    padding-right: calc(var(--gfmr-space-4) + var(--gfmr-copy-btn-size) + var(--gfmr-space-2)) !important;
}

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

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

    :root:not(.wp-admin) {

        /* Code block background color - dark theme */
        --gfmr-code-bg: var(--gfmr-dark-bg-code) !important;
        --gfmr-code-text: var(--gfmr-dark-text-primary) !important;
        --gfmr-bg-code-inline: var(--gfmr-dark-bg-code-inline) !important;

        /* Border color - dark theme */
        --gfmr-border-color: var(--gfmr-dark-border-default) !important;
        --gfmr-border-muted: var(--gfmr-dark-border-muted) !important;
    }
}

/* When dark theme class is applied */
.gfmr-dark {
    --gfmr-code-bg: var(--gfmr-dark-bg-code) !important;
    --gfmr-code-text: var(--gfmr-dark-text-primary) !important;
    --gfmr-bg-code-inline: var(--gfmr-dark-bg-code-inline) !important;
    --gfmr-border-color: var(--gfmr-dark-border-default) !important;
    --gfmr-border-muted: var(--gfmr-dark-border-muted) !important;
}

/* When light theme class is applied */
.gfmr-light {
    --gfmr-code-bg: #f6f8fa !important;
    --gfmr-code-text: #24292f !important;
    --gfmr-bg-code-inline: rgba(175, 184, 193, 0.2) !important;
    --gfmr-border-color: #d0d7de !important;
    --gfmr-border-muted: #d8dee4 !important;
}

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

/* Always use light theme in WordPress admin */
.wp-admin .gfmr-markdown-rendered pre,
.wp-admin .gfmr-markdown-rendered-preview pre,
.wp-admin .gfmr-markdown-container pre,
body.wp-admin .gfmr-markdown-rendered pre,
body.wp-admin .gfmr-markdown-rendered-preview pre,
body.wp-admin .gfmr-markdown-container pre {
    background-color: #f6f8fa !important;
    color: #24292f !important;
    border-color: #d0d7de !important;
}

.wp-admin .gfmr-markdown-rendered code:not(pre code),
.wp-admin .gfmr-markdown-rendered-preview code:not(pre code),
.wp-admin .gfmr-markdown-container code:not(pre code),
body.wp-admin .gfmr-markdown-rendered code:not(pre code),
body.wp-admin .gfmr-markdown-rendered-preview code:not(pre code),
body.wp-admin .gfmr-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) {

    /* Mobile font size adjustment */
    .gfmr-markdown-rendered pre,
    .gfmr-markdown-rendered-preview pre,
    .gfmr-markdown-container pre,
    .shiki {
        font-size: 13px !important;
        padding: var(--gfmr-space-3) !important;
    }

    /* Copy button size adjustment */
    .gfmr-code-container:has(.gfmr-copy-button) pre {
        padding-right: calc(var(--gfmr-space-3) + 28px + var(--gfmr-space-2)) !important;
    }
}

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

/* High contrast support */
@media (prefers-contrast: high) {

    .gfmr-markdown-rendered pre,
    .gfmr-markdown-rendered-preview pre,
    .gfmr-markdown-container pre,
    .shiki {
        border-width: 2px !important;
        border-color: #000 !important;
    }

    .gfmr-markdown-rendered code:not(pre code),
    .gfmr-markdown-rendered-preview code:not(pre code),
    .gfmr-markdown-container code:not(pre code) {
        border-width: 2px !important;
        border-color: #000 !important;
        background-color: #fff !important;
        color: #000 !important;
    }
}

/* Focus support */
.gfmr-markdown-rendered pre:focus,
.gfmr-markdown-rendered-preview pre:focus,
.gfmr-markdown-container pre:focus,
.shiki:focus {
    outline: 2px solid var(--gfmr-color-primary);
    outline-offset: 2px;
}

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

@media print {

    .gfmr-markdown-rendered pre,
    .gfmr-markdown-rendered-preview pre,
    .gfmr-markdown-container pre,
    .shiki {
        background-color: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        page-break-inside: avoid;
    }

    .gfmr-copy-button {
        display: none !important;
    }
}

/* Fallback styles (when unified highlighter is unavailable) */
.gfmr-code-fallback {
    background-color: var(--gfmr-code-bg) !important;
    color: var(--gfmr-code-text) !important;
    border: 1px solid var(--gfmr-border-color) !important;
    border-radius: var(--gfmr-border-radius-base) !important;
    padding: var(--gfmr-space-4) !important;
    margin: var(--gfmr-space-4) 0 !important;
    font-family: var(--gfmr-font-family-mono) !important;
    font-size: var(--gfmr-font-size-sm) !important;
    line-height: var(--gfmr-line-height-relaxed) !important;
    overflow-x: auto !important;
    white-space: pre !important;
}

.gfmr-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 Theme Specific Fix - Shiki Color Protection
   ========================================================================== */

/* Prevent theme from overriding white text (highest priority) */
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; - Removed: was disabling Shiki inline color specification */
}

/* Shiki span element color protection for Twenty Twenty-Five (force inline style) */
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; /* Fully restore inline style color */
}

/* Highest priority Shiki color protection (all themes) */
.shiki span[style*="color"],
pre.shiki span[style*="color"],
.gfmr-code-container .shiki span[style*="color"],
.entry-content .shiki span[style*="color"],
.post-content .shiki span[style*="color"] {
    color: revert !important; /* Prioritize inline styles for any theme */
}

/* Apply base styles to global code blocks */
pre:not(.gfmr-markdown-rendered pre):not(.gfmr-markdown-container pre) code,
.wp-block-code code,
.wp-block-preformatted {
    background-color: var(--gfmr-code-bg) !important;
    color: var(--gfmr-code-text) !important;
    font-family: var(--gfmr-font-family-mono) !important;
}