/* ------------------------------------ */
/* G&C 國際餐飲集團 - 最終完美版 v3.1 */
/* (黑金雙語 + 手機雙欄菜單)          */
/* ------------------------------------ */

/* 0. 核心變數設定 */
:root {
    --color-primary: #D4AF37;   /* 質感金色 (標題/重點) */
    --color-secondary: #F9E79F; /* 亮金色 (Hover效果) */
    --color-text: #E0E0E0;      /* 淺銀灰 (內文) */
    --color-background: #121212;/* 極深灰 (網頁背景) */
    --color-light-bg: #1E1E1E;  /* 次深灰 (區塊背景) */
    --spacing-lg: 60px;         /* 區塊間距 */
}

/* 引入字體 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap');

/* 1. 全域重設 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Noto Sans TC', sans-serif;
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6;
    overflow-x: hidden; /* 防止左右滑動 */
}

a { text-decoration: none; color: var(--color-primary); transition: color 0.3s;}
a:hover { color: var(--color-secondary); }

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.section { padding: var(--spacing-lg) 0; text-align: center; }
.bg-light { background-color: var(--color-light-bg); }

/* --- 標題通用設定 --- */
h1, h2, h3, h4 { font-weight: 700; color: var(--color-primary); }

h3 {
    font-size: 1.8em;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
    padding-bottom: 10px;
}

.subtitle { color: #888; margin-bottom: 40px; display: block; }

.rwd-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* --- 英文輔助文字樣式 --- */
.en-text {
    display: block;
    font-size: 0.85em;
    color: #888;      /* 顏色較淡，突顯中文 */
    margin-top: 5px;
    font-weight: 300;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
}

/* ------------------------------------ */
/* 2. 頂部導覽列 (Header) */
/* ------------------------------------ */
#main-header {
    background-color: #000000;
    box-shadow: 0 1px 10px rgba(212, 175, 55, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #333;
}

#main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    flex-wrap: nowrap;
}

.logo { flex-shrink: 0; }

.logo a {
    font-size: 1.5em; 
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap; /* 強制不換行 */
}

#main-nav { display: flex; align-items: center; }

#main-nav a {
    margin-left: 20px;
    padding: 5px 0;
    color: #fff;
    font-size: 0.95em;
    border-bottom: 2px solid transparent;
    line-height: 1.2; /* 讓雙語選單緊湊點 */
    text-align: center;
}

#main-nav a:hover {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.menu-toggle {
    display: none; /* 電腦版隱藏 */
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--color-primary);
    padding: 5px;
}

/* ------------------------------------ */
/* 3. 首圖區 (Hero) - 扁平化 */
/* ------------------------------------ */
#hero {
    background: url('hero-image.jpg') no-repeat center center/cover;
    height: 28vh; /* 電腦版高度 */
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* 黑色遮罩 */
}

.hero-content { 
    z-index: 2; 
    color: #ffffff; 
    padding: 0 15px; 
    max-width: 800px;
}

#hero h2 {
    font-size: 2.5em;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    line-height: 1.2;
}

#hero p {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #f0f0f0;
    font-weight: 300;
}

.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 8px 25px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.9em;
    transition: all 0.3s;
    border: 1px solid var(--color-primary);
    margin-top: 15px;
}

.btn-primary { background-color: var(--color-primary); color: #000; }
.btn-primary:hover { background-color: transparent; color: var(--color-primary); }

.btn-secondary { background-color: transparent; color: var(--color-primary); }
.btn-secondary:hover { background-color: var(--color-primary); color: #000; }

/* ------------------------------------ */
/* 4. 品牌故事 (電腦版：左圖右文) */
/* ------------------------------------ */
#about .content-split {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center; 
    text-align: left;
    gap: 40px;
}

#about .content-split img {
    width: 35%; 
    max-width: 300px;
    border: 1px solid #333;
}
#about .content-split div { width: 65%; }
.story-text h4 { margin-bottom: 15px; }

/* ------------------------------------ */
/* 5. 餐飲精選 (Grid網格) */
/* ------------------------------------ */
.cuisine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.food-card {
    background-color: #252525;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    text-align: left;
    transition: transform 0.3s;
}
.food-card:hover { transform: translateY(-5px); border-color: var(--color-primary); }

.card-image-wrapper { height: 180px; overflow: hidden; }
.card-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.food-card:hover .card-image-wrapper img { transform: scale(1.05); }

.food-card h4 { color: var(--color-primary); padding: 15px 15px 0; font-size: 1.1em; margin-bottom: 5px; line-height: 1.3;}
.food-card p { padding: 0 15px; font-size: 0.9em; color: #bbb; margin-bottom: 15px; }

/* ------------------------------------ */
/* 6. Footer */
/* ------------------------------------ */
footer { background-color: #000; color: #666; padding: 20px 0; font-size: 0.8em; border-top: 1px solid #222;}


/* ==================================== */
/* ★★★ 手機版 (RWD) 修正區 ★★★ */
/* ==================================== */
@media (max-width: 768px) {
    /* Header 縮小 */
    #main-header .container { padding: 10px 0; }
    .logo a { font-size: 1.2em; }

    /* 選單變為漢堡選單 */
    #main-nav {
        display: none; 
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #111;
        box-shadow: 0 5px 10px rgba(0,0,0,0.5);
        padding: 10px 0;
        text-align: center;
    }
    #main-nav.active { display: flex; }
    #main-nav a { margin: 0; padding: 12px; border-bottom: 1px solid #222; width: 100%; display: block; }
    .menu-toggle { display: block; }

    /* 首圖高度更小 */
    #hero { height: 25vh; min-height: 180px; }
    #hero h2 { font-size: 1.8em; }
    #hero p { display: none; } /* 手機版隱藏副標題 */

    /* 品牌故事：手機版特殊調整 */
    #about .content-split {
        flex-direction: column; /* 改為垂直排列 */
        text-align: center;     /* 圖片保持置中 */
        gap: 20px;
    }
    
    #about .content-split img { 
        width: 60%; 
        margin: 0 auto; 
    }

    /* 文字區塊強制靠左對齊，增加邊距 */
    #about .content-split div {
        width: 100%;
        text-align: left;    /* 強制靠左 */
        padding: 0 15px;     /* 左右留白 */
    }
    
    /* 標題保持置中 */
    #about .content-split h4 {
        text-align: center;
        margin-bottom: 20px;
    }

    /* 【關鍵修改】美食卡片改為並排 (雙欄) */
    .cuisine-grid { 
        grid-template-columns: repeat(2, 1fr); /* 雙欄 */
        gap: 10px; 
    }
    
    .card-image-wrapper { height: 120px; } /* 圖片變矮 */
    .food-card h4 { font-size: 0.95em; padding: 10px 8px 0; } /* 標題字縮小 */
    
    /* 手機雙欄模式下，隱藏詳細內文，只顯示圖片和菜名，保持整齊 */
    .food-card p { display: none; } 
}