/**
 * WP Markdown - Mermaid Frontend Styles
 * 
 * Styles for Mermaid diagrams on the frontend to ensure proper display
 * and prevent overlapping elements
 */

/* General Mermaid diagram container */
.mermaid {
    margin: 20px 0;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow-x: auto;
    overflow-y: auto;
    box-sizing: border-box;
}

/* SVG styling for all diagrams */
.mermaid svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Mindmap specific styles - ensure enough vertical space */
.mermaid:has(> g > g > text) {
    min-height: auto;
    min-width: 100%;
    display: block;
}

/* Gantt chart specific styles - ensure proper height */
.mermaid:has(> g > g > text[class*="gridLabel"]),
.mermaid:has(> g > g > rect[class*="bar"]) {
    min-height: auto;
    display: block;
}

/* Flowchart and other diagram types */
.mermaid:has(> g > g > path[class*="flowchart"]),
.mermaid:has(> g > g > polygon) {
    display: block;
    min-height: auto;
}

/* Prevent text overlapping in mindmap nodes */
.mermaid text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mindmap node styling */
.mermaid .node {
    overflow: visible;
}

/* Ensure proper spacing for mindmap branches */
.mermaid g[class*="mindmap"] {
    overflow: visible;
}

/* Gantt chart specific adjustments */
.mermaid g.grid {
    display: block;
}

.mermaid .gridLabel {
    font-size: 14px;
}

.mermaid .taskText {
    font-size: 13px;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .mermaid {
        min-height: auto;
        padding: 15px;
        font-size: 12px;
    }

    .mermaid:has(> g > g > rect[class*="bar"]) {
        min-height: auto;
    }

    /* Ensure SVG scales properly on mobile */
    .mermaid svg {
        width: 100%;
        height: auto;
    }
}

/* Ensure diagram doesn't get cut off */
.mermaid {
    box-sizing: border-box;
}