/* 默认样式 (适用于手机等小屏设备) */
.search-box {
    width: 200px;
    padding: 10px;
    font-size: 16px;
    transition: width 0.3s, font-size 0.3s; /* 为了平滑过渡 */
}

/* 当鼠标点击时变大 (仅适用于桌面设备) */
.search-box:focus {
    width: 300px; /* 在桌面上变大 */
    font-size: 18px;
}

/* 使用媒体查询只在桌面设备上应用变化 */
@media (min-width: 768px) {
    .search-box:focus {
        width: 700px;
        font-size: 18px;
    }
}

/* 在小屏设备（如手机）上不做任何变化 */
@media (max-width: 767px) {
    .search-box {
        width: 200px; /* 手机上保持原始宽度 */
    }

        .search-box:focus {
            width: 200px; /* 点击时不变 */
            font-size: 16px;
        }
}





/* 基础菜单样式 */
.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    display: flex;
}

.menu-item {
    position: relative;
    display: inline-block;
}

    .menu-item a {
        text-decoration: none;
        padding: 10px 15px; /* 适当减少padding */
        display: block;
        color: #333;
        font-size: 16px;
        font-weight: 500;
        transition: color 0.3s ease;
    }

        /* 鼠标悬停时，字体颜色变化 */
        .menu-item a:hover {
            color: #007bff;
        }

/* 子菜单的样式 */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f9f9f9;
    min-width: 250px; /* 设置子菜单的最小宽度 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 5px 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    display: flex;
    flex-wrap: wrap; /* 允许子菜单项自动换行 */
    max-width: 500px; /* 设置子菜单的最大宽度 */
    gap: 0; /* 去除默认间距 */
}

/* 鼠标悬停时显示下拉菜单 */
.menu-item:hover .submenu {
    display: flex;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s 0s;
}

/* 子菜单项 */
.submenu li {
    list-style: none;
    padding: 5px 10px; /* 进一步减少 padding */
    display: flex;
    justify-content: center;
    min-width: 120px; /* 缩小子菜单项的最小宽度 */
    box-sizing: border-box;
    white-space: nowrap; /* 防止换行 */
}

    /* 子菜单项的文本 */
    .submenu li a {
        text-decoration: none;
        color: #333;
        display: block;
        font-size: 14px;
        text-align: center;
    }

        /* 鼠标悬停子菜单项时的效果 */
        .submenu li a:hover {
            background-color: #f0f0f0;
            color: #007bff;
        }

/* 保持子菜单的显示 */
.menu-item:hover .submenu,
.submenu:hover {
    display: flex;
}