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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    backdrop-filter:blur(20px);

    background:rgba(8,17,31,.75);

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

    transition:var(--transition);

}

/* Light Mode Header */

[data-theme="light"] .header{

    background:rgba(255,255,255,.80);

}


.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 0;

}


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

.logo{

    font-size:1.5rem;

    font-weight:800;

    color:var(--text);

    letter-spacing:-.5px;

    transition:var(--transition);

}

.logo span{

    color:var(--primary);

}


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

.navigation ul{

    display:flex;

    align-items:center;

    gap:40px;

}

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

.nav-link{

    position:relative;

    color:var(--text-light);

    font-weight:500;

    transition:var(--transition);

}

.nav-link:hover{

    color:var(--primary);

}

.nav-link.active{

    color:var(--primary);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    width:0;

    height:2px;

    border-radius:999px;

    background:var(--primary);

    transform:translateX(-50%);

    transition:width .3s ease;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:100%;

}


/*==================================================
  HEADER ACTIONS
==================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:16px;

}


/*==================================================
  THEME TOGGLE
==================================================*/

.theme-toggle{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--surface);

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

    color:var(--text);

    cursor:pointer;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.theme-toggle:hover{

    transform:translateY(-3px);

    border-color:var(--primary);

    color:var(--primary);

}

.theme-toggle:active{

    transform:scale(.96);

}

.theme-toggle span{

    font-size:1.1rem;

}


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

.menu-toggle{

    display:none;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

}

.menu-toggle span{

    width:26px;

    height:2px;

    background:var(--text);

    border-radius:20px;

    transition:var(--transition);

}