/* ===== Drawer Nav (mobile sidebar) ===== */
#drawernav {
    display: none;
}

@media (max-width: 768px) {
    #drawernav {
        display: block;
        background: #2ba252;
        overflow-y: auto;
        overflow-x: hidden;
        position: fixed;
        top: 0;
        right: 0;
        width: 240px;
        height: 100%;
        color: #fff;
        z-index: 99998;
        box-shadow: rgba(0, 0, 0, 0.2) -3px 0 2px 0;
        transition: transform 400ms cubic-bezier(1, 0, 0, 1);
        transform: translateX(100%);
    }

    .drawer-opened #drawernav {
        transform: translateX(0);
    }

    /* Page shift */
    .drawer-opened #page {
        left: -240px;
        box-shadow: 1px 0 2px #000;
    }

    #drawernav ul {
        list-style: none;
        padding: 0;
    }

    #drawernav ul:first-child {
        margin-top: 60px;
    }

    /* Parent menu links */
    #drawernav ul li a {
        background: #2ba252;
        color: #fff;
        font-size: 1.3rem;
        display: block;
        padding: 10px 20px;
        text-decoration: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    #drawernav ul li a:hover {
        color: #fff;
        opacity: 0.8;
    }

    /* FontAwesome arrow before parent links */
    #drawernav > nav > ul > li > a::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f0da";
        margin-right: 10px;
    }

    /* Child menu (sub-links with icon images) */
    #drawernav li ul li a {
        font-size: 1.1rem;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 20px;
        text-decoration: none;
        border-top: none;
        border-bottom: none;
        background: #008eb6;
    }

    /* Remove arrow pseudo-element from child links */
    #drawernav li ul li a::before {
        content: none;
    }

    /* Icon images in child menu */
    #drawernav li ul li a img {
        width: 20px;
        height: 20px;
        filter: brightness(0) invert(1);
        transition: filter 0.2s;
        flex-shrink: 0;
    }

    #drawernav li ul li a:hover img {
        filter: brightness(0) invert(1);
    }
}