/* ===== HEADER ===== */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background: #0073b1;
border-bottom: 1px solid #e1e8ed;
z-index: 999;
box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}

.nav-container {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
align-items: center;
justify-content: space-between;
height: 65px;
gap: 10px;
}

/* ===== SEARCH AREA ===== */
.search-area {
flex: 1;
position: relative;
}

.search-form {
position: relative;
width: 100%;
}

.search-form input[type="search"] {
width: 100%;
padding: 10px 40px 10px 16px;
border: 1px solid #e1e8ed;
border-radius: 20px;
background: #f3f6f8;
font-size: 0.9rem;
}

.search-form button {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 16px;
color: #555;
}

.search-form button:hover {
color: #0073b1;
}

/* ===== NAV LINKS ===== */
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
}

.nav-link {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: white;
font-size: 0.8rem;
padding: 10px;
}

.nav-link i {
font-size: 1.3rem;
}

.nav-link:hover {
color: #e0f1ff;
}

/* HOME ICON */
.home-icon {
width: 24px;
height: 24px;
filter: grayscale(1) opacity(0.7);
transition: 0.2s;
}

.home-link:hover .home-icon {
filter: grayscale(0) opacity(1);
transform: scale(1.1);
}

/* ===== PROFILE MENU ===== */
.profile-wrapper {
position: relative; / for desktop dropdown positioning /
z-index: 1000; / make sure it's above header content */
}

.profile-menu {
position: fixed; /* overlay /
top: 100%; / just below avatar /
right: 0;
width: 180px;
background: #fff;
border-radius: 8px;
padding: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: none; / hidden by default /
z-index: 9999; / make sure it's on top */
}

/* Show dropdown */
.profile-menu.show {
display: block;
}

.profile-avatar {
width: 38px;
height: 38px;
background: #ddd;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
cursor: pointer;
overflow: hidden;
}

.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.profile-menu {
position: absolute;
top: 48px;
right: 0;
width: 160px;
background: white;
border-radius: 8px;
padding: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: none; /* hidden by default */
z-index: 999;
}

.profile-menu.show {
display: block;
}

.profile-menu .upload-btn {
display: block;
padding: 8px;
cursor: pointer;
font-size: 14px;
border-radius: 5px;
background: #f5f5f5;
margin-bottom: 8px;
}

.logout-btn {
display: block;
padding: 8px;
font-size: 14px;
color: #e74c3c;
text-decoration: none;
background: #f5f5f5;
border-radius: 5px;
}

/* ===== LOGIN BUTTON ===== */
.auth-link {
background: #0073b1;
color: white;
padding: 8px 15px;
border-radius: 4px;
text-decoration: none;
}

/* ===== MOBILE SEARCH BUTTON ===== */
.mobile-search-btn {
display: none;
background: none;
border: none;
font-size: 1.3rem;
color: white;
cursor: pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.site-header { gap: 15px; }
.nav-link span { display: none; }
}

@media (max-width: 480px) {
.mobile-search-btn { display: block; }

.search-area {
display: none;
position: absolute;
top: 60px;
left: 0;
right: 0;
padding: 10px;
background: white;
z-index: 999;
}

.search-area.active { display: block; }

.nav-container { gap: 10px; align-items: center; }
.site-header { gap: 10px; flex-shrink: 1; overflow-x: auto; }
}

.profile-menu {
position: fixed; /* overlay entire screen if needed /
top: 60px; / below header */
right: 10px;
width: 200px;
}
}