/* assets/css/header.css - MERGED VERSION (FIX MOBILE & COLORS) */

/* ==========================================================================
   1. KHAI BÁO BIẾN MÀU (LOGIC ĐỔI MÀU THEO NGỮ CẢNH)
   ========================================================================== */

/* A. MẶC ĐỊNH & CUNG HOÀNG ĐẠO (Xanh Ngọc) */
:root {
    --bg-dark: #0f4c3a;       /* Xanh ngọc đậm */
    --gold-color: #d4af37;    /* Vàng đồng */
    --text-color-header: #ffffff;
}

/* B. TỬ VI & CON GIÁP (Đỏ Chu Sa) */
/* Khi body có class .style-eastern (Do code PHP thêm vào), màu sẽ tự đổi */
body.single-chinese_zodiac,
body.post-type-archive-chinese_zodiac,
body.style-eastern {
    --bg-dark: #8b0000;       /* Đỏ Chu Sa */
    --gold-color: #ffcc00;    /* Vàng Hoàng Kim */
}


/* ==========================================================================
   2. CẤU TRÚC HEADER (CODE GỐC CỦA BẠN - ĐÃ GIỮ NGUYÊN)
   ========================================================================== */
.site-header { 
    background-color: var(--bg-dark); /* Nhận biến màu ở trên */
    padding: 5px 0; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
    z-index: 999;
    transition: background-color 0.3s ease; /* Thêm hiệu ứng chuyển màu mượt */
}

.header-inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    min-height: 50px; 
}

/* --- LOGO HEADER --- */
.site-branding {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-branding img {
    max-height: 40px !important; 
    width: auto;
    display: block;
    margin: 0 auto;
}

.site-title-text { 
    font-size: 0.65rem !important;
    letter-spacing: 1px;
    margin-top: 2px;
    opacity: 0.8;
}

/* --- MENU DESKTOP --- */
.main-navigation ul { 
    display: flex; list-style: none; margin: 0; padding: 0; gap: 25px; 
}
.main-navigation ul li { position: relative; }

.main-navigation ul li a { 
    color: var(--text-color-header); 
    font-family: var(--body-font, sans-serif);
    font-size: 0.9rem; 
    font-weight: 500;
    text-transform: uppercase;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 4px; 
    padding: 5px 10px;
    transition: 0.3s;
    opacity: 0.9;
    text-decoration: none;
}

.main-navigation ul li a:hover { color: var(--gold-color); opacity: 1; }

/* Icon SVG */
.menu-icon-svg { width: 20px; height: 20px; fill: #fff; transition: 0.3s; }
.main-navigation ul li a:hover .menu-icon-svg { fill: var(--gold-color); transform: translateY(-3px); }


/* ==========================================================================
   3. MOBILE MENU (GIỮ NGUYÊN CODE CỦA BẠN ĐỂ KHÔNG BỊ LỖI)
   ========================================================================== */
.menu-toggle { display: none !important; }

@media (max-width: 900px) {
    /* Hiển thị nút bấm */
    .menu-toggle { 
        display: flex !important; 
        align-items: center; 
        gap: 6px; 
        border: 1px solid rgba(255,255,255,0.3); 
        background: transparent; 
        color: #fff; 
        padding: 4px 10px; 
        border-radius: 4px; 
        cursor: pointer; 
    }
    
    /* Khung Menu trượt */
    .main-navigation { 
        position: fixed; 
        top: 0; 
        right: -100%; /* Giấu sang phải */
        width: 280px; 
        height: 100vh; 
        background: var(--bg-dark); /* Màu nền cũng sẽ đổi theo Theme */
        box-shadow: -5px 0 20px rgba(0,0,0,0.5); 
        padding: 60px 20px; 
        transition: 0.3s; 
        z-index: 9999; 
        overflow-y: auto;
    }
    
    /* Class .toggled được JS thêm vào khi bấm nút */
    .main-navigation.toggled { right: 0; }
    
    .main-navigation ul { flex-direction: column; gap: 0; }
    .main-navigation ul li a { 
        flex-direction: row; 
        justify-content: flex-start; 
        padding: 15px 0; 
        border-bottom: 1px solid rgba(255,255,255,0.1); 
    }
    .menu-icon-svg { margin-right: 10px; }
}