/*
 * Toronto Hub - 页脚样式 v4.0
 * 符合品牌视觉规范（圆角、颜色、字体）
 */

/* ============================================
   页脚容器
   ============================================ */

.site-footer {
    background: linear-gradient(to bottom, var(--color-gray-900), var(--color-gray-800));
    color: var(--color-white);
    padding: var(--space-12) 0 var(--space-4);
    margin-top: var(--space-12);
}

.footer-container {
    max-width: var(--container-2xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ============================================
   页脚主要内容
   ============================================ */

.footer-main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* 品牌栏宽度加倍 */
.footer-brand {
    grid-column: span 1;
}

/* ============================================
   页脚 Logo
   ============================================ */

.footer-logo {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);  /* 8px - Design System Token */
    margin-bottom: var(--space-2);
}

.footer-logo-text {
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--font-h3);  /* 32px - 视觉优化：从 24px 增大到 32px (+33%) */
    font-weight: var(--weight-extrabold);  /* 字体优化：700 → 800，更醒目 +15% */
    letter-spacing: -0.03em;  /* 字体优化：-0.02em → -0.03em，更紧凑现代 */
    line-height: var(--line-height-tight);
}

.footer-logo-toronto {
    color: var(--color-white); /* #FFFFFF - Design System Token */
}

.footer-logo-hub {
    color: var(--color-primary-light); /* #3B82F6 - Design System Token */
}

.footer-logo .logo-subtitle {
    font-family: var(--font-chinese);
    font-size: var(--font-small);  /* 14px - 视觉优化：从 12px 增大到 14px (+17%) */
    font-weight: var(--weight-medium);  /* 中文字体优化：400 → 500，增强清晰度 (+25%) ⭐ */
    color: var(--color-gray-400);
    line-height: var(--line-height-tight);
}

/* ============================================
   页脚文本
   ============================================ */

.footer-tagline {
    font-size: var(--font-body);  /* 16px - 视觉优化：从 14px 增大到 16px (+14%) */
    color: var(--color-accent-light);
    margin-bottom: var(--space-1);
    line-height: var(--line-height-normal);
}

.footer-description {
    font-size: var(--font-body);  /* 16px - 视觉优化：从 14px 增大到 16px (+14%) */
    color: var(--color-gray-400);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-3);
}

/* ============================================
   社交媒体链接
   ============================================ */

.footer-social {
    display: flex;
    gap: var(--space-2);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;  /* 视觉优化：从 40px 增大到 48px (+20%) */
    height: 48px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-size: 1.5rem;  /* 24px - Design System Icon Standard ⭐ */
    text-decoration: none;
    transition: all var(--transition-fast);
}

.social-link:hover {
    background-color: var(--color-accent);
    transform: translateY(-3px);
    text-decoration: none;
}

/* ============================================
   页脚标题
   ============================================ */

.footer-heading {
    font-family: var(--font-heading);
    font-size: var(--font-h5);
    font-weight: var(--weight-bold);  /* 字体优化：600 → 700，更清晰 +20% */
    letter-spacing: -0.01em;  /* 字体优化：添加轻微紧凑字距 */
    color: var(--color-white);
    margin-bottom: var(--space-2);
    line-height: var(--line-height-tight);
}

/* ============================================
   页脚链接列表
   ============================================ */

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-links li a {
    color: var(--color-gray-400);
    text-decoration: none;
    font-size: var(--font-body);  /* 16px - 视觉优化：从 14px 增大到 16px (+14%) */
    font-weight: var(--weight-medium);  /* 字体优化：400 → 500，更清晰 +10% */
    transition: color var(--transition-fast);
    display: inline-block;
}

.footer-links li a:hover {
    color: var(--color-accent-light);
    text-decoration: none;
    transform: translateX(4px);
}

/* ============================================
   联系信息
   ============================================ */

.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-gray-400);
    font-size: var(--font-body);  /* 16px - 视觉优化：从 14px 增大到 16px (+14%) */
    line-height: var(--line-height-relaxed);
}

.footer-contact li i {
    color: var(--color-accent);
    font-size: var(--font-body);  /* 16px - Design System Token */
    margin-top: 2px;
    flex-shrink: 0;
}

.footer-contact li a {
    color: var(--color-gray-400);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-contact li a:hover {
    color: var(--color-accent-light);
    text-decoration: underline;
}

/* ============================================
   页脚底部
   ============================================ */

.footer-bottom {
    padding-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.footer-legal {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.copyright {
    font-size: var(--font-small);
    color: var(--color-gray-500);
    line-height: var(--line-height-relaxed);
}

.copyright strong {
    color: var(--color-accent-light);
    font-weight: var(--weight-semibold);
}

/* ============================================
   合规徽章
   ============================================ */

.compliance-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background-color: rgba(16, 185, 129, 0.1); /* success 色半透明 */
    border: 1px solid var(--color-success);
    color: var(--color-success);
    font-size: var(--font-tiny);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* ============================================
   法律链接
   ============================================ */

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-small);
}

.footer-legal-links a {
    color: var(--color-gray-400);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-legal-links a:hover {
    color: var(--color-accent-light);
    text-decoration: underline;
}

.footer-legal-links .separator {
    color: var(--color-gray-600);
}

.cookie-manage-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-accent-light) !important;
    font-weight: var(--weight-medium);
}

.cookie-manage-link:hover {
    color: var(--color-accent) !important;
}

/* ============================================
   隐私专员链接
   ============================================ */

.footer-privacy-link {
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-privacy-link p {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-tiny);
    color: var(--color-gray-500);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.footer-privacy-link i {
    color: var(--color-info);
    font-size: var(--font-body);  /* 16px - Design System Token */
    flex-shrink: 0;
}

.footer-privacy-link a {
    color: var(--color-info);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.footer-privacy-link a:hover {
    color: var(--color-primary-light);
}

/* ============================================
   响应式断点
   ============================================ */

/* 平板 */
@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .footer-brand {
        grid-column: span 2;
    }
}

/* 手机 */
@media (max-width: 640px) {
    .site-footer {
        padding: var(--space-8) 0 var(--space-3);
        margin-top: var(--space-8);
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding-bottom: var(--space-6);
    }

    .footer-brand {
        grid-column: span 1;
    }

    .footer-logo {
        margin-bottom: var(--space-3);
    }

    .footer-social {
        gap: var(--space-3);
    }

    .social-link {
        width: 52px;  /* 视觉优化：移动端从 44px 增大到 52px (+18%) */
        height: 52px;
        font-size: var(--font-h5);  /* 20px - Design System Token */
    }

    .footer-bottom {
        padding-top: var(--space-4);
        gap: var(--space-3);
    }

    .compliance-badges {
        gap: var(--space-1);
    }

    .badge {
        font-size: 0.625rem;  /* 10px - 特殊尺寸保留 */
        padding: 4px var(--space-1);  /* 4px 符合最小间距规范 */
    }

    .footer-legal-links {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .footer-legal-links .separator {
        display: none;
    }

    .footer-privacy-link p {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
}