/* ==========================================================================
   1. 全局基础设置
   ========================================================================== */
:root {
    --primary-color: #e67e22;    /* 主题橙色 */
    --dark-bg: #2c3e50;         /* 导航与页脚深蓝色 */
    --text-main: #333333;       /* 正文颜色 */
    --text-muted: #888888;      /* 描述文字颜色 */
    --text-en: #aaaaaa;         /* 英文名颜色 */
    --card-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

html { scroll-behavior: smooth; }
body {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    margin: 0;
    background-color: #fcfaf8;
    color: var(--text-main);
    line-height: 1.6;
}

/* ==========================================================================
   Header-wrapper 比例自适应渲染 (显示完整图片)
   ========================================================================== */
/* ==========================================================================
   Header-wrapper 渲染 (不加粗 + 移动端高度减小)
   ========================================================================== */
.header-wrapper {
    width: 100%;
    /* 桌面端：16:9 比例 (宽屏) */
    aspect-ratio: 16 / 7; 
    
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), 
                url('./pic/cqb2.jpg');
    
    background-size: cover;        /* 确保背景填满 */
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

header h1 {
    /* 核心字体：Mistral */
    font-family: 'Mistral', 'Brush Script MT', cursive;
    
    /* 字体大小：随屏幕宽度缩放 */
    font-size: 8vw; 
    
    /* 关键：取消加粗 */
    font-weight: 400 !important;   
    
    color: #ffffff;
    margin: 0;
    
    /* 柔和阴影，增加可读性而非厚重感 */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    
    line-height: 1.1;
    letter-spacing: 0.02em;
}

header p {
    font-size: 1.2em;
    font-weight: 300;
    opacity: 0.9;
    margin-top: 10px;
    letter-spacing: 2px;
    color: wheat;
}

/* ==========================================================================
   移动端适配：高度减小方案
   ========================================================================== */
@media (max-width: 768px) {
    .header-wrapper {
        /* 核心修改：通过改变比例实现高度减小 */
        /* 21:9 会让容器在视觉上变得更窄/更扁 */
        aspect-ratio: 21 / 9; 
        
        /* 减小内边距 */
        padding: 10px;
    }

    header h1 {
        /* 手机端字体稍微调大，以适应更扁的容器 */
        font-size: 12vw; 
    }
    
    header p {
        font-size: 0.9em;
        margin-top: 5px;
    }
}

nav {
    position: sticky;
    top: 0;
    width: 100%;
    background: rgba(44, 62, 80, 0.98);
    backdrop-filter: blur(12px);
    z-index: 1000;
    padding: 15px 0; /* 增加上下间距，为可能的两行留出呼吸空间 */
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    /* --- 核心修复 --- */
    flex-wrap: wrap;           /* Web端空间不足时自动换行 */
    justify-content: center;   /* 换行后条目依然保持居中对齐 */
    gap: 15px 40px;            /* 纵向间距15px，横向间距40px */
    /* ---------------- */
    padding: 0 20px;
}

nav a {
    text-decoration: none;
    display: flex;
    flex-direction: column;    /* 中文在上，英文在下 */
    align-items: center;
    flex-shrink: 0;            /* 防止条目被压缩文字变形 */
    transition: transform 0.2s ease;
}

.nav-cn {
    font-size: 1.1em;
    font-weight: bold;
    color: white;
    margin-bottom: 2px;
}

.nav-en {
    font-size: 0.7em;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 悬停效果：向上微跳 */
nav a:hover {
    transform: translateY(-3px);
}

/* ==========================================================================
   移动端优化：由换行改为滑动
   ========================================================================== */
@media (max-width: 768px) {
    .nav-container {
        flex-wrap: nowrap;      /* 手机端严禁换行，否则会占满半个屏幕 */
        justify-content: flex-start; /* 从左侧开始排列以便滑动 */
        overflow-x: auto;       /* 开启丝滑滚动 */
        -webkit-overflow-scrolling: touch;
        gap: 0 25px;            /* 缩小手机端的横向间距 */
    }
    
    .nav-container::-webkit-scrollbar { display: none; } /* 隐藏滚动条 */
    
    .nav-cn { font-size: 1em; }
    .nav-en { font-size: 0.6em; }
}

/* ==========================================================================
   3. 菜单主体 (网页端 1行2个)
   ========================================================================== */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 20px;
}

section { padding-top: 0px; }

.category-title {
    border-left: 6px solid var(--primary-color);
    padding-left: 15px;
    margin-bottom: 30px;
    font-size: 1.8em;
    color: var(--dark-bg);
}

.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 强制网页端双列 */
    gap: 15px;
}

/* ==========================================================================
   4. 菜品卡片 (中文-英文-描述-价格)
   ========================================================================== */
.menu-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    height: 165px; /* 增加高度以容纳信息流 */
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.menu-card img {
    width: 165px;
    height: 165px;
    object-fit: cover;
    flex-shrink: 0;
}

.info {
    padding: 15px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;   /* 垂直排列内容 */
    justify-content: space-between; /* 价格推到底部 */
    min-width: 0;
}

.info-top-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 名字和价格严格锁定为 1em */
.name {
    font-size: 1em !important;
    font-weight: bold;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.en-name {
    font-size: 0.75em;
    color: var(--text-en);
    text-transform: uppercase;
    margin-bottom: 0.5px;
}

.desc {
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制描述为2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.price {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 0.8em !important;
    margin-top: auto; /* 核心：强制置底 */
    padding-top: 5px;
}

/* ==========================================================================
   5. 经典深蓝页脚 (蓝色背景 + 橙标题 + 白色Tag)
   ========================================================================== */
.site-footer {
    background-color: var(--dark-bg);
    color: rgba(255, 255, 255, 0.7);
    padding: 60px 20px 30px;
    margin-top: 100px;
    font-size: 0.85em;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}

.footer-section h3 {
    color: var(--primary-color); /* 橙色标题 */
    font-size: 1.2em;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.status-tag {
    display: inline-block;
    background: #27ae60;
    color: white; /* 白色字体 */
    padding: 3px 15px;
    border-radius: 20px;
    font-size: 0.8em;
    margin-top: 10px;
}

.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* 回到顶部 */
#back-to-top {
    display: none; position: fixed; bottom: 35px; right: 35px;
    width: 45px; height: 45px; background: var(--primary-color); color: white;
    border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}


/* ==========================================================================
   6. 响应式优化 (移动端适配)
   ========================================================================== */
@media (max-width: 850px) {
    .nav-container { justify-content: flex-start; } /* 移动端靠左滑动 */
    .menu-grid { grid-template-columns: 1fr; }      /* 单列防止文字太拥挤 */
    .footer-container { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 500px) {
    .header-wrapper { padding: 60px 20px; }
    header h1 { font-size: 2.2em; }
    
    .menu-card { height: 150px; }
    .menu-card img { width: 110px; height: 150px; }
    .info { padding: 12px; }
    
    /* 极致窄屏下依然保持 1em */
    .name, .price { font-size: 1em; }
    .desc { -webkit-line-clamp: 1; }

   


}