/* Custom CSS to override theme width constraints */

body {
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main#content :not(pre) > code {
    background-color: #e6e8eb;
    border: 1px solid #d0d7de;
    border-radius: 3px;
    padding: 0.1em 0.3em;
}

[data-theme="dark"] main#content :not(pre) > code {
    background-color: #343a40;
    border-color: #495057;
    color: #e6edf3;
}

@media (min-width: 770px) {
    body {
        width: 770px;
        max-width: 90%; /* Ensure it doesn't exceed 90% of viewport on smaller screens */
    }
    
    /* Align images and code blocks with text content */
    main#content hr {
        width: 100%; /* Align with text width */
        margin-left: 0; /* No negative margin */
    }
    
    main#content img {
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        display: block;
    }
    
    main#content figure {
        margin-left: 2.5%; /* Slight indentation */
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        width: 95%; /* Slightly narrower than text */
    }
    
    main#content figure img {
        max-width: 100%; /* Fill the figure container */
        margin-left: auto; /* Center the image */
        margin-right: auto; /* Center the image */
        display: block; /* Required for margin auto to work */
    }
    
    /* Make profile images smaller */
    main#content figure.profile-image img {
        width: 300px !important; /* Make profile image smaller */
        max-width: 300px !important;
        height: auto;
    }
    
    main#content pre {
        width: 95%; /* Slightly narrower than text */
        margin-left: 2.5%; /* Slight indentation */
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        padding: 1.5rem 2.2rem;
        border-radius: 6px; /* Add rounded corners for better appearance */
        background-color: #f6f8fa; /* Light gray background */
        overflow-x: auto; /* Handle horizontal scrolling for long code */
        border: 1px solid #e1e4e8; /* Subtle border */
    }
    
    /* Style blockquotes to match the indented layout */
    main#content blockquote {
        width: 95%;
        margin-left: 2.5%;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        padding: 1rem 1.5rem;
        border-left: 4px solid #0969da;
        background-color: #f6f8fa;
        border-radius: 0 6px 6px 0;
    }
}

@media (min-width: 1200px) {
    body {
        width: 870px;
        max-width: 85%;
    }
}

main#content article {
    font-size: 1.04em;
    line-height: 1.82;
}

/* Tables */
main#content table {
    width: 95%;
    margin: 1.5rem 2.5%;
    border-collapse: collapse;
}

main#content th,
main#content td {
    padding: 0.5rem 1.2rem;
    border-bottom: 1px solid #e1e4e8;
}

main#content th:not(:last-child),
main#content td:not(:last-child) {
    border-right: 1px solid #e1e4e8;
}

main#content th {
    border-bottom-width: 2px;
}

@media (prefers-color-scheme: dark) {
    main#content th,
    main#content td {
        border-bottom-color: #30363d;
    }
}

[data-theme="dark"] main#content th,
[data-theme="dark"] main#content td {
    border-bottom-color: #30363d;
}

/* Side-by-side image pair (centered) */
main#content .image-pair {
    display: flex;
    justify-content: center;
    gap: 2%;
    width: 95%;
    margin: 1.5rem 2.5%;
}

main#content .image-pair img {
    width: 36%;
    max-width: 36%;
    margin: 0;
}

/* Mermaid diagram styling */
.mermaid {
    text-align: center;
    margin: 1rem 0;
    overflow-x: auto;
    padding: 0.35rem 0.25rem;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
}

.mermaid svg {
    display: block;
    width: 78%;
    max-width: 78%;
    height: auto;
    margin: 0 auto;
}

/* Responsive adjustments for Mermaid on wider layouts */
@media (min-width: 770px) {
    .mermaid {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

/* Dark mode support for Mermaid (if your theme supports dark mode) */
[data-theme="dark"] .mermaid {
    background-color: #0d1117;
    border-color: #30363d;
}

/* Dark mode support for code blocks and blockquotes */
@media (prefers-color-scheme: dark) {
    main#content pre {
        background-color: #161b22;
        border-color: #30363d;
        color: #e6edf3;
    }
    
    main#content blockquote {
        background-color: #161b22;
        border-left-color: #2f81f7;
        color: #e6edf3;
    }
}

[data-theme="dark"] main#content pre {
    background-color: #161b22;
    border-color: #30363d;
    color: #e6edf3;
}

[data-theme="dark"] main#content blockquote {
    background-color: #161b22;
    border-left-color: #2f81f7;
    color: #e6edf3;
}

/* Post header image (front matter: headerImage / headerAlt / headerCaption) */
main#content .post-header-image {
    width: 100%;
    margin: 0 0 2rem;
}

main#content .post-header-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 6px;
}

main#content .post-header-image figcaption {
    text-align: center;
    font-size: 0.9em;
    color: inherit;
    opacity: 0.75;
    margin-top: 0.75rem;
}

main#content .katex {
    font-size: 1.05em;
}

main#content .katex math mi[mathvariant="bold"],
main#content .katex math mi[mathvariant="bold-italic"] {
    font-weight: 400;
}

main#content .katex:has(> math[display="block"]) {
    display: block;
    text-align: center;
    margin: 1.5rem 0;
    overflow-x: auto;
    overflow-y: hidden;
}