/**
 * tarane-social — header.css
 * هدر شیشه‌ای مدرن (سازگار با modern-header.php موجود)
 */

/* ── هدر شیشه‌ای ── */
.modern-header {
    background: var(--w) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--b) !important;
    box-shadow: 0 1px 0 rgba(16,24,40,.05) !important;
    min-height: var(--ts-header-h);
    will-change: transform;
}

.modern-header .logo img,
.modern-header .site-logo img { max-height: 34px; }

.modern-header .logo a,
.modern-header .site-name {
    background: var(--ts-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    letter-spacing: -.3px;
}

/* ── ناوبری ── */
.modern-header .nav-links a,
.modern-header .main-nav a {
    color: var(--ts);
    font-weight: 600;
    font-size: .92rem;
    padding: 8px 14px;
    border-radius: 10px;
    transition: color .18s, background .18s;
}
.modern-header .nav-links a:hover,
.modern-header .main-nav a:hover,
.modern-header .nav-links a.active,
.modern-header .main-nav a.active {
    color: var(--t);
    background: var(--gray-100);
}

/* ── جستجوی هدر ── */
.modern-header .search-box input,
.modern-header .header-search input {
    background: var(--w2);
    border: 1px solid var(--b);
    border-radius: 999px;
    color: var(--t);
    transition: border-color .18s, box-shadow .18s;
}
.modern-header .search-box input:focus,
.modern-header .header-search input:focus {
    outline: none;
    border-color: var(--p);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 22%, transparent);
}

/* ── آواتار و دکمه‌ها ── */
.modern-header .user-avatar img {
    border-radius: 50%;
    outline: 2px solid transparent;
    transition: outline-color .2s, transform .2s;
}
.modern-header .user-avatar img:hover { outline-color: var(--ts-cyan); transform: translateY(-1px); }

.modern-header .btn,
.modern-header .header-btn {
    border-radius: 999px;
    font-weight: 700;
}

/* ── تعویض تم ── */
.theme-toggle,
#themeToggle {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--b);
    background: var(--w2);
    color: var(--t);
    cursor: pointer;
    transition: transform .2s, border-color .2s, background .2s;
}
.theme-toggle:hover, #themeToggle:hover {
    transform: rotate(18deg) scale(1.06);
    border-color: var(--ts-cyan);
}