/* ========== 1. Tailwind 自定义工具类（仅放单类名） ========== */
@layer utilities {
    .metal-texture {
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        position: relative;
    }
    .metal-texture::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(13, 36, 96, 0.6);
        z-index: 1;
    }
    .text-shadow {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    .nav-hover {
        transition: all 0.3s ease;
    }
    .nav-hover:hover {
        color: #E94560;
        transform: translateY(-2px);
    }
    /* 下拉菜单过渡基础类（适配你的 HTML 结构） */
    .dropdown-enter {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .dropdown-enter-active {
        opacity: 1;
        transform: translateY(0);
    }
    .banner-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s ease-in-out;
        z-index: 0;
    }
    .banner-slide.active {
        opacity: 1;
    }
    .active-dot {
        background-color: #E94560 !important;
    }
    .search-container {
        transition: all 0.3s ease;
        width: 0;
        overflow: hidden;
    }
    .search-container.active {
        width: 200px;
        margin-left: 1rem;
    }
}

/* ========== 2. 头部导航专属样式（核心修复下拉菜单） ========== */
/* 头部基础样式 */
#navbar {
    z-index: 9999 !important; /* 确保头部最高层级，不被其他元素遮挡 */
}
/* 桌面端下拉菜单容器（适配你的 group 结构） */
nav .group {
    position: relative;
}
/* 桌面端下拉菜单（修复过渡+可见性） */
nav .group .dropdown-enter {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    width: 15rem; /* 64px = 15rem */
    visibility: hidden; /* 先隐藏，hover 时显示 */
    z-index: 9999; /* 高于头部其他元素 */
}
/* group hover 时激活下拉 */
nav .group:hover .dropdown-enter {
    visibility: visible; /* 显示 */
    opacity: 1; /* 透明度 1 */
    transform: translateY(0); /* 位移归位 */
}

/* ========== 3. 移动端菜单样式（适配你的 HTML 结构） ========== */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998; /* 低于头部，高于内容 */
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    background-color: rgba(26, 26, 46, 0.95);
}
.mobile-menu.open {
    transform: translateX(0);
}
/* 移动端按钮容器（保留最高层级） */
.mobile-btn-wrapper {
    position: relative;
    z-index: 9999;
}