/*
@footer.php  @调整导航栏位置以避免遮挡
底部导航栏与返回顶部按钮相关样式，原本内联于footer.php。
详细注释每一部分，便于维护和定位。
*/

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    min-height: 100%;
    padding-bottom: 56px !important; /* 预留底部导航栏空间 */
}

.site-content {
    min-height: calc(100vh - 56px) !important;
    padding-bottom: 56px !important;
}

.bottom-nav-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 56px;
    width: calc(100% - 30px); /* 减去内边距，与容器的实际显示宽度一致 */
    max-width: 1170px; /* 1200px - 30px的padding */
    background: #fff;
    border-top: 1px solid #e5e5e5;
    display: flex;
    z-index: 9999;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
    border-radius: 8px 8px 0 0; /* 顶部圆角美化 */
}

.bottom-nav-item {
    flex: 1;
    text-align: center;
    padding: 6px 0 2px 0;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s;
}

.bottom-nav-item.active {
    color: var(--primary-color, #3976cb);
}

.bottom-nav-item .nav-icon {
    display: block;
    font-size: 22px;
    margin-bottom: 2px;
}

.main-tab-content { display: none; }
.main-tab-content[data-tab='home'] { display: block; }

@media (min-width: 1025px) {
    /* 大屏幕专属样式 */
    .bottom-nav-bar {
        max-width: 1242px; /* 1200px - 30px的padding，与内容区域实际宽度一致 */
        width: calc(100% - 30px);
    }
}

@media (max-width: 1024px) {
    /* 平板和移动设备样式 */
    .bottom-nav-bar {
        max-width: 100vw;
        width: 100%;
        left: 0;
        right: 0;
        transform: none;
        border-radius: 0;
    }
}
/*
继续footer-nav.css剩余部分，包含底部导航栏的媒体查询和补充说明。
*/

/* 其余补充样式可根据实际需求继续添加 */