/**
 * Easy Mermaid - Frontend Styles
 *
 * Styles for Mermaid diagrams on the frontend.
 *
 * @package EasyMermaid
 * @since 1.0.0
 */

/* Wrapper */
.easy-mermaid-wrapper {
    margin: 1.5em 0;
    padding: 0;
    clear: both;
}

/* Mermaid container */
pre.mermaid {
    background: #fafbfc;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 1.5em;
    overflow-x: auto;
    font-family: inherit;
    text-align: center;
}

/* Rendered state */
pre.mermaid.mermaid-rendered {
    background: transparent;
    border: none;
    padding: 1em;
}

/* SVG container */
pre.mermaid svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Error state */
pre.mermaid.mermaid-error-state {
    background: #fef2f2;
    border-color: #f87171;
}

.mermaid-error {
    color: #dc2626;
    padding: 1em;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.mermaid-error strong {
    display: block;
    margin-bottom: 0.5em;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    pre.mermaid {
        background: #1e1e1e;
        border-color: #333;
        color: #e1e1e1;
    }

    pre.mermaid.mermaid-error-state {
        background: #3f1f1f;
        border-color: #dc2626;
    }
}

/* Theme-specific dark mode */
body.dark-mode pre.mermaid,
body.dark-theme pre.mermaid {
    background: #1e1e1e;
    border-color: #333;
    color: #e1e1e1;
}

/* Print styles */
@media print {
    pre.mermaid {
        page-break-inside: avoid;
        border: 1px solid #ccc;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .easy-mermaid-wrapper {
        margin: 1em 0;
    }

    pre.mermaid {
        padding: 1em;
        border-radius: 6px;
    }
}