/* main.html 专用顶部菜单样式 */
/* 此文件仅用于main.html，不影响detail.html和search.html */

/* 响应式：修复搜索和翻译按钮重叠问题 */
@media (max-width: 768px) {
    /* main.html专用：缩小logo */
    .main-page .logo {
        font-size: clamp(18px, 1.8vw, 24px);
    }
    
    .main-page .logo-image,
    .main-page .logo img,
    .main-page #mainLogoImage {
        width: clamp(28px, 2.8vw, 34px) !important;
        height: clamp(28px, 2.8vw, 34px) !important;
        min-width: clamp(28px, 2.8vw, 34px) !important;
        max-width: clamp(28px, 2.8vw, 34px) !important;
        min-height: clamp(28px, 2.8vw, 34px) !important;
        max-height: clamp(28px, 2.8vw, 34px) !important;
    }
    
    /* main.html专用：调整搜索图标位置，确保在右边 */
    .main-page .search-icon {
        position: absolute !important;
        right: 62px !important; /* 汉堡菜单44px + 间距8px = 52px，搜索图标从right: 62px开始，宽度40px，到right: 102px */
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-left: 0 !important;
        z-index: 1001;
        width: 40px;
        height: 40px;
    }
    
    /* main.html专用：调整语言切换按钮位置，避免与搜索按钮重叠 */
    .main-page .language-switcher {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 110px !important; /* 搜索图标结束位置right: 102px，间距8px，语言按钮从right: 110px开始，宽度32px，到right: 142px */
        margin: 0 !important;
        z-index: 1001;
    }
    
    .main-page .lang-switch-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 10px !important;
    }
    
    /* main.html专用：确保汉堡菜单在最右边 */
    .main-page .hamburger {
        position: absolute !important;
        right: 10px !important;
        margin-left: auto !important;
        z-index: 10001 !important;
    }
}

/* 更小屏幕的进一步优化 */
@media (max-width: 480px) {
    .main-page .logo {
        font-size: clamp(16px, 1.6vw, 20px);
    }
    
    .main-page .logo-image,
    .main-page .logo img,
    .main-page #mainLogoImage {
        width: clamp(24px, 2.4vw, 28px) !important;
        height: clamp(24px, 2.4vw, 28px) !important;
        min-width: clamp(24px, 2.4vw, 28px) !important;
        max-width: clamp(24px, 2.4vw, 28px) !important;
        min-height: clamp(24px, 2.4vw, 28px) !important;
        max-height: clamp(24px, 2.4vw, 28px) !important;
    }
    
    /* 极小屏幕：进一步调整按钮间距 */
    .main-page .search-icon {
        right: 58px !important; /* 汉堡菜单40px + 间距8px = 48px，搜索图标从right: 58px开始，宽度36px，到right: 94px */
        width: 36px;
        height: 36px;
    }
    
    .main-page .language-switcher {
        right: 102px !important; /* 搜索图标结束位置right: 94px，间距8px，语言按钮从right: 102px开始，宽度28px，到right: 130px */
    }
    
    .main-page .lang-switch-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 9px !important;
    }
    
    .main-page .hamburger {
        right: 8px !important;
        width: 40px;
        height: 40px;
    }
}

/* 中等屏幕优化 */
@media (min-width: 769px) and (max-width: 992px) {
    .main-page .logo {
        font-size: clamp(22px, 2.2vw, 26px);
    }
    
    .main-page .logo-image,
    .main-page .logo img,
    .main-page #mainLogoImage {
        width: clamp(32px, 3.2vw, 38px) !important;
        height: clamp(32px, 3.2vw, 38px) !important;
        min-width: clamp(32px, 3.2vw, 38px) !important;
        max-width: clamp(32px, 3.2vw, 38px) !important;
        min-height: clamp(32px, 3.2vw, 38px) !important;
        max-height: clamp(32px, 3.2vw, 38px) !important;
    }
}

/* 桌面端：确保搜索和语言切换按钮不重叠 */
@media (min-width: 993px) {
    /* 桌面端main.html的logo可以稍微缩小 */
    .main-page .logo {
        font-size: clamp(24px, 2.4vw, 28px);
    }
    
    .main-page .logo-image,
    .main-page .logo img,
    .main-page #mainLogoImage {
        width: clamp(36px, 3.6vw, 40px) !important;
        height: clamp(36px, 3.6vw, 40px) !important;
        min-width: clamp(36px, 3.6vw, 40px) !important;
        max-width: clamp(36px, 3.6vw, 40px) !important;
        min-height: clamp(36px, 3.6vw, 40px) !important;
        max-height: clamp(36px, 3.6vw, 40px) !important;
    }
}