/* ================ NAV ================ */
nav {
    position: sticky;
    width: 100%;
    top: 0px;
    z-index: 1;

    /* background-color: var(--color-back); */
    background-color: var(--color-back);

    /* backdrop-filter: blur( 4px ); */


    padding: 10px var(--left-right-offset);
    display: flex;
    justify-content: space-between;
    align-items: center;

    & h1 {
        transition: color 0.3s ease;
        font-size: 2.2rem;
        &:hover {
            color: var(--color-red);
        }
    }

    & ul {
        align-items: center;
        list-style-type: none;
        /* Убираем точки */
        padding: 0;
        /* Убираем отступы */
        display: flex;
        /* Располагаем элементы в строку */

        & li {
            /* плавное изменение цвета у иконки поиска при наведении */
            & img {
                transition: all 0.2s ease;
            }
            /* настройка для всех ссылок-картинок */
            & a:has(img) {
                /* только так, почему-то, фиксится беспричинное увеличение размера ссылки с картинкой по высоте */
                display: flex;
                align-items: center;
                
                & img {
                    height: 40px;
                    filter: var(--invert);
                    transition: all 0.15s ease-out;
                }
            }

            &:hover {
                & img {
                    cursor: pointer;
                    filter: invert(35%) sepia(56%) saturate(600%) hue-rotate(312deg) brightness(120%) contrast(115%) !important;
                }
            }
        }

        /* настройка для центрального меню в навигационке */
        &#nav-menu {
            border-radius: var(--borderRadius);
            overflow: hidden;

            & img {
                filter: var(--invert);
            }
    
            & li {
                height: 45px;
                background: var(--nav_gradient);
                padding: 10px 20px;
                &:has(img) {
                    background: var(--color-back_second);
                }

                /* кнопка (поиска) (убираем padding у li и добавляем кнопке, чтобы вся область была кнопкой) */
                &:has(button) {
                    /* убираем отступ списка */
                    padding: 0;
                    /* выравнивание по центру */
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    /* размер кнопки = всё место */
                    & button {
                        cursor: pointer;

                        width: 60px;
                        height: 100%;
                    }
                }
            }
        }

        /* отступ между пунтками навигационки */
        & li:not(:last-child) {
            /* Расстояние между пунктами */
            /* margin-right: 30px; */
        }

        
    }
}


/* < 1077px бургер меню появляется */
@media (max-width: 1077px) {
    .menu-toggle {
        display: block;
    }

    .nav-menu {
        display: none;

        &.menu-open {
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            justify-content: center;
            align-items: center;
            /* перекрашиваем центральную градиентную часть на фоновый цвет просто */
            &#nav-menu{
                background: var(--color-back);
            }

            & li {
                margin: 0 0 30px;
                font-size: 2rem;
                /* убираем фон у кнопок */
                background-image: none !important;
                border-radius: var(--borderRadius);
                overflow: hidden;
            }
        }
    }
}
@media (max-width: 385px) {
    #link2home h1 {
        font-size: 1.8rem;
    }
}

/* убираем прокрутку если открыли бургер */
body:has(.menu-open) {
    overflow: hidden;
}