/**
 * Easy KaTeX - Frontend Styles
 *
 * Styles for displaying math formulas on the frontend.
 *
 * @package EasyKaTeX
 * @since 1.0.0
 */

/* Wrapper for block formulas */
.easy-katex-wrapper {
    margin: 1.5em 0;
    padding: 1em;
    overflow-x: auto;
    overflow-y: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Block/Display math */
.easy-katex-block {
    text-align: center;
}

.easy-katex-block .katex-display {
    margin: 0;
    padding: 0;
}

/* Inline math */
.easy-katex-formula {
    display: inline;
}

/* Rendered state */
.easy-katex-formula.katex-rendered,
.easy-katex-block.katex-rendered {
    visibility: visible !important;
}

/* KaTeX display overrides */
.easy-katex-wrapper .katex {
    font-size: 1.1em;
}

.easy-katex-block .katex {
    font-size: 1.21em;
}

/* Scrollbar styling for overflow */
.easy-katex-wrapper::-webkit-scrollbar {
    height: 6px;
}

.easy-katex-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.easy-katex-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.easy-katex-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Error display */
.katex-error {
    color: #cc0000;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    padding: 0.5em;
    background: #fff0f0;
    border: 1px solid #ffcccc;
    border-radius: 4px;
    display: inline-block;
}

.easy-katex-block.katex-error-state {
    background: #fff0f0;
    border-color: #ffcccc;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .easy-katex-wrapper {
        background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
        border-color: #404040;
    }

    .easy-katex-wrapper .katex {
        color: #e0e0e0;
    }

    .katex-error {
        background: #3d1a1a;
        border-color: #5c2020;
        color: #ff6b6b;
    }

    .easy-katex-block.katex-error-state {
        background: #3d1a1a;
        border-color: #5c2020;
    }
}

/* Dark mode classes */
body.dark-mode .easy-katex-wrapper,
body.dark-theme .easy-katex-wrapper,
.theme-dark .easy-katex-wrapper {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    border-color: #404040;
}

body.dark-mode .katex,
body.dark-theme .katex,
.theme-dark .katex {
    color: #e0e0e0;
}

/* Print styles */
@media print {
    .easy-katex-wrapper {
        background: white !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
    .easy-katex-wrapper {
        margin: 1em 0;
        padding: 0.75em;
    }

    .easy-katex-wrapper .katex {
        font-size: 1em;
    }

    .easy-katex-block .katex {
        font-size: 1.1em;
    }
}