/* marketing-float — 悬浮导航；复用通栏壳内容与样式 */
@import "../marketing-shell/layout.css";

.wa-layout--site-float {
  --wa-site-float-inset: 14px;
  --wa-site-float-nav-max: 1100px;
  /* 悬浮条 + 外边距，锚点滚动时不被挡住 */
  --wa-site-nav-h: 92px;
}
/* 外层只做定位，彻底去掉壳顶栏底色/毛玻璃，避免与胶囊叠成双层 */
.wa-layout--site-marketing.wa-layout--site-float .wa-layout__navbar,
.wa-layout--site-marketing.wa-layout--site-float.wa-layout--site-bg-wash .wa-layout__navbar,
.wa-layout--site-marketing.wa-layout--site-float.wa-layout--site-bg-wash .wa-layout__navbar:not(.is-scrolled),
.wa-layout--site-marketing.wa-layout--site-float.wa-layout--site-bg-wash .wa-layout__navbar.is-scrolled {
  position: sticky;
  top: var(--wa-site-float-inset);
  z-index: 50;
  margin: var(--wa-site-float-inset) var(--wa-site-float-inset) 0;
  padding: 0;
  border: 0;
  border-bottom: 0;
  min-height: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  justify-content: center;
  color: inherit;
}
.wa-layout--site-float .wa-layout__navbar-inner {
  width: 100%;
  max-width: min(var(--wa-site-float-nav-max), 100%);
  min-height: 64px;
  margin: 0 auto;
  padding: 10px 18px 10px 20px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--wa-color-border-1) 28%, transparent);
  background: color-mix(in srgb, var(--wa-color-surface) 42%, transparent);
  box-shadow:
    0 10px 28px -18px color-mix(in srgb, var(--wa-color-text) 14%, transparent),
    0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transition:
    max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    min-height 0.28s ease,
    padding 0.28s ease,
    border-radius 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}
/* 滚动后加宽加长 */
.wa-layout--site-float .wa-layout__navbar.is-scrolled .wa-layout__navbar-inner {
  max-width: min(var(--wa-site-max), 100%);
  min-height: 68px;
  padding: 12px 22px 12px 24px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--wa-color-surface) 55%, transparent);
  box-shadow:
    0 14px 36px -18px color-mix(in srgb, var(--wa-color-text) 16%, transparent),
    0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset;
}
.wa-layout--site-float .wa-layout__site-nav a {
  padding: 8px 12px;
  font-size: 13px;
}
.wa-layout--site-float .wa-layout__site-stack {
  padding-top: 20px;
}
.wa-layout--site-float .wa-layout__site-row--hero {
  padding-top: 28px;
}
.wa-layout--site-float .wa-layout__main {
  padding-left: var(--wa-site-pad-x);
  padding-right: var(--wa-site-pad-x);
}
@media (max-width: 960px) {
  .wa-layout--site-float .wa-layout__site-nav {
    display: none;
  }
  .wa-layout--site-float .wa-layout__navbar-inner {
    max-width: 100%;
  }
}