/**
 * Markdown Content Styling
 * Beautiful typography and component styling for rendered markdown
 * CRITICAL: All styles MUST be prefixed with .markdown-content to prevent leaks
 */

/* ============================================
   MARKDOWN CONTAINER - Isolated Scope
   ============================================ */
.markdown-content {
    /* CSS Isolation */
    isolation: isolate;

    /* Typography base */
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-comfortable);
    color: var(--text-primary);
    max-width: 100%;

    /* Reset Bootstrap interference */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Headings */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    color: var(--text-primary);
    scroll-margin-top: 80px;
    /* For anchor links with fixed header */
}

.markdown-content h1 {
    font-size: var(--text-4xl);
    margin-top: 0;
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--border-medium);
}

.markdown-content h2 {
    font-size: var(--text-3xl);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-light);
}

.markdown-content h3 {
    font-size: var(--text-2xl);
}

.markdown-content h4 {
    font-size: var(--text-xl);
}

.markdown-content h5 {
    font-size: var(--text-lg);
}

.markdown-content h6 {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

/* Heading Anchors */
.markdown-content h1 .anchor,
.markdown-content h2 .anchor,
.markdown-content h3 .anchor,
.markdown-content h4 .anchor,
.markdown-content h5 .anchor,
.markdown-content h6 .anchor {
    opacity: 0;
    margin-left: var(--space-2);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.7em;
    transition: opacity var(--transition-fast);
    vertical-align: middle;
}

.markdown-content h1:hover .anchor,
.markdown-content h2:hover .anchor,
.markdown-content h3:hover .anchor,
.markdown-content h4:hover .anchor,
.markdown-content h5:hover .anchor,
.markdown-content h6:hover .anchor {
    opacity: 0.6;
}

.markdown-content .anchor:hover {
    opacity: 1 !important;
}

/* Paragraphs */
.markdown-content p {
    margin-top: 0;
    margin-bottom: var(--space-4);
    line-height: var(--leading-comfortable);
}

/* Links */
.markdown-content a {
    color: var(--accent-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
}

.markdown-content a:hover {
    border-bottom-color: var(--accent-primary);
}

/* Strong and Emphasis */
.markdown-content strong {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.markdown-content em {
    font-style: italic;
}

/* Lists */
.markdown-content ul,
.markdown-content ol {
    margin-top: 0;
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

.markdown-content li {
    margin-bottom: var(--space-2);
    line-height: var(--leading-comfortable);
}

.markdown-content li>p {
    margin-bottom: var(--space-2);
}

.markdown-content ul ul,
.markdown-content ol ol,
.markdown-content ul ol,
.markdown-content ol ul {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}

/* ============================================
   CODE BLOCKS
   ============================================ */

/* Inline Code */
.markdown-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background-color: var(--bg-code);
    color: var(--text-primary);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

/* Code Blocks */
.markdown-content pre {
    background-color: var(--bg-code);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-4) 0;
    overflow-x: auto;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.markdown-content pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-primary);
    display: block;
}

/* Code Block with Copy Button */
.code-block-wrapper {
    position: relative;
    margin: var(--space-4) 0;
}

.code-block-wrapper .copy-button {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
    z-index: 10;
}

.code-block-wrapper:hover .copy-button {
    opacity: 1;
}

.code-block-wrapper .copy-button:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.code-block-wrapper .copy-button.copied {
    background-color: var(--success-soft);
    color: var(--success);
    border-color: var(--success);
}

/* ============================================
   BLOCKQUOTES & CALLOUTS
   ============================================ */

/* Standard Blockquote */
.markdown-content blockquote {
    margin: var(--space-4) 0;
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--border-dark);
    background-color: var(--bg-secondary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text-secondary);
}

.markdown-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Callout Boxes */
.callout {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border-left: 4px solid;
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
}

.callout-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
    line-height: 1;
}

.callout-content {
    flex: 1;
    line-height: var(--leading-comfortable);
}

.callout-content p:last-child {
    margin-bottom: 0;
}

/* Callout Variants */
.callout-info {
    background-color: var(--info-soft);
    border-left-color: var(--info);
    color: var(--text-primary);
}

.callout-success {
    background-color: var(--success-soft);
    border-left-color: var(--success);
    color: var(--text-primary);
}

.callout-warning {
    background-color: var(--warning-soft);
    border-left-color: var(--warning);
    color: var(--text-primary);
}

.callout-error,
.callout-danger {
    background-color: var(--error-soft);
    border-left-color: var(--error);
    color: var(--text-primary);
}

.callout-important {
    background-color: var(--important-soft);
    border-left-color: var(--important);
    color: var(--text-primary);
}

/* ============================================
   TABLES
   ============================================ */
.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0;
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-medium);
}

.markdown-content thead {
    background-color: var(--bg-secondary);
}

.markdown-content th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-medium);
}

.markdown-content td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

.markdown-content tr:last-child td {
    border-bottom: none;
}

.markdown-content tbody tr:hover {
    background-color: var(--bg-hover);
}

/* ============================================
   IMAGES
   ============================================ */
.markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin: var(--space-4) 0;
    display: block;
}

.markdown-content img.inline {
    display: inline;
    margin: 0;
    box-shadow: none;
    border-radius: var(--radius-sm);
}

/* Image with Caption */
.markdown-content figure {
    margin: var(--space-6) 0;
    text-align: center;
}

.markdown-content figure img {
    margin: 0 auto;
}

.markdown-content figcaption {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================
   HORIZONTAL RULE
   ============================================ */
.markdown-content hr {
    border: none;
    border-top: 2px solid var(--border-medium);
    margin: var(--space-8) 0;
}

/* ============================================
   TASK LISTS
   ============================================ */
.markdown-content .task-list-item {
    list-style: none;
    margin-left: calc(-1 * var(--space-6));
    padding-left: var(--space-6);
}

.markdown-content .task-list-item input[type="checkbox"] {
    margin-right: var(--space-2);
    cursor: pointer;
}

/* ============================================
   MERMAID DIAGRAMS
   ============================================ */
.markdown-content .mermaid {
    margin: var(--space-6) 0;
    padding: var(--space-4);
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-medium);
    text-align: center;
    overflow-x: auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .markdown-content h1 {
        font-size: var(--text-3xl);
    }

    .markdown-content h2 {
        font-size: var(--text-2xl);
    }

    .markdown-content h3 {
        font-size: var(--text-xl);
    }

    .markdown-content pre {
        padding: var(--space-3);
        font-size: 0.8rem;
    }

    .markdown-content table {
        font-size: var(--text-sm);
    }

    .markdown-content th,
    .markdown-content td {
        padding: var(--space-2) var(--space-3);
    }
}