/* ======================================================= */
/* 原始代码部分 */
/* ======================================================= */

/*控制cell图片位置*/
.nav-cell-img {
    position: absolute;
    top: 0;
    left: -5px;
    width: 25px;
    z-index: 15 !important;

    /* 核心：确保 transform 有过渡时间，用于鼠标离开时平滑复位 (0.2s) */
    transition: transform 0.2s ease-in-out;

    /* 确保默认无动画，让 transition 工作 */
    animation: none;
}

.nav-link {
    position: relative;
    z-index: 20 !important;
    font-size: 130%;
    font-weight: bold;
    color: #000;
}

.nav-cell-container {
    position: relative;
    display: flex;
    margin-left: 20px;
}

#navbarSupportedContent {
    position: relative;
    display: flex;
    margin-right: 0.5%;
}

/*控制主菜单的 hover 颜色过渡*/
.navbar-nav .nav-item.dropdown:hover .nav-link,
.navbar-nav .nav-item.dropdown.show .nav-link {
    color: #5A4634 !important;
    transition: all 0.3s ease;
}


/* ======================================================= */
/* 优化核心：下拉菜单平滑滑落 (已修正乱码) */
/* ======================================================= */

/* 1. 下拉菜单的默认隐藏状态：高度为0，透明，鼠标穿透 */
.dropdown-menu {
    /* 核心收起属性 */
    max-height: 0;
    overflow: hidden;

    /* 辅助过渡属性 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* 过渡效果设置 */
    transition:
        max-height 0.4s ease-in-out,
        opacity 0.3s ease-in-out 0.1s,
        visibility 0s 0.4s,
        pointer-events 0s 0.4s;


    /* 保持您原有的其他样式 */
    display: block;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

/* 2. 悬停/展开状态：完全展开，允许鼠标交互 */
.navbar-nav .nav-item.dropdown:hover>.dropdown-menu,
.navbar-nav .nav-item.dropdown.show>.dropdown-menu {
    /* 核心展开属性 */
    max-height: 1000px;

    /* 辅助过渡属性 */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    /* 过渡效果设置 */
    transition:
        max-height 0.4s ease-in-out,
        opacity 0.3s ease-in-out,
        visibility 0s 0s,
        pointer-events 0s 0s;

    margin-top: 0;
}


/* ======================================================= */
/* 原始代码部分（下拉菜单项目样式及Logo控制） */
/* ======================================================= */

.dropdown-menu .dropdown-item {
    color: #5A4634;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    font-weight: 600;
}

.dropdown-menu .dropdown-item {
    transition: background-color 220ms cubic-bezier(.2, .8, .2, 1),
        color 180ms ease;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #f1dab3ee !important;
    color: #5A4634 !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: #F2A479 !important;
    /* 杏橙 active */
    color: #2C1E16 !important;
}

#homebutton:hover

/*home键不涉及下拉列表，于是设置id（menu中）单独控制*/
    {
    color: #a37070 !important;
    transition: all 0.3s ease;
}


/*logo样式控制与功能实现*/
.logo-switcher-container {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 130px;
    height: 70px;
    cursor: pointer;
    left: 0px !important;
}

.navbar-logo {
    position: absolute;
    object-fit: contain;
    transition: opacity 0.3s ease-in-out;
}

.logo-switcher-container a {
    width: 100%;
    height: 100%;
    position: absolute;

}

#nav_default_logo {
    opacity: 1 !important;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#nav_hover_logo {
    opacity: 0 !important;
    height: 150%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo-switcher-container:hover #nav_hover_logo {
    opacity: 1 !important
}

.logo-switcher-container:hover #nav_default_logo {
    opacity: 0 !important;
}

/* ======================================================= */
/* 【最终修正效果区域】：修复动画结束与悬停样式接管时的闪烁 */
/* ======================================================= */

/* 1. 修正后的跳动与旋转动画 (@keyframes) */
@keyframes cute-jump-and-rotate {

    0% {
        transform: translateY(0) scale(1) rotate(0deg);
    }

    30% {
        transform: translateY(-8px) scale(1.1) rotate(15deg);
    }

    60% {
        transform: translateY(1px) scale(1) rotate(15deg);
    }

    /* 核心修正：让 100% 状态与外部 transform: rotate(15deg) 完全一致 */
    100% {
        transform: translateY(0) scale(1) rotate(15deg);
    }
}

/* 2. 悬停时触发动画并保持旋转 */
.nav-cell-container:hover .nav-cell-img {

    /* 立即取消 transition，确保动画瞬间接管 */
    transition: none;

    /* 动画立即开始 (0.4s 播放时长) */
    animation: cute-jump-and-rotate 0.4s ease-out 1;

    /* 通过独立的 transform 属性接管旋转状态 */
    /* 关键：此值与 @keyframes 100% 保持一致，消除闪烁 */
    transform: rotate(15deg);
}

#ihp-navbar-2-menu {
    /* 1. 确保它绝对定位 */
    position: absolute;

    /* 2. 移除默认的左对齐（left: 0） */
    left: auto !important;

    /* 3. 强制右对齐到触发元素的右边缘，使其向左展开 */
    right: -150px !important;

    /* 4. 确保它在最上层，避免被其他元素遮挡 */
    z-index: 1000;
}

/* ==== Mobile fixes for collapsed navbar ==== */
@media (max-width: 991.98px) {

    /* 侧栏展开时，保证能滚动完所有菜单 */
    .navbar-collapse {
        max-height: calc(100dvh - 70px);
        overflow-y: auto;
    }

    /* 小屏不用贴图小细胞，避免挡点击/挤行高 */
    .nav-cell-img {
        display: none !important;
    }

    /* 你桌面端把 dropdown 居中（left:50% + transform），小屏要改回标准流 */
    .navbar .dropdown-menu {
        position: static !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        min-width: 100%;
        /* 让子项好点按 */
        padding-left: .25rem;
        padding-right: .25rem;
        box-shadow: none;
        /* 收起阴影，像正常列表 */
        background: transparent;
        backdrop-filter: none;
    }

    /* 你之前单独右移了 IHP 的下拉：小屏必须还原，否则会溢出屏幕 */
    #ihp-navbar-2-menu {
        position: static !important;
        right: auto !important;
        left: auto !important;
    }

    /* 禁掉 hover-only：小屏只用点击 */
    .dropdown:hover .dropdown-menu {
        display: none !important;
    }
}