/* =========================================
   VRChatCustom 2.0
   Navbar Styles
========================================= */



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


.navbar {


    position: fixed;

    top: 20px;

    left: 50%;

    transform: translateX(-50%);


    width: min(
        95%,
        1400px
    );


    height: 80px;


    padding:

    0 35px;


    display:

    flex;


    align-items:

    center;


    justify-content:

    space-between;



    background:

    rgba(13,18,32,0.65);



    border:

    1px solid var(--glass-border);



    border-radius:

    var(--radius-large);



    backdrop-filter:

    blur(20px);



    -webkit-backdrop-filter:

    blur(20px);



    z-index:

    var(--z-navbar);



    box-shadow:

    var(--shadow-medium);



}






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


.logo {


    font-family:

    var(--font-title);



    font-size:

    24px;



    font-weight:

    800;



    letter-spacing:

    1px;



    color:

    var(--text-primary);



    cursor:

    pointer;



}





.logo span {


    color:

    var(--primary);



    text-shadow:

    0 0 20px
    rgba(0,245,212,.7);



}






/* ===============================
   NAV LINKS
================================ */


.navbar nav {


    display:

    flex;


    align-items:

    center;



    gap:

    35px;



}




.navbar nav a {


    position:

    relative;


    color:

    var(--text-secondary);



    font-size:

    15px;



    font-weight:

    500;



    transition:

    var(--transition-fast);



}






/* LINK HOVER */


.navbar nav a::after {


    content:"";


    position:

    absolute;


    bottom:

    -8px;


    left:

    50%;


    transform:

    translateX(-50%);



    width:

    0;


    height:

    2px;



    background:

    var(--primary);



    border-radius:

    var(--radius-full);



    transition:

    var(--transition-normal);



}




.navbar nav a:hover {


    color:

    var(--text-primary);



}





.navbar nav a:hover::after {


    width:

    100%;



}








/* ===============================
   NAV ACTIONS
================================ */


.nav-actions {


    display:

    flex;



    align-items:

    center;



    gap:

    15px;



}







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


.search-btn {


    width:

    45px;



    height:

    45px;



    display:

    flex;



    align-items:

    center;



    justify-content:

    center;



    border-radius:

    50%;



    background:

    var(--glass-bg);



    border:

    1px solid var(--border);



    color:

    var(--text-primary);



    font-size:

    18px;



    transition:

    var(--transition-normal);



}






.search-btn:hover {


    border-color:

    var(--primary);



    color:

    var(--primary);



    box-shadow:

    var(--shadow-glow);



    transform:

    translateY(-3px);



}







/* ===============================
   DISCORD BUTTON
================================ */


.discord-btn {


    padding:

    12px 24px;



    border-radius:

    var(--radius-full);



    background:

    var(--button-primary);



    color:

    #00110d;



    font-weight:

    700;



    font-size:

    14px;



    transition:

    var(--transition-normal);



    box-shadow:

    0 0 20px
    rgba(0,245,212,.25);



}







.discord-btn:hover {


    transform:

    translateY(-4px);



    box-shadow:

    0 0 35px
    rgba(0,245,212,.5);



}







/* ===============================
   NAVBAR SCROLL EFFECT
================================ */


.navbar.scrolled {


    background:

    rgba(7,9,18,.85);



    border-color:

    rgba(0,245,212,.2);



}






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


.menu-btn {


    display:

    none;



    width:

    45px;



    height:

    45px;



    border-radius:

    50%;



    background:

    var(--glass-bg);



    color:

    white;



}