/* 由 scripts/port-templates.mjs 產生，請勿手動編輯。

   語言站的選單標籤會換到第二行，但 style.css:243 的分頁籤是照單行設計的
   （height:50px; line-height:50px），第二行就掉出圓角色塊、壓到輪播上。

   舊站其實已經寫過正確的解法：
     @media (min-width:768px) and (max-width:979px)
       .navbar_ .nav > li > a { display:table-cell; vertical-align:middle; line-height:14px; }
   但只放在平板那個斷點裡，桌機（>=980px）沿用全域的 line-height:50px。
   也就是說舊站的英文版在桌機上就是壞的，平板反而是好的。

   所以這裡只補桌機那一段，平板維持舊站原樣 —— 那條規則本來就正常，
   蓋掉它只會多冒風險。高度、margin、圓角、hover/active 的幾何全部不動，
   改的只有「文字怎麼在框裡排」。 */

@media (min-width: 980px) {
  .navbar_ .nav > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    padding: 0 6px;
    box-sizing: border-box;

    /* 最長的標籤（英文的 Customer Service Center）會排到三行，約 55px，
       塞不進原本 50px 的框，文字會頂到圓角邊緣。
       把分頁籤往上長 10px（margin-top 10→0、height 50→60），**底部仍然
       對齊 60px 的 .menu_wrapper**，所以下緣與輪播的距離一個像素都沒變，
       只是分頁籤本身高一點。上方是背景圖，有的是空間。 */
    margin-top: 0;
    height: 60px;
  }

  /* ── 整排選單不可以比內容容器寬 ────────────────────────────

     症狀：日文站在 1440px 以上的桌機，最後一顆「チケット購入」整個凸出到
     內容容器（#inner）外面，右邊跟輪播對不齊。英韓文站在更窄的寬度也會。

     算給你看（1660px 的視窗）：
       #inner        max-width 1230px（style.css 的 1367–1999 斷點）
       .navbar_      padding 0 3% → 可用寬度約 1156px
       八個項目      8 × 140px（max-width）= 1120px
       七個間距      7 × 30px（語言站的 margin-left）= 210px
       合計          1330px  →  比容器寬 174px

     中文站不會，因為它的 margin-left 是 20px、而且另有幾條收窄的規則。
     語言站的 style.css 是舊站另外一份，那幾條沒跟上 —— 舊站本來就是這樣。

     解法：讓項目變成真正可伸縮的 flex 項目（flex:1 1 0 + min-width:0），
     整排就永遠剛好填滿容器，不管幾個項目、標籤多長都不會溢出。
     間距縮到 6px，八個項目只吃掉 42px。

     為什麼要 min-width:0：flex 項目的預設最小尺寸是內容的 min-content，
     不解開的話「ツーリストサービスセンター」會撐住不肯縮，這正是原本
     溢出的直接原因。 */
  .navbar_ .nav {
    max-width: 100%;
    flex-wrap: nowrap;
  }
  .navbar_ .nav > li {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    margin-left: 6px;
  }
  .navbar_ .nav > li:first-child { margin-left: 0; }

  /* a 要撐滿 li，否則色塊會比項目窄 */
  .navbar_ .nav > li > a { width: 100%; }

  /* hover 與 active 各自又寫死了一次 line-height（20px / 70px），
     不一起改的話滑過去就會跳回單行的算法 */
  .navbar_ .nav > li > a:hover,
  .navbar_ .nav > li > a:focus,
  .navbar_ .nav > li.sfHover > a,
  .navbar_ .nav > li.sfHover > a:hover,
  .navbar_ .nav > li.active > a,
  .navbar_ .nav > li.active > a:hover,
  .navbar_ .nav > li.active > a:focus,
  .navbar_ .nav > li.sfHover.active > a,
  .navbar_ .nav > li.sfHover.active > a:hover {
    line-height: 1.15;
  }
}