/* =========================================================
   shared-subnav.css
   用途：所有單元頁面「右側內容上方次選單」共用樣式
   適用單元：關於華城 / 投資人專區 / 華城技術 / 產品介紹…
   載入順序：main.css → menu.css → slide.css → shared-sidebar.css → shared-subnav.css

   只負責「右側內容上方次選單」的版型與互動，不含任何單元專屬內容樣式
   （財報手風琴、新聞列表、認證表格…請放各單元 css）。
   使用通用 class，不使用 investor / about / tech 等單元限定名稱。

   HTML 結構：
     <nav class="subnav">

       <!-- 可選：若此區域有標題 -->
       <div class="subnav-header">
         <h2 class="subnav-title">財務資訊</h2>
       </div>

       <ul class="subnav-tabs">
         <li class="subnav-item">
           <a class="subnav-link active" href="...">中文財務報告</a>
         </li>
         <li class="subnav-item">
           <a class="subnav-link" href="...">英文財務報告</a>
         </li>
         <!-- 外部連結：加 .external，箭頭圖示由 CSS 自動產生，HTML 不需寫 -->
         <li class="subnav-item">
           <a class="subnav-link external" href="..." target="_blank" rel="noopener">查詢損益表</a>
         </li>
       </ul>

       <!-- 手機版（575px 以下顯示，桌機由 CSS 隱藏） -->
       <select class="mobile-subnav-select" aria-label="次選單選擇">...</select>

     </nav>

   注意：
   - state（active / external）掛在 <a class="subnav-link"> 上，與 shared-sidebar.css
     的 .side-nav-link.active 慣例一致。
   - 舊版 .submenuBox / .submenu-items 在 HTML 改版前維持原有 CSS 負責渲染，
     本檔不覆蓋舊版 class，兩者並行直到頁面 HTML 逐步更新。
========================================================= */

/* =========================================================
   Design tokens
   各單元可在自己的 CSS 裡覆寫，限定作用範圍。
   例：.investor-financial-page .subnav { --subnav-primary: #1a3e6b; }
========================================================= */
:root {
  --subnav-primary:       #0c596f;
  --subnav-primary-deep:  #083d4d;
  --subnav-accent:        #19a7b8;
  --subnav-text:          #263c46;
  --subnav-line:          rgba(12, 89, 111, 0.18);
  --subnav-tab-h:         58px;
  --subnav-tab-fs:        17px;
}

/* =========================================================
   Subnav 容器
   max-width + overflow-x: hidden 防止內部內容撐破父欄
========================================================= */
.subnav {
  margin: 0 0 36px;
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================================================
   Header（標題區，選用）
========================================================= */
.subnav-header {
  margin-bottom: 18px;
}

.subnav-title {
  position: relative;
  margin: 0;
  padding: 0 0 13px;
  color: var(--subnav-primary-deep);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: left;
  border: 0;
}

/* 標題底線（漸層短線） */
.subnav-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--subnav-primary), var(--subnav-accent));
}

/* =========================================================
   Tabs 列
========================================================= */
.subnav-tabs {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--subnav-line);
}

/* =========================================================
   單一項目（li）
   right divider 掛在 item 上，讓 .subnav-link::after 空出來給外部箭頭
========================================================= */
.subnav-item {
  flex: 1;
  position: relative;
}

/* 項目右側分隔線 */
.subnav-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 24px;
  background: var(--subnav-line);
  transform: translateY(-50%);
}

/* 最後一個項目不需右側分隔線 */
.subnav-item:last-child::after {
  display: none;
}

/* =========================================================
   連結（a）
========================================================= */
.subnav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--subnav-tab-h);
  padding: 0 18px;
  color: var(--subnav-text);
  font-size: var(--subnav-tab-fs);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.22s ease, background 0.22s ease;
}

/* 底部 active 底線（漸層，預設隱藏） */
.subnav-link::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--subnav-primary), var(--subnav-accent));
  opacity: 0;
  transform: scaleX(0.36);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

/* =========================================================
   連結 hover
========================================================= */
.subnav-link:hover {
  color: var(--subnav-primary);
  background: rgba(12, 89, 111, 0.025);
}

.subnav-link:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* =========================================================
   連結 active
========================================================= */
.subnav-link.active {
  color: var(--subnav-primary);
  background: rgba(12, 89, 111, 0.025);
}

.subnav-link.active::before {
  opacity: 1;
  transform: scaleX(1);
}

/* =========================================================
   External 連結（外部連結）
   箭頭圖示由 CSS 自動加上，HTML 不需另寫 <span>。
   ::after 作為 flex 子元素接在文字之後，自動置中。
========================================================= */
.subnav-link.external::after {
  content: "\2197";
  margin-left: 6px;
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1;
}

/* =========================================================
   Mobile subnav select
   桌機 / 平板：隱藏；手機 575px 以下：顯示
========================================================= */
.mobile-subnav-select {
  display: none;
}

/* =========================================================
   RWD — 1200px 以下：tabs 可換行（最多三欄）
========================================================= */
@media (max-width: 1199.98px) {
  .subnav-tabs {
    flex-wrap: wrap;
    border-bottom: 0;
  }

  .subnav-item {
    flex: 0 0 33.333%;
  }

  /* 每行最後一欄移除右側分隔線 */
  .subnav-item:nth-child(3n)::after {
    display: none;
  }

  /* 換行後每個項目自帶 border-bottom */
  .subnav-link {
    border-bottom: 1px solid var(--subnav-line);
  }
}

/* RWD — 768px 以下：兩欄 */
@media (max-width: 767.98px) {
  .subnav-title {
    font-size: 1.6rem;
  }

  .subnav-item {
    flex: 0 0 50%;
  }

  /* 重設 3n 規則，改用 2n */
  .subnav-item:nth-child(3n)::after {
    display: block;
  }

  .subnav-item:nth-child(2n)::after {
    display: none;
  }

  .subnav-link {
    min-height: 48px;
    font-size: 15px;
    padding: 0 12px;
  }
}

/* RWD — 576px 以下：隱藏 tabs，改用下拉選單 */
@media (max-width: 575.98px) {
  /* 標題縮小 */
  .subnav-header {
    margin-bottom: 10px;
  }

  .subnav-title {
    font-size: 1.35rem;
    padding-bottom: 10px;
  }

  /* 隱藏桌機 / 平板版頁籤列 */
  .subnav-tabs {
    display: none;
  }

  /* 顯示手機版下拉選單：全寬、約 46px 高，box-sizing 避免撐破畫面 */
  .mobile-subnav-select {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 46px;
    box-sizing: border-box;
    padding: 0 40px 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--subnav-text);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230c596f' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    border: 1px solid var(--subnav-line);
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  .mobile-subnav-select:focus {
    border-color: var(--subnav-accent);
    box-shadow: 0 0 0 3px rgba(25, 167, 184, 0.15);
  }
}