/* ==================================================================
   主導覽下拉選單
   ------------------------------------------------------------------
   桌機可滑鼠移入展開，也可點「文章」展開；鍵盤與手機使用 details/summary。
   ================================================================== */

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--size-small);
  letter-spacing: 0.1em;
}

.site-nav__item {
  position: relative;
}

.site-nav__dropdown {
  position: relative;
}

.site-nav__summary {
  list-style: none;
  cursor: pointer;
  color: var(--ink-soft);
  user-select: none;
  white-space: nowrap;
}

.site-nav__summary::-webkit-details-marker {
  display: none;
}

.site-nav__summary::after {
  content: "▾";
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.72em;
  transition: transform var(--transition);
}

.site-nav__dropdown[open] .site-nav__summary::after {
  transform: rotate(180deg);
}

.site-nav__summary:hover,
.site-nav__summary[aria-current="page"],
.site-nav__dropdown[open] .site-nav__summary {
  color: var(--ink);
}

.site-nav__summary[aria-current="page"] {
  border-bottom: 1px solid var(--accent);
}

.site-nav__submenu {
  display: none !important;
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.7rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 8rem;
  margin: 0;
  padding: 0.45rem 0;
  list-style: none;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.08);
  letter-spacing: 0.08em;
}

.site-nav__dropdown[open] > .site-nav__submenu,
.site-nav__dropdown:hover > .site-nav__submenu,
.site-nav__dropdown:focus-within > .site-nav__submenu {
  display: block !important;
}

.site-nav__submenu::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.site-nav__submenu li {
  display: block;
}

.site-nav__submenu a {
  display: block;
  padding: 0.5rem 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__submenu a:hover,
.site-nav__submenu a[aria-current="page"] {
  color: var(--ink);
  background: var(--accent-soft);
}

.site-nav__submenu a[aria-current="page"] {
  border-bottom: none;
}

/* 小螢幕上讓選單靠右，避免超出畫面 */
@media (max-width: 36rem) {
  .site-header .wrap {
    gap: var(--space-2);
  }

  .site-nav__list {
    gap: var(--space-2);
  }

  .site-nav__submenu {
    left: auto;
    right: 0;
    transform: none;
  }
}