/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Header */
header {
    background-color: #2c3e50;
    color: #fff;
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header nav {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

header nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s;
}

header nav a:hover {
    opacity: 0.8;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Content wrapper with sidebar */
.content-wrapper {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

/* Main content */
.content {
    flex: 1;
    min-width: 0;
    max-width: 800px;
}

.content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.content h2 {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #34495e;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 0.5rem;
}

.content h3 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #34495e;
}

.content h4 {
    font-size: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: #34495e;
}

.content p {
    margin-bottom: 1rem;
}

.content ul,
.content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.content li {
    margin-bottom: 0.5rem;
}

.content code {
    background-color: #f4f4f4;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.content pre {
    background-color: #f4f4f4;
    padding: 1rem;
    border-radius: 5px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.content pre code {
    background-color: transparent;
    padding: 0;
}

/* Syntax highlighting (Rouge/Kramdown) */
.highlight {
    background: #f6f8fa;
    color: #24292f;
    border: none;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.highlight pre,
.highlight code {
    background: transparent;
    padding: 0;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.95em;
    line-height: 1.5;
}

/* Token colors (GitHub light-inspired) */
.highlight .c { color: #6e7781; font-style: italic; } /* Comment */
.highlight .err { color: #f85149; background-color: #ffeef0; } /* Error */
.highlight .k { color: #cf222e; } /* Keyword */
.highlight .o { color: #0550ae; } /* Operator */
.highlight .cm { color: #6e7781; font-style: italic; } /* Comment.Multiline */
.highlight .cp { color: #0969da; } /* Comment.Preproc */
.highlight .c1 { color: #6e7781; font-style: italic; } /* Comment.Single */
.highlight .cs { color: #6e7781; font-style: italic; } /* Comment.Special */
.highlight .gd { color: #82071e; background-color: #ffebe9; } /* Generic.Deleted */
.highlight .ge { font-style: italic; } /* Generic.Emph */
.highlight .gh { color: #0550ae; font-weight: 600; } /* Generic.Heading */
.highlight .gi { color: #116329; background-color: #dafbe1; } /* Generic.Inserted */
.highlight .gp { color: #57606a; } /* Generic.Prompt */
.highlight .gs { font-weight: 600; } /* Generic.Strong */
.highlight .gu { color: #0550ae; } /* Generic.Subheading */
.highlight .kc { color: #cf222e; } /* Keyword.Constant */
.highlight .kd { color: #cf222e; } /* Keyword.Declaration */
.highlight .kn { color: #cf222e; } /* Keyword.Namespace */
.highlight .kp { color: #cf222e; } /* Keyword.Pseudo */
.highlight .kr { color: #cf222e; } /* Keyword.Reserved */
.highlight .kt { color: #cf222e; } /* Keyword.Type */
.highlight .m { color: #0550ae; } /* Literal.Number */
.highlight .s { color: #0a3069; } /* Literal.String */
.highlight .na { color: #0550ae; } /* Name.Attribute */
.highlight .nb { color: #953800; } /* Name.Builtin */
.highlight .nc { color: #116329; } /* Name.Class */
.highlight .no { color: #0550ae; } /* Name.Constant */
.highlight .nd { color: #8250df; } /* Name.Decorator */
.highlight .ni { color: #116329; } /* Name.Entity */
.highlight .ne { color: #0550ae; } /* Name.Exception */
.highlight .nf { color: #0550ae; } /* Name.Function */
.highlight .nn { color: #116329; } /* Name.Namespace */
.highlight .nt { color: #116329; } /* Name.Tag */
.highlight .nv { color: #0550ae; } /* Name.Variable */
.highlight .ow { color: #0550ae; } /* Operator.Word */
.highlight .w { color: #6e7781; } /* Text.Whitespace */

/* TOC Wrapper */
.toc-wrapper {
    position: sticky;
    top: 2rem;
    width: 300px;
    flex-shrink: 0;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

/* Tocbot styles customization */
.toc {
    /* Background and border removed */
    padding: 0;
}

.toc-list {
    list-style: none;
    padding-left: 0;
}

/* Indent nested lists */
.toc-list .toc-list {
    padding-left: 1.5rem;
    margin-top: 0.25rem;
}

.toc-list-item {
    margin-bottom: 0.5rem;
}

.toc-link {
    color: #495057;
    text-decoration: none;
    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.toc-link:hover {
    background-color: #e9ecef;
}

.toc-link.is-active-link {
    color: #007bff;
    font-weight: 600;
}

/* Footer */
footer {
    background-color: #2c3e50;
    color: #fff;
    text-align: center;
    padding: 2rem;
    margin-top: 4rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .content-wrapper {
        flex-direction: column;
        gap: 1rem;
    }

    .toc-wrapper {
        position: relative;
        width: 100%;
        top: 0;
        max-height: none;
    }

    .content {
        max-width: 100%;
    }

    .content h1 {
        font-size: 2rem;
    }

    .content h2 {
        font-size: 1.75rem;
    }

    .content pre,
    .highlight {
        font-size: 0.85em;
        padding: 0.75rem;
        overflow-x: auto;
    }

    header nav {
        gap: 1rem;
    }
}