/* ==================== 导航区域 ==================== */
.main-nav {
  background: linear-gradient(90deg, #59B990 0%, #6C9BE3 100%);
  position: sticky;
  top: 0;
  height: 6rem;
  font-size: 1.3rem;
  color: #FFFFFF;
}

.nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6rem;
  padding: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: var(--font-nav);
  color: var(--nav-primary);
  transition: color 0.2s ease;
}

.nav-links a {
  padding: 0 1.9rem;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--nav-primary);
  height: 100%;
  transition: all 0.3s;
}

.nav-links a:hover {
  color: var(--nav-primary-hover);
}

.nav-links a.active {
  color: var(--nav-primary-hover);
  font-size: var(--font-nav-active);
  font-weight: bold;
  height: 100%;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 0.4rem;
  background: linear-gradient(90deg, #FFF4D8 0%, #B3FAFF 100%);
  box-shadow: 0 1px 6px 0 #6ED0BE;
}

.has-sub-menu {
  font-size: var(--font-nav);
  position: relative;
  display: inline-block;
  cursor: pointer;
  height: 100%;
}

.has-sub-menu:hover .sub-menu {
  visibility: visible;
  opacity: 1;
}

.has-sub-menu .sub-menu {
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  min-height: 8.4rem;
  left: 50%;
  transform: translateX(-50%);
  top: 5.8rem;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.sub-menu-arrow {
  width: 0px;
  height: 0px;
  border-top: 6px solid transparent;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 6px solid #62acb7;
}

.sub-menu-divider {
  width: 100%;
  height: 0.3rem;
  background: linear-gradient(90deg, #59b990 0%, #6c9be3 100%);
}

.has-sub-menu .sub-menu ul:not(.more_sub-menu-list, .more_nested-sub-menu) {
  list-style: none;
  display: flex;
  flex: 1;
  width: 100%;
  box-shadow: 0px 2px 8px 0px rgba(73, 79, 92, 0.2);
  background: #fff;
  border-radius: 0 0 2px 2px;
  height: 6.9rem;
  line-height: 6.9rem;
}

.has-sub-menu ul a {
  font-size: var(--font-nav);
  color: var(--color-primary);
  height: 100%;
  white-space: nowrap;
}

.has-sub-menu ul a:hover {
  color: var(--color-active);
}

.sub-menu a.sub-active {
  color: var(--color-active);
}

.site-search-btn {
  transform: rotate(75deg);
  transform-origin: center;
}

.site-search-icon {
  color: #000000;
  transition: all 0.3s;
}

.search-box:hover .site-search-input,
.site-search-input:focus {
  border: 1px solid var(--color-active);
}

.search-box:hover .site-search-icon,
.site-search-input:focus+.site-search-btn .site-search-icon {
  color: var(--color-active);
}

.site-header--special-theme .search-box input {
  background: rgba(185, 18, 18, 0.6);
  border: 1px solid rgba(215, 221, 229, 0);
  color: #fff;
}

.site-header--special-theme .site-search-icon,
.site-header--special-theme .search-box:hover .site-search-icon,
.site-header--special-theme .site-search-input:focus+.site-search-btn .site-search-icon {
  color: #fff;
}

.site-header--special-theme .search-box:hover .site-search-input,
.site-header--special-theme .site-search-input:focus {
  border: 1px solid #fff;
}

.site-header--special-theme .site-search-input::-webkit-input-placeholder {
  color: #aaa;
}

.site-header--special-theme .site-search-input::-moz-placeholder {
  color: #aaa;
}

.site-header--special-theme .site-search-input::placeholder {
  color: #aaa;
}


/* 基础重置 */
.main-nav .hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

.main-nav .hamburger span {
  width: 100%;
  height: 2px;
  background: #000;
  /* 根据你的主题色调整 */
  transition: all 0.3s ease;
}

/* 更多 */
.more_sub-menu {
  width: 1000px;
  /* 原 45rem 已被此行覆盖，故只保留一处 */
}

.more_sub-menu-list {
  flex-direction: column;
  /* max-height: 60rem;
  overflow: auto; */
  background: #fff;
}

.more_has-nested-sub {
  display: flex;
  border-bottom: 1px solid #c5bfbf99;
}

.more_has-nested-sub>a {
  padding: 1rem 1.9rem;
}

.more_sub-title {
  width: 100px;
}

.more_nested-sub-menu {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

.more_nested-sub-menu a {
  font-size: var(--font-default) !important;
  color: var(--color-default) !important;
}

.more_nested-sub-menu a:hover {
  color: var(--color-active) !important;
}

.sub-menu_category {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-menu_category a {
  font-size: var(--font-default) !important;
  height: auto !important;
}

.has-son_categories {
  display: none !important;
  box-shadow: none !important;
  flex-direction: column;
  border-radius: 4px !important;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 170px !important;
  overflow: auto;
  max-height: 44rem;
  height: auto !important;
  top: 5.6rem;
  pointer-events: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.has-son_categories::-webkit-scrollbar {
  display: none;
}

.sub-menu_category:hover>a {
  color: var(--color-active);
}

.sub-menu_category .arrow-icon,
.nav-more-wrapper .arrow-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("https://media.gzstv.com/images/2025/12/19/1696fbdb36ef44f9b67579d3c4440b52.png") no-repeat center;
  transform-origin: center;
  transform: rotate(180deg);
  margin-left: -1.9rem;
  background-size: 100% 100%;
  transition: transform 0.3s ease;
}

.nav-more-wrapper .arrow-icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(180deg);
  pointer-events: none;
}

.sub-menu_category:hover .has-son_categories {
  display: flex !important;
  box-shadow: 0px 2px 10px 0px rgba(73, 79, 92, 0.2) !important;
}

.sub-menu_category:hover .arrow-icon {
  transform: rotate(0deg);
}

.has-son_categories li,
.more_son-sub-menu li {
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.has-son_categories li a,
.more_son-sub-menu li a {
  height: 4.4rem !important;
  pointer-events: auto;
  font-size: 1.6rem;
  color: var(--color-default);
}

.has-son_categories li:hover,
.more_son-sub-menu li:hover {
  background: rgba(60, 126, 227, 0.1);
}

.has-son_categories li:hover a,
.more_son-sub-menu li:hover a {
  color: var(--color-active);
}

.nav-more-wrapper {
  position: relative;
}

.more_son-sub-menu {
  display: none;
  border-radius: 4px !important;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 170px !important;
  overflow: auto;
  max-height: 44rem;
  height: auto !important;
  pointer-events: none;
  scrollbar-width: none;
  background: #fff;
  z-index: 9;
  box-shadow: 0 0 20px #dedede !important;
  top: 4rem;
  text-align: center;
}

.nav-more-wrapper:hover .more_son-sub-menu {
  display: block !important;
}

.nav-more-wrapper:hover .arrow-icon {
  transform: translateY(-50%) rotate(0deg);
}

.nav-more-wrapper li {
  pointer-events: none;
  height: 100%;
}

.nav-more-wrapper li a {
  pointer-events: auto;
  padding-bottom: 1rem;
}

.more_son-sub-menu a {
  padding: 0 !important;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .main-nav .hamburger {
    display: flex;
  }

  .main-nav .nav-links-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    /* 背景色 */
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    overflow-y: auto;
  }

  .main-nav .nav-links {
    display: flex;
    flex-direction: column;
    padding: 80px 20px 20px;
    gap: 20px;
    visibility: hidden;
    transition: color 0.3s;
  }

  .main-nav .nav-links a,
  .main-nav .has-sub-menu>a {
    font-size: 18px;
    text-decoration: none;
    color: #000;
    padding: 10px 0;
  }

  .main-nav .has-sub-menu {
    position: relative;
  }

  .main-nav .sub-menu {
    display: none;
    margin-top: 10px;
    padding-left: 15px;
  }

  .main-nav .sub-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .main-nav .sub-menu a {
    font-size: 16px;
    color: #555;
  }

  /* 当菜单展开时 */
  .main-nav.nav-open .nav-links-wrapper {
    transform: translateX(0);
  }

  /* 汉堡按钮激活状态（可选动画） */
  .main-nav.nav-open .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .main-nav.nav-open .hamburger span:nth-child(2) {
    opacity: 0;
  }

  .main-nav.nav-open .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  .nav-container {
    overflow: hidden;
    justify-content: space-between;
  }

  .main-nav.nav-open .nav-links {
    position: absolute;
    top: 6rem;
    left: 0px;
    background: #fff;
    width: 25%;
    height: auto;
    overflow: auto;
    padding: 0;
    gap: 0;
    border-radius: 4px;
    visibility: visible;
    transition: all 0.3s;
  }

  .main-nav.nav-open .nav-links a,
  .main-nav.nav-open .has-sub-menu {
    height: auto;
  }

  .main-nav.nav-open a.active::after {
    display: none;
  }
}

/* ==================== “更多”下拉：自适应定位（含箭头） ==================== */
/* 定位基准从“更多”按钮换到整条导航，JS 未执行时兜底贴右 */
.main-nav .has-sub-menu:has(> .more_sub-menu) {
  position: static;
}

.main-nav .has-sub-menu .sub-menu.more_sub-menu {
  width: 1000px;
  max-width: calc(100vw - 6rem);
  left: auto;
  right: 4.8rem;
  transform: none;
  /* 只过渡透明度：left 由 JS 写入时必须立即生效，否则会看到横向滑动 */
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}

.main-nav .has-sub-menu .sub-menu.more_sub-menu .more_sub-menu-list {
  width: 100%;
}

/* 旧箭头（在菜单内居中，会随菜单跑偏）下线 */
.main-nav .has-sub-menu .sub-menu-arrow {
  display: none;
}

/* 新箭头：画在按钮上，永远指向按钮中心 */
.main-nav .has-sub-menu>a::after {
  content: '';
  position: absolute;
  top: 5.8rem;
  /* 与菜单顶部对齐：箭头落在菜单上方的透明区域，若放在导航条上会被同色系渐变吞掉 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 6px solid #62acb7;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  pointer-events: none;
  z-index: 10;
}

.main-nav .has-sub-menu:hover>a::after {
  opacity: 1;
}

/* 补回旧箭头让出的 12px 高度 */
.main-nav .has-sub-menu .sub-menu {
  padding-top: 12px;
}

.site-name-logo {
  height: 1.7rem;
}


@media (max-width: 768px) {

  /* 搜索框移入导航条后的样式 */
  .main-nav .nav-container .search-box {
    margin-left: auto;
    /* 贴右侧 */
    margin-right: 0;
    flex: 0 1 20rem;
  }

  .main-nav .nav-container .search-box input {
    width: 100%;
    height: 3.4rem;
  }

  .main-nav .nav-container .search-box button {
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
  }

  /* 未展开时三条杠白色；展开后菜单是白底，回黑色才看得见 */
  .main-nav:not(.nav-open) .hamburger span {
    background: #fff;
  }
}

/* ==================== 移动端导航：抽屉滚动 + 点击展开 + 「更多」纵向化 ==================== */
@media (max-width: 768px) {

  /* 1. 抽屉必须有高度上限，否则 overflow: auto 不生效，末尾项（含「更多」）滚不到 */
  .main-nav.nav-open .nav-links {
    left: 0;
    right: 0;
    width: auto;
    /* 原 width: 25% 会把 16 个条目挤成 93px 窄条，按设计可回退 */
    max-height: calc(100vh - 6rem);
    /* 关键 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 2rem 3.2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    z-index: 1002;
  }

  /* 2. 子菜单统一改为文档流，默认收起（visibility 必须显式复位，桌面值是 hidden） */
  .main-nav .has-sub-menu .sub-menu {
    display: none;
    position: static;
    left: auto;
    top: auto;
    right: auto;
    transform: none;
    min-height: 0;
    width: auto;
    max-width: none;
    padding: 0 0 0 1.6rem;
    background: transparent;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    align-items: stretch;
  }

  .main-nav .has-sub-menu.sub-open>.sub-menu {
    display: block;
  }

  /* 3. 按钮上那枚桌面箭头（::after）在移动端会飘到 58px 下方，直接关掉 */
  .main-nav .has-sub-menu>a::after {
    display: none;
  }

  /* 4. 普通频道子菜单：桌面是 69px 高横排一条，移动端改竖排 */
  .main-nav .has-sub-menu .sub-menu ul:not(.more_sub-menu-list, .more_nested-sub-menu) {
    display: block;
    height: auto;
    line-height: 1.5;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }

  .main-nav .has-sub-menu .sub-menu ul:not(.more_sub-menu-list, .more_nested-sub-menu) a {
    display: block;
    height: auto;
    padding: 8px 0;
    white-space: normal;
  }

  .main-nav .sub-menu_category {
    display: block;
    justify-content: flex-start;
    padding: 8px 0;
  }

  /* 5.「更多」：1000px 横排大菜单改为纵向列表 */
  .main-nav .has-sub-menu .sub-menu.more_sub-menu {
    width: auto;
    max-width: none;
    right: auto;
    padding-top: 0;
  }

  .main-nav .has-sub-menu .sub-menu.more_sub-menu .more_sub-menu-list {
    width: 100%;
    background: transparent;
  }

  .main-nav .more_has-nested-sub {
    display: block;
    border-bottom: 1px solid #f0f0f0;
    padding: 4px 0;
  }

  .main-nav .more_has-nested-sub>a {
    display: block;
    padding: 8px 0;
  }

  .main-nav .more_sub-title {
    width: auto;
  }

  .main-nav .more_nested-sub-menu {
    display: block;
    padding-left: 1.6rem;
  }

  /* 6. 二级下拉在触屏点不出来，直接常驻展开，去掉箭头和浮层 */
  .main-nav .nav-more-wrapper .more_son-sub-menu,
  .main-nav .sub-menu_category .has-son_categories {
    display: block !important;
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: auto !important;
    max-height: none;
    box-shadow: none !important;
    background: transparent;
    text-align: left;
    padding-left: 1.6rem;
    pointer-events: auto;
  }

  .main-nav .nav-more-wrapper .arrow-icon,
  .main-nav .sub-menu_category .arrow-icon {
    display: none;
  }

  /* 7. 放开 pointer-events，否则二级项点不动 */
  .main-nav .more_son-sub-menu li,
  .main-nav .nav-more-wrapper li,
  .main-nav .has-son_categories li {
    pointer-events: auto;
    height: auto;
  }

  .main-nav .more_son-sub-menu li a,
  .main-nav .has-son_categories li a {
    height: auto !important;
    padding: 6px 0 !important;
    font-size: 15px !important;
  }
}

@media (max-width: 768px) {
  .main-nav.nav-open .nav-links {
    /* top / height 由 JS 按导航条实际位置写入，固定 6rem 会遮住导航条 */
    max-height: calc(100vh - 16rem);
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 2rem 8rem;
    box-sizing: border-box;
    background: #fff;
    z-index: 1002;
    visibility: visible;
  }
}

@media (max-width: 768px) {

  /* 点击（聚焦）后展开，再点别处失焦自动收起，无需 JS */
  .main-nav .has-sub-menu:focus-within>.sub-menu {
    display: block;
  }

  /* 展开时必须回到文档流：桌面那套 absolute + 居中定位会让它飘到导航条外面 */
  .main-nav .has-sub-menu>.sub-menu {
    position: static;
    left: auto;
    top: auto;
    right: auto;
    transform: none;
    width: auto;
    max-width: none;
    min-height: 0;
    margin-top: 8px;
    padding: 0 0 0 1.6rem;
    background: transparent;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
  }

  /* 「更多」的 1000px 横向大菜单在移动端改纵向 */
  .main-nav .has-sub-menu>.sub-menu.more_sub-menu {
    width: auto;
    right: auto;
  }

  .main-nav .more_sub-menu-list {
    width: 100%;
    background: transparent;
  }

  .main-nav .more_has-nested-sub {
    display: block;
    border-bottom: 1px solid #f0f0f0;
    padding: 4px 0;
  }

  .main-nav .more_has-nested-sub>a {
    display: block;
    padding: 8px 0;
  }

  .main-nav .more_sub-title {
    width: auto;
  }

  .main-nav .more_nested-sub-menu {
    display: block;
    padding-left: 1.6rem;
  }
}

@media (max-width: 768px) {

  /* 展开区撑满抽屉宽度并左对齐，避免被 .nav-links 的 align-items: center 挤成居中的窄条 */
  .main-nav .has-sub-menu>.sub-menu {
    align-self: stretch;
    width: 100%;
    max-width: none;
    align-items: flex-start;
    text-align: left;
  }

  /* 干掉 PC 那条居中的渐变分隔条和箭头 */
  .main-nav .has-sub-menu>.sub-menu .sub-menu-divider,
  .main-nav .has-sub-menu>.sub-menu .sub-menu-arrow {
    display: none;
  }

  /* 「更多」列表撑满、左对齐 */
  .main-nav .more_sub-menu-list {
    width: 100%;
    align-items: stretch;
    padding: 0;
    margin: 0;
  }

  /* 每个频道分组：整宽细线分隔 */
  .main-nav .more_has-nested-sub {
    display: block;
    border-bottom: 1px solid #F0F2F5;
    padding: 10px 0 6px;
    margin: 0;
  }

  /* 一级：频道名（水美贵州、文化） */
  .main-nav .more_sub-title {
    display: block;
    width: auto;
    padding: 2px 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #242525;
    text-align: left;
  }

  /* 二级：子分类，缩进 1.6rem */
  .main-nav .more_nested-sub-menu {
    display: block;
    padding: 0 0 0 1.6rem;
  }

  .main-nav .more_nested-sub-menu a {
    display: block;
    padding: 7px 0;
    font-size: 15px;
    text-align: left;
  }

  /* 三级：更深一层，再缩进 */
  .main-nav .more_son-sub-menu {
    display: block !important;
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: auto !important;
    max-height: none;
    box-shadow: none !important;
    background: transparent;
    padding: 0 0 0 1.6rem;
    text-align: left;
    pointer-events: auto;
  }

  .main-nav .more_son-sub-menu a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    text-align: left;
  }

  /* 二级已直接展开，箭头不需要 */
  .main-nav .nav-more-wrapper .arrow-icon {
    display: none;
  }

  .main-nav .more_son-sub-menu li,
  .main-nav .nav-more-wrapper li {
    pointer-events: auto;
    height: auto;
    justify-content: flex-start;
  }
}


@media (max-width: 768px) {

  /* iOS：抽屉背景必须实心且独立成层，否则正文会透上来 */
  .main-nav.nav-open {
    z-index: 2000;
  }

  /* .nav-container 原本 overflow: hidden，会参与裁剪，这里放开 */
  .main-nav.nav-open .nav-container {
    overflow: visible;
  }

  .main-nav.nav-open .nav-links {
    /* 用 background-color 而非简写，避免被其他规则的 background-image 干扰 */
    background-color: #ffffff !important;
    background-image: none !important;
    /* 关键：iOS 上这条会把滚动层移出原层叠上下文，正是背景穿透的元凶 */
    -webkit-overflow-scrolling: auto;
    isolation: isolate;
    z-index: 2001;
  }
}