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

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

/* Drawer 開啟時的動畫 */
.hz-mobile-drawer {
  transition: opacity 0.3s ease;
}

/* TODO: 技術債 - !important 預防 CSS 特異性衝突（同 nav-dropdown.css） */
.hz-mobile-drawer.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.hz-mobile-drawer:not(.hidden) {
  opacity: 1 !important;
}

/* Backdrop 動畫 */
.hz-mobile-backdrop {
  transition: opacity 0.3s ease;
}

.hz-mobile-drawer.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].hidden {
  max-height: 0 !important;
  opacity: 0 !important;
}

[data-hz-mobile-submenu]:not(.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 > 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 按鈕繼承主選單文字顏色，右邊間距可獨立配置 */
.hz-mobile-nav .hz-submenu-toggle {
  color: var(--hz-mobile-nav-text, inherit);
  padding: 8px;
  padding-right: var(--hz-mobile-nav-toggle-pr, 16px);
}

/* 子選單文字顏色 */
.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));
}

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

/* 子選單面板重置主題 list indent，由 CSS 變數控制縮進 */
.hz-mobile-nav .hz-mobile-submenu {
  padding-inline-start: var(--hz-mobile-nav-sub-indent, 4px);
}

/* 項目內距（由 slider 控制） */
.hz-mobile-nav .menu-item > a,
.hz-mobile-nav .menu-item > div > a {
  padding-left: var(--hz-mobile-nav-item-px, 16px);
  padding-right: var(--hz-mobile-nav-item-px, 16px);
  padding-top: var(--hz-mobile-nav-item-py, 12px);
  padding-bottom: var(--hz-mobile-nav-item-py, 12px);
}

/* 子選單項目垂直內距較小 */
.hz-mobile-nav .hz-mobile-submenu .menu-item > a,
.hz-mobile-nav .hz-mobile-submenu .menu-item > div > a {
  padding-top: calc(var(--hz-mobile-nav-item-py, 12px) - 4px);
  padding-bottom: calc(var(--hz-mobile-nav-item-py, 12px) - 4px);
}

/* --- 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-mobile-nav-gap, 0);
}

/* =============================================================================
   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: 2px solid currentColor;
  outline-offset: 2px;
}

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

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