/* ============================================================================
 * themes/kgtwbeef/header.css — kgtwbeef 主題 header 層完整抽取
 * ============================================================================
 *
 * 用途：
 *   完整承接舊 kgtwbeef.css 的 header / nav / dropdown / offcanvas / mobile menu
 *   段落內容，作為 kgtwbeef 主題對 common/header.css 的覆寫與補充層。
 *
 * 抽取策略（按 dgfactor 模式 — 完整段落抽取）：
 *   舊 kgtwbeef.css 已凍結停用（css.blade.php 改用 themeCssUrls 模組化載入，不再直接載入舊單檔），其 header 段落
 *   SHALL 完整抽到本檔。本檔載入順序在 common/header.css 之後，重複規則由
 *   kgtwbeef 版本覆寫；不重複的規則為 kgtwbeef 專屬。
 *
 * 抽取來源：public/web/css/kgtwbeef.css
 *   - line 1956-2253：#header（含 .navbar / .navbar-nav / .navbar-brand /
 *                     .nav-item / .nav-link / .dropdown / .dropdown-menu /
 *                     .dropdown-submenu / .headerMenu1~6 多層下拉 /
 *                     .mobile-function-menu / .offcanvas / @media 768/991 RWD）
 *   - line 3297-3343：.header-area / .logo / .cart-icon / .cart-img / .cart-info
 *                     （頂部 logo + 購物車資訊區）
 *
 * 跳過範圍：
 *   - line 2255-2287：.desktop / .mobile / .desktopImg / .mobileImg
 *                     共用 utility，已包含在 common/base.css 中，毋須重複
 *
 * Cascade 提醒（volvo 教訓）：
 *   common/header.css 對應 #header / .navbar 規則可能有 padding / margin 等
 *   default-specific 屬性滲透，kgtwbeef 抽取後若發現視覺差異，需明確覆寫。
 *
 * 載入順序：
 *   common/header.css -> themes/kgtwbeef/header.css（本檔）-> 其他
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 9.2）
 * ============================================================================
 */

#header {
  background: transparent;
  border-bottom: 1px solid #fefefe;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3000;
}

#header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.3725490196);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

#header>* {
  position: relative;
  z-index: 1;
}

.navbar-nav .nav-item .nav-link {
  color: #333333;
}

.navbar-nav .nav-item .nav-link p {
  font-size: 16px;
  color: #333333;
}

.navbar-nav .nav-item:hover .nav-link {
  color: #E8380C;
}

.navbar-nav .nav-item:hover .nav-link p {
  color: #E8380C;
}

.dropdown:hover .dropdown-menu-login {
  display: block;
  margin-top: 0;
  padding-top: 8px;
  font-size: 15px;
  min-width: 120px;
}

.headerMenu2.dropdown.show .dropdown-menu2,
.headerMenu3.dropdown.show .dropdown-menu3,
.headerMenu4.dropdown.show .dropdown-menu4,
.headerMenu5.dropdown.show .dropdown-menu5,
.headerMenu6.dropdown.show .dropdown-menu6 {
  display: block;
  padding-top: 0;
  width: fit-content;
  min-width: 120px;
}

.dropdown .dropdown-submenu {
  padding: 10px 15px;
  margin: 0;
}

.navbar-nav .nav-item:hover .dropdown-submenu:hover .nav-link {
  color: #E8380C;
}

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

.dropdown:hover>.dropdown.dropdown-submenu>.dropdown-menu {
  display: none;
}

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

.navbar-nav .nav-item .dropdown-submenu .nav-link {
    color: #E8380C;
    border-color: #E8380C;
  }

}

.dropdown-menu .nav-link.dropdown-toggle::after {
  transform: rotate(-90deg);
}

@media screen and (max-width: 991px) {
  .dropdown-menu .nav-link.dropdown-toggle::after {
    transform: rotate(0deg);
  }
}

@media screen and (max-width: 768px) {
  .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 #E8380C;
  }

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

  .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 #E8380C;
    width: 100%;
    font-size: 14px;
    color: #E8380C;
  }

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

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

/* ============================================================================
 * 區段 2：.header-area + logo + cart-info（line 3297-3343）
 * ============================================================================ */

.logo {
  padding: 20px 0;
  transition: all 0.3s ease 0s;
}

/* ============================================================================
 * Dropdown hover 顏色 cascade fix（kgtwbeef 品牌覆寫）
 * ----------------------------------------------------------------------------
 * common/header.css 從 default.css 抽取帶入：
 *   #header .navbar-nav .dropdown-menu .nav-link:hover { background: #4a4a4a; color: #fff }
 * 此規則 specificity 含 #header ID 較高，蓋過 kgtwbeef.css line 2009 的
 *   .navbar-nav .nav-item:hover .nav-link { color: #E8380C }
 * 導致 kgtwbeef header dropdown hover 顯示為深灰底 + 白字，非 kgtwbeef 預期的紅字。
 *
 * 本檔以同等 specificity（含 #header）覆寫為透明底 + 紅字 #E8380C，
 * 對齊 cm12 單檔時代僅由 kgtwbeef.css 載入時的視覺。
 * ============================================================================ */

#header .navbar-nav .dropdown-menu .nav-link:hover,
#header .navbar-nav .dropdown-menu .nav-link:focus,
#header .navbar-nav .dropdown-menu .dropdown-item:hover,
#header .navbar-nav .dropdown-menu .dropdown-item:focus {
  background: transparent;
  color: #E8380C;
}

#header .navbar-nav .dropdown-menu .nav-link.dropdown-toggle:hover::after {
  color: #E8380C;
}

/* ============================================================================
 * 側欄索引式 Mega Menu — kgtwbeef 品牌色覆寫（品牌紅 #E8380C）
 * 僅覆寫顏色，版面結構（雙欄／寬度／捲動）一律沿用 common/header.css
 * ==========================================================================*/
@media (min-width: 1200px) {
  /* 搜尋框 focus 套品牌色 */
  .mega-menu-search-input:focus {
    border-color: #E8380C;
  }

  /* 左欄：hover / active 套品牌紅字（卡片底與字重沿用 common） */
  .mega-menu-rail-item:hover > .mega-menu-rail-link {
    background: #fdecea;
    color: #E8380C;
  }

  .mega-menu-rail-item.active > .mega-menu-rail-link {
    background: #ffffff;
    color: #E8380C;
  }

  /* 右欄：分類標題 hover、第三層連結 hover、查看全部套品牌色 */
  .mega-menu-panel-title:hover {
    color: #E8380C;
  }

  .mega-menu-group-title:hover {
    color: #E8380C;
  }

  .mega-menu-grouplist-link:hover {
    color: #E8380C;
  }

  .mega-menu-viewall {
    color: #E8380C;
    border-color: #f3b8ad;
  }

  .mega-menu-viewall:hover {
    background: #fdecea;
    border-color: #E8380C;
    color: #E8380C;
  }
}