/* ================================================================
   footer.css - 独立的页脚样式文件
   包含：中部版权链接 + 右侧微信联系方式
   布局：微信部分在右侧占屏幕1/4，其它占3/4
   修复：强制固定宽度，彻底防止被压缩
   ================================================================ */

/* ===== CSS 变量 (可在此统一调整二维码尺寸) ===== */
:root {
    --qr-size: 96px;          /* 二维码图片尺寸 */
    --qr-gap: 6px;            /* 纵向间距 */
    --wechat-padding-x: 14px; /* 微信卡片左右内边距 */
    --wechat-padding-y: 10px; /* 微信卡片上下内边距 */
}

.footer {
    padding: 20px 20px 24px;
    color: #aaa;
    font-size: 0.85rem;
    border-top: 1px solid #e8ecf5;
    margin-top: 20px;
    background: #fafbfd;
}

.footer a {
    color: #aaa;
    margin: 0 10px;
    text-decoration: none;
}

.footer a:hover {
    color: #667eea;
}

/* ===== Footer 内部容器：使用表格/网格式布局 ===== */
.footer-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;        /* 强制不换行，确保比例稳定 */
    align-items: center;
    gap: 16px 24px;
}

/* ===== 左侧：版权 & 链接 (占 3/4) ===== */
.footer-center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 16px;
    flex: 1 1 0;             /* 使用 flex:1 填充剩余空间 */
    min-width: 0;            /* 允许收缩，但会被右侧撑开 */
    text-align: left;
    word-break: break-word;
    padding-right: 8px;
    overflow: hidden;        /* 防止内容溢出 */
}

/* ===== 右侧：微信联系方式 (固定 25% 宽度，绝不压缩) ===== */
.footer-wechat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--qr-gap);
    background: #ffffff;
    padding: var(--wechat-padding-y) var(--wechat-padding-x);
    border-radius: 16px;
    border: 1px solid #e8ecf5;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s, box-shadow 0.2s;
    flex: 0 0 25%;           /* 固定占 25% 宽度 */
    min-width: 25%;          /* 强制最小宽度 = 25% */
    max-width: 25%;          /* 强制最大宽度 = 25% */
    width: 25%;              /* 直接设置宽度 */
    flex-shrink: 0;          /* 禁止收缩 */
    flex-grow: 0;            /* 禁止扩展 */
    margin-left: 0;
    box-sizing: border-box;
}

.footer-wechat:hover {
    border-color: #667eea;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
}

/* ---- 第一行：图标 + 微信号 (横向) ---- */
.footer-wechat .wechat-info {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    white-space: nowrap;
}

.footer-wechat .wechat-icon {
    font-size: 1rem;
    line-height: 1;
    color: #555;
}

.footer-wechat .wechat-id {
    font-size: 0.85rem;
    font-weight: 500;
    color: #2c3e50;
    white-space: nowrap;
}

/* ---- 第二行：二维码 ---- */
.footer-wechat .qr-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.footer-wechat .qr-wrapper img {
    display: block;
    width: var(--qr-size, 40px);
    height: var(--qr-size, 40px);
    border-radius: 6px;
    background: #fafafa;
    object-fit: contain;
    border: 1px solid #f0f2f6;
    transition: width 0.2s, height 0.2s;
}

/* ===== 小屏适配：堆叠，各占100% ===== */
@media (max-width: 768px) {
    .footer-inner {
        flex-wrap: wrap;       /* 小屏允许换行 */
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .footer-center {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        justify-content: center;
        text-align: center;
        padding-right: 0;
        overflow: visible;
    }

    .footer-wechat {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        flex-direction: row;   /* 小屏下变为横向排列 */
        gap: 10px;
        padding: 6px 14px;
        border-radius: 40px;
        justify-content: center;
        box-sizing: border-box;
    }

    .footer-wechat .wechat-info {
        flex-direction: row;
        white-space: nowrap;
    }

    .footer-wechat .qr-wrapper img {
        width: calc(var(--qr-size, 40px) * 0.75);
        height: calc(var(--qr-size, 40px) * 0.75);
    }

    .footer-wechat .wechat-id {
        font-size: 0.75rem;
    }
}

/* ===== 可选：大屏下放大二维码 (取消注释即可生效) ===== */
/*
@media (min-width: 1200px) {
    .footer-wechat .qr-wrapper img {
        width: 52px;
        height: 52px;
    }
}
*/