/* ApplauseLab Custom Syntax Highlighting Theme for Hugo/Chroma */

/* Main code block container with full border */
.highlight {
    background: #0a0a0a !important;
    color: #e0e0e0 !important;
    border: 1px solid #00ff4e !important; /* Full border around the entire block */
    border-radius: 0 !important; /* Sharp corners for technical look */
    padding: 1.5rem !important;
    overflow-x: auto !important;
    margin: 2rem 0 !important;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    position: relative !important; /* For copy button positioning */
}

/* Inner pre and code elements should be transparent */
.highlight pre,
.highlight code,
.chroma,
.chroma pre,
.chroma code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Inline code (not in pre blocks) */
:not(pre) > code {
    background: rgba(0, 255, 78, 0.05) !important;
    color: #00ff4e !important;
    padding: 0.2em 0.4em !important;
    border-radius: 0 !important;
    font-size: 0.9em !important;
    border: 1px solid rgba(0, 255, 78, 0.2) !important;
    font-family: 'JetBrains Mono', monospace !important;
}

/* Copy button styling */
.copy-code-button {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    padding: 4px 10px !important;
    background: #0a0a0a !important; /* Match code block background */
    color: #00ff4e !important;
    border: 1px solid #00ff4e !important;
    border-radius: 0 !important; /* Sharp corners */
    font-size: 10px !important;
    font-family: 'JetBrains Mono', monospace !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
    z-index: 100 !important;
    line-height: 1 !important;
}

.copy-code-button:hover {
    background: #00ff4e !important;
    border-color: #00ff4e !important;
    color: #0a0a0a !important;
}

.copy-code-button:active {
    transform: translateY(0) !important;
}

.copy-code-button.copied {
    background: #00ff4e !important;
    color: #0a0a0a !important;
    border-color: #00ff4e !important;
}

/* ==== Chroma Syntax Highlighting Colors ==== */

/* Error */
.chroma .err { color: #ff4444 !important; background-color: transparent !important; }

/* Line highlight */
.chroma .hl { background-color: rgba(0, 255, 78, 0.1) !important; display: block !important; width: 100% !important; }

/* Comments - muted green */
.chroma .c { color: #6a9955 !important; font-style: italic !important; }
.chroma .ch { color: #6a9955 !important; font-style: italic !important; }
.chroma .cm { color: #6a9955 !important; font-style: italic !important; }
.chroma .c1 { color: #6a9955 !important; font-style: italic !important; }
.chroma .cs { color: #6a9955 !important; font-style: italic !important; }
.chroma .cp { color: #00ff4e !important; }
.chroma .cpf { color: #00ff4e !important; }

/* Keywords - bright green */
.chroma .k { color: #00ff4e !important; font-weight: 500 !important; }
.chroma .kc { color: #00ff4e !important; }
.chroma .kd { color: #00ff4e !important; font-weight: 500 !important; }
.chroma .ke { color: #00ff4e !important; }
.chroma .kn { color: #00ff4e !important; }
.chroma .kp { color: #00ff4e !important; }
.chroma .kr { color: #00ff4e !important; font-weight: 500 !important; }
.chroma .kt { color: #4ec9b0 !important; }

/* Names */
.chroma .n { color: #e0e0e0 !important; }
.chroma .na { color: #9cdcfe !important; }
.chroma .nb { color: #4ec9b0 !important; }
.chroma .nc { color: #4ec9b0 !important; font-weight: 500 !important; }
.chroma .no { color: #9cdcfe !important; }
.chroma .nd { color: #00ff4e !important; }
.chroma .ni { color: #e0e0e0 !important; }
.chroma .ne { color: #4ec9b0 !important; }
.chroma .nf { color: #dcdcaa !important; }
.chroma .nl { color: #e0e0e0 !important; }
.chroma .nn { color: #4ec9b0 !important; }
.chroma .nx { color: #9cdcfe !important; }
.chroma .nt { color: #00ff4e !important; }
.chroma .nv { color: #9cdcfe !important; }

/* Strings - lighter green */
.chroma .s { color: #82ff96 !important; }
.chroma .sa { color: #82ff96 !important; }
.chroma .sb { color: #82ff96 !important; }
.chroma .sc { color: #82ff96 !important; }
.chroma .dl { color: #82ff96 !important; }
.chroma .sd { color: #6a9955 !important; font-style: italic !important; }
.chroma .s2 { color: #82ff96 !important; }
.chroma .se { color: #00d837 !important; }
.chroma .sh { color: #82ff96 !important; }
.chroma .si { color: #00d837 !important; }
.chroma .sx { color: #82ff96 !important; }
.chroma .sr { color: #00d837 !important; }
.chroma .s1 { color: #82ff96 !important; }
.chroma .ss { color: #82ff96 !important; }

/* Numbers */
.chroma .m { color: #b5cea8 !important; }
.chroma .mb { color: #b5cea8 !important; }
.chroma .mf { color: #b5cea8 !important; }
.chroma .mh { color: #b5cea8 !important; }
.chroma .mi { color: #b5cea8 !important; }
.chroma .il { color: #b5cea8 !important; }
.chroma .mo { color: #b5cea8 !important; }

/* Operators */
.chroma .o { color: #d4d4d4 !important; }
.chroma .ow { color: #00ff4e !important; }

/* Punctuation */
.chroma .p { color: #d4d4d4 !important; }

/* Properties */
.chroma .py { color: #9cdcfe !important; }

/* Literals */
.chroma .l { color: #00d837 !important; }
.chroma .ld { color: #00d837 !important; }

/* Generic styles */
.chroma .gd { color: #ff4444 !important; background-color: rgba(255, 68, 68, 0.1) !important; }
.chroma .ge { font-style: italic !important; }
.chroma .gr { color: #ff4444 !important; }
.chroma .gh { color: #00ff4e !important; font-weight: bold !important; }
.chroma .gi { color: #00ff4e !important; background-color: rgba(0, 255, 78, 0.1) !important; }
.chroma .go { color: #808080 !important; }
.chroma .gp { color: #00ff4e !important; font-weight: bold !important; }
.chroma .gs { font-weight: bold !important; }
.chroma .gu { color: #82ff96 !important; font-weight: bold !important; }
.chroma .gt { color: #ff4444 !important; }

/* Each line of code */
.chroma .line { 
    display: inline !important;
    border: none !important;
}

/* Scrollbar for code blocks */
.highlight::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.highlight::-webkit-scrollbar-track {
    background: rgba(0, 255, 78, 0.05);
    border-radius: 0;
}

.highlight::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 78, 0.3);
    border-radius: 0;
}

.highlight::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 78, 0.5);
}

/* Selection inside code blocks */
.highlight ::selection,
.chroma ::selection {
    background: rgba(0, 255, 78, 0.3) !important;
    color: #ffffff !important;
}

/* Remove any focus outlines */
.highlight pre:focus,
.chroma:focus {
    outline: none !important;
}