/**
 * WP Math Renderer — Frontend Styles
 *
 * Aesthetic rendering of mathematical formulas.
 *
 * @package WPMathRenderer
 */

/* ─────────────────────────────────────────────
 * Base Formula Styles
 * ───────────────────────────────────────────── */

.wpmr-formula {
    line-height: 1.6;
    transition: opacity 0.3s ease;
}

/* Before KaTeX renders — subtle placeholder */
.wpmr-formula:not(.wpmr-rendered) {
    opacity: 0.4;
    font-family: 'KaTeX_Main', 'Times New Roman', serif;
}

.wpmr-formula.wpmr-rendered {
    opacity: 1;
}

/* ─────────────────────────────────────────────
 * Display Modes
 * ───────────────────────────────────────────── */

.wpmr-formula--block {
    display: block;
    text-align: center;
    margin: 1.5em auto;
    padding: 1.25em 1.5em;
    border-radius: 12px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.wpmr-formula--inline {
    display: inline;
    padding: 0.1em 0.25em;
    border-radius: 4px;
    vertical-align: baseline;
}

/* ─────────────────────────────────────────────
 * Color Scheme: Default (Light)
 * ───────────────────────────────────────────── */

.wpmr-scheme--default.wpmr-formula--block {
    background: linear-gradient(135deg, #f8f9fe 0%, #f0f2ff 100%);
    border: 1px solid #e2e5f1;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.06);
    color: #1e293b;
}

.wpmr-scheme--default.wpmr-formula--inline {
    background: #f1f3ff;
    color: #3730a3;
}

/* ─────────────────────────────────────────────
 * Color Scheme: Dark
 * ───────────────────────────────────────────── */

.wpmr-scheme--dark.wpmr-formula--block {
    background: linear-gradient(135deg, #1e1e2e 0%, #252539 100%);
    border: 1px solid #3a3a5c;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    color: #e2e8f0;
}

.wpmr-scheme--dark.wpmr-formula--inline {
    background: #2d2d44;
    color: #a5b4fc;
}

.wpmr-scheme--dark .katex {
    color: #e2e8f0;
}

/* ─────────────────────────────────────────────
 * Color Scheme: Elegant
 * ───────────────────────────────────────────── */

.wpmr-scheme--elegant.wpmr-formula--block {
    background: linear-gradient(135deg, #fefdfb 0%, #fdf8f0 100%);
    border: 1px solid #e8dcc8;
    border-left: 4px solid #b8860b;
    box-shadow: 0 2px 12px rgba(184, 134, 11, 0.08);
    color: #3c2f1a;
}

.wpmr-scheme--elegant.wpmr-formula--inline {
    background: #fdf6e9;
    color: #92660a;
    border-bottom: 1px dotted #d4a842;
}

/* ─────────────────────────────────────────────
 * Color Scheme: Chalk (Blackboard)
 * ───────────────────────────────────────────── */

.wpmr-scheme--chalk.wpmr-formula--block {
    background: linear-gradient(135deg, #2b4031 0%, #1a3025 100%);
    border: 3px solid #4a6b52;
    border-radius: 8px;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.25);
    color: #e8e8d0;
    padding: 1.5em 2em;
    position: relative;
}

/* Subtle chalk dust texture */
.wpmr-scheme--chalk.wpmr-formula--block::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='0.5' fill='%23ffffff' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
}

.wpmr-scheme--chalk.wpmr-formula--inline {
    background: #2b4031;
    color: #e8e8d0;
    border-radius: 3px;
    padding: 0.15em 0.35em;
}

.wpmr-scheme--chalk .katex {
    color: #e8e8d0;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
}

/* ─────────────────────────────────────────────
 * Font Sizes
 * ───────────────────────────────────────────── */

.wpmr-size--small  .katex { font-size: 0.9em; }
.wpmr-size--normal .katex { font-size: 1.1em; }
.wpmr-size--large  .katex { font-size: 1.4em; }
.wpmr-size--xlarge .katex { font-size: 1.8em; }

/* Block formulas get a little extra breathing room at larger sizes */
.wpmr-size--large.wpmr-formula--block  { padding: 1.5em 2em; }
.wpmr-size--xlarge.wpmr-formula--block { padding: 1.75em 2.5em; }

/* ─────────────────────────────────────────────
 * Error State
 * ───────────────────────────────────────────── */

.wpmr-formula--error {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.85em;
    padding: 0.5em 0.75em;
    border-radius: 6px;
}

.wpmr-formula--error code {
    background: transparent;
    color: inherit;
    font-size: inherit;
}

/* ─────────────────────────────────────────────
 * Noscript Fallback
 * ───────────────────────────────────────────── */

.wpmr-noscript {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.9em;
    background: #f5f5f5;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    color: #555;
}

/* ─────────────────────────────────────────────
 * Responsive
 * ───────────────────────────────────────────── */

@media (max-width: 600px) {
    .wpmr-formula--block {
        padding: 1em;
        margin: 1em 0;
        font-size: 0.92em;
    }
}

/* ─────────────────────────────────────────────
 * Print
 * ───────────────────────────────────────────── */

@media print {
    .wpmr-formula--block {
        box-shadow: none;
        border: 1px solid #ccc;
        background: #fff !important;
        color: #000 !important;
        break-inside: avoid;
    }
    .wpmr-scheme--dark .katex,
    .wpmr-scheme--chalk .katex {
        color: #000 !important;
        text-shadow: none !important;
    }
}