.navbar {

    position: fixed;

    top: 0;
    left: 0;
    width: 100%;
    height: var(--navbar-height);

    display: flex;
    align-items: center;

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

    background: rgba(245, 243, 239, 0.94);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0 1px 12px rgba(0, 0, 0, .05);

    transition:
        background var(--transition-base),
        box-shadow var(--transition-base);
}


.navbar.scrolled {

    background: rgba(245,243,239,.82);

    backdrop-filter: blur(22px) saturate(120%);
    -webkit-backdrop-filter: blur(22px) saturate(120%);

    border-bottom-color: rgba(15,15,16,.08);

    box-shadow:
        0 4px 24px rgba(15,15,16,.05);

}

.navbar-container {

    width: min(var(--container-width), calc(100% - (var(--container-padding) * 2)));

    margin-inline: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}

.logo img {

    display: block;

    height: 64px;

    width: auto;

    transition:
        opacity var(--transition-base),
        transform var(--transition-fast);

}

.logo:hover img {

    opacity: .9;

}

.nav-menu {

    display: flex;

    align-items: center;

    gap: 36px;

}

.nav-menu a{

    position: relative;

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

    color: var(--color-primary);

    transition: color var(--transition-fast);

}

.nav-menu a:hover{

    color: var(--color-accent);

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:100%;

    height:2px;

    background:var(--color-accent);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform var(--transition-fast);

}

.nav-menu a:hover::after{

    transform:scaleX(1);

}

/* For using temporary text instead of logo image */
.logo span {

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

    font-size: 1.45rem;

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

    letter-spacing: .18em;

    color: var(--color-primary);

    transition: color var(--transition-fast);

}

.logo:hover span {

    color: var(--color-accent);

}

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

.menu-toggle {

    width: 48px;

    height: 48px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 6px;

}

.menu-toggle span {

    width: 24px;

    height: 2px;

    background: var(--color-primary);

    border-radius: 999px;

    transition: all var(--transition-base);

}

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

.mobile-menu {

    position:
        fixed;

    top:
        var(--navbar-height);

    left:
        0;

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        0;

    padding:
        var(--space-md)
        var(--container-padding)
        var(--space-xl);

    background:
        rgba(245,243,239,.92);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-top:
        1px solid
        rgba(15,15,16,.06);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.08);

    transform:
        translateY(-12px);

    opacity:
        0;

    pointer-events:
        none;

    visibility:
        hidden;

    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        visibility var(--transition-base);

    z-index:
        calc(var(--z-navbar) - 1);

}


.mobile-menu.active {

    transform:
        translateY(0);

    opacity:
        1;

    pointer-events:
        auto;

    visibility:
        visible;

}


/* ==========================================================
   MOBILE MENU LINKS
   ========================================================== */

.mobile-menu a {

    display:
        block;

    padding:
        18px 4px;

    border-bottom:
        1px solid
        rgba(15,15,16,.08);

    color:
        var(--color-primary);

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

    font-size:
        var(--fs-body-lg);

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

    transition:
        color var(--transition-fast),
        padding-left var(--transition-fast);

}


.mobile-menu a:last-child {

    border-bottom:
        none;

}


.mobile-menu a:hover {

    color:
        var(--color-accent);

    padding-left:
        8px;

}


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

.menu-toggle {

    position:
        relative;

    width:
        48px;

    height:
        48px;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        6px;

    cursor:
        pointer;

    background:
        transparent;

    border:
        none;

    padding:
        0;

}


.menu-toggle span {

    display:
        block;

    width:
        24px;

    height:
        2px;

    background:
        var(--color-primary);

    border-radius:
        999px;

    transform-origin:
        center;

    transition:
        transform var(--transition-base),
        opacity var(--transition-fast);

}


/* ==========================================================
   HAMBURGER → X
   ========================================================== */

.menu-toggle.active span:nth-child(1) {

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

}


.menu-toggle.active span:nth-child(2) {

    opacity:
        0;

}


.menu-toggle.active span:nth-child(3) {

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

}
/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .nav-menu {
        display: none;
    }

    .nav-actions {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .navbar-container {
        justify-content: space-between;
    }

}