[data-nav-hover] {
  --nav-hover-accent: var(--hm-design-accent, var(--green, #176b67));
  --nav-hover-ink: var(--hm-design-text, var(--ink, #1d282c));
  --nav-hover-muted: var(--hm-design-muted-text, var(--body, #64706c));
  /* INHERIT emits transparent, so only explicit header surfaces use that variable. */
  --nav-hover-surface: var(--hm-design-surface, var(--paper, #fff));
  --nav-hover-border: var(
    --hm-design-border,
    var(--line-light, var(--line, #d7d4ca))
  );
  /* The theme validator checks text/surface, not accent/surfaceAlt. */
  --nav-hover-hover: var(--hm-design-surface, #fff);
  --nav-hover-hover-text: var(--hm-design-text, #1d282c);
  --nav-hover-font: var(
    --hm-design-body-font,
    var(--body-font, Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif)
  );
  position: relative;
  overflow: visible;
}

[data-site-header] [data-nav-hover] {
  --nav-hover-surface: color-mix(
    in srgb,
    var(--cream, #f7f4ed) 95%,
    transparent
  );
}

[data-site-template-mode="inherit"] [data-site-header] [data-nav-hover] {
  --nav-hover-font: inherit;
  --nav-hover-accent: var(--green, #0e755a);
  --nav-hover-border: var(--line-light, #e8e4da);
  --nav-hover-hover: var(--green-soft, #dfe9e2);
  --nav-hover-hover-text: var(--green-dark, #0a493c);
}

/* Use the same device boundary and mode markers as site-design-v1.css. */
@media (min-width: 768px) {
  [data-site-region="header"]:is(
      [data-site-surface="token"],
      [data-site-surface="custom"]
    )
    [data-nav-hover] {
    --nav-hover-surface: var(--hm-design-header-background);
  }
}

@media (max-width: 0px) {
  [data-site-region="header"]:is(
      [data-site-mobile-surface="token"],
      [data-site-mobile-surface="custom"]
    )
    [data-nav-hover] {
    --nav-hover-surface: var(--hm-design-header-mobile-background);
  }
}

.nav-hover__shell {
  display: inline-flex;
  align-items: stretch;
}

.nav-hover__toggle {
  display: none;
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.nav-hover__toggle::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

[data-nav-hover][data-nav-hover-open="true"] > .nav-hover__toggle::before {
  transform: translateY(2px) rotate(225deg);
}

.nav-hover__panel {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 8px);
  left: 50%;
  display: grid;
  width: max-content;
  min-width: 220px;
  max-width: min(380px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid var(--nav-hover-border);
  color: var(--nav-hover-ink);
  background: var(--nav-hover-surface);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 24px rgb(14 36 34 / 10%);
  font-family: var(--nav-hover-font);
  font-size: 13px;
  line-height: 1.6;
  transform: translate(-50%, -4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

[data-nav-hover][data-nav-hover-open="true"] > .nav-hover__panel,
[data-nav-hover][data-editor-nav-hover-open="true"] > .nav-hover__panel {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

[data-nav-hover][data-editor-nav-hover-open="true"]
  > .nav-hover__panel[hidden] {
  display: grid !important;
}

.nav-hover__item {
  display: flex;
  min-height: 42px;
  align-items: center;
  padding: 9px 14px;
  border-radius: 0;
  color: inherit;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
}

.nav-hover__panel .nav-hover__item:hover,
.nav-hover__panel .nav-hover__item:focus-visible {
  color: var(--nav-hover-hover-text);
  background: var(--nav-hover-hover);
  text-decoration: underline;
  text-decoration-color: var(--nav-hover-accent);
  text-underline-offset: 5px;
  outline: none;
}

.nav-hover__panel a::after {
  display: none;
}

[data-nav-hover-style="brand-accent"] > .nav-hover__panel {
  border-top: 2px solid var(--nav-hover-accent);
  padding-top: 7px;
}

[data-nav-hover-style="wide-grouped"] > .nav-hover__panel {
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  min-width: min(390px, calc(100vw - 24px));
  padding: 12px;
  gap: 2px 8px;
  border-top: 1px solid var(--nav-hover-border);
}

[data-nav-hover-style="wide-grouped"] .nav-hover__item {
  border-bottom: 1px solid var(--nav-hover-border);
}

@media (hover: none), (pointer: coarse), (max-width: 920px) {
  [data-nav-hover] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  [data-nav-hover] > [data-nav-hover-trigger] {
    min-width: 0;
  }

  [data-nav-hover] > .nav-hover__toggle {
    display: grid;
    align-items: center;
  }

  [data-nav-hover] > .nav-hover__panel {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0 10px 10px;
    border: 0;
    border-bottom: 1px solid var(--nav-hover-border);
    box-shadow: none;
    transform: none;
  }

  [data-nav-hover][data-nav-hover-open="true"] > .nav-hover__panel,
  [data-nav-hover][data-editor-nav-hover-open="true"] > .nav-hover__panel {
    transform: none;
  }

  [data-nav-hover-style="wide-grouped"] > .nav-hover__panel {
    grid-template-columns: 1fr;
    min-width: 0;
    padding: 0 10px 10px;
    border-top: 0;
  }

  .mobile-nav .nav-hover__item {
    min-height: 38px;
    padding: 9px 16px 9px 28px;
    border-bottom: 1px solid var(--nav-hover-border);
    background: var(--nav-hover-surface);
    font-family: var(--nav-hover-font);
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-hover__panel,
  .nav-hover__toggle::before {
    transition: none;
  }
}

/* 动态分类完整展示，长菜单只在内部滚动。 */
[data-nav-dynamic] > [data-nav-hover-panel] {
  max-height: min(70vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
[data-nav-dynamic] [data-nav-hover-item] {
  white-space: normal;
  overflow-wrap: anywhere;
}
[data-nav-dynamic] > [data-nav-hover-toggle][hidden] {
  display: none !important;
}