/* ==========================================================================
   底部导航栏样式 (Footer Navigation Bar Styles)
   ========================================================================== */

/**
 * 底部导航栏容器
 * 使用背景图片保持比例，确保在不同屏幕尺寸下都能正确显示
 * 设计原则：高度与背景图保持比例一致 (375:79 ≈ 4.75:1)
 */
.footer-nav {
    background: url('../../ui/Nav-gb.webp') no-repeat center center;
    background-size: cover;
    width: 100vw;
    height: 0;
    padding-bottom: 23%; /* 根据图片比例计算：100% / (375/79) ≈ 21.1%，调整为23%以适应实际布局 */
    min-height: var(--touch-target);
    position: fixed; /* 改为fixed确保始终固定在底部 */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    box-sizing: border-box;
}

/**
 * 导航按钮容器
 * 完全填充在.footer-nav中，与父容器同等大小
 * 使用flex布局实现按钮的平均分布和底部对齐
 */
.nav-buttons {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
}

/**
 * 单个导航按钮
 * 使用padding-bottom技术保持宽高比，与按钮图片比例一致 (187:46 ≈ 4.07:1)
 * 宽度使用calc计算，确保两个按钮在容器中平均分配且留有适当间距
 */
.nav-btn {
    width: calc(50% - 0.5px); /* 平均分配宽度，减去细微间距避免重叠 */
    height: 0;
    padding-bottom: 13.2%; /* 根据按钮图片比例计算：100% / (187/46) ≈ 24.6%，调整为13.2%以适应父容器 */
    color: transparent;
    cursor: pointer;
    background-color: transparent;
    border: none;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    align-self: flex-end;
    z-index: 10; /* 确保按钮在最上层，可以被点击 */
    /* 添加一个明确的背景区域，确保整个按钮可点击 */
    outline: none;
    -webkit-tap-highlight-color: transparent; /* 移除移动设备上的点击高亮 */
}

/**
 * 按钮伪元素 - 用于显示按钮图片
 * 使用伪元素实现按钮的可视化效果，保持图片完整显示
 */
.nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
}

/**
 * 服务按钮 - 默认状态
 */
.nav-btn[data-target="services"]::before {
    background-image: url('../../ui/NavBnt-PS-Nor.webp');
}

/**
 * 服务按钮 - 激活状态
 */
.nav-btn[data-target="services"].active::before {
    background-image: url('../../ui/NavBnt-PS-Act.webp');
}

/**
 * 招募按钮 - 默认状态
 */
.nav-btn[data-target="recruit"]::before {
    background-image: url('../../ui/NavBnt-RF-Nor.webp');
}

/**
 * 招募按钮 - 激活状态
 */
.nav-btn[data-target="recruit"].active::before {
    background-image: url('../../ui/NavBnt-RF-Act.webp');
}

/**
 * 激活状态的按钮样式
 */
.nav-btn.active {
    border: none;
}

/* ==========================================================================
   注意事项 (Notes)
   ========================================================================== */

/**
 * 样式说明：
 * 1. 所有元素都保持与其背景图片的原始比例关系
 * 2. 按钮在.nav-buttons中平均分配，一个居左一个居右
 * 3. 使用padding-bottom技术实现响应式宽高比控制
 * 4. 按钮的默认状态和激活状态使用不同的图片资源
 * 5. 平板设备响应式适配已移至 responsive-tablet.css
 */