/* ==============================================
   TadNav v1.8.0
   新增：
     子選單捲動箭頭（SmartMenus 風格）
     頂層項目換行模式 / 左右捲動模式
   ============================================== */

:root {
  --tadnav-font-family:             inherit;
  --tadnav-inner-max-width:         100%;
  --tadnav-nav-min-height:          52px;
  --tadnav-nav-bg:                  transparent;
  --tadnav-nav-shadow:              none;
  --tadnav-brand-color:             #ffffff;

  --tadnav-focus-color:             #ffdd00;
  --tadnav-focus-shadow-color:      #000000;
  --tadnav-focus-width:             3px;

  --tadnav-item-color:              #ffffff;
  --tadnav-item-bg:                 transparent;
  --tadnav-item-font-size:          0.9rem;
  --tadnav-item-padding-x:          1rem;
  --tadnav-item-padding-y:          0px;
  --tadnav-item-hover-bg:           rgba(255, 255, 255, 0.14);
  --tadnav-item-hover-color:        #ffffff;
  --tadnav-item-accent:             rgba(255, 255, 255, 0.75);

  --tadnav-sub-bg:                  #ffffff;
  --tadnav-sub-shadow:              0 6px 24px rgba(0, 0, 0, 0.13);
  --tadnav-sub-border:              #2e86c1;
  --tadnav-sub-divider:             #f0f4f8;
  --tadnav-sub-divider-width:       1px;
  --tadnav-sub-min-width:           220px;
  /* 子選單顯示幾個項目後出現捲動箭頭（由 JS 計算，此為參考高度）*/
  --tadnav-sub-scroll-height:       280px;

  --tadnav-sub-item-color:          #1a3a5c;
  --tadnav-sub-item-bg:             transparent;
  --tadnav-sub-item-font-size:      0.88rem;
  --tadnav-sub-item-padding-x:      1.1rem;
  --tadnav-sub-item-padding-y:      0.6rem;
  --tadnav-sub-item-hover-bg:       #eaf4fd;
  --tadnav-sub-item-hover-color:    #1a5276;

  /* ★ 捲動箭頭按鈕樣式 */
  --tadnav-scroll-btn-bg:           #f0f4f8;
  --tadnav-scroll-btn-hover-bg:     #dbeaf7;
  --tadnav-scroll-btn-color:        #1a5276;
  --tadnav-scroll-btn-height:       28px;

  --tadnav-toggle-color:            #ffffff;
  --tadnav-toggle-hover-bg:         rgba(255, 255, 255, 0.15);

  --tadnav-mobile-sub-bg:           rgba(0, 0, 0, 0.15);
  --tadnav-mobile-sub-border:       rgba(255, 255, 255, 0.30);
  --tadnav-mobile-sub-color:        rgba(255, 255, 255, 0.90);
  --tadnav-mobile-item-border:      rgba(255, 255, 255, 0.10);
}

.tadnav-wrapper *,
.tadnav-wrapper *::before,
.tadnav-wrapper *::after { box-sizing: border-box; margin: 0; padding: 0; }

.tadnav-wrapper {
  background:  var(--tadnav-nav-bg);
  box-shadow:  var(--tadnav-nav-shadow);
  position: relative;
  z-index: 1000;
  font-family: var(--tadnav-font-family);
}

/* ══════════════════════════════════════════════
 * ★ 頂層選單換行模式（.tadnav-wrap）
 *   在 tadnav-inner 加上此 class 即可
 * ══════════════════════════════════════════════ */
.tadnav-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--tadnav-inner-max-width);
  margin: 0 auto;
  padding: 0 1rem;
  min-height: var(--tadnav-nav-min-height);
}

/* ── Brand ──────────────────────────────────── */
.tadnav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tadnav-brand-color);
  font-size: var(--tadnav-item-font-size);
  font-family: var(--tadnav-font-family);
  font-weight: 700;
  padding: 0 1rem 0 0;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}
.tadnav-brand:focus-visible {
  outline: var(--tadnav-focus-width) solid var(--tadnav-focus-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 calc(var(--tadnav-focus-width) + 2px) var(--tadnav-focus-shadow-color);
  border-radius: 3px;
}

/* ── Hamburger ──────────────────────────────── */
.tadnav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
  border-radius: 6px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.tadnav-toggle:hover { background: var(--tadnav-toggle-hover-bg); }
.tadnav-toggle:focus-visible {
  outline: var(--tadnav-focus-width) solid var(--tadnav-focus-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 calc(var(--tadnav-focus-width) + 2px) var(--tadnav-focus-shadow-color);
  background: var(--tadnav-toggle-hover-bg);
}
.tadnav-toggle .bar {
  display: block; width: 22px; height: 2px;
  background: var(--tadnav-toggle-color);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.tadnav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
.tadnav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.tadnav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════
 * 頂層 Menu
 * ══════════════════════════════════════════════ */
.tadnav-menu {
  display: flex;
  align-items: stretch;
  list-style: none;
  flex: 1;
  /* 預設不換行 */
  flex-wrap: nowrap;
  overflow: hidden;
}

/* ★ 換行模式：在 .tadnav-menu 加上 .tadnav-menu-wrap */
.tadnav-menu.tadnav-menu-wrap {
  flex-wrap: wrap;
  align-items: flex-start;
  overflow: visible;
  /* 換行時讓 inner 自動撐高 */
  align-content: flex-start;
}

/* ★ 左右捲動模式：在 .tadnav-menu 加上 .tadnav-menu-scroll */
.tadnav-menu.tadnav-menu-scroll {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
  scroll-behavior: smooth;
}
.tadnav-menu.tadnav-menu-scroll::-webkit-scrollbar { display: none; }

.tadnav-menu > li.tadnav-spacer { flex-grow: 1; pointer-events: none; }

.tadnav-menu > li {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;   /* 不讓項目被壓縮 */
}

.tadnav-menu > li > a[role="menuitem"],
.tadnav-menu > li > button.tadnav-submenu-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: var(--tadnav-item-padding-y) var(--tadnav-item-padding-x);
  color: var(--tadnav-item-color);
  background: var(--tadnav-item-bg);
  font-size: var(--tadnav-item-font-size);
  font-family: var(--tadnav-font-family);
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
  border-bottom: 3px solid transparent;
  position: relative;
  z-index: 1;
}
.tadnav-menu > li > a[role="menuitem"]:hover,
.tadnav-menu > li > button.tadnav-submenu-toggle:hover,
.tadnav-menu > li > button.tadnav-submenu-toggle[aria-expanded="true"] {
  background: var(--tadnav-item-hover-bg);
  color: var(--tadnav-item-hover-color);
  border-bottom-color: var(--tadnav-item-accent);
  outline: none;
}
.tadnav-menu > li > a[role="menuitem"]:focus-visible,
.tadnav-menu > li > button.tadnav-submenu-toggle:focus-visible {
  outline: var(--tadnav-focus-width) solid var(--tadnav-focus-color);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 calc(var(--tadnav-focus-width) + 2px) var(--tadnav-focus-shadow-color);
  background: var(--tadnav-item-hover-bg);
  color: var(--tadnav-item-hover-color);
}

/* ── 箭頭 ───────────────────────────────────── */
.tadnav-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7em; transition: transform 0.2s;
  margin-left: 0.1rem; flex-shrink: 0;
}
.tadnav-arrow::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
button[aria-expanded="true"] > .tadnav-arrow { transform: rotate(180deg); }
.tadnav-submenu .tadnav-arrow::after { content: "\f054"; }
.tadnav-submenu button[aria-expanded="true"] > .tadnav-arrow { transform: rotate(90deg); }

/* ══════════════════════════════════════════════
 * 子選單面板
 * ══════════════════════════════════════════════ */
.tadnav-submenu {
  position: absolute;
  top: 100%; left: 0;
  min-width: var(--tadnav-sub-min-width);
  background: var(--tadnav-sub-bg);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--tadnav-sub-shadow);
  list-style: none;
  z-index: 9999;
  border-top: 3px solid var(--tadnav-sub-border);
  /* 不設 overflow，由捲動容器控制 */
  overflow: visible;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.tadnav-submenu[data-open="true"] {
  opacity: 1; visibility: visible;
  transform: translateY(0); pointer-events: auto;
}

/* ══════════════════════════════════════════════
 * ★ 子選單捲動容器
 *   JS 會在項目過多時，將 <ul> 內容包進
 *   .tadnav-sub-scroll-wrap，並在上下加入箭頭按鈕
 *
 *   結構：
 *   <ul class="tadnav-submenu">
 *     <li class="tadnav-scroll-btn tadnav-scroll-up">▲</li>  ← JS 插入
 *     <li class="tadnav-sub-scroll-wrap">
 *       <ul>...原始項目...</ul>
 *     </li>
 *     <li class="tadnav-scroll-btn tadnav-scroll-down">▼</li> ← JS 插入
 *   </ul>
 * ══════════════════════════════════════════════ */

/* 捲動內容容器 */
.tadnav-sub-scroll-wrap {
  display: block;
  overflow: hidden;   /* 高度由 JS 設定 */
  position: relative;
}
.tadnav-sub-scroll-wrap > ul {
  list-style: none;
  margin: 0; padding: 0;
  /* JS 透過 transform: translateY() 捲動 */
  transition: transform 0.2s ease;
  will-change: transform;
}

/* ★ 捲動箭頭按鈕 */
.tadnav-scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--tadnav-scroll-btn-height);
  background: var(--tadnav-scroll-btn-bg);
  color: var(--tadnav-scroll-btn-color);
  cursor: pointer;
  border: none;
  font-size: 0.75rem;
  user-select: none;
  transition: background 0.15s;
  /* 讓箭頭按鈕不在 list 流中 */
  list-style: none;
}
.tadnav-scroll-btn:hover,
.tadnav-scroll-btn:focus-visible {
  background: var(--tadnav-scroll-btn-hover-bg);
  outline: none;
}
.tadnav-scroll-btn:focus-visible {
  outline: var(--tadnav-focus-width) solid var(--tadnav-focus-color);
  outline-offset: -2px;
}
/* 停用狀態（已到頂/底）*/
.tadnav-scroll-btn[aria-disabled="true"] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/* 上箭頭圓角 */
.tadnav-scroll-up  { border-radius: 0; }
/* 下箭頭圓角 */
.tadnav-scroll-down { border-radius: 0 0 8px 8px; }

/* is-right */
.tadnav-menu > li.is-right > .tadnav-submenu { left: auto; right: 0; }

/* 巢狀子選單 */
.tadnav-submenu .tadnav-submenu {
  top: 0; left: 100%;
  border-radius: 0 8px 8px 8px;
  border-top: none;
  border-left: 3px solid var(--tadnav-sub-border);
}
.tadnav-menu > li.is-right .tadnav-submenu .tadnav-submenu {
  left: auto; right: 100%;
  border-radius: 8px 0 8px 8px;
  border-left: none;
  border-right: 3px solid var(--tadnav-sub-border);
}

/* 碰撞偵測 */
.tadnav-submenu.tadnav-flip-x-root { left: auto; right: 0; }
.tadnav-submenu.tadnav-flip-y-root {
  top: auto; bottom: 100%;
  border-radius: 8px 8px 0 0;
  border-top: none;
  border-bottom: 3px solid var(--tadnav-sub-border);
  transform: translateY(6px);
}
.tadnav-submenu.tadnav-flip-y-root[data-open="true"] { transform: translateY(0); }
.tadnav-submenu .tadnav-submenu.tadnav-flip-x {
  left: auto; right: 100%;
  border-radius: 8px 0 8px 8px;
  border-left: none;
  border-right: 3px solid var(--tadnav-sub-border);
}
.tadnav-submenu .tadnav-submenu.tadnav-flip-y { top: auto; bottom: 0; }

/* 子選單項目 */
.tadnav-submenu > li { position: relative; }

.tadnav-submenu > li > a[role="menuitem"],
.tadnav-submenu > li > button.tadnav-submenu-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  padding: var(--tadnav-sub-item-padding-y) var(--tadnav-sub-item-padding-x);
  color: var(--tadnav-sub-item-color);
  background: var(--tadnav-sub-item-bg);
  font-size: var(--tadnav-sub-item-font-size);
  font-family: var(--tadnav-font-family);
  text-decoration: none; border: none; cursor: pointer;
  text-align: left; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  border-bottom-width: var(--tadnav-sub-divider-width);
  border-bottom-style: solid;
  border-bottom-color: var(--tadnav-sub-divider);
  position: relative; z-index: 1;
}
.tadnav-submenu > li:last-child > a[role="menuitem"],
.tadnav-submenu > li:last-child > button.tadnav-submenu-toggle { border-bottom: none; }

.tadnav-submenu > li > a[role="menuitem"]:hover,
.tadnav-submenu > li > button.tadnav-submenu-toggle:hover,
.tadnav-submenu > li > button.tadnav-submenu-toggle[aria-expanded="true"] {
  background: var(--tadnav-sub-item-hover-bg);
  color: var(--tadnav-sub-item-hover-color);
  outline: none;
}
.tadnav-submenu > li > a[role="menuitem"]:focus-visible,
.tadnav-submenu > li > button.tadnav-submenu-toggle:focus-visible {
  outline: var(--tadnav-focus-width) solid var(--tadnav-focus-shadow-color);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 calc(var(--tadnav-focus-width) + 2px) var(--tadnav-focus-color);
  background: var(--tadnav-sub-item-hover-bg);
  color: var(--tadnav-sub-item-hover-color);
}

/* Skip Link */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--tadnav-sub-border); color: #fff;
  padding: 0.5rem 1rem; border-radius: 0 0 6px 6px;
  font-size: 0.9rem; z-index: 9999; text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  outline: var(--tadnav-focus-width) solid var(--tadnav-focus-color);
  box-shadow: 0 0 0 calc(var(--tadnav-focus-width) + 2px) var(--tadnav-focus-shadow-color);
}

/* ══════════════════════════════════════════════
 * 響應式
 * ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tadnav-toggle { display: flex; }
  .tadnav-inner  { flex-wrap: wrap; padding: 0.5rem 1rem; }
  .tadnav-brand  { flex: 1; }

  .tadnav-menu {
    display: none; flex-direction: column;
    width: 100%; padding: 0.5rem 0; flex: none;
    /* 手機版取消捲動/換行模式 */
    overflow: visible; flex-wrap: nowrap;
  }
  .tadnav-menu[data-mobile-open="true"] { display: flex; }

  .tadnav-menu > li,
  .tadnav-submenu > li { width: 100%; }

  .tadnav-menu > li > a[role="menuitem"],
  .tadnav-menu > li > button.tadnav-submenu-toggle {
    padding: 0.65rem var(--tadnav-item-padding-x);
    border-bottom: 1px solid var(--tadnav-mobile-item-border);
    width: 100%; justify-content: flex-start;
    font-size: var(--tadnav-item-font-size);
  }
  .tadnav-menu > li > button.tadnav-submenu-toggle > .tadnav-arrow { margin-left: auto; }

  /* 手機版子選單：靜態展開，捲動箭頭隱藏 */
  .tadnav-submenu,
  .tadnav-submenu .tadnav-submenu {
    position: static; opacity: 1; visibility: visible;
    transform: none; pointer-events: auto;
    box-shadow: none; border: none; border-radius: 0;
    border-left: 3px solid var(--tadnav-mobile-sub-border);
    background: var(--tadnav-mobile-sub-bg);
    min-width: 0; width: 100%; overflow: visible;
    display: none;
  }
  .tadnav-submenu[data-open="true"] { display: block; }

  /* 手機版隱藏捲動箭頭，直接顯示所有項目 */
  .tadnav-scroll-btn { display: none; }
  .tadnav-sub-scroll-wrap { overflow: visible; height: auto !important; }
  .tadnav-sub-scroll-wrap > ul { transform: none !important; }

  .tadnav-submenu > li > a[role="menuitem"],
  .tadnav-submenu > li > button.tadnav-submenu-toggle {
    color: var(--tadnav-mobile-sub-color);
    padding-top: var(--tadnav-sub-item-padding-y);
    padding-bottom: var(--tadnav-sub-item-padding-y);
    padding-left: 1.5rem;
    padding-right: var(--tadnav-sub-item-padding-x);
  }
  .tadnav-submenu .tadnav-submenu > li > a[role="menuitem"],
  .tadnav-submenu .tadnav-submenu > li > button.tadnav-submenu-toggle { padding-left: 2.25rem; }

  .tadnav-menu > li.is-right > .tadnav-submenu,
  .tadnav-menu > li.is-right .tadnav-submenu .tadnav-submenu { left: 0; right: auto; }
  .tadnav-menu > li.tadnav-spacer { display: none; }
}