/* =========================================================
   MAYOBA LEARNER SIDEBAR
   learner-sidebar.css
   ========================================================= */

/* ---------------------------------------------------------
   Sidebar Container
   --------------------------------------------------------- */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 200px;

    background: #fff;
    border-right: 1px solid #e3eaf7;

    padding: 18px 16px 18px;

    z-index: 40;

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    overflow-x: hidden;
}


/* ---------------------------------------------------------
   Brand / Logo
   --------------------------------------------------------- */

.brand {
    display: flex;
    align-items: center;

    height: 50px;

    padding: 0 6px 10px;

    flex-shrink: 0;
}

.brand img {
    width: 196px;
    max-height: 45px;

    object-fit: contain;
    object-position: left center;
}


/* ---------------------------------------------------------
   Navigation Menu
   --------------------------------------------------------- */

.menu {
    display: grid;

    gap: 7px;

    margin-top: 18px;
}


/* ---------------------------------------------------------
   Navigation Links
   --------------------------------------------------------- */

.menu-link {
    display: flex;
    align-items: center;

    gap: 16px;

    padding: 13px 15px;

    border-radius: 11px;

    font-size: 15px;
    font-weight: 650;

    color: #152665;

    text-decoration: none;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


/* Sidebar Icons */

.menu-link .icon {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: block;
}


/* Hover */

.menu-link:hover {
    background: #f1f5ff;
}


/* Active Item */

.menu-link.active {
    background: linear-gradient(
        135deg,
        #0a2677,
        #092b8d
    );

    color: #fff;

    box-shadow:
        0 8px 20px rgba(10, 42, 126, 0.18);
}


/* Keep SVGs using the link color */

.menu-link .icon {
    color: currentColor;
}


/* ---------------------------------------------------------
   Menu Separator
   --------------------------------------------------------- */

.menu-sep {
    height: 1px;

    background: #e3eaf7;

    margin: 14px 0;
}


/* ---------------------------------------------------------
   Sidebar Promotional Card
   --------------------------------------------------------- */

.side-promo {
    margin-top: auto;

    border-radius: 14px;

    padding: 20px 16px;

    background:
        linear-gradient(
            145deg,
            #edf4ff,
            #dbe9ff
        );

    text-align: center;

    min-height: 164px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    flex-shrink: 0;
}


/* Graduation Cap */

.side-promo .cap {
    font-size: 42px;

    margin-bottom: 8px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.side-promo .cap .icon {
    width: 46px;
    height: 46px;

    color: #113389;
}


/* Promotional Heading */

.side-promo b {
    font-size: 17px;

    line-height: 1.15;

    color: #0c2371;
}


/* Promotional Description */

.side-promo span {
    color: #60709a;

    margin-top: 8px;

    font-size: 13px;
}


/* ---------------------------------------------------------
   Accessibility / Focus
   --------------------------------------------------------- */

.menu-link:focus-visible {
    outline: 3px solid rgba(30, 99, 239, 0.25);
    outline-offset: 2px;
}


/* ---------------------------------------------------------
   Sidebar Scrollbar
   --------------------------------------------------------- */

.sidebar {
    scrollbar-width: thin;
    scrollbar-color: #cbd7ed transparent;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #cbd7ed;
    border-radius: 999px;
}


/* =========================================================
   RESPONSIVE SIDEBAR
   ========================================================= */

/* Tablets */

@media (max-width: 900px) {

    .sidebar {
        position: static;

        width: 100%;
        height: auto;
        min-height: auto;

        border-right: 0;
        border-bottom: 1px solid #e3eaf7;

        padding: 14px 16px;
    }


    .brand {
        height: 50px;

        padding-bottom: 8px;
    }


    .brand img {
        width: 180px;
        max-height: 42px;
    }


    .menu {
        grid-template-columns: repeat(2, 1fr);

        gap: 7px;

        margin-top: 14px;
    }


    .menu-link {
        padding: 12px 14px;
    }


    .side-promo {
        display: none;
    }
}


/* Mobile */

@media (max-width: 600px) {

    .sidebar {
        padding: 12px;
    }


    .brand {
        justify-content: center;

        padding-left: 0;
        padding-right: 0;
    }


    .brand img {
        width: 170px;
    }


    .menu {
        grid-template-columns: 1fr;

        gap: 6px;

        margin-top: 12px;
    }


    .menu-link {
        min-height: 48px;

        padding: 11px 14px;

        gap: 14px;

        font-size: 14px;
    }


    .menu-link .icon {
        width: 23px;
        height: 23px;
    }


    .menu-sep {
        margin: 10px 0;
    }
}


/* Small Mobile */

@media (max-width: 380px) {

    .brand img {
        width: 155px;
    }


    .menu-link {
        padding: 10px 12px;

        gap: 12px;

        font-size: 14px;
    }


    .menu-link .icon {
        width: 22px;
        height: 22px;
    }
}