/* User Provided Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Inter:wght@400;600&display=swap');

/* gitinspector.css */

/* =====================================================
   Mermaid Dual-Render Toggling
===================================================== */
/* Default (Light Mode) */
.mermaid-light {
    display: block !important;
}

.mermaid-dark {
    display: none !important;
}

/* Dark Mode Override (Supporting both html.dark and data-theme="dark") */
html.dark .mermaid-light,
html[data-theme="dark"] .mermaid-light {
    display: none !important;
}

html.dark .mermaid-dark,
html[data-theme="dark"] .mermaid-dark {
    display: block !important;
}

/* Hero Section (MyST landing-split-img) */
.myst-landing-split-img {
    background-color: #1a1a1a !important;
    color: #fff !important;
    padding: 4rem !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 550px !important;
    gap: 4rem !important;
    position: relative !important;
    overflow: hidden !important;
}

.myst-landing-split-img-image {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 500px !important;
}

.myst-landing-split-img-image img {
    width: 380px !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
}

.myst-landing-split-img-content-wrapper {
    position: relative !important;
    width: auto !important;
    flex: 1.2 !important;
    padding: 0 !important;
}

.myst-landing-split-img-content {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding: 0 !important;
}

.myst-landing-split-img h2,
.myst-landing-split-img p,
.myst-landing-split-img .prose {
    color: #fff !important;
}

/* Dark Theme Support */
.dark .myst-landing-split-img {
    background-color: #2d2d2d !important;
}

/* Mermaid CSS Variables - Restored Architects Daughter Look */
:root {
    --mermaid-font-family: 'Architects Daughter', cursive;
    --mermaid-font-size: 14px;

    /* Light Mode Colors (Katlas Style) */
    --mermaid-primary-color: #ECECFF;
    --mermaid-primary-text: #333;
    --mermaid-primary-border: #9370DB;
    --mermaid-line-color: #333;
    --mermaid-secondary-color: #ffffde;
    --mermaid-tertiary-color: #fff;
}

html.dark,
html[data-theme="dark"] {
    /* Dark Mode Colors (Katlas Style) */
    --mermaid-primary-color: #2D2D2D;
    --mermaid-primary-text: #F0F0F0;
    --mermaid-primary-border: #BB86FC;
    --mermaid-line-color: #E0E0E0;
    --mermaid-secondary-color: #383838;
    --mermaid-tertiary-color: #121212;
}

.mermaid text {
    font-family: var(--mermaid-font-family) !important;
}

.mermaid g.node rect,
.mermaid g.node circle,
.mermaid g.node polygon {
    fill: var(--mermaid-primary-color) !important;
    stroke: var(--mermaid-primary-border) !important;
    stroke-width: 1.5px;
}

.mermaid g.node .label {
    color: var(--mermaid-primary-text) !important;
    fill: var(--mermaid-primary-text) !important;
}

.mermaid g.edgePath path {
    stroke: var(--mermaid-line-color) !important;
    stroke-width: 2px;
}

.mermaid .edgeLabel {
    background-color: var(--mermaid-tertiary-color) !important;
    color: var(--mermaid-primary-text) !important;
}

.mermaid g.cluster rect {
    fill: var(--mermaid-secondary-color) !important;
    stroke: var(--mermaid-primary-border) !important;
}