/* ==========================================================================
   X720 Navbar Styles (v2.6)
   說明：
   1. 包含導覽列 (Navbar) 與側邊選單 (Offcanvas) 的樣式。
   2. 修正 iPad Pro (1024px) 顯示問題：強制覆寫 Bootstrap 的 d-lg-* 行為。
   3. [New] 整合 JS 動態生成元素的樣式 (Dropdown, Mobile Groups)。
   ========================================================================== */

/* =========================================
   1. 共用基礎設定 (Base Styles)
   ========================================= */

/* 導覽列主容器 */
.custom-navbar {
  background-color: var(--primary-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: height 0.3s ease;
  padding: 0;
  width: 100%;
  /* 允許 Desktop 版的登入按鈕向下凸出 */
  overflow: visible;
}

/* 內容寬度容器 */
.nav-container {
  width: 100%;
  /* 預設歸零，具體 padding 由各斷點決定 */
  padding: 0;
  margin: 0 auto;
}

/* Logo 圖片通用設定 */
.nav-logo {
  width: auto;
  object-fit: contain;
  display: block;
}

/* --- 登入區塊 (Login Button) 基礎 --- */
.login-box-wrapper {
  background-color: var(--secondary-color-1);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 按鈕內容 (Icon + Text) */
.login-content {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 防止誤點擊內部元素 */
}

/* 將黑色 Icon 轉為白色 */
.login-icon {
  filter: brightness(0) invert(1);
  display: block;
}

/* 隱藏原本的預設 User Icon 如果它是 <img> 且被隱藏 */
.login-icon[style*="display: none"] {
  display: none !important;
}

/* 文字頭像樣式 (JS 動態生成) */
.avatar-text-icon {
  width: 32px;
  height: 32px;
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  flex-shrink: 0;
  margin-right: 8px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* 導覽列連結文字 */
.nav-link {
  color: var(--color-white) !important;
  font-size: var(--fs-body-focus);
  font-weight: var(--fw-regular);
  opacity: 0.9;
  white-space: nowrap;
}

.nav-link:hover {
  opacity: 1;
}

/* --- 漢堡按鈕 (Hamburger) --- */
.hamburger-btn {
  width: 46px; /* Figma 參數 */
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
}

.hamburger-btn img {
  width: 46px; /* 滿版呈現 */
  height: 46px;
  display: block;
}

/* =========================================
   2. 電腦版 (Desktop) ≥ 1025px
   ★ 修改：起點改為 1025px (避開 iPad Pro 直式)
   ========================================= */
@media (min-width: 1025px) {
  .custom-navbar {
    height: var(--nav-height-desktop); /* 80px */
    align-items: flex-start;
  }

  .nav-container {
    /* Desktop 左右內縮設定 (通常為 10%) */
    padding-left: var(--nav-desktop-padding-x);
    padding-right: var(--nav-desktop-padding-x);
    max-width: 100%;
  }

  .nav-logo {
    height: 50px;
    align-self: center; /* 垂直置中修正 */
  }

  .navbar-brand {
    margin-right: auto;
    align-self: center;
  }

  .desktop-menu {
    align-self: center;
  }

  /* --- 登入按鈕：懸掛式造型 --- */
  .login-box-wrapper {
    width: 129px;
    height: var(--login-btn-height-desktop); /* 100px */
    margin-top: 0;
    /* 底部圓角造型 */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .login-box-wrapper:hover {
    background-color: #1f2a30;
  }

  .login-content {
    flex-direction: column; /* Icon 上，文字下 */
    gap: 9px;
  }

  .login-icon {
    width: 32px;
    height: 32px;
  }

  .login-text {
    font-size: var(--fs-body-base);
    font-weight: var(--fw-regular);
  }

  /* 文字顯示控制：顯示完整文字 */
  .text-full {
    display: inline-block;
  }
  .text-short {
    display: none;
  }
}

/* =========================================
   3. 平板版 (Tablet) 768px ~ 1024px
   ★ 修改：終點 1024px，並強制覆寫 Bootstrap 顯示邏輯
   ========================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .custom-navbar {
    height: var(--nav-height-tablet); /* 56px */
    align-items: center;
  }

  .nav-container {
    /* 左邊留白 (參考 Figma X:24)，右邊歸零 */
    padding-left: 24px;
    padding-right: 0;
    position: relative; /* 供 Logo 絕對定位參考 */
  }

  .nav-logo {
    height: 36px;
  }

  /* Logo 絕對置中 */
  .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* ★★★ 強制修正 iPad Pro (1024px) 顯示問題 ★★★ */
  /* 這裡使用 !important 來覆蓋 Bootstrap d-lg-flex 的效果 */
  .custom-navbar .desktop-menu {
    display: none !important;
  }

  /* 這裡使用 !important 來覆蓋 Bootstrap d-lg-none 的效果 */
  .custom-navbar .hamburger-btn {
    display: flex !important;
  }

  /* --- 登入按鈕：填滿高度且貼右 --- */
  .login-box-wrapper {
    height: 100%;
    padding: 0 24px;
    width: auto;
    min-width: 130px;
    border-radius: 0;
  }

  .login-content {
    flex-direction: row; /* 橫向排列 */
    gap: 8px;
  }

  .login-icon {
    width: 24px;
    height: 24px;
  }

  .login-text {
    font-size: var(--fs-body-md);
  }

  /* 文字顯示控制：顯示完整文字 */
  .text-full {
    display: inline-block;
  }
  .text-short {
    display: none;
  }
}

/* =========================================
   4. 手機版 (Mobile) < 768px
   ========================================= */
@media (max-width: 767px) {
  .custom-navbar {
    height: var(--nav-height-mobile); /* 46px */
    align-items: center;
  }

  .nav-container {
    /* 左邊留白，右邊歸零 */
    padding-left: 15px;
    padding-right: 0;
  }

  .nav-logo {
    height: 26px;
  }

  /* --- 登入按鈕：填滿高度且貼右 --- */
  .login-box-wrapper {
    height: 100%;
    padding: 0 15px;
    width: auto;
    border-radius: 0;
  }

  .login-content {
    flex-direction: row;
    gap: 6px;
  }

  .login-icon {
    width: 20px;
    height: 20px;
  }

  .login-text {
    font-size: 13px;
  }

  /* 文字顯示控制：只顯示簡短文字("登入") */
  .text-full {
    display: none;
  }
  .text-short {
    display: inline-block;
  }
}

/* =========================================
   5. 側邊選單樣式 (Offcanvas Menu)
   ========================================= */
.custom-mobile-menu {
  background-color: var(--secondary-color-1) !important;
  color: var(--color-white) !important;
  border: none;

  /* 預設平板寬度 55% */
  --bs-offcanvas-width: 55%;
  width: 55% !important;

  max-width: none;
}

/* 選單連結區域 */
.offcanvas-menu-links {
  padding: 20px 24px;
}

.mobile-menu-item {
  display: block;
  color: var(--color-white);
  font-size: var(--fs-body-focus);
  font-weight: var(--fw-regular);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: color 0.2s;
}

.mobile-menu-item:hover {
  color: var(--color-white);
}

/* 選單底部資訊區域 */
.offcanvas-menu-footer {
  padding: 24px;
  background-color: transparent;
}

.brand-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

.brand-info {
  font-size: var(--fs-body-base);
  color: var(--color-white);
  line-height: 1.5;
}

/* 社群 Icon */
.social-icons img {
  width: 32px;
  height: 32px;
  transition: opacity 0.2s;
}

.social-icons img:hover {
  opacity: 0.8;
}

/* 底部 AA 標章與連結 */
.footer-bottom {
  margin-top: 10px;
}

.badge-aa {
  height: 30px;
  width: auto;
}

.policy-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-body-sm);
  text-decoration: underline;
  margin-right: 10px;
}

.policy-links a:hover {
  color: var(--color-white);
}

/* --- 手機版選單覆寫 (< 768px) --- */
@media (max-width: 767px) {
  /* 調整選單寬度為 80% */
  .custom-mobile-menu {
    --bs-offcanvas-width: 80%;
    width: 80% !important;
  }

  /* 手機版字體微調 */
  .mobile-menu-item {
    font-size: var(--fs-body-base);
  }

  .brand-title {
    font-size: var(--fs-h3);
  }

  .brand-info {
    font-size: var(--fs-body-sm);
  }
}

/* =========================================
   6. [New] JS 動態生成元素樣式
   說明：整合 dropdown 與 mobile group 樣式
   ========================================= */

/* --- Desktop Dropdown 修正 --- */

/* 1. 將帶有下拉選單的連結改為垂直排列 (Flex Column) */
.custom-navbar .nav-link.dropdown-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px; /* 設定文字與下方箭頭的間距 */
  line-height: 1.2; /* 稍微收緊行高避免導覽列過度長高 */
}

/* 2. 讓 Dropdown Toggle 的箭頭變成白色並置中 */
.custom-navbar .nav-link.dropdown-toggle::after {
  color: var(--color-white);
  margin-left: 0; /* 移除原本 Bootstrap 預設在右側的 margin */
  vertical-align: middle;
  border-top-color: var(--color-white); /* Bootstrap 使用 border 畫箭頭 */
}

/* 下拉選單本體 */
.custom-navbar .dropdown-menu {
  margin-top: 15px; /* 避免貼太近 */
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
  padding: 8px 0;
}

/* 下拉選項連結 */
.custom-navbar .dropdown-item {
  padding: 10px 24px;
  font-size: var(--fs-body-base);
  color: var(--secondary-color-1); /* 深色文字 */
  font-weight: var(--fw-regular);
}

.custom-navbar .dropdown-item:hover {
  background-color: var(--secondary-color-2); /* 淺色背景 */
  color: var(--primary-color);
}

/* --- Mobile Menu Group (手機版群組) --- */

/* 群組標題 (取代 JS 中的 inline style) */
.mobile-group-header {
  pointer-events: none; /* 不可點擊 */
  padding-top: 15px; /* 增加與上方區塊的間距 */
  padding-bottom: 5px;

  /* 覆寫 Bootstrap text-secondary，確保在深色選單中清楚可見 */
  color: rgba(255, 255, 255, 0.6) !important;

  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: none !important; /* 標題下方不畫線 */
}

/* 子選單縮排項目 (透過 ps-4 class 識別) */
/* 這些是群組底下的連結，字體稍微縮小一點 */
.mobile-menu-item.ps-4 {
  font-size: 0.95em;
  opacity: 0.9;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 線條比主選單淡 */
}

@media (max-width: 1025px) {
  /* 登入後的頭像樣式 */
  .login-icon.logged-in-avatar,
  .avatar-text-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
  }

  /* 登入後文字隱藏的配套 */
  #btnLoginTrigger:has(.login-text[style*="display: none"]) {
    width: 40px; /* 如果只剩頭像，容器可以變圓或變小 */
    justify-content: center;
  }
  .login-box-wrapper {
    border-radius: 4px;
  }
}