/*
==========================================================
A SQUARE L INNOVATE DESIGN SYSTEM (ASLDS)
Version: 1.0.0
Component: Navbar
Author: A Square L Innovate
==========================================================
*/

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

.navbar{

    position:sticky;

    top:0;

    width:100%;

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

    background:var(--navbar-bg);

    backdrop-filter:blur(18px);

    border-bottom:1px solid var(--border-color);

}

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

.navbar-container{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap: 2rem;

}

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

.navbar-logo{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:var(--white);

    font-size:24px;

    font-weight:800;

    flex-shrink: 0;

}

.navbar-logo span{

    color:var(--primary-gold);

}

.navbar-logo img{

    height:42px;

}

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

.nav-menu{

    display:flex;

    align-items:center;

    gap:32px;

    list-style:none;

    flex: 1;

    justify-content: center;

    margin-inline: 2rem;

}

.nav-link{

    color:var(--gray-300);

    text-decoration:none;

    font-weight:600;

    transition:.3s;

    position:relative;

}

.nav-link:hover{

    color:var(--primary-gold);

}

/* ======================================================
   ACTIVE
====================================================== */

.nav-link.active{

    color:var(--primary-gold);

}

.nav-link.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:2px;

    background:var(--primary-gold);

}

/* ======================================================
   RIGHT SIDE
====================================================== */

.nav-actions {
    
    display: flex;
    
    align-items: center;
    
    justify-content: flex-end;
    
    gap: 16px;
    
    flex-wrap: nowrap;
    
    flex-shrink: 0;

    margin-left: auto;
    
}

/* ======================================================
   SEARCH
====================================================== */

.nav-search{

    width:200px;
    max-width: 18vw;

}

/* ======================================================
   AVATAR
====================================================== */

.nav-avatar{

    width:44px;

    height:44px;

    border-radius:50%;

    overflow:hidden;

    border:2px solid var(--primary-gold);

    cursor:pointer;

}

.nav-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ======================================================
   NOTIFICATION
====================================================== */

.notification-btn{

    position:relative;

}

.notification-count{

    position:absolute;

    top:-6px;

    right:-6px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--danger);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:700;

}

/* ======================================================
   NAVBAR DROPDOWN (renamed from .dropdown to avoid
   conflict with dropdown.css — Section 16)
====================================================== */

.nav-dropdown{
    position:relative;
}

.nav-dropdown-menu{
    position:absolute;
    top:60px;
    right:0;
    width:260px;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:.3s;
}

.nav-dropdown:hover .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.nav-dropdown-menu a{
    display:block;
    padding:16px 22px;
    text-decoration:none;
    color:var(--gray-300);
}

.nav-dropdown-menu a:hover{
    background:rgba(212,175,55,.08);
    color:var(--primary-gold);
}

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

.mobile-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--white);
    cursor: pointer;
    transition: var(--transition-normal);
}

.mobile-toggle:hover {
    color: var(--primary-gold);
    border-color: var(--primary-gold);
}

.mobile-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: var(--transition-normal);
}

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

@media(max-width:992px){

.nav-menu {
    
    display: none;
    
    position: absolute;
    
    top: 80px;
    
    left: 0;
    
    width: 100%;
    
    flex-direction: column;
    
    align-items: flex-start;
    
    gap: 0;
    
    padding: 24px;
    
    background: var(--navbar-mobile-bg);
    
    backdrop-filter: blur(18px);
    
    border-top: 1px solid var(--border-color);
    
}

.nav-menu.open{

    display:flex;

}

.nav-search{

    display:none;

}

.nav-link{

    width:100%;

    padding:16px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.nav-actions{

    gap:8px;

}


.mobile-toggle{

    display:flex;

}

}

@media(max-width:768px){

    .navbar-container{
        height:72px;
        gap:1rem;
    }

    .navbar-logo{
        font-size:16px;
    }

    .nav-actions{
        gap:8px;
    }

    .nav-actions .btn{
        padding:0 14px;
    }

    /* CTA is redundant with the mobile menu — hide it */
    .nav-actions .btn-primary{
        display:none;
    }

}