/* ============================================================
   Slide-out side navigation drawer
   ============================================================ */
.sidenav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 300px;
    z-index: 4;
    background-color: #434343;
    overflow-x: hidden;
    transition: transform 0.25s ease;
    transform: translateX(-520px);
}

.sidenav-open {
    transform: translateX(0);
}

.sidenav a {
    margin: var(--space-4);
    transition: background-color 0.2s ease, color 0.2s ease;
}

@media (pointer: coarse) {
    .sidenav {
        width: 500px;
    }
}

/* ============================================================
   Click-outside-to-close overlay
   ============================================================ */
.opaque {
    left: 0;
    top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    transition: opacity 0.6s ease;
}