/**
 * Mobile Navigation CSS
 *
 * 手機版導航抽屜選單的樣式。
 * 這些樣式與 Tailwind CSS 配合使用。
 */

/* =============================================================================
   Mobile Drawer Base Styles
   ============================================================================= */

/* Backdrop 動畫（外層 drawer 容器不做 opacity，各子元素自行控制動畫） */
.hz-mobile-backdrop {
  transition: opacity 0.3s ease;
}

.hz-mobile-drawer.cv\:hidden .hz-mobile-backdrop {
  opacity: 0;
}

/* Panel 滑動/淡入動畫（transition 由 PHP inline style 控制，含動態時長） */

/* =============================================================================
   Submenu Accordion
   ============================================================================= */

/* Submenu toggle 按鈕 */
.hz-submenu-toggle {
  background: none;
  border: none;
  cursor: pointer;
}

.hz-submenu-toggle svg {
  transition: transform 0.2s ease;
}

.hz-submenu-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Submenu 展開動畫 */
[data-hz-mobile-submenu] {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

/* TODO: 技術債 - !important 預防 CSS 特異性衝突 */
[data-hz-mobile-submenu].cv\:hidden {
  max-height: 0 !important;
  opacity: 0 !important;
}

[data-hz-mobile-submenu]:not(.cv\:hidden) {
  max-height: 500px !important;
  opacity: 1 !important;
}

/* =============================================================================
   Hamburger Animation
   ============================================================================= */

.hz-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.hz-hamburger:hover {
  transform: scale(1.05);
}

.hz-hamburger:active {
  transform: scale(0.95);
}

/* =============================================================================
   Nav Style — CSS Variable-driven styles
   ============================================================================= */

/* 主選單項目文字顏色 */
.hz-mobile-nav a {
  color: var(--hz-mobile-nav-text, inherit);
}

/* Hover 顏色（觸控裝置仍可能在 :active 時觸發）
 * 不卡 .hz-mobile-nav 直接子代,容忍中間 wrapper(例如 <nav>) — 否則 Blocksy a:hover 會
 * 蓋過去變粉紅色。
 *
 * ⚠️ 順序敏感:本規則跟下方 .hz-mobile-nav .hz-mobile-submenu a:hover (line ~107)
 * specificity 同等(0,3,1+pseudo),靠 sub-menu rule 出現在後勝出來覆蓋 sub-menu 的 hover 顏色。
 * **不要把 sub-menu rule 移到本 rule 之前**,否則 sub-menu 會吃到頂層 hover token。
 * 未來若要重組,把 sub-menu rule 多加一層 class(例如 .hz-mobile-nav-list)bump specificity。 */
.hz-mobile-nav ul > li > a:hover,
.hz-mobile-nav ul > li > div > a:hover {
  color: var(--hz-mobile-nav-hover, var(--hz-mobile-nav-text, inherit));
}

/* Toggle 按鈕繼承主選單文字顏色，右邊間距由 hf-sizing token 控制 */
.hz-mobile-nav .hz-submenu-toggle {
  color: var(--hz-mobile-nav-text, inherit);
  padding: 8px;
  padding-right: var(--hz-hf-drawer-nav-toggle-padding-r);
}

/* 子選單文字顏色 */
.hz-mobile-nav .hz-mobile-submenu a {
  color: var(--hz-mobile-nav-sub-text, var(--hz-mobile-nav-text, inherit));
}

.hz-mobile-nav .hz-mobile-submenu a:hover {
  color: var(--hz-mobile-nav-sub-hover, var(--hz-mobile-nav-sub-text, inherit));
}

/* 項目間距(token: hf.drawer-nav.item-gap) */
.hz-mobile-nav > ul {
  gap: var(--hz-hf-drawer-nav-item-gap);
  display: flex;
  flex-direction: column;
  padding-inline-start: 0; /* 重置主題預設的 list indent */
  margin: 0;
}

/* 子選單面板縮排(token: hf.drawer-nav.sub-indent) */
.hz-mobile-nav .hz-mobile-submenu {
  padding-inline-start: var(--hz-hf-drawer-nav-sub-indent);
}

/* 項目內距(token: hf.drawer-nav.item-padding-x/y) */
.hz-mobile-nav .menu-item > a,
.hz-mobile-nav .menu-item > div > a {
  padding-left: var(--hz-hf-drawer-nav-item-padding-x);
  padding-right: var(--hz-hf-drawer-nav-item-padding-x);
  padding-top: var(--hz-hf-drawer-nav-item-padding-y);
  padding-bottom: var(--hz-hf-drawer-nav-item-padding-y);
}

/* 子選單項目垂直內距(token: hf.drawer-nav.sub-item-padding-y) */
.hz-mobile-nav .hz-mobile-submenu .menu-item > a,
.hz-mobile-nav .hz-mobile-submenu .menu-item > div > a {
  padding-top: var(--hz-hf-drawer-nav-sub-item-padding-y);
  padding-bottom: var(--hz-hf-drawer-nav-sub-item-padding-y);
}

/* --- Active Indicator: color — 僅變色 --- */
.hz-mobile-nav[data-hz-nav-active="color"] .current-menu-item > a,
.hz-mobile-nav[data-hz-nav-active="color"] .current-menu-item > div > a {
  color: var(--hz-mobile-nav-active, inherit);
}

/* --- Active Indicator: underline — 底線（文字不變色，只加底線） --- */
.hz-mobile-nav[data-hz-nav-active="underline"] .current-menu-item > a,
.hz-mobile-nav[data-hz-nav-active="underline"] .current-menu-item > div > a {
  text-decoration: underline;
  text-decoration-color: var(--hz-mobile-nav-active, currentColor);
  text-decoration-thickness: 2px;
  text-underline-offset: 12px;
}

/* --- Active Indicator: subtle-bg — 淡底色（全寬橫條） --- */
/* 無子選單：<li> > <a>（<a> 是 block-level flex，自然滿版） */
.hz-mobile-nav[data-hz-nav-active="subtle-bg"] .current-menu-item > a {
  background-color: color-mix(in srgb, var(--hz-mobile-nav-active, currentColor) 8%, transparent);
  color: var(--hz-mobile-nav-active, inherit);
}
/* 有子選單：<li> > <div> > <a>（<a> 在 flex 中只佔文字寬度，背景改套在 <div>） */
.hz-mobile-nav[data-hz-nav-active="subtle-bg"] .current-menu-item > div {
  background-color: color-mix(in srgb, var(--hz-mobile-nav-active, currentColor) 8%, transparent);
}
.hz-mobile-nav[data-hz-nav-active="subtle-bg"] .current-menu-item > div > a {
  color: var(--hz-mobile-nav-active, inherit);
}

/* --- Divider --- */
.hz-mobile-nav[data-hz-nav-divider] > ul > li + li {
  border-top: 1px solid var(--hz-mobile-nav-divider, #e5e7eb);
  padding-top: var(--hz-hf-drawer-nav-item-gap);
}

/* =============================================================================
   Touch Improvements
   ============================================================================= */

/* 增加觸控區域 */
.hz-mobile-nav a,
.hz-mobile-nav button {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* 防止選取文字 */
.hz-mobile-drawer {
  -webkit-user-select: none;
  user-select: none;
}

/* 連結可選取 */
.hz-mobile-nav a {
  -webkit-user-select: auto;
  user-select: auto;
}

/* =============================================================================
   Accessibility
   ============================================================================= */

/* Focus 樣式 — 僅鍵盤導航時顯示，觸控點擊不顯示 */
.hz-mobile-nav a:focus,
.hz-mobile-close:focus {
  outline: none;
}

.hz-mobile-nav a:focus-visible,
.hz-mobile-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.hz-submenu-toggle:focus:not(:focus-visible) {
  outline: none;
}

/* =============================================================================
   Drawer Section Alignment（Logo / Social 對齊 + 與 Nav 切齊）
   ============================================================================= */

.hz-drawer-top,
.hz-drawer-bottom {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* 靠左：padding 跟隨 hf-sizing token (drawer-nav 一致感) */
.hz-drawer-top[data-align="left"],
.hz-drawer-bottom[data-align="left"] {
  align-items: flex-start;
  padding-left: var(--hz-hf-drawer-nav-item-padding-x);
  padding-right: var(--hz-hf-drawer-nav-toggle-padding-r);
}

/* 置中 */
.hz-drawer-top[data-align="center"],
.hz-drawer-bottom[data-align="center"] {
  align-items: center;
  padding-left: var(--hz-hf-drawer-nav-item-padding-x);
  padding-right: var(--hz-hf-drawer-nav-item-padding-x);
}

/* 靠右 */
.hz-drawer-top[data-align="right"],
.hz-drawer-bottom[data-align="right"] {
  align-items: flex-end;
  padding-left: var(--hz-hf-drawer-nav-item-padding-x);
  padding-right: var(--hz-hf-drawer-nav-toggle-padding-r);
}

/* 減少動畫（尊重用戶偏好） */
@media (prefers-reduced-motion: reduce) {
  .hz-mobile-drawer,
  .hz-mobile-backdrop,
  .hz-mobile-panel,
  .hz-submenu-toggle svg,
  [data-hz-mobile-submenu] {
    transition: none;
  }
}