/* ============================================================================
 * themes/3ffood/header.css — 3ffood 主題 header 層完整抽取
 * ============================================================================
 *
 * 用途：
 *   承接舊 3ffood.css 的 header / nav / dropdown / 多層下拉 / header-area /
 *   logo / cart 段落，作為 3ffood 主題對 common/header.css 的覆寫與補充層。
 *   載入順序在 common/header.css 之後，重複規則由 3ffood 版本後勝覆寫。
 *
 * 抽取來源（public/web/css/3ffood.css）：
 *   - line 2036-2493：#header / .navLogo / .navbar-nav / .nav-item / .nav-link /
 *                     .headerMenu1~3 多層下拉 / .dropdown-menu(-login/1/2/3) /
 *                     .dropdown-submenu / .navbar-collapse / .mobile-function-menu /
 *                     @media 1199px（navbar 收合 + offcanvas + mobile-function-menu）
 *   - line 2495-2527：.desktop / .mobile / .desktopImg / .mobileImg + @media 1199px
 *                     ★ 3ffood 專屬斷點覆寫：common/base.css 的 .desktop/.mobile
 *                       切換點為 max-width:991px，但 3ffood navbar 在 1199px 即收合，
 *                       故桌機/行動切換亦須對齊 1199px。漏抽會導致 992~1199px 區間
 *                       桌機選單元素仍顯示（與 cm12 不符）。本檔載入晚於 common 覆寫之。
 *   - line 4318-4370：.header-area / .logo / .cart-icon / .cart-img / .cart-info
 *                     （頂部 logo + 購物車資訊區）
 *   - line 5734-5743：.dropdown-menu（容器 reset）/ .dropdown-width（270px）
 *   - line 7092-7109：.dropdown-submenu 定位 / .headerMenu2:hover>.dropdown-menu2 /
 *                     .headerMenu3:hover>.dropdown-menu3（多層下拉展開）
 *   - line 8304-8534：三福 Header 仿圖改版（@media min-width:1200px 桌機）—
 *                     白底 header + 米金漸層底線 + headerMenu1 文字選單（・分隔）+
 *                     右側 icon 按鈕化 + dropdown 米金卡片化（#6a1d15 hover）
 *
 * 跳過範圍：
 *   - .function-btns-block 浮動社群按鈕（3ffood.css 7114~）屬 footer 層，
 *     比照 dgfactor task 8.4 放 footer.css（task 10.4）
 *
 * 載入順序：
 *   common/header.css -> themes/3ffood/header.css（本檔）-> 其他
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 10.2）
 * ============================================================================
 */

/* ============================================================================
 * 頂部導覽列：#header / navbar-nav / nav-item / headerMenu1~3 多層下拉 / dropdown-menu / dropdown-submenu / mobile-function-menu / @media 1199px navbar 收合 (3ffood.css 2036-2493)
 * ============================================================================ */

/* 使用 inline-block 確保寬度正確計算 */

/* 使用 scaleX 替代 width 動畫，效能更好且不會有寬度計算問題 */

/* 確保子選單不繼承底線 */
.dropdown-menu .nav-link::after {
  display: none !important;
}

/* 登入選單項目樣式 */

.dropdown-menu.dropdown-menu2,
.dropdown-menu.dropdown-menu3 {
  display: none;
  padding-top: 0;
}

.headerMenu2.dropdown.show .dropdown-menu2,
.headerMenu3.dropdown.show .dropdown-menu3 {
  display: block;
  padding-top: 0;
  width: fit-content;
  min-width: 140px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
}

/* 第二、第三層選單美化 - 加強優先級 */

/* 下拉選單項目樣式 - 加強優先級 */

/* 有子選單的項目顯示右箭頭 - 只針對有 dropdown-toggle 的項目 */
#header .navbar-nav .dropdown-menu .nav-link.dropdown-toggle::after {
  content: '›' !important;
  font-family: inherit !important;
  font-weight: normal !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  border: none !important;
  color: #999999 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* 沒有子選單的項目不顯示箭頭 */
#header .navbar-nav .dropdown-menu .nav-link:not(.dropdown-toggle)::after {
  display: none !important;
}

/* hover 效果 - 深灰色背景 + 白字 */

/* 語言選單和其他標準下拉選單 Hover 顯示 (桌面版) */

.headerMenu2.dropdown.show .dropdown-menu2.show,
.headerMenu3.dropdown.show .dropdown-menu3.show {
  display: block;
  padding-top: 0;
}

@media screen and (max-width: 991px) {

  .dropdown-menu.dropdown-menu2,
  .dropdown-menu.dropdown-menu3 {
    display: block;
    padding-top: 0;
  }
}

.dropdown .dropdown-submenu .nav-link {
  padding: 0;
  font-size: 15px;
  color: #333333;
}

/* 已移至上方統一設定 */

@media screen and (max-width: 991px) {
  /* 箭頭樣式已在上方統一設定 */
}

@media screen and (max-width: 1199px) {
  .navbar {
    padding: 12px 16px;
  }

  .navbar-collapse {
    display: none !important;
  }

  .navbar-collapse.show {
    display: none !important;
  }

  .navbar-nav {
    width: fit-content;
    height: 100%;
    background: rgb(255, 255, 255);
    margin: 0 !important;
  }

  .offcanvas-body {
    overflow-y: scroll;
    height: 80vh;
    flex-grow: 0;
  }

  .offcanvas-body .dropdown .dropdown-menu {
    display: block;
    margin-top: 0;
    padding-top: 8px;
  }

  .offcanvas-body .navbar-nav .nav-item {
    margin-right: 0;
    margin-bottom: 10px;
    padding: 5px 16px;
    background: #ffffff75;
    width: 100%;
    min-width: 200px;
    border-bottom: 1px solid #b5b5b5;

  }

  .offcanvas-body .headerMenu2.nav-item.dropdown-submenu {
    border-bottom: 1px solid #2c2c2c;
  }

  .offcanvas-body .headerMenu2.nav-item.dropdown-submenu.dropdown .nav-link {
    color: #2c2c2c;
  }

  .offcanvas-body .navbar-nav .nav-item .dropdown-menu {
    margin-right: 0;
    margin-bottom: 6px;
    background: #f7f7f7;
    width: 100%;
  }

  .offcanvas-body .navbar-nav .nav-item .dropdown-menu .dropdown-item {
    margin-right: 0;
    margin-bottom: 6px;
    border-bottom: 1px solid #2c2c2c;
    width: 100%;
    font-size: 14px;
    color: #2c2c2c;
  }

  .mobile-function-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
  }

  .mobile-function-menu .nav-item {
    margin: 0 12px;
  }

  .mobile-function-menu .nav-item.dropdown {
    margin: 0 6px;
  }

  .mobile-function-menu .nav-item .nav-link i {
    font-size: 18px;
  }

  .offcanvas {
    width: fit-content !important;
    height: 100vh;
  }

  .offcanvas-header {
    padding: 30px 16px;
    display: flex;
    justify-content: end;
  }
}

/* ============================================================================
 * 桌機/行動切換 .desktop/.mobile/.desktopImg/.mobileImg — ★ 3ffood 斷點覆寫為 1199px(common 為 991px) (3ffood.css 2495-2527)
 * ============================================================================ */

.desktop {
  display: block;
}

.mobile {
  display: none;
}

.desktopImg {
  display: block;
}

.mobileImg {
  display: none;
}

@media (max-width: 1199px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  .desktopImg {
    display: none;
  }

  .mobileImg {
    display: block;
  }
}

/* ============================================================================
 * 頂部 logo + 購物車資訊區：.header-area / .logo / .cart-icon / .cart-img / .cart-info (3ffood.css 4318-4370)
 * ============================================================================ */

/* ============================================================================
 * 下拉容器 reset：.dropdown-menu / .dropdown-width (3ffood.css 5734-5743)
 * ============================================================================ */

/* ============================================================================
 * 多層下拉展開定位：.dropdown-submenu / .headerMenu2~3:hover>.dropdown-menu (3ffood.css 7092-7109)
 * ============================================================================ */

/* ============================================================================
 * 三福 Header 仿圖改版（@media min-width:1200px 桌機）—白底+米金漸層底線+文字選單+dropdown米金卡片 (3ffood.css 8304-8534)
 * ============================================================================ */

/* 三福 Header 仿圖改版（僅桌機） */
@media (min-width: 1200px) {
  #header {
    background: #ffffff;
    border-bottom: 1px solid #e6e1db;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  }

  #header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, #dac8b1 0%, #efe5d9 45%, #d3b89a 100%);
    opacity: 0.9;
    pointer-events: none;
  }

  #header #navBar {
    padding: 0;
  }

  #header #navBar>.container-fluid.plr-185 {
    min-height: 84px;
    padding-left: 56px;
    padding-right: 56px;
    display: flex;
    align-items: center;
  }

  #header .logo {
    padding: 0;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  #header .navLogo {
    /* 修正：原 height:auto + max-height:none 會讓 logo 依上傳圖片原始尺寸放大；改為固定 60px（width:auto 維持比例），與 default 主題桌機一致，不論圖片長寬皆維持固定高度 */
    height: 60px;
    width: auto;
    max-height: 60px;
    margin-right: 20px;
  }

  #header .navbar-collapse {
    display: block !important;
    flex: 1 1 auto;
  }

  #header #navbarSupportedContent>.navbar-nav {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  #header #navbarSupportedContent>.navbar-nav>li.headerMenu1 {
    margin: 0;
    padding: 0 11px;
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
  }

  #header #navbarSupportedContent>.navbar-nav>li.headerMenu1>.nav-link {
    padding: 0;
    color: #3e2318;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  #header #navbarSupportedContent>.navbar-nav>li.headerMenu1>.nav-link::after {
    display: none !important;
  }

  #header #navbarSupportedContent>.navbar-nav>li.headerMenu1+li.headerMenu1::before {
    content: "・";
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #a58060;
    font-size: 12px;
    line-height: 1;
  }

  #header #navbarSupportedContent>.navbar-nav>li.headerMenu1:hover>.nav-link,
  #header #navbarSupportedContent>.navbar-nav>li.headerMenu1>.nav-link:focus {
    color: #5f3025;
  }

  #header #navbarSupportedContent>.navbar-nav>li.headerMenu1+li.nav-item:not(.headerMenu1) {
    margin-left: auto;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item:not(.headerMenu1) {
    margin: 0 0 0 6px;
    padding: 0;
    flex: 0 0 auto;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item:not(.headerMenu1)>.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 3px;
    border: 1px solid #dcd8d2;
    background: #ffffff;
    color: #3e2318;
    line-height: 1;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item:not(.headerMenu1)>.nav-link i {
    margin: 0;
    font-size: 14px;
    line-height: 1;
    order: -1;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item:not(.headerMenu1)>.nav-link p {
    display: block !important;
    margin: 0;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item:not(.headerMenu1)>.dropdown-toggle::after {
    display: none !important;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item:not(.headerMenu1)>.dropdown-menu {
    border: 1px solid #e5ddd2;
    border-radius: 8px;
    margin-top: 0;
    box-shadow: 0 10px 22px rgba(34, 20, 12, 0.14);
    min-width: 150px;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item.dropdown {
    position: relative;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item.dropdown:not(.headerMenu1)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item.dropdown>.dropdown-menu {
    top: calc(100% - 1px);
    margin-top: 0 !important;
    padding: 8px 0;
    background: #fffdf9;
    border: 1px solid #e5ddd2;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(34, 20, 12, 0.14);
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item.dropdown:hover>.dropdown-menu {
    display: block;
  }

  #header #navbarSupportedContent .dropdown-menu .nav-link,
  #header #navbarSupportedContent .dropdown-menu .dropdown-item {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: #4a2a1d;
    background: transparent;
    border: 0;
    white-space: nowrap;
  }

  #header #navbarSupportedContent .dropdown-menu .nav-link.dropdown-toggle::after {
    right: 14px !important;
    color: #ad8d71 !important;
  }

  #header #navbarSupportedContent .dropdown-menu .nav-link:hover,
  #header #navbarSupportedContent .dropdown-menu .nav-link:focus,
  #header #navbarSupportedContent .dropdown-menu .dropdown-item:hover,
  #header #navbarSupportedContent .dropdown-menu .dropdown-item:focus {
    background: #6a1d15;
    color: #ffffff;
  }

  #header #navbarSupportedContent .dropdown-menu .nav-link.dropdown-toggle:hover::after,
  #header #navbarSupportedContent .dropdown-menu .nav-link.dropdown-toggle:focus::after {
    color: #ffffff !important;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item:not(.headerMenu1)>.nav-link:hover {
    border-color: #bcb2a6;
    color: #2f1a11;
    background: #fffaf3;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item>a.nav-link.btn {
    background: #6a1d15 !important;
    border-color: #6a1d15 !important;
    color: #ffffff;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item>a.nav-link.btn i {
    color: #ffffff;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item>a.nav-link.btn p {
    color: #ffffff;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item>a.nav-link.btn:hover {
    background: #4a2419;
    border-color: #4a2419;
    color: #ffffff;
  }
}

/* ============================================================================
 * 三福 Header 仿圖改版（平板 @media 992-1199px）— #header 白底+米金底線+navBar/logo/navLogo/navbar-toggler/lightMenu (3ffood.css 12976 區塊內 13075-13134；同 @media 的 #footer 部分留給 footer.css)
 * ============================================================================ */

@media (min-width: 992px) and (max-width: 1199px) {
  #header {
    background: #ffffff;
    border-bottom: 1px solid #e6e1db;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  }

  #header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, #dac8b1 0%, #efe5d9 45%, #d3b89a 100%);
    opacity: 0.9;
    pointer-events: none;
  }

  #header #navBar {
    padding: 0;
  }

#header .navLogo {
    height: auto;
    width: auto;
    max-height: 60px;
    margin-right: 0;
  }

}

/* ============================================================================
 * 三福 Header 仿圖改版（手機 @media max-width:480px）— #header 容器 14px padding + navLogo 54px (3ffood.css 14452 區塊內 14453-14462；同 @media 的 widget 部分留給 widget.css)
 * ============================================================================ */

@media (max-width: 480px) {
  #header #navBar>.container-fluid.plr-185 {
    min-height: 74px;
    padding-left: 14px;
    padding-right: 14px;
  }

  #header .navLogo {
    height: 54px;
    margin-right: 0;
  }
}

/* ============================================================================
 * 三福 Header 仿圖改版（寬螢幕 @media min-width:1400px）— 容器 96px padding + navLogo margin-right 28px + headerMenu1 padding 0 15px / nav-link 17px 等放大細修（★ user ~1900px 螢幕實際生效值；漏抽會 fallback 到 >=1200 的 56px，造成 logo/選單位置偏左）(3ffood.css 14546-14579)
 * ============================================================================ */

@media (min-width: 1400px) {
  #header #navBar>.container-fluid.plr-185 {
    padding-left: 96px;
    padding-right: 96px;
  }

  #header .navLogo {
    margin-right: 28px;
  }

  #header #navbarSupportedContent>.navbar-nav>li.headerMenu1 {
    padding: 0 15px;
  }

  #header #navbarSupportedContent>.navbar-nav>li.headerMenu1>.nav-link {
    font-size: 17px;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item:not(.headerMenu1) {
    margin-left: 8px;
  }

  #header #navbarSupportedContent>.navbar-nav>li.nav-item:not(.headerMenu1)>.nav-link {
    gap: 8px;
    min-height: 36px;
    padding: 7px 14px;
    font-size: 15px;
  }

  #header #navbarSupportedContent .dropdown-menu .nav-link,
  #header #navbarSupportedContent .dropdown-menu .dropdown-item {
    font-size: 15px;
  }
}