body {
margin: 0;
font-family: "Inter", sans-serif;
background: #18171B;
color: white;
line-height: 1.6;
}

.button {
color: white;
background: #27262A;
border: 1px #46494A solid;
border-radius: 10px;
}

/* NAVBAR */

.navbar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box; /* Prevents overflow when width is 100% */
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: #11131a;
    z-index: 900;
}

.menuBtn{
font-size:22px;
}

.logo{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:white;
font-weight:600;
}

.logo img{
height:28px;
}

.nav-right{
margin-left:auto;
}

.nav-right img#searchBtn {
    padding: 6px; /* Space for the border */
    width: 24px;
    height: 24px;
    display: block;
    cursor:pointer;
}

/* SIDEBAR */

.sidebar{
position:fixed;
top:0;
left:-420px;
width:400px;
height:100%;
background:#11131a;
display:flex;
flex-direction:column;
transition:left .35s ease;
z-index:1000;
}

.sidebar.open{
left:0;
}

/* OVERLAY */

#overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
opacity:0;
pointer-events:none;
transition:.3s;
}

#overlay.show{
opacity:1;
pointer-events:auto;
}

/* HEADER */

.sidebarHeader{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px;
border-bottom:1px solid rgba(255,255,255,.06);
}

.serverName{
display:flex;
align-items:center;
gap:8px;
font-weight:600;
}

.serverName img{
width:22px;
}

.closeBtn{
background:#1b1d26;
border:none;
color:white;
width:32px;
height:32px;
border-radius:8px;
cursor:pointer;
background: #27262A;
border: 1px #46494A solid;
border-radius: 10px;
}

/* NAV */

.navList{
display:flex;
flex-direction:column;
padding:12px 0;
}

/* NAV ITEM */

.navItem{
display:flex;
align-items:center;
gap:10px;
padding:12px 20px;
cursor:pointer;
position:relative;
text-decoration:none;
color:white;
}

/* UNDERLINE HOVER */

.navItem span{
position:relative;
}

.navItem span::after{
content:"";
position:absolute;
left:0;
bottom:-3px;
width:0;
height:2px;
background:white;
transition:width .25s ease;
}

.navItem:hover span::after{
width:100%;
}

.navItem img{
width:20px;
}

/* DROPDOWN */

details summary{
list-style:none;
cursor:pointer;
}

.dropdownContent{
max-height:0;
overflow:hidden;
display:flex;
flex-direction:column;
padding-left:48px;
transition:max-height .35s ease;
}

details[open] .dropdownContent{
max-height:200px;
}

.dropdownContent a{
color:white;
text-decoration:none;
padding:6px 0;
font-size:14px;
opacity:.8;
}

/* FOOTER */

.sidebarFooter{
margin-top:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 16px;
border-top:1px solid rgba(255,255,255,.06);
font-size:13px;
}

.social {
    display: flex;
    gap: 8px; /* Space between YouTube and Discord */
}

.socialBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    width: 30px;
    height: 30px;
}

.social img {
    width: 90%;
    margin-left: 0;
}

/* Fix Department Indentation */
.dropdownContent {
    padding-left: 40px; /* Indent from main menu */
}

.dept-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.dept-item img {
    width: 18px; /* Smaller icons for sub-menu */
    height: auto;
}

.dept-item a {
    opacity: 0.8;
    font-size: 14px;
    text-decoration: none;
    color: white;
}

.dept-item:hover a {
    opacity: 1;
}

/* SEARCH */

#searchOverlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
display:flex;
justify-content:center;
align-items:flex-start;
opacity:0;
pointer-events:none;
transition:.25s;
}

#searchOverlay.show{
opacity:1;
pointer-events:auto;
}

.searchBox{
margin-top:120px;
width:600px;
max-width:90%;
background:#14161d;
border-radius:10px;
padding:14px;
}

#searchInput{
width:100%;
padding:10px;
border:none;
outline:none;
background:#1b1d26;
color:white;
border-radius:6px;
}

#searchResults{
margin-top:10px;
max-height:300px;
overflow:auto;
}

.result{
display:block;
padding:8px;
border-radius:6px;
text-decoration:none;
color:white;
}

.result:hover{
background:#1b1d26;
}