/* Code Copy Plugin Styles */

.codecopy-container {
    position: relative;
    margin: 1.5em 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: var(--wp--preset--color--base, #ffffff);
    border: 1px solid var(--wp--preset--color--contrast-2, #e0e0e0);
}

.codecopy-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: var(--wp--preset--color--contrast, #f7f7f7);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wp--preset--color--contrast-2, #e0e0e0);
    font-size: 0.875rem;
    min-height: 48px;
}

/* When language is present, space between language and button */
.codecopy-header .codecopy-language {
    margin-right: auto;
}

/* Fallback for browsers that don't support :has() */
.codecopy-header:has(.codecopy-language) {
    justify-content: space-between;
}

/* Alternative approach using JavaScript will handle this */
.codecopy-header.has-language {
    justify-content: space-between;
}

.codecopy-language {
    color: var(--wp--preset--color--primary, #007acc);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.codecopy-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--wp--preset--color--primary, #007acc);
    color: var(--wp--preset--color--base, white);
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    outline: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.codecopy-btn:hover {
    background: var(--wp--preset--color--primary-hover, #005a9e);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 122, 204, 0.3);
}

.codecopy-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 122, 204, 0.3);
}

.codecopy-btn.codecopy-success {
    background: #28a745;
    animation: pulse 0.3s ease;
}

.codecopy-btn.codecopy-success:hover {
    background: #218838;
}

.codecopy-btn.codecopy-error {
    background: #dc3545;
}

.codecopy-btn.codecopy-error:hover {
    background: #c82333;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.codecopy-btn svg {
    width: 16px;
    height: 16px;
    opacity: 0.9;
}

.codecopy-text {
    font-size: 0.875rem;
}

/* Enhanced code block styling */
.codecopy-container pre {
    margin: 0 !important;
    padding: 1.25rem !important;
    background: var(--wp--preset--color--contrast-3, #f8f9fa) !important;
    color: var(--wp--preset--color--foreground, #1a1a1a) !important;
    font-family: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    overflow-x: auto;
    border: none !important;
    border-radius: 0 !important;
}

.codecopy-container code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
}

/* Line numbers styling */
.codecopy-container .line-numbers {
    padding-left: 3.8em !important;
}

.codecopy-container .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 1.25rem;
    left: 0;
    font-size: 100%;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid var(--wp--preset--color--contrast-2, #e0e0e0);
    user-select: none;
    counter-reset: linenumber;
}

.codecopy-container .line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
    color: var(--wp--preset--color--contrast-2, #8a8a8a);
    padding-right: 0.8em;
    text-align: right;
    font-weight: normal;
}

.codecopy-container .line-numbers-rows > span:before {
    content: counter(linenumber);
}

/* Scrollbar styling for code blocks */
.codecopy-container pre::-webkit-scrollbar {
    height: 8px;
}

.codecopy-container pre::-webkit-scrollbar-track {
    background: var(--wp--preset--color--contrast-2, #f0f0f0);
}

.codecopy-container pre::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--contrast, #cccccc);
    border-radius: 4px;
}

.codecopy-container pre::-webkit-scrollbar-thumb:hover {
    background: var(--wp--preset--color--foreground, #999999);
}

/* Responsive design */
@media (max-width: 768px) {
    .codecopy-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .codecopy-btn {
        align-self: flex-end;
    }
    
    .codecopy-container pre {
        font-size: 13px !important;
        padding: 1rem !important;
    }
    
    .codecopy-container .line-numbers {
        padding-left: 3.2em !important;
    }
    
    .codecopy-container .line-numbers-rows {
        top: 1rem;
        width: 2.6em;
    }
}

/* Theme overrides for better integration */
.codecopy-container pre[class*="language-"] {
    background: var(--wp--preset--color--contrast-3, #f8f9fa) !important;
    color: var(--wp--preset--color--foreground, #1a1a1a) !important;
}

/* Ensure syntax highlighting doesn't override when disabled */
.codecopy-container code[class*="language-"] {
    color: var(--wp--preset--color--foreground, #1a1a1a) !important;
}

/* Override Prism.js colors when syntax highlighting is disabled */
.codecopy-container .token.string,
.codecopy-container .token.char,
.codecopy-container .token.attr-value,
.codecopy-container .token.regex,
.codecopy-container .token.variable,
.codecopy-container .token.keyword,
.codecopy-container .token.function,
.codecopy-container .token.operator,
.codecopy-container .token.number,
.codecopy-container .token.boolean,
.codecopy-container .token.punctuation,
.codecopy-container .token.property,
.codecopy-container .token.tag,
.codecopy-container .token.selector,
.codecopy-container .token.attr-name {
    color: inherit !important;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .codecopy-container {
        background: var(--wp--preset--color--base, #1a1a1a);
        border-color: var(--wp--preset--color--contrast-2, #404040);
    }
    
    .codecopy-header {
        background: var(--wp--preset--color--contrast, #2a2a2a);
        border-bottom-color: var(--wp--preset--color--contrast-2, #404040);
    }
    
    .codecopy-container pre {
        background: var(--wp--preset--color--contrast-3, #2a2a2a) !important;
        color: var(--wp--preset--color--base, #f0f0f0) !important;
    }
    
    .codecopy-container pre[class*="language-"] {
        background: var(--wp--preset--color--contrast-3, #2a2a2a) !important;
        color: var(--wp--preset--color--base, #f0f0f0) !important;
    }
    
    .codecopy-container code[class*="language-"] {
        color: var(--wp--preset--color--base, #f0f0f0) !important;
    }
    
    .codecopy-container .line-numbers-rows {
        border-right-color: var(--wp--preset--color--contrast-2, #404040);
    }
    
    .codecopy-container .line-numbers-rows > span {
        color: var(--wp--preset--color--contrast-2, #888888);
    }
}

/* Inline code styling (for regular WordPress content) */
:not(.codecopy-container) > code {
    background: var(--wp--preset--color--contrast-3, #f1f3f4) !important;
    color: var(--wp--preset--color--primary, #d73a49) !important;
    padding: 0.2em 0.4em !important;
    border-radius: 3px !important;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
    font-size: 0.875em !important;
    border: 1px solid var(--wp--preset--color--contrast-2, #e1e4e8) !important;
}

/* Dark theme support for inline code */
@media (prefers-color-scheme: dark) {
    :not(.codecopy-container) > code {
        background: var(--wp--preset--color--contrast-3, #2d3748) !important;
        color: var(--wp--preset--color--primary, #68d391) !important;
        border-color: var(--wp--preset--color--contrast-2, #4a5568) !important;
    }
}

/* Print styles */
@media print {
    .codecopy-header {
        display: none;
    }
    
    .codecopy-container {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .codecopy-container pre {
        background: white !important;
        color: black !important;
    }
}