/* Frontend styles for Code Highlighter Plugin */

/* Basic code block styling */
pre[class*="language-"] {
    position: relative;
    margin: 0 0 1em;
    padding: 18px 16px 12px;
    border-radius: 4px;
    background: #2b2b2b;
    color: #e6e1dc;
    border: 1px solid #4a5568;
    overflow: hidden;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
}

code[class*="language-"] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    /* ensure code inherits wrapping and also force wrap if Prism overrides */
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Dark theme for better readability */
pre[class*="language-"] {
    background: #2b2b2b;
    color: #e6e1dc;
    border: 1px solid #4a5568;
}

/* Line numbers styling */
pre.line-numbers {
    position: relative;
    margin-top: 0;
    padding-left: 3.8em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #4a5568;
    user-select: none;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
    font-size: 18px;
    line-height: 1.35;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #718096;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

/* Responsive design */
@media (max-width: 768px) {
    pre[class*="language-"] {
        margin: 1em -1em;
        border-radius: 0;
        border-left: none;
        border-right: none;
        font-size: 13px;
    }
    
    pre.line-numbers {
        padding-left: 2.8em;
    }
    
    .line-numbers .line-numbers-rows {
        left: -2.8em;
        width: 2em;
    }
}

/* Copy button styling (if needed in future) */
body div.code-toolbar {
    position: relative;
    max-height: 480px;
    overflow: auto;
    margin: 6px 0 18px;
}

div.code-toolbar .toolbar {
    position: absolute;
    top: 3px;
    right: 4px;
    transition: opacity .3s ease-in-out;
    opacity: 0;
    z-index: 2;
}

div.code-toolbar:hover .toolbar { opacity: 1; }
div.code-toolbar>.toolbar>.toolbar-item>button:hover {
    color: #000;
    background: rgba(255,255,255,.5);
}