/* =========================================================
   MENU
========================================================= */

.sidebar-menu {

    display: flex;
    flex-direction: column;

    padding: 20px 0;

}

.sidebar-menu a {

    position: relative;

    padding: 16px 25px;

    border-left: 4px solid transparent;

    color: white;

    text-decoration: none;

    font-weight: 500;

    transition:
        background .20s ease,
        border-color .20s ease,
        color .20s ease;

}

.sidebar-menu a:hover {

    background: rgba(255,255,255,.08);

}

.sidebar-menu a.active {

    background: rgba(96,165,250,.18);

    border-left-color: #60a5fa;

    font-weight: 700;

}

.sidebar-menu a.active:hover {

    background: rgba(96,165,250,.24);

}


/* =========================================================
   HAMBURGER
========================================================= */

.mobile-menu-button {

    display: none;

}

.sidebar-overlay {

    display: none;

}


/* =========================================================
   TELEFON
========================================================= */

@media (max-width: 700px) {

    .mobile-menu-button {

        position: fixed;

        top: 18px;

        left: 18px;

        z-index: 1002;

        display: flex;

        align-items: center;

        justify-content: center;

        width: 44px;

        height: 44px;

        padding: 0;

        border: 1px solid rgba(255,255,255,.12);

        border-radius: 12px;

        background: #172026;

        color: white;

        font-size: 24px;

        cursor: pointer;

        box-shadow: 0 8px 24px rgba(0,0,0,.30);

    }


    .sidebar {

        position: fixed;

        top: 0;

        left: 0;

        bottom: 0;

        z-index: 1001;

        width: 280px;

        max-width: 82vw;

        overflow-y: auto;

        /*
        |--------------------------------------------------------------------------
        | WAŻNE
        |--------------------------------------------------------------------------
        |
        | Sidebar ma własne, całkowicie nieprzezroczyste tło.
        | Dzięki temu zawartość strony nie przebija przez menu.
        |
        */

        background:
            linear-gradient(
                180deg,
                #11181c 0%,
                #090b0d 100%
            );

        border-right: 1px solid rgba(255,255,255,.08);

        transform: translateX(-105%);

        transition: transform .25s ease;

        box-shadow: 12px 0 35px rgba(0,0,0,.55);

    }


    .sidebar.sidebar-open {

        transform: translateX(0);

    }


    .sidebar-overlay {

        position: fixed;

        inset: 0;

        z-index: 1000;

        display: block;

        background: rgba(0,0,0,.72);

        opacity: 0;

        visibility: hidden;

        transition:
            opacity .25s ease,
            visibility .25s ease;

    }


    .sidebar-overlay.sidebar-overlay-visible {

        opacity: 1;

        visibility: visible;

    }


    body.mobile-menu-open {

        overflow: hidden;

    }

}