/* ============================================================================
 * themes/custom-kgtwbeef/header.css — kgtwbeef 主題 header 層完整抽取
 * ============================================================================
 *
 * 用途：
 *   承接舊 kgtwbeef.css 的 header / nav / dropdown 段落(#723 註:原 offcanvas /
 *   mobile menu 相關規則經盤點為死碼——行動選單走自訂 #mobile-sidebar,DOM 無
 *   .offcanvas* 元素——已於 #723 Phase 2 清除)
 *   段落內容，作為 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——
 *                     此三者於 #723 Phase 2 清除:皆為現行 DOM 無目標或作用於
 *                     <1200 已隱藏元素的死碼）
 *   - 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 提醒：
 *   common/header.css 對應 #header / .navbar 規則可能有 padding / margin 等
 *   default-specific 屬性滲透，kgtwbeef 抽取後若發現視覺差異，需明確覆寫。
 *
 * 載入順序：
 *   common/header.css -> themes/custom-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;
}


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



/* ============================================================================
 * 區段 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;
  }
}

/* ============================================================================
 * 平板／手機 header 幾何 RWD（992~1199 / 768~991 / ≤479）
 * ----------------------------------------------------------------------------
 * 2026-08-10 自 themes/custom-kgtwbeef/widget.css 搬入。原先寄居在 widget.css 的
 * 「區段 D」內，與 #page-content 標題字級規則共用同一組 @media；那三段 @media
 * 同時含 #header（header 幾何）與 #page-content（widget／貼文標題字級）兩種
 * 職責，導致「改 header 卻要去 widget.css 找」。本次依職責歸位：
 *   - #header 幾何 → 本檔（下方）
 *   - .widget-block-title 字級 → widget.css 的 04-title 分區
 *   - .blog-item-2 貼文標題與按鈕尺寸 → blocks.css
 *
 * 斷點與本檔既有的 @media (min-width: 1200px) 互斥，與 common/header.css 的
 * 對應規則之先後關係亦不變（本檔在 common 之後載入，規則置於檔末）。
 * ============================================================================ */

@media (min-width: 992px) and (max-width: 1199.98px) {
  #header #navBar>.header-navbar-inner.plr-185 {
    min-height: 82px;
    padding-left: 36px;
    padding-right: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

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

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

  #header .navbar-toggler {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #header .navbar-toggler:focus {
    box-shadow: none;
  }

  #header .lightMenu {
    display: block;
    width: 34px;
    height: 34px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #header #navBar>.header-navbar-inner.plr-185 {
    min-height: 78px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

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

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

  #header .navbar-toggler {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #header .navbar-toggler:focus {
    box-shadow: none;
  }

  #header .lightMenu {
    display: block;
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 479.98px) {
  #header #navBar>.header-navbar-inner.plr-185 {
    min-height: 72px;
    padding-left: 14px;
    padding-right: 14px;
  }

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