/* 
 * Nav-box spacing guide:
 * - Left margin (50px): Defined below in margin-left
 * - Right margin: Uses var(--nav-gap) to space from content
 * - Top margin: 24px below h1
 * Find these spacing values in nav-box.css, .nav-box class
 */
.nav-box {
    display: block;
    width: var(--nav-width);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-family: "Bakersville", serif;
    font-size: 28px;
    color: #202020;
    border: 1px solid rgba(0,0,0,0.06);
    margin-top: 20px; /* space below h1 */
    margin-right: var(--nav-gap); /* spacing between nav-box and the right column */
    margin-left: 50px; /* space from left edge of page */
}

.nav-box ul { padding-left: 28px; margin-top: 12px; list-style: none; }
.nav-box li { margin: 6px 0; }
.nav-box a { color: inherit; text-decoration: none; display: block; padding: 6px 0; }
.nav-box a[href*="role"], .nav-box a[href*="how they began"] { padding-left: 40px; }
.nav-box a[href*="behind the music"], .nav-box a[href*="popular"] { padding-left: 40px; }
.nav-box a:hover { background-color: rgba(0,0,0,0.03); border-radius: 6px; }
.nav-box a:active { background-color: rgba(0,0,0,0.05); }
.nav-box a:visited { color: #6a4c8b;}


/* Active nav item indicator */
.nav-box a.active {
    background-color: rgba(83, 39, 116, 0.08);
    color: #532774;
    font-weight: 700;
    border-left: 4px solid #532774;
    padding-left: 10px; /* slight offset to account for left border */
    border-radius: 6px;
}