/* ==============================================
   TadNav v1.7.2 — 核心樣式
   修正 v1.7.2：
     強化 focus-visible 焦點樣式（2.4.7）
     新增 --tadnav-focus-color / --tadnav-focus-width 變數
   ============================================== */

: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;

  /* ── 焦點樣式（★ 新增）─────────────────────
   * WCAG 2.4.7 / 2.4.11 要求：
   *   - 焦點框需與背景有足夠對比（建議 3:1 以上）
   *   - 建議使用雙色 outline：內白外深，任何背景都清晰可見
   */
  --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;

  /* ── 子選單項目 ────────────────────────────── */
  --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-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);
}

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

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

/* ── Inner ──────────────────────────────────── */
.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 Toggle ───────────────────────── */
.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;
}
.tadnav-toggle:hover {
  background: var(--tadnav-toggle-hover-bg);
}

/*
 * ★ 修正 2.4.7：漢堡按鈕焦點樣式
 * 使用雙層 outline（黃色內框 + 黑色外框），
 * 在任何背景色下都清晰可見。
 */
.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（頂層 ul）────────────────────────── */
.tadnav-menu {
  display: flex;
  align-items: stretch;
  list-style: none;
  flex: 1;
}

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

/* ── 頂層 li ────────────────────────────────── */
.tadnav-menu > li {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* ── 頂層連結 / 按鈕 ────────────────────────── */
.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;
  /* ★ 確保 outline 不被裁切 */
  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;
}

/*
 * ★ 修正 2.4.7：頂層項目焦點樣式
 * 雙層效果：黃色 outline + 黑色 box-shadow 外框
 */
.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;
}
.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: 100;
  border-top: 3px solid var(--tadnav-sub-border);

  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;
}

/* ── 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; }
.tadnav-submenu .tadnav-submenu.tadnav-flip-x { left: auto; right: 100%; }
.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;
}

/*
 * ★ 修正 2.4.7：子選單項目焦點樣式
 * 子選單背景為白色，使用深色焦點框確保對比
 */
.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;
  }
  .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;
  }
  .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%; display: none;
  }
  .tadnav-submenu[data-open="true"] { display: block; }

  .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; }
}