/* ==========================================
   HAMBURGER NAVIGATION BUTTON
========================================== */

.hamburger-button {

    position: fixed;

    top: 20px;
    left: 25px;

    width: 46px;
    height: 46px;

    padding: 0;

    display: flex;
    flex-direction: column;

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

    gap: 5px;

    background: var(--t-surface-ffffff);

    border: 2px solid var(--t-border-dce4f0);

    border-radius: 10px;

    cursor: pointer;

    z-index: 9000;

    box-shadow:
        0 4px 14px var(--t-shadow-26354a-a12);

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


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

.hamburger-button:hover {

    background: var(--t-surface-f3f6fa);

    box-shadow:
        0 6px 18px var(--t-shadow-26354a-a16);

    transform:
        translateY(-1px);

}


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

.hamburger-button span {

    display: block;

    width: 21px;
    height: 2px;

    background: var(--t-surface-26354a);

    border-radius: 2px;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


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

.hamburger-button.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.hamburger-button.active span:nth-child(2) {

    opacity: 0;

}


.hamburger-button.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


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

.navigation-menu {

    position: fixed;

    top: 76px;
    left: 25px;

    width: 190px;

    padding: 8px;

    box-sizing: border-box;

    background: var(--t-surface-ffffff);

    border: 1px solid var(--t-border-dce4f0);

    border-radius: 14px;

    box-shadow:
        0 12px 30px var(--t-shadow-26354a-a16);

    z-index: 9001;

    display: flex;
    flex-direction: column;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-8px)
        scale(0.98);

    /* A long menu on a short screen scrolls inside itself (the menu is fixed in place). */
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    transform-origin: top left;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
}


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

.navigation-menu.visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);

}


/* ==========================================
   NAVIGATION ITEMS
========================================== */

.navigation-menu a {
    /* Links keep their height when the menu has to scroll. */
    flex-shrink: 0;


    display: flex;

    align-items: center;

    width: 100%;

    min-height: 42px;

    padding: 0 13px;

    box-sizing: border-box;

    border-radius: 9px;

    color: var(--t-text-26354a);

    background: transparent;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;

}


/* ==========================================
   NAVIGATION HOVER
========================================== */

.navigation-menu a:hover {

    background: var(--t-surface-f3f6fa);

    color: var(--t-text-3f72c5);

    transform:
        translateX(2px);

}


/* ==========================================
   CURRENT PAGE
========================================== */

.navigation-menu a.active {

    background: var(--t-surface-eaf2ff);

    color: var(--t-text-3f72c5);

}


/* ==========================================
   PROFILE BUTTON
========================================== */

.profile-button {

    position: absolute !important;

    top: 35px !important;

    right: 310px !important;

    left: auto !important;

    bottom: auto !important;

    width: 46px !important;
    height: 46px !important;

    box-sizing: border-box;

    background: var(--t-surface-ffffff);

    border: 2px solid var(--t-border-dce4f0);

    border-radius: 50%;

    cursor: pointer;

    z-index: 9000 !important;

    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow:
        0 4px 14px var(--t-shadow-26354a-a12);

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


.profile-button:hover {

    background-color: var(--t-surface-f3f6fa);

    box-shadow:
        0 6px 18px var(--t-shadow-26354a-a16);

    transform:
        translateY(-1px);

}


/* ==========================================
   MOBILE NAVIGATION
========================================== */

@media (max-width: 600px) {

    .hamburger-button {

        top: 15px;
        left: 15px;

        width: 42px;
        height: 42px;

    }


    .navigation-menu {

        top: 65px;
        left: 15px;

        width: 180px;

    }


    .profile-button {

        top: 35px !important;

        right: 310px !important;

        width: 46px !important;
        height: 46px !important;

    }

}

.hamburger-button,
.navigation-menu,
.navigation-menu a {
    font-family: Arial, sans-serif;
}

/* ==========================================
   UTILITIES SECTION
========================================== */

.navigation-section-title {
    margin: 8px 6px 4px;
    padding: 10px 7px 2px;
    border-top: 1px solid var(--t-border-e3e9f2);
    color: var(--t-text-9aa5b5);
    font-family: Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.navigation-menu a.navigation-utility {
    gap: 10px;
}

.navigation-utility svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--t-text-3f72c5);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.navigation-utility:hover svg {
    transform: scale(1.12) rotate(-6deg);
}