/*!
Theme Name: designhu 2025
Theme URI: https://www.design-hu.com/
Author: designhu by Peter Chen
Author URI: https://www.design-hu.com/
Description: Description
Version: 1.0.0
Tested up to: 6.0
Requires PHP: 8.0
*/

/* ====== 導航列樣式 ====== */
#webNavigation .designhuHeader {
  display: flex;
  gap: 2rem; /* gap-8 */
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 2px;
  align-items: center;
}

/* 清掉 WP 預設 UL 樣式 */
#webNavigation .designhuHeader,
#webNavigation .designhuHeader ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 第一層項目相對定位，用來放絕對定位的下拉 */
#webNavigation .designhuHeader > li {
  position: relative; /* relative group */
  text-align: left;
}

/* 連結外觀與 hover 變色（hover:text-primary1 transition-colors） */
#webNavigation .designhuHeader a {
  display: block;
  padding: 0.5rem 0; /* 可依需求調整 */
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

#webNavigation .designhuHeader > li > a:hover {
  color: #0091d8;
}

/* 第一層下拉 */
#webNavigation .designhuHeader > li > ul.sub-menu {
  position: absolute;
  left: -1.5rem; /* -left-6 */
  top: 100%; /* top-full */
  z-index: 50;
  min-width: 140px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transform: translateY(1.75rem); /* translate-y-7 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  overflow: visible; /* overflow-visible */
}

/* 主選單第4項 → 第二層第1個分支 一日微創手術 的面板寬 220px */
#webNavigation
  .designhuHeader
  > li:nth-child(4)
  > ul.sub-menu
  > li:nth-child(1)
  > ul.sub-menu,
#webNavigation
  .designhuHeader
  > li:nth-child(4)
  > ul.sub-menu
  > li:nth-child(5)
  > ul.sub-menu {
  min-width: 200px;
}

/* 排尿 漏尿 */
#webNavigation
  .designhuHeader
  > li:nth-child(4)
  > ul.sub-menu
  > li:nth-child(2)
  > ul.sub-menu,
#webNavigation
  .designhuHeader
  > li:nth-child(4)
  > ul.sub-menu
  > li:nth-child(4)
  > ul.sub-menu,
#webNavigation
  .designhuHeader
  > li:nth-child(4)
  > ul.sub-menu
  > li:nth-child(7)
  > ul.sub-menu,
#webNavigation
  .designhuHeader
  > li:nth-child(4)
  > ul.sub-menu
  > li:nth-child(8)
  > ul.sub-menu {
  min-width: 180px;
}
/* 男性健康 > 性功能障礙治療  */
#webNavigation
  .designhuHeader
  > li:nth-child(5)
  > ul.sub-menu
  > li:nth-child(2)
  > ul.sub-menu {
  min-width: 180px;
}

/* 女性健康 > 尿失禁治療  */
#webNavigation
  .designhuHeader
  > li:nth-child(6)
  > ul.sub-menu
  > li:nth-child(1)
  > ul.sub-menu {
  min-width: 180px;
}

/* 滑入顯示（group-hover 對等） */
#webNavigation .designhuHeader > li:hover > ul.sub-menu,
#webNavigation .designhuHeader > li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 第一層下拉裡的連結 hover 狀態 */
#webNavigation .designhuHeader > li > ul.sub-menu > li > a {
  padding: 0.75rem 1.25rem; /* px-5 py-3 */
  transition: background-color 0.15s ease, color 0.15s ease;
}
#webNavigation .designhuHeader > li > ul.sub-menu > li > a:hover {
  background: rgba(0, 145, 216, 0.1);
  color: #0091d8;
}

/* 第二層（側向飛出）*/
#webNavigation .designhuHeader ul.sub-menu li.menu-item-has-children {
  position: relative; /* group/env */
}

/* 右側飛出的第二層選單 */
#webNavigation
  .designhuHeader
  ul.sub-menu
  li.menu-item-has-children
  > ul.sub-menu {
  position: absolute;
  left: 100%; /* left-full */
  top: 0;
  z-index: 50;
  min-width: 140px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  overflow: hidden; /* 這層可 hidden */
}

/* hover 顯示第二層（等同 group-hover/env） */
#webNavigation
  .designhuHeader
  ul.sub-menu
  li.menu-item-has-children:hover
  > ul.sub-menu,
#webNavigation
  .designhuHeader
  ul.sub-menu
  li.menu-item-has-children:focus-within
  > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 第二層連結 hover 狀態 */
#webNavigation
  .designhuHeader
  ul.sub-menu
  li.menu-item-has-children
  > ul.sub-menu
  a {
  padding: 0.75rem 1.25rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#webNavigation
  .designhuHeader
  ul.sub-menu
  li.menu-item-has-children
  > ul.sub-menu
  a:hover {
  background: rgba(0, 145, 216, 0.1);
  color: #0091d8;
}

/* 子選單裡含子選單：也顯示箭頭（指示會往右飛出） */
#webNavigation
  .designhuHeader
  ul.sub-menu
  li.menu-item-has-children
  > a::after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  opacity: 0.6;
  margin-left: 0.5rem;
  flex: 0 0 auto;
}

/* hover 時讓箭頭更清楚 */
#webNavigation .designhuHeader li.menu-item-has-children:hover > a::after {
  opacity: 1;
  color: #0091d8;
}

/* 針對不同寬度的下拉 */
/* 可以用「選單項目的 slug 或 ID」在後台對應；這裡示範用 nth-child 做快速對應 */
#webNavigation .designhuHeader > li:nth-child(1) > ul.sub-menu {
  min-width: 140px;
} /* 關於精睿 */

#webNavigation .designhuHeader > li:nth-child(2) > ul.sub-menu {
  min-width: 120px;
} /* 醫師團隊 */

#webNavigation .designhuHeader > li:nth-child(3) > ul.sub-menu {
  min-width: 120px;
} /* 分院資訊 */

#webNavigation .designhuHeader > li:nth-child(4) > ul.sub-menu {
  min-width: 270px;
} /* 診療項目 */

#webNavigation .designhuHeader > li:nth-child(5) > ul.sub-menu {
  min-width: 250px;
} /* 男性健康 */

#webNavigation .designhuHeader > li:nth-child(6) > ul.sub-menu {
  min-width: 200px;
} /* 女性健康 */

/* 輔助：鍵盤可用性（focus-within） */
#webNavigation .designhuHeader a:focus {
  outline: 2px solid rgba(0, 134, 160, 0.35);
  outline-offset: 2px;
}