/* =====================================================
   MAINTENANCE MODAL
===================================================== */

.maintenance-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    transition:

        opacity 0.3s ease,

        visibility 0.3s ease;
    
    pointer-events: none;

}


.maintenance-modal.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


/* =====================================================
   MODAL BOX
===================================================== */

.maintenance-modal-box {

    width: min(760px, 100%);

    display: grid;

    grid-template-columns: 240px 1fr;

    gap: 32px;

    padding: 24px;

    background: var(--background);

    border-radius: 14px;

    opacity: 1;

    transform: scale(1);

    transition:

        opacity 0.3s ease,

        transform 0.3s ease;
    
    pointer-events: auto;

}


.maintenance-modal.hidden .maintenance-modal-box {

    opacity: 0;

    transform: scale(0.88);

}


/* =====================================================
   IMAGE
===================================================== */

.maintenance-modal-image {

    width: 240px;

    height: 240px;

    overflow: hidden;

    border-radius: 8px;

}


.maintenance-modal-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


/* =====================================================
   CONTENT
===================================================== */

.maintenance-modal-content {

    align-self: center;

    padding-right: 20px;

}


.maintenance-modal-content h1 {

    margin: 0 0 4px;

    color: var(--text);

    font-size: 24px;

    font-weight: 600;

}


.maintenance-modal-content p {

    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

}


.maintenance-modal-content b {

    color: var(--text);

    font-weight: 500;

}


/* =====================================================
   START BUTTON
===================================================== */

.start-button {

    margin-top: 24px;

    padding: 10px 18px;

    background: #161616;

    border: 1px solid #1d1d1d;

    border-radius: 10px;

    color: var(--text);

    font-family: var(--font);

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:

        background 0.2s ease,

        transform 0.2s ease;

}


.start-button:hover {

    background: #202020;

    transform: translateY(-2px);

}


.start-button:active {

    transform: translateY(0);

}


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

@media (max-width: 700px) {


    .app {

        grid-template-columns: 64px 1fr;

    }


    .sidebar {

        padding: 22px 8px;

    }


    .nav-item {

        justify-content: center;

    }


    .nav-item span:not(.nav-icon) {

        display: none;

    }


    .sidebar-label,

    .course-item span:not(.course-number) {

        display: none;

    }


    .course-item {

        justify-content: center;

    }


    .brand-name {

        display: none;

    }


    .maintenance-modal {

        padding: 20px;

    }


    .maintenance-modal-box {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .maintenance-modal-image {

        width: 100%;

        height: 220px;

    }


    .maintenance-modal-content {

        padding: 0;

    }

}

/* =====================================================
   MAINTENANCE MODAL BUTTON
===================================================== */

.maintenance-modal-content button {

    margin-top: 30px;
    padding: 10px 18px;

    background: var(--text);

    border: none;

    border-radius: 8px;

    color: var(--background);

    font-family: var(--font);

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 0.6px;

    cursor: pointer;

    transition:

        transform 0.2s ease,

        opacity 0.2s ease;

}


.maintenance-modal-content button:hover {

    opacity: 0.8;

    transform:

        translateY(
            -2px
        );

}


.maintenance-modal-content button:active {

    transform:

        translateY(
            0
        );

}