/* ── cheatsheets/cheatsheet-style.css ── */
/* Shared styles for individual language cheat sheet pages */

.lang-cheat-sheet .content-document {
    display: block !important;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px 100px;
    width: 100%;
}

.lang-cheat-sheet .content-document .cd-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 44px;
    letter-spacing: 2px;
    margin-bottom: 8px;
    color: var(--snow);
}

.lang-cheat-sheet .content-document .cd-subtitle {
    font-size: 16px;
    color: rgba(247, 248, 247, 0.35);
    margin-bottom: 40px;
    font-weight: 300;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
}

.lang-cheat-sheet .cd-rich h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    color: var(--sky);
    letter-spacing: 1px;
    margin: 40px 0 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(92, 206, 234, 0.06);
}

.lang-cheat-sheet .cd-rich h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--snow);
    margin: 28px 0 12px;
}

.lang-cheat-sheet .cd-rich pre {
    background: var(--code-bg);
    border: 1px solid var(--border);
    padding: 20px 24px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: #c8d6e5;
    overflow-x: auto;
    margin: 16px 0 20px;
    line-height: 1.7;
    border-radius: 0;
}

.lang-cheat-sheet .cd-rich pre .comment {
    color: #546e7a;
    font-style: italic;
}

.lang-cheat-sheet .cd-rich pre .keyword {
    color: #c792ea;
}

.lang-cheat-sheet .cd-rich pre .string {
    color: #c3e88d;
}

.lang-cheat-sheet .cd-rich pre .function {
    color: #82aaff;
}

.lang-cheat-sheet .cd-rich pre .number {
    color: #f78c6c;
}

.lang-cheat-sheet .cd-rich ul,
.lang-cheat-sheet .cd-rich ol {
    padding-left: 24px;
    margin: 12px 0 20px;
}

.lang-cheat-sheet .cd-rich li {
    font-size: 14px;
    color: rgba(247, 248, 247, 0.6);
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 4px;
}

.lang-cheat-sheet .cd-rich li strong {
    color: var(--snow);
    font-weight: 500;
}

.lang-cheat-sheet .cd-rich .tag-box {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 10px;
    border: 1px solid var(--border);
    color: rgba(92, 206, 234, 0.5);
    background: rgba(5, 5, 5, 0.3);
    margin-bottom: 4px;
}

.lang-cheat-sheet .two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.lang-cheat-sheet .two-col-grid .col {
    background: rgba(5, 5, 5, 0.3);
    border: 1px solid var(--border);
    padding: 20px 24px;
}

.lang-cheat-sheet .two-col-grid .col h5 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--sky);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.lang-cheat-sheet .two-col-grid .col ul {
    padding-left: 0;
    list-style: none;
}

.lang-cheat-sheet .two-col-grid .col ul li {
    padding: 4px 0;
    border-bottom: 1px solid rgba(92, 206, 234, 0.04);
    font-size: 13px;
}

.lang-cheat-sheet .two-col-grid .col ul li code {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--sky);
    font-size: 12px;
    background: rgba(5, 5, 5, 0.5);
    padding: 1px 6px;
}

@media (max-width: 768px) {
    .lang-cheat-sheet .two-col-grid {
        grid-template-columns: 1fr;
    }

    .lang-cheat-sheet .content-document .cd-title {
        font-size: 32px;
    }
}