/* =========================================
   1. 基础布局容器
   ========================================= */
.nav-wrapper { background: #333; width: 100%; }
.nav-container { max-width: 1200px; margin: 0 auto; position: relative; }

/* =========================================
   2. 网站头部 (Site Header)
   ========================================= */
.site-header {
    background: url('/images/hero-bg.jpg') center/cover no-repeat;
    color: #ffffff;
    padding: 20px 0;
    position: relative;
}

/* 黑色半透明遮罩 */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0; /* 相当于 top:0; left:0; width:100%; height:100% */
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.site-header .container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Logo --- */
#logo h1 { margin: 0; font-size: 0; }
#logo img { height: 50px; width: auto; display: block; }

/* --- 右侧功能区 --- */
.header-actions { display: flex; align-items: center; gap: 15px; }

.btn-order {
    background-color: #5c4033;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    transition: background-color 0.3s ease;
}
.btn-order:hover { background-color: #7a5c4b; }

.search-icon { color: #fff; font-size: 18px; text-decoration: none; }
.social-icons a { color: #fff; font-size: 16px; text-decoration: none; opacity: 0.8; transition: opacity 0.3s ease; }
.social-icons a:hover { opacity: 1; }

/* =========================================
   3. 导航菜单 (Navigation)
   ========================================= */
#nav { background: #333; position: relative; width: 100%; min-height: 50px; }

#nav ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: 20px;
    justify-content: center;
}

#nav li { position: relative; }

#nav a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

#nav a:hover,
#nav .current_page_item > a { color: #d4a373; }

/* --- 子菜单 (桌面端悬停显示) --- */
#nav .sub-menu {
    display: none;
    position: absolute;
    background: #444;
    top: 100%; left: 0;
    min-width: 150px;
    z-index: 1000;
}
#nav li:hover > .sub-menu { display: block; }

/* --- 移动端汉堡包图标容器 --- */
.menu-icon {
    /* 仅在移动端显示，这里假设你的断点是 768px */
    display: none; 
    /* 固定一个合适的点击区域大小 */
    width: 30px;
    height: 24px; 
    cursor: pointer;
    position: relative;
    /* 移除 float，使用 flex 布局的父级来对齐更好，如果父级不是 flex，保留 float: right */
    /* float: right; */ 
    z-index: 10001; /* 确保层级高于展开的菜单 */
    /* 稍微增加一点点击外边距 */
    margin: 15px 20px 15px 0;
}

@media (max-width: 768px) {
    .menu-icon {
        display: block;
    }
}

/* --- 线条通用样式 --- */
.menu-icon span {
    display: block;
    position: absolute;
    height: 2px; /* 线条变细，更精致 */
    width: 100%;
    background: #fff; /* 线条颜色 */
    border-radius: 2px; /* 圆角 */
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .35s ease-in-out; /* 平滑过渡动画 */
}

/* --- 三条线的初始位置 --- */
 /* 隐藏原来的 span 样式，避免冲突 */
.menu-icon span { display: none; }

/* =========================================
   4. Hero 区域
   ========================================= */
.hero-viewport {
    min-height: 600px; height: auto; padding: 80px 20px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: #fff; position: relative; overflow: visible;
}

.hero-title {
    font-size: 3rem; line-height: 1.3; margin-bottom: 30px;
    font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.5); word-wrap: break-word;
}

/* =========================================
   5. 响应式布局 (Mobile - max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
    /* 容器调整 */
    .nav-container { width: 100%; padding: 0; }
    .site-header .container { flex-direction: column; gap: 15px; }
    
    .nav-header {
        display: flex; height: 55px; align-items: center;
        justify-content: flex-end;
    }

    /* 唤出菜单图标 */
    .menu-icon { display: block; }

    /* 移动端下拉菜单 */
    #nav ul#nav-list {
        display: none; /* 默认隐藏，等待 JS 触发 .show */
        flex-direction: column;
        width: 100%;
        background: #333;
        position: absolute;
        top: 55px;
        left: 0;
        z-index: 9999;
    }
    #nav ul#nav-list.show { display: flex !important; }

    /* 移动端菜单项样式 */
    #nav ul li { width: 100%; border-top: 1px solid #444; margin: 0; }
    
    /* 移动端子菜单直接展开 */
    #nav