/*
 * 花卷云官网主题补充样式
 *
 * app.css 是旧站（Vue SPA）的构建产物，里面的 scoped 选择器依赖模板上的 data-v-* 属性，
 * 尽量不改。这里只补「静态化之后失去 JS 支撑」的部分：
 *   1. 导航：一级项改成 <a>、下拉改成 :hover 展开、滚动固定后 logo 换色
 *   2. 移动端：菜单按钮与全屏菜单的展开态
 *   3. 页脚二维码：旧站用 element-ui tooltip（需要 JS），改成 CSS :hover 气泡
 *   4. 首页轮播：旧站 el-carousel 用 JS 写 transform 位移，这里改 CSS 淡入淡出
 *   5. 图片横滑区：旧站 swiper 用 JS 驱动，这里改成原生横向滚动 + scroll-snap
 */

/* ---------- 1. 导航 ---------- */
.menus-li-title {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

.menus-dropdown {
    display: none;
    z-index: 20;
}

.menus-li:hover .menus-dropdown {
    display: block;
}

.submenu-box {
    color: inherit;
    text-decoration: none;
}

/* 下拉图标：旧站是 <el-image fit="cover">，静态化后用 span.el-image 保留布局 */
.submenu-image {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-block;
    overflow: hidden;
}

.submenu-image .el-image__inner {
    width: 40px;
    height: 40px;
    object-fit: cover;
    display: block;
}

/* logo 换色：白字 logo / 黑字 logo 两张图，固定或悬停时切黑 */
.hjy-logo {
    display: flex;
    align-items: center;
}

.hjy-logo .hjy-logo-black {
    display: none;
}

.top-nav.fixed .hjy-logo-white,
.top-nav:hover .hjy-logo-white {
    display: none;
}

.top-nav.fixed .hjy-logo-black,
.top-nav:hover .hjy-logo-black {
    display: inline-block;
}

/* 顶栏右侧两个入口 */
.top-main .name {
    text-decoration: none;
    color: inherit;
}

/* ---------- 2. 移动端菜单 ---------- */
.hjy-menu-btn {
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #333;
    padding: 4px 6px;
}

.hjy-mobile-menu {
    display: none;
    overflow-y: auto;
}

.hjy-mobile-menu.open {
    display: block;
}

.hjy-mobile-menu .el-menu-item {
    display: block;
    color: hsla(0, 0%, 100%, .8);
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    line-height: 50px;
    height: 50px;
    text-decoration: none;
}

.hjy-mobile-menu .el-menu-item:hover {
    color: #fff;
    background: none;
}

/* ---------- 3. 页脚二维码气泡（替代 element-ui tooltip） ---------- */
.footer-box .tips .icon {
    position: relative;
}

.footer-box .tips .icon .hjy-qr {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    width: 150px;
    padding: 6px;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
    z-index: 30;
}

.footer-box .tips .icon:hover .hjy-qr {
    display: block;
}

.hjy-qr img {
    display: block;
    width: 130px;
    height: 130px;
    margin: 0 auto 4px;
}

/* ---------- 4. 首页轮播：淡入淡出 ---------- */
/* 旧站靠 JS 给每个 .el-carousel__item 写 transform: translateX(...) 排开，
   静态页没有 JS 初始位移，四个 slide 会叠在一起 —— 这里改成只显示 .is-active。 */
.cont-swiper .el-carousel__item {
    transform: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
    z-index: 0;
}

.cont-swiper .el-carousel__item.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.cont-swiper .el-carousel__arrow {
    z-index: 3;
}

/* ---------- 5. 图片横滑区：替代 swiper ---------- */
.swiper-container {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.swiper-container::-webkit-scrollbar {
    display: none;
}

.swiper-wrapper {
    display: flex;
    transform: none !important;
    transition: none !important;
}

.swiper-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
}

/* 旧站 swiper 的分页圆点没有渲染到 DOM 里，这里隐藏可能存在的占位 */
.swiper-pagination {
    display: none;
}