/* ==========================================================================
   Custom Styles for AI Research Blog (Hugo PaperMod)
   ========================================================================== */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono&display=swap');

/* Apply custom fonts globally */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: var(--theme) !important;
}

code, pre, pre code, .hljs {
    font-family: 'JetBrains Mono', 'Menlo', 'Monaco', monospace !important;
}

/* ==========================================================================
   LAYOUT WIDTH OPTIMIZATION - Centered layout with equal margins
   ========================================================================== */

/* Main container - centered with max width */
.main {
    max-width: 1000px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 2em !important;
}

/* Post content wrapper */
.post-content {
    max-width: 100% !important;
    width: 100% !important;
}

/* Larger screens - wider max width */
@media (min-width: 1280px) {
    .main {
        max-width: 1100px !important;
        padding: 0 3em !important;
    }
}

/* Medium screens */
@media (min-width: 1024px) and (max-width: 1280px) {
    .main {
        max-width: 900px !important;
        padding: 0 2.5em !important;
    }
}

/* ==========================================================================
   TYPOGRAPHY - Clean and compact with smaller fonts
   ========================================================================== */

.post-content {
    font-size: 0.95em !important;
    line-height: 1.7 !important;
    color: var(--content) !important;
}

.post-content p {
    margin: 1em 0 !important;
    line-height: 1.7 !important;
}

/* Post title - Should be largest */
.post-title,
h1.post-title {
    font-size: 1.8em !important;
    font-weight: 700 !important;
    margin-bottom: 0.5em !important;
    line-height: 1.3 !important;
}

/* Headings with clean, minimal style - Smaller sizes */
.post-content h2 {
    margin-top: 2em !important;
    margin-bottom: 0.8em !important;
    padding-bottom: 0.3em !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--primary) !important;
    font-size: 1.5em !important;
    font-weight: 600 !important;
}

.post-content h3 {
    margin-top: 1.6em !important;
    margin-bottom: 0.6em !important;
    color: var(--primary) !important;
    font-size: 1.2em !important;
    font-weight: 600 !important;
}

.post-content h4 {
    margin-top: 1.3em !important;
    margin-bottom: 0.5em !important;
    color: var(--primary) !important;
    font-size: 1.05em !important;
    font-weight: 600 !important;
}

/* Lists with compact styling */
.post-content ul,
.post-content ol {
    margin: 1em 0 !important;
    padding-left: 1.8em !important;
}

.post-content li {
    margin: 0.5em 0 !important;
    line-height: 1.7 !important;
}

/* Blockquotes - Minimal compact style */
.post-content blockquote {
    border-left: 3px solid var(--border) !important;
    padding: 0.6em 1em !important;
    margin: 1.2em 0 !important;
    background: var(--code-bg) !important;
    color: var(--secondary) !important;
}

/* ==========================================================================
   CODE STYLING - Simple plain text, NO syntax highlighting
   ========================================================================== */

/* Inline code - Clean style */
.post-content code {
    background: var(--code-bg) !important;
    padding: 0.2em 0.4em !important;
    border-radius: 3px !important;
    font-size: 0.88em !important;
    border: none !important;
}

/* Dark mode: 浅色文字 */
[data-theme="dark"] .post-content code {
    color: #d4d4d4 !important;
}

/* Light mode: 深色文字 */
[data-theme="light"] .post-content code {
    color: #24292e !important;
}

/* Code blocks - Simple and compact, no syntax highlighting */
.post-content pre {
    padding: 1em !important;
    border-radius: 4px !important;
    overflow-x: auto !important;
    margin: 1.2em 0 !important;
    border: 1px solid var(--border) !important;
}

/* Dark mode: 深灰背景 */
[data-theme="dark"] .post-content pre {
    background: #1e1e1e !important;
}

/* Light mode: 浅灰背景 */
[data-theme="light"] .post-content pre {
    background: #f6f8fa !important;
}

.post-content pre code {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0.88em !important;
}

/* Dark mode: 代码块文字浅色 */
[data-theme="dark"] .post-content pre code {
    color: #d4d4d4 !important;
}

/* Light mode: 代码块文字深色 */
[data-theme="light"] .post-content pre code {
    color: #24292e !important;
}

/* Disable ALL syntax highlighting - force plain text */
.post-content pre code *,
.post-content pre code span,
.post-content .highlight code *,
.post-content .highlight code span,
.post-content pre .hljs *,
.post-content pre .hljs span {
    background: transparent !important;
    font-weight: normal !important;
    font-style: normal !important;
}

/* Dark mode: span文字浅色 */
[data-theme="dark"] .post-content pre code *,
[data-theme="dark"] .post-content pre code span {
    color: #d4d4d4 !important;
}

/* Light mode: span文字深色 */
[data-theme="light"] .post-content pre code *,
[data-theme="light"] .post-content pre code span {
    color: #24292e !important;
}

/* Remove syntax highlighting from highlight wrapper */
.post-content .highlight,
.post-content div.highlight {
    background: transparent !important;
}

.post-content .highlight pre {
    background: transparent !important;
}

/* Disable specific syntax highlighting classes - Dark mode */
[data-theme="dark"] .chroma,
[data-theme="dark"] .chroma .err,
[data-theme="dark"] .chroma .k,
[data-theme="dark"] .chroma .kd,
[data-theme="dark"] .chroma .kn,
[data-theme="dark"] .chroma .s,
[data-theme="dark"] .chroma .s1,
[data-theme="dark"] .chroma .s2,
[data-theme="dark"] .chroma .n,
[data-theme="dark"] .chroma .nx,
[data-theme="dark"] .chroma .mi,
[data-theme="dark"] .chroma .mf,
[data-theme="dark"] .chroma .c,
[data-theme="dark"] .chroma .c1,
[data-theme="dark"] .chroma .cm,
[data-theme="dark"] .chroma .o,
[data-theme="dark"] .chroma .p {
    color: #d4d4d4 !important;
    background: transparent !important;
    font-weight: normal !important;
}

/* Disable specific syntax highlighting classes - Light mode */
[data-theme="light"] .chroma,
[data-theme="light"] .chroma .err,
[data-theme="light"] .chroma .k,
[data-theme="light"] .chroma .kd,
[data-theme="light"] .chroma .kn,
[data-theme="light"] .chroma .s,
[data-theme="light"] .chroma .s1,
[data-theme="light"] .chroma .s2,
[data-theme="light"] .chroma .n,
[data-theme="light"] .chroma .nx,
[data-theme="light"] .chroma .mi,
[data-theme="light"] .chroma .mf,
[data-theme="light"] .chroma .c,
[data-theme="light"] .chroma .c1,
[data-theme="light"] .chroma .cm,
[data-theme="light"] .chroma .o,
[data-theme="light"] .chroma .p {
    color: #24292e !important;
    background: transparent !important;
    font-weight: normal !important;
}

/* ==========================================================================
   IMAGES - Clean compact style
   ========================================================================== */

.post-content img,
article img {
    max-width: 100% !important;
    width: 90% !important;
    height: auto !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2) !important;
    margin: 1.5em auto !important;
    display: block !important;
    border: 1px solid var(--border) !important;
}

/* Ensure images in paragraphs also follow these rules */
.post-content p img {
    max-width: 100% !important;
    width: 90% !important;
}

/* Image captions - Compact */
.post-content p em {
    display: block !important;
    text-align: center !important;
    color: var(--secondary) !important;
    font-size: 0.88em !important;
    margin-top: 0.5em !important;
    margin-bottom: 1.2em !important;
    font-style: italic !important;
}

/* ==========================================================================
   TABLES - Clean compact style with horizontal scrolling
   ========================================================================== */

.post-content table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    margin: 1.5em 0 !important;
    border-collapse: collapse !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    font-size: 0.88em !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Reset table structure inside scroll container */
.post-content table tbody,
.post-content table thead {
    display: table !important;
    width: 100% !important;
}

.post-content table tbody tr,
.post-content table thead tr {
    display: table-row !important;
}

.post-content table th,
.post-content table td {
    display: table-cell !important;
    white-space: nowrap !important;
}

/* Simple table header - Compact */
.post-content table thead {
    background: var(--code-bg) !important;
    border-bottom: 2px solid var(--border) !important;
}

.post-content table th {
    padding: 0.6em 0.8em !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    font-size: 0.95em !important;
}

.post-content table td {
    padding: 0.6em 0.8em !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--content) !important;
}

.post-content table tbody tr:hover {
    background: var(--code-bg) !important;
}

.post-content table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Bold table cells */
.post-content table td strong,
.post-content table td b {
    font-weight: 600 !important;
}

/* ==========================================================================
   LINKS - Simple underline style
   ========================================================================== */

.post-content a {
    color: var(--link, #58a6ff) !important;
    text-decoration: none !important;
}

.post-content a:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
   OTHER ELEMENTS
   ========================================================================== */

/* Horizontal rules - Compact */
.post-content hr {
    border: none !important;
    height: 1px !important;
    background: var(--border) !important;
    margin: 2em 0 !important;
}

/* Strong emphasis */
.post-content strong,
.post-content b {
    font-weight: 600 !important;
}

/* Post metadata - Compact */
.post-meta {
    font-size: 0.85em !important;
    color: var(--secondary) !important;
    margin-bottom: 1.2em !important;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1024px) {
    .main {
        max-width: 100% !important;
        padding: 0 1.5em !important;
    }

    .post-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .main {
        padding: 0 1em !important;
    }

    .post-content {
        font-size: 0.92em !important;
        width: 100% !important;
    }

    .post-title,
    h1.post-title {
        font-size: 1.5em !important;
    }

    .post-content h2 {
        font-size: 1.3em !important;
        margin-top: 1.5em !important;
    }

    .post-content h3 {
        font-size: 1.1em !important;
        margin-top: 1.2em !important;
    }

    .post-content h4 {
        font-size: 1.02em !important;
    }

    .post-content img,
    article img {
        max-width: 100% !important;
        width: 95% !important;
        margin: 1.2em auto !important;
    }

    .post-content table {
        font-size: 0.82em !important;
    }

    .post-content table th,
    .post-content table td {
        padding: 0.5em 0.5em !important;
        font-size: 0.9em !important;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .post-content {
        font-size: 12pt !important;
        color: black !important;
    }

    .post-content a {
        color: black !important;
        text-decoration: underline !important;
    }

    .post-content img {
        box-shadow: none !important;
        max-width: 100% !important;
    }

    .post-content h2,
    .post-content h3 {
        border: none !important;
    }
}