/* static/css/markdown_previewer.css */

/* Styling for the Markdown Previewer tool page */
.markdown-tool-container {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.markdown-editor-layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px; 
    gap: 1rem; 
    min-height: 70vh; /* Increased height */
}

.markdown-editor-column,
.markdown-preview-column {
    flex: 1; 
    display: flex;
    flex-direction: column;
}

.markdown-editor-column textarea,
.markdown-preview-area {
    width: 100%;
    height: 100%; 
    min-height: 400px; /* Increased min-height */
    padding: 1rem;
    border-radius: 8px;
    font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.markdown-editor-column textarea {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border: 1px solid #333;
    resize: none; 
}

.markdown-editor-column textarea:focus {
    outline: none;
    border-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.5);
}

.markdown-preview-area {
    background-color: #181818; 
    color: #e0e0e0;
    border: 1px solid #2a2a2a;
    overflow-y: auto; 
}

/* Styling for elements generated by marked.js, enhanced by Highlight.js theme */
.markdown-preview-area h1, 
.markdown-preview-area h2, 
.markdown-preview-area h3 {
    font-family: 'Orbitron', sans-serif;
    color: #c0392b; 
    margin-top: 1em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #333; /* Add a subtle separator for headings */
    padding-bottom: 0.25em;
}

.markdown-preview-area h1 { font-size: 2em; }
.markdown-preview-area h2 { font-size: 1.75em; }
.markdown-preview-area h3 { font-size: 1.5em; }
.markdown-preview-area p { margin-bottom: 1em; }
.markdown-preview-area a { color: #DAA520; } 

/* Highlight.js will style code blocks, but we can ensure <pre> has a good base */
.markdown-preview-area pre {
    background-color: #282c34; /* Default for atom-one-dark, or let theme handle it */
    padding: 1em;
    border-radius: 5px;
    overflow-x: auto;
    margin-bottom: 1em;
}

.markdown-preview-area code {
    /* For inline code, not code blocks handled by highlight.js <pre><code> */
    background-color: #2a2a2a;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.85em;
}

.markdown-preview-area pre code {
     /* Reset for code inside pre, as highlight.js styles it */
    padding: 0;
    background-color: transparent;
    font-size: inherit; /* Inherit from pre for consistency */
}

.markdown-preview-area blockquote {
    border-left: 4px solid #c0392b;
    padding-left: 1em;
    margin-left: 0;
    color: #aaa;
    font-style: italic;
}

.markdown-preview-area ul, 
.markdown-preview-area ol {
    margin-left: 2em;
    margin-bottom: 1em;
}

.markdown-preview-area table {
    border-collapse: collapse;
    width: auto;
    margin-bottom: 1em;
    border: 1px solid #444;
}

.markdown-preview-area th, 
.markdown-preview-area td {
    border: 1px solid #444;
    padding: 0.5em;
    text-align: left;
}

.markdown-preview-area th {
    background-color: #2a2a2a;
    font-weight: bold;
}

.markdown-preview-area hr {
    border: 0;
    border-top: 1px solid #444;
    margin: 1.5em 0;
}

.tool-title-page { /* For the "Markdown Live Previewer" title on the page */
    color: #e0e0e0;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

@media (max-width: 768px) {
    .markdown-editor-layout {
        flex-direction: column;
        min-height: auto; 
    }
    .markdown-editor-column textarea,
    .markdown-preview-area {
        min-height: 300px; 
    }
}