/* Zibll body.nav-fixed: hard 88px reserve (main.css), not bare --nav-height.
 * Nav bar itself is ~60px; extra space matches zibll chrome/shadow gap.
 * --nav-fixed-reserve is shared with the hero pull-up so they cancel exactly
 * (zibll: body padding-top 88px + .slide-header { margin-top: -90px }). */
body.nav-fixed {
  --nav-fixed-reserve: 88px;
  padding-top: var(--nav-fixed-reserve);
}

@media (max-width: 768px) {
  body.nav-fixed {
    --nav-fixed-reserve: 72px;
    padding-top: var(--nav-fixed-reserve);
  }
}

@media (max-width: 640px) {
  body.nav-fixed {
    --nav-fixed-reserve: 60px;
    padding-top: var(--nav-fixed-reserve);
  }
}

/* Fixed nav without hero overlay: take header out of flow.
   body.nav-fixed already reserves space via padding-top. */
body.nav-fixed .header:not(.show-slide) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

/* Nav lives inside the fixed header — don't keep sticky (double offset). */
body.nav-fixed .header:not(.show-slide) .site-nav,
body.nav-fixed .header:not(.show-slide) .navbar.navbar-top {
  position: relative;
  top: auto;
}

/*
 * Non-home pages have no hero under the fixed header. Keep the first content
 * (breadcrumb / article) clearly below the bar even if a fluid widget zone is
 * empty or a child uses negative margin.
 */
body.nav-fixed:not(:has(.header.show-slide)) .fluid-widget-wrap:first-of-type:empty + main.container,
body.nav-fixed:not(:has(.header.show-slide)) main.container:first-of-type {
  scroll-margin-top: calc(var(--nav-fixed-reserve, 88px) + 8px);
}

/* Hero sits under transparent fixed/absolute header.
 * MUST cancel the full --nav-fixed-reserve (88/72/60), not just --nav-height (60).
 * Using only -60px against 88px padding left a ~28px blank strip above the hero. */
body.nav-fixed .header-slider-container,
body.nav-fixed .header-components-container,
body.nav-fixed .header-components.slide-header {
  margin-top: calc(var(--nav-fixed-reserve, 88px) * -1) !important;
  position: relative;
  z-index: 1;
}

/* ============================================================
 * AKSRT Navigation — Zibll-aligned
 *
 * - 高度 60px (--nav-height)
 * - 毛玻璃 blur-bg（saturate(5) blur(20px)）
 * - 透明叠 slider → 滚动后恢复实底
 * - 滚动隐藏（scroll-down-hide 等价）
 * ============================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--nav-height, 60px);
  background-color: var(--blur-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: saturate(5) blur(20px);
  -webkit-backdrop-filter: saturate(5) blur(20px);
  transition: background-color 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease,
              transform 0.3s ease;  /* 滚动隐藏过渡 */
}

/* 滚动隐藏头部 — 对齐 zibll .scroll-down.nav-fixed .header.scroll-down-hide */
.site-nav.is-hidden {
  transform: translateY(-105%);
}

.site-nav--static {
  position: relative;
}

.site-nav--transparent {
  background: transparent;  /* 对齐 zibll .header.show-slide: 透明覆盖在 slider 上 */
  border-bottom-color: transparent;
}

.site-nav--transparent:not(.is-scrolled) {
  --header-color: #fff;  /* 对齐 zibll --header-color:#fff */
  color: #fff;
}

.site-nav--transparent:not(.is-scrolled) a {
  color: inherit;
}

.site-nav--transparent.is-scrolled {
  background: var(--blur-bg);  /* 滚动后恢复毛玻璃背景 */
  border-bottom-color: var(--color-line-soft);
}

.site-nav--blur {
  background: var(--blur-bg);
  backdrop-filter: saturate(5) blur(20px);
  -webkit-backdrop-filter: saturate(5) blur(20px);
  border-bottom-color: transparent;
}

html.dark .site-nav--transparent:not(.is-scrolled),
html.dark .site-nav--blur:not(.is-scrolled),
body.dark-theme .site-nav--transparent:not(.is-scrolled),
body.dark-theme .site-nav--blur:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}

html.dark .site-nav--transparent.is-scrolled,
html.dark .site-nav--blur.is-scrolled,
body.dark-theme .site-nav--transparent.is-scrolled,
body.dark-theme .site-nav--blur.is-scrolled {
  background: var(--blur-bg);
  border-bottom-color: var(--color-line-soft);
}

/* 滚动后追加阴影 — 对齐 zibll .body-scroll .header */
.site-nav.is-scrolled {
  box-shadow: 0 4px 10px var(--main-shadow, var(--shadow-sm));
}

/* WordPress Admin Bar 已全局禁用，无需偏移规则 */

/* ============================================================
 * Inner / Row layout
 * ============================================================ */
.site-nav__inner {
  max-width: var(--nav-max-width, var(--container));
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-nav__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: var(--nav-height, 60px);
}

/* ============================================================
 * Brand
 * ============================================================ */
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: min(48vw, 360px);
  padding: 7px 10px;
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  text-decoration: none;
}

.site-brand:hover {
  color: var(--color-ink);
  text-decoration: none;
}

.site-brand--has-logo {
  gap: 0;
}

.site-brand__logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--color-on-primary, #fff);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active, var(--color-primary-dark)));
  letter-spacing: 0.02em;
  overflow: hidden;
}

.site-brand__media {
  display: block;
  flex: 0 1 auto;
  max-width: 100%;
  padding: 0 30px;
  line-height: 0;
  box-sizing: border-box;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none !important;
  opacity: 1;
}

.site-brand__img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1;
  transform: none !important;
}

.site-brand__name {
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Light/dark logo: single adaptive img (white-src/dark-src via theme.js) */
.navbar-logo > img,
.navbar-logo .site-brand__logo-img,
.site-brand .site-brand__logo-img,
.site-brand__logo-img,
.site-brand .navbar-logo img {
  height: 36px !important;
  width: auto !important;
  max-width: min(180px, 40vw) !important;
  max-height: 36px !important;
  padding: 0 !important;
  object-fit: contain !important;
  display: inline-block;
  vertical-align: middle;
}

/* Legacy dual-img classes (if any remain elsewhere) */
.site-brand__logo-img--dark {
  display: none;
}

html.dark .site-brand__logo-img--light,
[data-theme="dark"] .site-brand__logo-img--light,
body.dark-theme .site-brand__logo-img--light {
  display: none;
}

html.dark .site-brand__logo-img--dark,
[data-theme="dark"] .site-brand__logo-img--dark,
body.dark-theme .site-brand__logo-img--dark {
  display: inline-block;
}

/* ============================================================
 * Desktop menu
 * ============================================================ */
ul.nav-desktop {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-desktop--fallback {
  display: none;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

ul.nav-desktop a,
.nav-desktop--fallback a {
  color: var(--color-ink-3);
  font-size: 14px;
  font-weight: 500;
  padding: 0 12px; /* 对齐 zibll：仅水平 padding，垂直居中靠 flex 行高 */
  border-radius: 4px;
  transition: color var(--dur-fast, 0.15s) var(--ease),
              background var(--dur-fast, 0.15s) var(--ease);
}

/* Hover — 对齐 zibll: 仅变色，无背景 */
ul.nav-desktop a:hover,
.nav-desktop--fallback a:hover {
  color: var(--color-primary);
  background: transparent;
}

/* Active page — 对齐 zibll: 仅变色（指示器走下方胶囊条） */
ul.nav-desktop .current-menu-item > a,
ul.nav-desktop .current_page_item > a {
  color: var(--color-primary);
  background: transparent;
}

/* ============================================================
 * Desktop submenu (dropdown)
 * ============================================================ */
ul.nav-desktop .menu-item {
  position: relative;
}

/* 顶部 hover/current 胶囊指示器 — 对齐 zibll .navbar-nav>li:before
   （5px 高、底部 15px 圆角，从 header 顶缘垂下）。
   stretch 链（row→ul→li）让 li 充满 60px 行高，::before top:0 即锚定 header 顶部；
   ::before 为 absolute 不进入 flex 流，不挤压链接。 */
ul.nav-desktop {
  align-self: stretch;
}

ul.nav-desktop > .menu-item {
  align-self: stretch;
  display: flex;
  align-items: center;
}

ul.nav-desktop > .menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--focus-color, var(--color-primary));
  border-radius: 0 0 15px 15px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

ul.nav-desktop > .menu-item:hover::before,
ul.nav-desktop > .current-menu-item::before,
ul.nav-desktop > .current_page_item::before {
  opacity: 1;
}

ul.nav-desktop .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 998; /* 保留较高 z-index（zibll 用 99，AKSRT 栈更深，避免被覆盖） */
  min-width: 140px;
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 6px;
  background: var(--main-bg-color, #fff);
  border: none;
  border-radius: var(--main-radius, var(--radius, 8px));
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

ul.nav-desktop .menu-item:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

ul.nav-desktop .sub-menu .menu-item > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 4px;
  white-space: nowrap;
}

ul.nav-desktop .sub-menu .menu-item > a:hover {
  background: var(--color-primary-soft, rgba(240, 68, 148, 0.08));
  color: var(--color-primary);
}

/* Nested submenus fly out to the right — 对齐 zibll top:-10px，去 margin-left */
ul.nav-desktop .sub-menu .sub-menu {
  top: -10px;
  left: 100%;
  margin: 0;
}



/* ============================================================
 * Zibll .header.show-slide — transparent gradient over hero
 * ============================================================ */
.header.show-slide {
  --header-bg: linear-gradient(0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 80%);
  --header-color: #fff;
  -webkit-backdrop-filter: unset;
  backdrop-filter: unset;
}

body.nav-fixed .header.show-slide {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 30;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Nav inside absolute header must not use sticky (avoids double offset) */
body.nav-fixed .header.show-slide .site-nav,
body.nav-fixed .header.show-slide .navbar.navbar-top {
  position: relative !important;
  top: auto !important;
  background: var(--header-bg, transparent) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  color: var(--header-color, #fff);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.header.show-slide .navbar.navbar-top,
.header.show-slide .site-nav {
  background: var(--header-bg, transparent);
  border-bottom-color: transparent;
  box-shadow: none;
  color: var(--header-color, #fff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header.show-slide .site-nav:not(.is-scrolled) a,
.header.show-slide .site-nav:not(.is-scrolled) .icon-btn,
.header.show-slide .site-nav:not(.is-scrolled) .site-brand__name {
  color: #fff;
}

.header.show-slide .site-nav.is-scrolled,
.site-nav.is-scrolled {
  background: var(--blur-bg);
  color: var(--header-color, var(--color-ink-2));
  border-bottom-color: rgba(255, 255, 255, 0.45);
  backdrop-filter: saturate(5) blur(20px);
  -webkit-backdrop-filter: saturate(5) blur(20px);
  box-shadow: 0 4px 10px var(--main-shadow, rgba(116, 116, 116, 0.08));
}

.navbar.navbar-top {
  margin: 0;
  border-radius: 0 !important;
  font-size: 15px;
}

.container-header,
.container-footer {
  max-width: calc(var(--mian-max-width, var(--container, 1200px)) + 180px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.navbar-top .navbar-brand {
  padding: 7px 10px;
}

.navbar-logo > img,
.navbar-logo .site-brand__logo-img,
.site-brand .site-brand__logo-img,
.site-brand__logo-img {
  height: 36px !important;
  width: auto !important;
  max-width: min(180px, 40vw) !important;
  max-height: 36px !important;
  padding: 0 !important;
  object-fit: contain !important;
}

.navbar-top .navbar-nav,
.navbar-top ul.nav-desktop {
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
}

.navbar-top .navbar-nav > li > a,
.navbar-top ul.nav-desktop > li > a {
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
  display: inline-flex !important;
  align-items: center;
  min-height: 36px;
  font-size: 15px;
}

.navbar-top .site-nav__row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--nav-height, 60px);
}

.navbar-top .nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scroll-down.nav-fixed .header.scroll-down-hide,
body.scroll-down.nav-fixed .header.scroll-down-hide {
  transform: translate3d(0, -105%, 0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


/* Layout-1 style: keep search as icon; hide expanded desktop form */
@media (min-width: 992px) {
  .navbar-top .nav-searchbox--desktop {
    display: none !important;
  }
}

/* Transparent white controls on gradient hero */
.header.show-slide .site-nav:not(.is-scrolled) .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}

.header.show-slide .site-nav:not(.is-scrolled) .btn-outline:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.header.show-slide .site-nav:not(.is-scrolled) .nav-user__guest-avatar,
.header.show-slide .site-nav:not(.is-scrolled) .icon-btn {
  color: #fff;
}