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

.site-header{
background:var(--primary);
padding:15px 0;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

/* LAYOUT */

.site-header .container{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
position:relative;
}

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

.nav{
display:flex;
gap:30px;
justify-content:flex-start;
align-items:center;
}

.nav a{
font-weight:600;
font-size:15px;
transition:.3s;
}

.nav a:hover{
opacity:.7;
}

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

.logo{
display:flex;
justify-content:center;
}

.logo img{
height:60px;
}

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

.header-right{
display:flex;
align-items:center;
gap:20px;
justify-content:flex-end;
}

/* JOIN BUTTON */

.join-btn{
background:var(--black);
color:var(--white);
padding:10px 18px;
border-radius:var(--radius);
font-weight:600;
transition:.3s;
}

.join-btn:hover{
opacity:.85;
}

/* SOCIAL ICONS */

.social-icons{
display:flex;
gap:12px;
}

.social-icons a{
font-size:18px;
transition:.3s;
}

.social-icons a:hover{
opacity:.7;
}

/* =========================
HAMBURGER
========================= */

.hamburger{
display:none;
font-size:26px;
cursor:pointer;
}

/* MOBILE ONLY ITEMS */

.mobile-join,
.mobile-social{
display:none;
}

/* =========================
TABLET
========================= */

@media (max-width:1000px){

.nav{
gap:20px;
}

.logo img{
height:55px;
}

}

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

@media (max-width:900px){

.site-header .container{
display:flex;
justify-content:space-between;
align-items:center;
}

/* HAMBURGER */

.hamburger{
display:block;
}

/* NAV DROPDOWN */

.nav{
position:absolute;
top:100%;
left:0;
width:100%;
background:var(--primary);

flex-direction:column;
align-items:center;
gap:20px;

padding:30px 0;

display:none;

box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.nav.active{
display:flex;
}

/* DESKTOP ELEMENTS HIDDEN */

.header-right{
display:none;
}

/* MOBILE ITEMS */

.mobile-join{
display:block;
background:var(--black);
color:var(--white);
padding:10px 18px;
border-radius:var(--radius);
}

.mobile-social{
display:flex;
gap:15px;
margin-top:10px;
}

.logo img{
height:50px;
}

}