/**
 * 移动端导航栏和Logo布局修复
 * 解决语言切换插件覆盖导航栏的问题
 * 创建日期：2025-08-14
 */

/* ========================================
   语言切换器全局样式（确保始终可见）
   ======================================== */
.gtranslate_wrapper,
.gt_float_wrapper {
    z-index: 999999 !important; /* 最高层级确保显示 */
    position: fixed !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 语言切换器默认位置（桌面端） */
.gt_float_wrapper {
    top: 20px !important;
    right: 20px !important;
}

/* 确保语言切换器内容可见 */
.gt_float_wrapper * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========================================
   移动端布局修复（针对屏幕宽度小于992px）
   ======================================== */
@media (max-width: 991.98px) {
    
    /* 1. 将移动导航按钮（汉堡菜单）移到左侧 */
    .navbar .navbar-other {
        order: -1; /* 使用 flexbox order 属性将其移到最前面 */
        margin-left: 10px !important; /* 距离左边10px */
        margin-right: 0 !important; /* 移除右边距 */
        flex-shrink: 0; /* 防止按钮被压缩 */
    }
    
    /* 调整汉堡菜单按钮的间距 */
    .navbar .navbar-other .nav-item {
        margin-left: 0 !important;
    }
    
    /* 2. Logo 紧靠在导航按钮后面 */
    .navbar .navbar-brand {
        position: relative !important;
        order: 0; /* 在汉堡菜单之后 */
        margin-left: 10px !important; /* 与汉堡菜单保持较小间距 */
        margin-right: auto !important;
        width: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex-shrink: 0; /* 防止Logo被压缩 */
        /* 移除居中相关的样式 */
        left: auto !important;
        transform: none !important;
        text-align: left !important;
    }
    
    /* 确保Logo图片正确显示 */
    .navbar .navbar-brand img {
        max-width: 168px;
        height: auto;
        display: inline-block;
    }
    
    /* 3. 确保容器使用正确的flex布局 */
    .navbar .container {
        position: relative;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
    }
    
    /* 4. 确保语言切换插件不会覆盖导航元素，但保持可见 */
    .gtranslate_wrapper {
        z-index: 9999 !important; /* 确保语言切换器在最上层 */
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
    }
    
    /* 语言切换器浮动组件的位置调整 */
    .gt_float_wrapper {
        z-index: 9999 !important; /* 确保显示在最上层 */
        position: fixed !important;
        top: 15px !important; /* 调整顶部距离，避免覆盖导航栏 */
        right: 10px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 确保语言切换器的开关按钮可见 */
    .gt_float_wrapper .gt-selected {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 5. 修复固定导航栏的布局 - Logo紧靠导航 */
    .navbar.fixed .navbar-brand,
    .navbar-stick .navbar-brand {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        order: 0;
        margin-left: 10px !important;
    }
    
    /* 6. 确保汉堡菜单按钮可见且可点击 */
    button.hamburger {
        position: relative !important;
        z-index: 1021 !important;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* 7. 调整不同背景的导航栏 - Logo紧靠导航 */
    .navbar.navbar-bg-dark .navbar-brand,
    .navbar.navbar-dark .navbar-brand,
    .navbar.transparent .navbar-brand {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        order: 0;
        margin-left: 10px !important;
    }
    
    /* 8. Product Simple 页面特殊处理 - Logo紧靠导航 */
    .navbar.position-absolute .navbar-brand {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        order: 0;
        margin-left: 10px !important;
    }
}

/* ========================================
   移动端小屏幕额外优化（针对屏幕宽度小于576px）
   ======================================== */
@media (max-width: 575.98px) {
    
    /* 减小Logo尺寸以适应小屏幕 */
    .navbar .navbar-brand img {
        max-width: 140px;
    }
    
    /* 确保汉堡菜单按钮在小屏幕上的间距 */
    .navbar .navbar-other {
        margin-left: 10px !important;
    }
    
    /* 调整语言切换器在小屏幕上的位置 */
    .gt_float_wrapper {
        top: 10px !important;
        right: 5px !important;
        /* 移除transform属性，避免影响显示 */
    }
}

/* ========================================
   防止布局冲突的额外保护措施
   ======================================== */
@media (max-width: 991.98px) {
    
    /* 确保导航栏容器的最小高度 */
    .navbar {
        min-height: 60px;
    }
    
    /* 防止Logo被其他元素遮挡 */
    .navbar .navbar-brand {
        z-index: 1;
    }
    
    /* 确保汉堡菜单始终可访问 */
    .navbar .navbar-other {
        z-index: 2;
    }
    
    /* 修复可能的overflow问题 */
    .navbar .container {
        overflow: visible !important;
    }
}