/* ==========================================================
   THE SALTY FLY
   NAVIGATION
   Version 1.0
   ========================================================== */


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

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:var(--header-height);

    z-index:var(--z-navigation);

    transition:
        background var(--transition),
        border-color var(--transition);

}


.site-header.scrolled{

    background:var(--color-background);

    border-bottom:var(--border-light);

}


/* ==========================================================
   NAV CONTAINER
   ========================================================== */

.nav-container{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/* ==========================================================
   LOGO
   ========================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

}

.logo img{

    display:block;

    width:auto;

    height:60px;

    max-width:none;

    flex-shrink:0;

}

.logo-text{

    font-family:var(--font-serif);

    font-size:1.35rem;

    font-weight:500;

    color:var(--color-primary);

    line-height:1;

    white-space:nowrap;

}

/* ==========================================================
   DESKTOP NAVIGATION
   ========================================================== */

.main-nav ul{

    display:flex;

    align-items:center;

    gap:52px;

    list-style:none;

    margin:0;

    padding:0;

}

.main-nav a{

    position:relative;

    display:inline-block;

    font-family:var(--font-sans);

    font-size:15px;

    font-weight:var(--fw-normal);

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--color-primary);

    transition:color var(--transition);

}


/* ----------------------------------------------------------
   Hover Line
---------------------------------------------------------- */

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:var(--color-primary);

    transition:width .35s ease;

}

.main-nav a:hover{

    color:var(--color-primary-light);

}

.main-nav a:hover::after{

    width:100%;

}

.main-nav a.active::after{

    width:100%;

}


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

.nav-toggle{

    display:none;

    background:none;

    border:none;

    cursor:pointer;

    padding:0;

}

.nav-toggle span{

    display:block;

    width:28px;

    height:2px;

    margin:6px 0;

    background:var(--color-primary);

    transition:var(--transition);

}


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

@media (max-width:900px){

    .nav-toggle{

        display:block;

    }

    .main-nav{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        display:none;

        background:var(--color-background);

    }

    .main-nav.open{

        display:block;

    }

    .main-nav ul{

        display:block;

    }

    .main-nav li{

        margin:0;

    }

    .main-nav a{

        display:block;

        padding:24px 0;

        margin:0 4vw;

    }

    .main-nav a::after{

        bottom:18px;

        width:0;

    }

    .main-nav a:hover{

        color:var(--color-primary-light);

    }

    .main-nav a:hover::after{

        width:40px;

    }

}


/* ==========================================================
   SMALL DEVICES
   ========================================================== */

@media (max-width:640px){

    .logo img{

        height:20px;

    }

    .logo-text{

        font-size:1.15rem;

    }

}