/* === FoodNo1 主題樣式 for Helix Ultimate === */

/* --- Body 與基本排版 --- */
body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  background-color: #fffdf5;
}

/* --- 標題樣式 --- */
h1, .h1 { font-size: 30px; font-weight: 700; }
h2, .h2 { font-size: 26px; font-weight: 600; }
h3, .h3 { font-size: 22px; font-weight: 600; }
h4, .h4 { font-size: 18px; font-weight: 500; }

@media (max-width: 768px) {
  h1, .h1 { font-size: 24px; }
  h2, .h2 { font-size: 22px; }
  h3, .h3 { font-size: 20px; }
  h4, .h4 { font-size: 17px; }
}

/* --- 連結樣式 --- */
a {
  color: #d18f00;
  text-decoration: none;
}
a:hover {
  color: #efc562;
  text-decoration: underline;
}

/* --- 按鈕 --- */
button,
.btn {
  background-color: #efc562;
  color: #000;
  border: none;
  border-radius: 6px;
}
button:hover,
.btn:hover {
  background-color: #d18f00;
  color: #fff;
}

/* --- 模組外觀卡片感 --- */
.moduletable, .module {
  background-color: #fffaf0;
  border: 1px solid #e0d4b8;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.moduletable h3, .module h3 {
  font-size: 18px;
  font-weight: bold;
  color: #5a4b3b;
  border-bottom: 2px solid #efc562;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* --- Menu 橫向排列 --- */
.mod-menu ul,
.mod-menu ul.menu,
.mod-menu > ul {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  flex-wrap: wrap;
  list-style: none;
  gap: 12px;
  margin: 0;
  padding-left: 0;
}
.mod-menu li {
  display: inline-block !important;
  margin: 0;
}
.mod-menu a {
  display: inline-block !important;
  padding: 6px 12px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.mod-menu a:hover {
  background-color: #f0f0f0;
  border-radius: 4px;
}
/* --- top bar & body distance --- */
#sp-main-body {
  padding: 30px 0;
}
/* --- Kunena Avatar 圓角 & 替代圖示 --- */
.kavatar img[src*="gravatar.com/avatar"] {
  content: url('/images/fno1/kavatar.svg') !important;
  border-radius: 50%;
  width: 64px;
  height: 64px;
}

/* --- Kunena 主色與區塊設計 --- */
#Kunena {
  background-color: #fffdf5;
  color: #333;
}
#Kunena .kblock-header,
#Kunena .kforum-header,
#Kunena .ksection-header {
  background-color: #c29000 !important;
  color: #fff !important;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 6px;
}
.klist-row {
  background-color: #fdf6e3;
  border-bottom: 1px solid #eadbb9;
  padding: 12px 10px;
}
.klist-row:hover {
  background-color: #e7b93d !important;
  color: #000 !important;
}

/* === FoodNo1 2025/06/05 新增：Footer + Tags + Menu 美化 === */

/* 1. Footer 深金底 + 淺金字 */
#sp-footer {
  background-color: #c29000;
  color: #fff8dc;
}
#sp-footer a {
  color: #fff8dc;
  text-decoration: none;
}
#sp-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* 2. Topbar 背景與字色 */
#sp-top-bar {
  background-color: #fffdf5 !important;
  color: #333;
}
#sp-top-bar a {
  color: #333;
}
#sp-top-bar a:hover {
  color: #d18f00;
}

/* 3. Megamenu 下拉選單 */
.sp-megamenu-parent .sp-dropdown {
  background-color: #fffaf0;
  border: 1px solid #f0e2c5;
  border-radius: 6px;
  padding: 10px 15px;
}
.sp-megamenu-parent .sp-dropdown li a {
  color: #5a4b3b;
  font-weight: 500;
}
.sp-megamenu-parent .sp-dropdown li a:hover {
  background-color: #f8e6b9;
  color: #000;
  border-radius: 4px;
}

/* 4. Tags 統一樣式 */
.tags span.label {
  background-color: #fef1e5;
  color: #d15700;
  border-radius: 24px;
  padding: 6px 12px;
  display: inline-block;
  margin: 4px;
  font-weight: 500;
}
.tags span.label:hover {
  background-color: #fce4ba;
  color: #000;
  text-decoration: none;
}

/* 5. 全站文章標題淡藍色 */
.article-title,
.item-title,
.blog .page-header h2,
.category-list .page-header h2,
h2.article-title {
  color: #215C96;
}
.article-title a:hover,
.item-title a:hover {
  color: #1c4e80;
}

/* 6. 文章數量藍色徽章 */
.badge.badge-pill {
  background-color: #4a90e2 !important;
  color: #fff !important;
  font-weight: bold;
  border-radius: 50px;
}

/* 7. breadcrumb 改為金灰色 */
.breadcrumb,
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
  background-color: #f3e7c3 !important;
  color: #6c5430 !important;
}
.breadcrumb .breadcrumb-item.active {
  font-weight: bold;
}

/* 8. content-top 與 menu 間距縮小 */
.sp-page-builder .page-content #section-id-1 {
  margin-top: 10px !important;
}

/* 9. sticky feature module 顯示優化 */
.sticky-feature-module {
  position: absolute;
  top: 20px;
  right: 30px;
  background-color: #fff8d5;
  color: #333;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: bold;
  z-index: 99;
}

/* 10. tag hover 效果清除藍色 */
.tag-cloud a:hover,
a.tag:hover {
  background-color: #efc562 !important;
  color: #000 !important;
}

/* 最後統一預防干擾 */
.badge, .tag, .breadcrumb {
  border: none !important;
  box-shadow: none !important;
}
/* === 修正區 2025-06-05 晚間版 === */

/* 1. Menu 背景色統一為淡米色 */
#sp-header, .sp-megamenu-parent {
  background-color: #fffdf5 !important;
}

/* 2. 全站文章標題淡藍色修正 */
.article-title, .item-title, .page-header h2 {
  color: #215C96 !important;
}
.article-title a:hover,
.item-title a:hover {
  color: #1c4e80 !important;
}

/* 3. 內容區與 top-bar 間距調整（從 150px 降為 40px） */
.sp-page-builder .page-content {
  margin-top: 40px !important;
}

/* 4. yellow promo 模組 padding 微調為 5px */
.sp-module.promo-yellow,
.module.promo-yellow,
.moduletable.promo-yellow {
  padding: 5px !important;
  background-color: #ffeb3b;
  border-radius: 8px;
}

/* 給指定模組 class 額外內距 */
.fno1-padding-box {
  padding: 20px;
}

/* 統一讓所有模組中的表格內格（td）有內距 */
.moduletable table td,
.sp-module table td,
.module table td {
  padding: 10px;
}
/* === FoodNo1 模組統一間距與標準化樣式（2025/06/06）=== */

/* 所有模組底部加空間 */
.moduletable, .sp-module, .module {
  margin-bottom: 20px !important;
}

/* 模組本體額外內距（通用） */
.moduletable, .sp-module, .module {
  padding: 15px !important;
  border-radius: 8px;
  background-color: #fffaf0;
  border: 1px solid #e0d4b8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* 模組標題統一樣式 */
.moduletable h3, .sp-module h3, .module h3 {
  font-size: 18px;
  font-weight: bold;
  color: #5a4b3b;
  border-bottom: 2px solid #efc562;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* 表格內部 padding */
.moduletable table td,
.sp-module table td,
.module table td {
  padding: 10px;
}
.fno1-noborder {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 10px; /* 或依需要調整 */
}
.fno1-footer-lighttext {
  color: #3b2f1b !important;
}
.fno1-footer-lighttext a {
  color: #c29000 !important;
  text-decoration: underline;
}
.sp-module table td,
.module table td,
.moduletable table td {
  padding: 10px;
}
/* 基本排版，需根據您的網站設計調整 */
.membership-plan {
    padding: 50px 20px;
    text-align: center;
    background-color: #f9f9f9;
}
.section-title {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 10px;
}
.section-description {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.membership-tiers {
    display: flex; /* 使用 Flexbox 或 Grid 佈局 */
    justify-content: center;
    gap: 30px; /* 卡片間距 */
    flex-wrap: wrap; /* 小屏幕自動換行 */
}
.tier-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 300px; /* 卡片寬度，可調整 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease-in-out;
}
.tier-card:hover {
    transform: translateY(-10px);
}
.tier-header h3 {
    font-size: 1.8em;
    color: #5a2d0b; /* Foodno1 品牌色調 */
    margin-bottom: 5px;
}
.tier-subtitle {
    font-size: 1em;
    color: #888;
    margin-bottom: 15px;
}
.price {
    font-size: 2.2em;
    font-weight: bold;
    color: #d9534f; /* 價格強調色 */
    margin-bottom: 5px;
}
.price-desc {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 25px;
}
.tier-features ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
}
.tier-features ul li {
    margin-bottom: 10px;
    color: #555;
    font-size: 1.05em;
    display: flex;
    align-items: center;
}
/* Foodno1.com 會員方案樣式 from here &below -by Gem on 20250718-900*/

/* 整體容器排版 */
.membership-plan {
    padding: 50px 20px;
    text-align: center;
    background-color: #f9f9f9;
}

/* 區塊標題 */
.section-title {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 10px;
}

/* 區塊描述 */
.section-description {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 會員卡片容器 - Flexbox 佈局 */
.membership-tiers {
    display: flex;
    justify-content: center; /* 卡片水平居中 */
    gap: 30px; /* 卡片間距 */
    flex-wrap: wrap; /* 允許卡片換行 */
}

/* 單個會員卡片樣式 */
.tier-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    
    /* 靈活的卡片寬度調整 */
    flex-basis: 300px; /* 基礎寬度，允許卡片收縮或生長 */
    flex-grow: 1;      /* 允許卡片在有額外空間時生長 */
    max-width: 350px;  /* 防止卡片在非常寬的屏幕上變得太大 */
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 內容上下分開，按鈕推到底部 */
    transition: transform 0.3s ease-in-out; /* 懸停動畫 */
}

/* 卡片懸停效果 */
.tier-card:hover {
    transform: translateY(-10px);
}

/* 卡片頭部樣式 */
.tier-header h3 {
    font-size: 1.8em;
    color: #5a2d0b; /* Foodno1 品牌色調 */
    margin-bottom: 5px;
}

/* 卡片副標題 */
.tier-subtitle {
    font-size: 1em;
    color: #888;
    margin-bottom: 15px;
}

/* 價格顯示 */
.price {
    font-size: 2.2em;
    font-weight: bold;
    color: #d9534f; /* 價格強調色 */
    margin-bottom: 5px;
}

/* 價格描述 */
.price-desc {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 25px;
}

/* 福利列表 */
.tier-features ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
}

.tier-features ul li {
    margin-bottom: 10px;
    color: #555;
    font-size: 1.05em;
    display: flex;
    align-items: center; /* 讓圖標和文字垂直居中 */
}

/* 福利圖標樣式 (例如 Font Awesome) */
.tier-features ul li i {
    color: #5cb85c; /* 勾選圖標顏色 */
    margin-right: 10px;
    font-size: 1.2em;
}

/* 獨家福利圖標顏色 */
.tier-features ul li .icon-star {
    color: #f0ad4e; /* 星星圖標顏色，用於獨家福利 */
}

/* 行動呼籲按鈕容器 */
.tier-cta {
    margin-top: auto; /* 將按鈕推到底部，確保卡片高度一致 */
}

/* 按鈕通用樣式 */
.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* 主要按鈕 (免費註冊) */
.btn-primary {
    background-color: #5cb85c; /* 綠色 */
    color: #fff;
    border: 1px solid #5cb85c;
}
.btn-primary:hover {
    background-color: #4cae4c;
}

/* 次要按鈕 (住家大廚訂閱) */
.btn-secondary {
    background-color: #f0ad4e; /* 黃色或橙色 */
    color: #fff;
    border: 1px solid #f0ad4e;
}
.btn-secondary:hover {
    background-color: #ec971f;
}

/* 第三級按鈕 (滋味領航員訂閱) */
.btn-tertiary {
    background-color: #d9534f; /* 紅色或深色 */
    color: #fff;
    border: 1px solid #d9534f;
}
.btn-tertiary:hover {
    background-color: #c9302c;
}

/* 了解更多連結 */
.tier-more-info {
    margin-top: 15px;
    font-size: 0.9em;
}

.tier-more-info a {
    color: #5a2d0b;
    text-decoration: none;
}
.tier-more-info a:hover {
    text-decoration: underline;
}

/* --- 特色會員方案 - 突出顯示中間/第二個卡片 --- */
.tier-card.featured-tier {
    border: 3px solid #5a2d0b; /* 使用 Foodno1 的品牌色作為邊框顏色 */
    border-radius: 15px; /* 增加圓角半徑，使其更圓潤 */
    padding: 27px; /* 由於邊框會佔空間，稍微調整內邊距保持視覺平衡 */

    /* 額外強調效果 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* 增加更明顯的陰影 */
    transform: translateY(-5px); /* 輕微上浮，使其更突出 */
    background-color: #fffaf0; /* 可選：輕微的背景色，使其與其他卡片區分 */
}

/* 確保鼠標懸停效果在特色卡片上也能正常工作 */
.tier-card.featured-tier:hover {
    transform: translateY(-15px); /* 懸停時上浮更多 */
}


/* --- 響應式調整 --- */
@media (max-width: 768px) {
    /* 在小屏幕上，卡片容器垂直堆疊並居中 */
    .membership-tiers {
        flex-direction: column;
        align-items: center;
    }

    /* 小屏幕上卡片佔據大部分寬度 */
    .tier-card {
        width: 90%;
        max-width: 400px; /* 避免在小屏幕上卡片過寬 */
        margin-bottom: 20px; /* 增加垂直間距 */
        flex-basis: auto; /* 在垂直佈局時，寬度由 width/max-width 控制 */
        flex-grow: 0;
    }
    
    /* 在小屏幕上，特色卡片不進行上浮變換，保持垂直對齊 */
    .tier-card.featured-tier {
        transform: translateY(0);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 調整手機上的陰影強度 */
    }
    /* 懸停效果在手機上通常不明顯，可取消或調整 */
    .tier-card.featured-tier:hover {
        transform: translateY(0);
    }
}