/* ==========================================
   Desktop Navbar (1200px+)
========================================== */

/* ==========================================
   Navbar Card
========================================== */

.navbar-card{

    width:100%;

    margin-block:clamp(14px,1.2vw,18px);

    background:var(--surface-gradient);

    border:1px solid var(--border-light);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-navbar);

    overflow:visible;

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}



/* ==========================================
   Navbar
========================================== */

.navbar{

    position:relative;

    z-index:2050;

    background:transparent !important;

    padding:
        clamp(12px,.8vw,14px)
        clamp(16px,1.2vw,20px);

    line-height:1;

}

/* ==========================================
   Navbar Links
========================================== */

.navbar .nav-link{

    display:flex;

    align-items:center;

    gap:clamp(2px,.25vw,4px);

    padding:
        clamp(10px,.6vw,12px)
        clamp(16px,1vw,18px);

    font-size:clamp(.92rem,.25vw + .82rem,1rem);

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

    color:var(--text-light) !important;

    border-radius:var(--radius-sm);

    line-height:1;

    transition:
        background-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);

}

.navbar .nav-link:hover{

    background:var(--surface-hover-gradient);

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

    transform:translateY(var(--lift-sm));

    box-shadow:var(--shadow-nav-link);

}

.navbar .nav-link.active{

    background:var(--primary);

    color:var(--white) !important;

    box-shadow:var(--shadow-nav-active);

}

.navbar .nav-link.active i{

    color:var(--white) !important;

}


/* ==========================================
   Icons
========================================== */

.nav-link i,
.dropdown-item i,
.menu-icon{

    width:22px;

    height:22px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    transition:
        transform .30s ease,
        color .30s ease;

}

.nav-link:hover i,
.dropdown-item:hover i{

    transform:scale(1.12);

}


/* ==========================================
   Dropdown
========================================== */

.dropdown-menu{

    margin-top:12px;

    min-width:240px;

    padding:10px 0;

    border:none;

    border-radius:var(--radius-md);

    background:var(--white);

    overflow:hidden;

    box-shadow:var(--shadow-dropdown);

    animation:dropdownFade .25s ease;

}

.dropdown-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:
        10px
        18px;

    font-size:.875rem;

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

    color:var(--text-light);

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

}

.dropdown-item:hover{

    padding-left:24px;

}

.dropdown-item:active{

    background:var(--dropdown-active-bg);

}

.navbar-nav{

    display:flex;

    align-items:center;

    flex-direction:row;

    flex-wrap:nowrap;

}

.nav-item{

    display:flex;

    align-items:center;

}