@use '../helpers/variables' as vars;
@use "sass:color";
@use "sass:map";

header{
    background: transparent;
    display: flex;
    padding: 0px 50px;
    justify-content: space-between;
    position: relative;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 30px;
    z-index: 1000;
    transition: 
        background 0.3s ease,
        top 0.3s ease,
        box-shadow 0.3s ease,
        backdrop-filter 0.3s ease;

    &.scrolled {
        top: 0;
        background: rgba(255, 255, 255, 0.9); // or vars.$white / dark glass
        backdrop-filter: blur(10px);          // optional glass effect
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .logo{
        transform: scale(0.8);
    }

    nav{
        ul{ 
            list-style: none;
            li{
                display: inline-block;
                margin-left: 30px;
                font-size: map.get(vars.$font-sizes, medium);
                &.active{
                    a{
                        font-weight: map.get(vars.$font-weights, medium);
                        color: vars.$primary-color;
                    }
                }
                a{
                    &:hover{
                        color: color.adjust(vars.$primary-color, $lightness: 20%);
                    }
                }
            }
        }
        @media (max-width: 768px) {
            display: none;
        }
        &.open{
            display: block;
            position: absolute;
            top: 65px;
            left: 0p;
            right: 0;
            width: 100%;
            background-color: var(--white);
            padding: 20px 30px;
            border-radius: 0px 0px 8px 8px ;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            ul{
                li{
                    display: block;
                    margin: 15px 0;
                }
            }
        }
    }

    .right-menu-buttons{
        display: flex;
        gap: 10px;
        align-content: center;
        @media (max-width: 768px) {
            .menu-button{
                display: none;
                &.hamburger-menu{
                    display: flex;
                }
            }
        }
    }

    .hamburger-menu{
        display: none;
        flex-direction: column;
        justify-content: center;
        .bar{
            width: 25px;
            height: 2px;
            background-color: var(--text-color);
            margin: 2px 0;
            transition: 0.4s;
        }
    }
}

/* ===============================
   HEADER RESPONSIVENESS
================================ */

/* Tablets */
@media (max-width: 992px) {
  header {
    padding: 0 30px;

    nav ul li {
      margin-left: 20px;
    }
  }
}
