/* ==========================================================
   NAVBAR
========================================================== */

.navbar{
    position:sticky;
    top:0;
    z-index:1020;
    width:100%;
    background:#fff;
    border-bottom:1px solid var(--border);
}

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

.nav-container{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:2.5rem;
    height:90px;
}

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

.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo img{
    width:auto;
    height:70px;
    display:block;
}

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

.nav-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:2rem;
}

.nav-links>a,
.dropdown-toggle{
    display:flex;
    align-items:center;
    gap:.45rem;
    padding:.5rem 0;
    color:var(--heading);
    font-size:.95rem;
    font-weight:600;
    text-decoration:none;
    background:none;
    border:0;
    cursor:pointer;
    white-space:nowrap;
}

.nav-links>a:hover,
.dropdown-toggle:hover,
.nav-links>a.active{
    color:var(--primary);
}

/* ==========================================================
   DESKTOP DROPDOWNS
========================================================== */

.nav-dropdown{
    position:relative;
}

.dropdown-toggle i{
    font-size:.7rem;
    transition:transform .25s ease;
}

.nav-dropdown.show .dropdown-toggle i{
    transform:rotate(180deg);
}

.dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:230px;
    margin-top:.75rem;
    padding:.4rem 0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 12px 25px rgba(0,0,0,.10);
    overflow:hidden;
    z-index:1030;
}

.nav-dropdown.show .dropdown-menu{
    display:block;
}

.dropdown-menu a{
    display:block;
    padding:.85rem 1rem;
    color:var(--text);
    font-weight:500;
    text-decoration:none;
    white-space:nowrap;
}

.dropdown-menu a:hover,
.dropdown-menu a.active{
    background:#f8f8f8;
    color:var(--primary);
}

/* ==========================================================
   DESKTOP ACTION
========================================================== */

.nav-actions{
    display:flex;
    align-items:center;
}

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

.mobile-menu-btn{
    display:none;
    width:46px;
    height:46px;
    align-items:center;
    justify-content:center;
    padding:0;
    color:var(--heading);
    font-size:1.3rem;
    background:none;
    border:0;
    cursor:pointer;
}

.mobile-menu-btn:hover{
    color:var(--primary);
}

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

.mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease,visibility .3s ease;
    z-index:1030;
}

.mobile-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

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

.mobile-drawer{
    position:fixed;
    top:0;
    right:-100%;
    width:360px;
    max-width:100%;
    height:100vh;
    height:100dvh;
    display:flex;
    flex-direction:column;
    padding:1.5rem;
    background:#fff;
    box-shadow:-10px 0 30px rgba(0,0,0,.12);
    overflow:hidden;
    transition:right .35s ease;
    z-index:1040;
}

.mobile-drawer.active{
    right:0;
}

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

.mobile-header{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:60px;
    margin-bottom:1.5rem;
}

.mobile-header img{
    width:auto;
    height:58px;
}

.mobile-close-btn{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    padding:0;
    color:var(--heading);
    font-size:1.15rem;
    background:#f5f5f5;
    border:0;
    border-radius:50%;
    cursor:pointer;
}

.mobile-close-btn:hover{
    color:var(--primary);
    background:#f1f1f1;
}

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

.mobile-nav{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:.25rem;
}

.mobile-nav>a,
.mobile-dropdown-toggle{
    width:100%;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.85rem 0;
    color:var(--heading);
    font-size:.95rem;
    font-weight:600;
    line-height:1.4;
    text-align:left;
    text-decoration:none;
    background:none;
    border:0;
    cursor:pointer;
}

.mobile-nav>a:hover,
.mobile-nav>a.active,
.mobile-dropdown-toggle:hover{
    color:var(--primary);
}

.mobile-dropdown-toggle i{
    flex:0 0 auto;
    font-size:.7rem;
    transition:transform .25s ease;
}

.mobile-dropdown.open .mobile-dropdown-toggle i{
    transform:rotate(180deg);
}

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

.mobile-dropdown{
    width:100%;
}

.mobile-dropdown-menu{
    display:none;
    margin:0 0 .35rem .25rem;
    padding:0 0 0 1rem;
    border-left:2px solid var(--border-light);
}

.mobile-dropdown.open .mobile-dropdown-menu{
    display:block;
}

.mobile-dropdown-menu a{
    display:block;
    padding:.7rem 0;
    color:var(--text);
    font-size:.9rem;
    font-weight:500;
    line-height:1.4;
    text-decoration:none;
}

.mobile-dropdown-menu a:hover,
.mobile-dropdown-menu a.active{
    color:var(--primary);
}

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

.mobile-action{
    flex:0 0 auto;
    padding-top:1.25rem;
    margin-top:1rem;
    border-top:1px solid var(--border);
}

.mobile-action .btn{
    width:100%;
}

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

.mobile-nav::-webkit-scrollbar{
    width:4px;
}

.mobile-nav::-webkit-scrollbar-track{
    background:transparent;
}

.mobile-nav::-webkit-scrollbar-thumb{
    background:#ddd;
    border-radius:999px;
}

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

@media (max-width:992px){

    .nav-container{
        grid-template-columns:auto auto;
        height:80px;
    }

    .nav-links,
    .nav-actions{
        display:none;
    }

    .mobile-menu-btn{
        display:flex;
        justify-self:end;
    }

    .logo img{
        height:60px;
    }

}

/* ==========================================================
   SMALL TABLETS
========================================================== */

@media (max-width:767px){

    .mobile-drawer{
        width:340px;
    }

}

/* ==========================================================
   PHONES
========================================================== */

@media (max-width:576px){

    .nav-container{
        height:76px;
    }

    .logo img{
        height:56px;
    }

    .mobile-menu-btn{
        width:44px;
        height:44px;
    }

    .mobile-drawer{
        width:100%;
        padding:1.25rem 1.5rem;
    }

    .mobile-header{
        margin-bottom:1rem;
    }

    .mobile-header img{
        height:54px;
    }

    .mobile-nav>a,
    .mobile-dropdown-toggle{
        min-height:52px;
        padding:.8rem 0;
    }

}

/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media (max-width:380px){

    .mobile-drawer{
        padding:1rem 1.25rem;
    }

    .mobile-header img{
        height:50px;
    }

    .mobile-nav>a,
    .mobile-dropdown-toggle{
        font-size:.9rem;
    }

    .mobile-dropdown-menu a{
        font-size:.85rem;
    }

}