/* Container for sidebar + main content */
.content-layout {
    display: flex;
    gap: 30px;               /* space between sidebar and main */
    max-width: 1200px;       /* total width for sidebar + main content */
    margin: 0 auto;           /* center the container horizontally */
    padding: 20px;           /* optional padding around the container */
    box-sizing: border-box;  /* ensure padding doesn’t break max-width */
}

/* Sidebar stays on left */
.content-sidebar {
    width: 260px;
    position: sticky;
    top: 60px;               /* distance from top when scrolling */
    height: calc(100vh - 60px); /* full viewport height minus top offset */
    overflow-y: auto;
}

/* Sidebar links */
.content-sidebar a {
    display: block;
    padding: 3px 0;
    text-decoration: none;
    color: #8ab4ff;
}

.content-sidebar a:hover {
    color: #ffffff;
}

.content-sidebar a:visited {
    color: #8ab4ff;
}

/* Main content area */
.content-main {
    flex: 1;                  /* take up remaining space */
    max-width: 900px;         /* limit content width */
    min-width: 400px;         /* prevent shrinking too small */
}

/* Sidebar link indentation */
.lvl2 { font-weight: bold; }
.lvl3 { padding-left: 10px; }
.lvl4 { padding-left: 20px; }

.doc-link {
    color: #8ab4ff;
    text-decoration: underline;
}

.doc-link:hover {
    color: white;
}

.doc-link::after {
    content: " 🔗";
    font-size: 0.8em;
}