/* ============================================ */
/*           Side Nav Wrapper                   */
/* Shared component — inner pages with sidebar  */
/* ============================================ */

/* Mobile - hidden sidebar, single column */
@media only screen and (min-width: 0px) {

    #cs-sidebar-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #cs-section-sidebar {
        display: none;
    }
}

/* Desktop - 1024px: sticky sidebar + content grid */
@media only screen and (min-width: 64rem) {

    #cs-sidebar-wrapper {
        display: grid;
        grid-template-columns: 20rem 1fr;
        align-items: start;
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    }

    #cs-section-sidebar {
        display: block;
        padding: 2rem 0 2rem 6vw;
        position: sticky;
        top: var(--nav-offset, 5rem);
        height: fit-content;
        border-right: 0.5px solid rgba(0, 0, 0, 0.08);
    }

    /* Heading */
    .cs-sidebar-heading {
        font-family: var(--headerFont);
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--navy);
        padding: 0 0 0.875rem;
        margin: 0;
        display: block;
    }

    /* Nav list */
    .cs-sidebar-nav {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Nav item — dot indicator */
    .cs-sidebar-item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem 0;
    }

    .cs-sidebar-item::before {
        content: '';
        width: 0.3125rem;
        height: 0.3125rem;
        border-radius: 50%;
        background: transparent;
        flex-shrink: 0;
        transition: background 0.2s ease;
    }

    /* Active state */
    .cs-sidebar-item.cs-active::before {
        background: var(--signingGold);
    }

    .cs-sidebar-item.cs-active .cs-sidebar-link {
        color: var(--navy);
        font-weight: 600;
    }

    /* Hover state */
    .cs-sidebar-item:hover::before {
        background: rgba(212, 168, 67, 0.4);
    }

    .cs-sidebar-item:hover .cs-sidebar-link {
        color: var(--navy);
    }

    /* Link */
    .cs-sidebar-link {
        display: block;
        font-family: var(--bodyFont);
        font-size: 1rem;
        font-weight: 400;
        color: var(--silver);
        text-decoration: none;
        transition: color 0.2s ease;
    }
}