/* ============================================================================
 * common/header.css — 跨主題共用頂部導覽列（Header）
 * ============================================================================
 *
 * 用途：
 *   提供 6 個前台主題共用的 #header 列、品牌 logo、多層主導覽（navbar-nav 含
 *   headerMenu1~6）、下拉選單樣式（dropdown-menu / dropdown-menu1~6 / dropdown-submenu）、
 *   桌面與行動裝置切換（offcanvas-body）以及行動列 mobile-function-menu。
 *
 * 內容索引：
 *   1. #header / #header.active     固定列容器、捲動 active 狀態陰影
 *   2. .navLogo                     品牌 logo 區
 *   3. .navbar-nav                  桌面版主導覽（含 headerMenu1~6 多層下拉）
 *      - .nav-item / .nav-link 基本樣式
 *      - headerMenu1 hover 變底線
 *      - dropdown-menu2~6 動態定位
 *   4. .dropdown-menu-login         會員登入選單
 *   5. .dropdown-menu1              第一層下拉容器
 *   6. .dropdown-menu2~6            第二層以下下拉容器（含背景、邊框、padding）
 *   7. .dropdown-submenu            側展開（右側 100%）子選單
 *   8. @media (max-width: 991px)    行動版：navbar-collapse 隱藏、offcanvas
 *      展開、子選單背景灰、mobile-function-menu 顯示
 *   9. .dropdown-menu / .dropdown-width    通用下拉容器 reset 與固定寬度
 *
 * 使用頁面：前台所有頁面（透過 web.layouts.app + sites/default/header.blade.php 載入）
 * 相依 vendor：Bootstrap 5 navbar / dropdown / offcanvas
 *
 * 載入順序（最先到最後，後者覆寫前者）：
 *   widgets.css -> default.css（舊單檔，凍結中）-> common/base.css ->
 *   themes/default/base.css -> common/header.css（本檔）->
 *   themes/default/header.css -> 其他 common/themes 檔 -> custom.css
 *
 * 抽取來源：public/web/css/default.css 三個區段：
 *   - line 2043~2512：主 header / nav / dropdown / mobile 區段
 *   - line 5825~5836：.dropdown-menu reset / .dropdown-width
 *   - line 7090~7110：.dropdown-submenu / .headerMenu2~3 hover 展開
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 5.2）
 * ============================================================================
 */


/* ============================================================================
 * 區段 1：主 header / nav / dropdown / mobile 區段
 *   抽取自 default.css line 2043~2512
 *   對應 blade：resources/views/sites/default/header.blade.php
 * ============================================================================
 */

#header {
  background: rgb(255, 255, 255);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3000;
  border-bottom: 1px solid #33333312;
}

#header.active {
  background: rgb(255, 255, 255);
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.navLogo {
  display: block;
  height: 60px;
  margin-right: 30px;
}

@media screen and (max-width: 768px) {
  .navLogo {
    height: 62px;
    margin-right: 12px;
  }
}

.navbar-nav {
  align-items: center;
}

.navbar-nav .nav-item {
  margin-right: 20px;
  font-size: 16px;
}

.navbar-nav .nav-item.headerMenu1 {
  border: none;
  min-width: auto;
  width: fit-content;
  text-align: center;
  position: relative;
}

#header.active .navbar-nav .nav-item.headerMenu1 {
  border: none;
}

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

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

#header.active .navbar-nav .nav-item .nav-link {
  color: #2c2c2c;
}

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

/* 使用 inline-block 確保寬度正確計算 */
.navbar-nav .nav-item.headerMenu1>.nav-link {
  position: relative;
  display: inline-block;
}

/* 使用 scaleX 替代 width 動畫，效能更好且不會有寬度計算問題 */
.navbar-nav .nav-item.headerMenu1>.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2c2c2c;
  transition: transform 0.3s ease;
  transform: scaleX(0);
  transform-origin: center;
}

.navbar-nav .nav-item.headerMenu1:hover>.nav-link::after {
  transform: scaleX(1);
}

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

.navbar-nav .nav-item.headerMenu1:hover .nav-link {
  color: #2c2c2c;
  background: transparent;
}

.navbar-nav .nav-item.headerMenu1:hover .headerMenu2 .nav-link {
  background: #ffffff;
}

#header.active .navbar-nav .nav-item.headerMenu1:hover .nav-link {
  color: #2c2c2c;
  background: transparent;
}

#header.active .navbar-nav .nav-item.headerMenu1 .headerMenu2 .nav-link {
  background: #ffffff;
  color: #333333;
}

#header.active .navbar-nav .nav-item.headerMenu1 .headerMenu2:hover .nav-link {
  color: #2c2c2c;
}

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

.navbar-collapse {
  flex-grow: 0;
}

.dropdown:hover .dropdown-menu-login {
  display: block;
  margin-top: 0;
  padding: 8px 0;
  font-size: 15px;
  min-width: 120px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* 登入選單項目樣式 */
.dropdown-menu-login .dropdown-item {
  padding: 10px 16px;
  color: #333333;
  transition: all 0.15s ease;
  font-size: 14px;
}

.dropdown-menu-login .dropdown-item:hover {
  background: #4a4a4a;
  color: #ffffff;
}

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

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

}

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

.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: 140px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
}

/* 第二、第三層選單美化 - 加強優先級 */
#header .navbar-nav .dropdown-menu,
#header .navbar-nav .dropdown-menu.dropdown-menu1,
#header .navbar-nav .dropdown-menu.dropdown-menu2,
#header .navbar-nav .dropdown-menu.dropdown-menu3 {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  min-width: 140px;
  margin-top: 0;
}

/* 下拉選單項目樣式 - 加強優先級 */
#header .navbar-nav .dropdown-menu li.nav-item {
  padding: 0;
  margin: 0;
}

#header .navbar-nav .dropdown-menu .nav-link,
#header .navbar-nav .dropdown-menu .dropdown-item {
  padding: 10px 35px 10px 16px;
  color: #333333;
  transition: all 0.15s ease;
  display: block;
  font-size: 14px;
  position: relative;
  background: transparent;
  border-radius: 0;
}

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

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

/* hover 效果 - 深灰色背景 + 白字 */
#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: #4a4a4a;
  color: #ffffff;
}

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

/* 語言選單和其他標準下拉選單 Hover 顯示 (桌面版) */
@media (min-width: 1200px) {
  #header .navbar-nav .nav-item.dropdown:hover>.dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

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

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

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

.dropdown:hover .dropdown-menu .nav-link.dropdown-toggle {
  position: relative;
}

.dropdown .dropdown-submenu {
  padding: 0;
  margin: 0;
}

.dropdown .dropdown-submenu .nav-link {
  padding: 10px 16px;
  font-size: 15px;
  color: #333333;
  transition: all 0.2s ease;
}

.dropdown .dropdown-submenu:hover>.nav-link {
  background: #f5f5f5;
  color: #2c2c2c;
}

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

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

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

.dropdown:hover>.dropdown.dropdown-submenu>.dropdown-menu {
  display: block;
  left: 100%;
  top: 0;
}

@media screen and (max-width: 991px) {
  .dropdown-menu.dropdown-menu2 {
    opacity: 1;
    padding-top: 0;
  }

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

  .offcanvas-body .headerMenu2.nav-item.dropdown-submenu .dropdown-submenu {
    background: #f7f7f7;
  }

  .offcanvas-body .headerMenu2.nav-item.dropdown-submenu .dropdown-submenu.dropdown-menu {
    background: #f7f7f7;
  }
}

.dropdown .dropdown-menu .dropdown-item {
  font-size: 15px;
  padding: 10px 15px;
  min-width: 120px;
}

.dropdown .dropdown-menu .dropdown-item:active {
  background: #ec3b05;
}

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

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

.mobile-function-menu {
  display: none;
}

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

  .navbar-collapse {
    display: none;
  }

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

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

  .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;
    height: 100vh;
  }

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


/* ============================================================================
 * 區段 2：通用 .dropdown-menu reset 與寬度 utility
 *   抽取自 default.css line 5825~5836
 * ============================================================================
 */

.dropdown-menu {
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.dropdown-width {
  width: 270px;
}


/* ============================================================================
 * 區段 3：.dropdown-submenu 側展開 + .headerMenu2~3 hover 顯示
 *   抽取自 default.css line 7090~7110
 * ============================================================================
 */

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

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

.headerMenu2:hover>.dropdown-menu2,
.headerMenu3:hover>.dropdown-menu3 {
  display: block;
}




/* 註：.desktop / .mobile / .desktopImg / .mobileImg（default.css line 2514~2546）
 * 為 RWD 通用 visibility utility，非 header 專屬，留在 default.css；
 * 未來若整合進 base 可在 issue518 後續另案處理。 */

/* === Phase B Batch 2: .header-area / .logo + @media（抽自 default.css 4337-4393）=== */

.header-area {
  z-index: 999;
  position: relative;
  font-size: 18px;
}

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

@media (max-width: 767px) {
  .logo {
    padding: 2px 0;
    text-align: center;
  }
}

.logo img {
  transition: all 0.3s ease 0s;
}

.cart-icon {
  font-size: 20px;
  line-height: 20px;
}

.cart-img {
  position: relative;
}

.cart-info {
  padding: 10px 0 0 20px;
}

.cart-info h6 {
  color: #666;
  font-weight: 500;
}

.cart-info p {
  margin: 0;
}

.cart-info p>span {
  display: inline-block;
  width: 56px;
}

.cart-info span strong {
  float: right;
  padding-right: 10px;
}


/* ============================================================================
 * 補充區段：#header RWD 跨主題共用層
 * ============================================================================
 *
 * 原因：
 *   舊 default.css 三個 @media 區段（line 9072-9188 / 9582-9625）內含
 *   #header #navBar / #header .logo / #header .navLogo / #header .navbar-toggler
 *   / #header .lightMenu 跨 viewport RWD 規則，影響所有頁面 header 視覺。
 *
 *   原拆檔時誤抽到 common/pages/shoppingCart.css，導致僅 /shoppingCarts 路由
 *   生效，其他路由（products / posts / orders / login / register / profile 等）
 *   header 在 992-1199 / 768-991 / ≤480 三個 viewport 範圍下完全沒套用，
 *   logo 變小、navbar-toggler 位置偏移、container padding 錯誤。
 *
 *   特別：≤480px 的 #header #navBar>.container-fluid.plr-185 padding 14px
 *   是 iPhone 14 Pro Max (430px) 等典型手機 viewport 的 header 寬度設定，
 *   若漏抽 .plr-185 會 fallback 到 max-width:767 的 padding: 0，header
 *   橫向沒有 padding 造成 logo 緊貼左邊。
 *
 * 修法：
 *   把 #header * 規則抽到本檔末段（layout 共用層，所有頁面皆載入）。
 *   #page-content / #footer 規則暫留在 shoppingCart.css，未來如發現視覺
 *   差異再循同樣模式遷移到對應 common/widget.css / common/footer.css。
 *
 * 抽取自：default.css line 9072-9108 + 9136-9172 + 9582-9592
 * ============================================================================
 */

@media (min-width: 992px) and (max-width: 1199px) {
  #header #navBar>.container-fluid.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: 991px) {
  #header #navBar>.container-fluid.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: 480px) {
  #header #navBar>.container-fluid.plr-185 {
    min-height: 72px;
    padding-left: 14px;
    padding-right: 14px;
  }

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