/* Base */
body { margin: 0; font-family: 'Inter', sans-serif; background: #fdfdfd; color: #333; overflow-x: hidden; }
main { padding-top: 70px; }
h2 { text-align: center; margin: 40px 0 20px 0; font-size: 2em; color: #2E7D32; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* 1. Header (Nav) - Glassmorphism */
header {
    position: fixed; top: 0; left: 0; width: 100%; height: 70px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 40px; box-sizing: border-box; z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
header nav a {
    margin-left: 20px; text-decoration: none; color: #333; font-weight: 500;
}
header nav a:hover { color: #2E7D32; }
.logo img { height: 40px; }

/* 2. CTA 動態背景與按鈕 */
#cta {
    position: relative; height: 80vh; display: flex;
    justify-content: center; align-items: center; text-align: center;
    /* 響應式背景圖將透過CSS MediaQuery套用 */
    background-size: cover; background-position: center;
}
/* 小於760採用低解析背景，大於等於760採高解析 */
@media (max-width: 759px) { #cta { background-image: url('../images/bg-low.jpg'); background-color: #A5D6A7; } }
@media (min-width: 760px) { #cta { background-image: url('../images/bg-high.jpg'); background-color: #81C784; } }

.cta-content {
    background: rgba(255,255,255,0.8); padding: 40px; border-radius: 12px;
}
.slogan { font-size: 3em; margin-bottom: 20px; color: #1b5e20; }
.btn-start {
    padding: 15px 40px; font-size: 1.2em;
    background: #FF9800; color: white; border: none; border-radius: 50px;
    cursor: pointer; transition: all 0.3s;
    animation: pulse 2s infinite;
}
.btn-start:hover { transform: scale(1.1); background: #F57C00; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(255, 152, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } }

/* 3. Interactive Plate */
#plate-interactive { padding: 40px 20px; }
.plate-desktop-layout { display: flex; justify-content: center; align-items: center; gap: 50px; max-width: 1000px; margin: 0 auto; }
.icons-left { display: flex; flex-direction: column; gap: 10px; }
.food-icon {
    padding: 10px 20px; font-size: 1.1em; background: #eee; border: 1px solid #ccc;
    border-radius: 8px; cursor: pointer; transition: 0.2s;
}
.food-icon:hover, .food-icon.active { background: #4CAF50; color: #fff; transform: translateX(10px); }

/* 餐盤樣式 */
.plate-base {
    width: 400px; height: 400px; border-radius: 50%;
    background: white; border: 5px solid #2E7D32;
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
}
.plate-slice {
    display: flex; justify-content: center; align-items: center; font-size: 2em; border: 1px solid #ddd;
    cursor: pointer; transition: 0.3s;
}
.plate-slice:hover { background: #f0f0f0; }

/* 疊加細節面 */
.plate-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.95);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 10; padding: 20px; box-sizing: border-box; text-align: center;
}
.close-overlay {
    position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 1.5em; cursor: pointer;
}

/* 4. 推廣影片 */
#promo-video { padding: 40px 20px; background: #e8f5e9; }

/* 5. 手冊下載 */
#downloads { padding: 40px 20px; text-align: center; }
#downloads ul { list-style: none; padding: 0; display: flex; justify-content: center; gap: 20px; margin-bottom: 20px;}
#downloads a { display: inline-block; padding: 10px 20px; background: #2E7D32; color: #fff; text-decoration: none; border-radius: 5px; }

/* 6. 三餐推薦 Tabs */
#meals-tabs { padding: 40px 20px; max-width: 800px; margin: 0 auto; }
.tab-list, .sub-tab-list { display: flex; margin-bottom: 20px; border-bottom: 2px solid #ccc; }
.tab-btn, .sub-tab-btn {
    padding: 10px 20px; background: none; border: none; font-size: 1.1em;
    cursor: pointer; color: #666;
}
.tab-btn.active, .sub-tab-btn.active { color: #2E7D32; border-bottom: 3px solid #2E7D32; font-weight: bold; }
.tab-panel, .sub-panel { padding: 20px; background: #fafafa; border-radius: 8px; }

/* 7. 卡片輪播 */
#food-cards { padding: 40px 20px; background: #f5f5f5;}
.carousel-container {
    display: flex; gap: 20px; overflow-x: auto;
    scroll-snap-type: x mandatory; max-width: 1200px; margin: 0 auto;
    padding-bottom: 20px;
}
.card {
    min-width: 250px; background: #fff; padding: 20px; border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); scroll-snap-align: center;
    transition: transform 0.3s;
}
.card:hover { transform: translateY(-5px); }
.c-icon { font-size: 3em; margin-bottom: 10px; text-align: center; }

@media (min-width: 760px) {
    /* 桌機平鋪 */
    .carousel-container { display: grid; grid-template-columns: repeat(3, 1fr); overflow-x: visible; }
    .card { min-width: auto; }
}

/* 8. 聯絡表單 */
#contact { padding: 40px 20px; max-width: 500px; margin: 0 auto; }
#contact form div { margin-bottom: 15px; }
#contact label { display: block; margin-bottom: 5px; font-weight: bold; }
#contact input, #contact select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }
#contact button { width: 100%; padding: 15px; background: #2E7D32; color: white; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; }

/* 9. Footer */
footer { background: #222; color: #fff; text-align: center; padding: 30px; }
.social-links a { display: inline-block; margin: 0 10px; color: #4CAF50; text-decoration: none; font-size: 1.2em; font-weight: bold; transition: 0.3s; }
.social-links a:hover { color: #ffeb3b; transform: scale(1.2); }