/* ============================
   Contact 页面独立样式
   ============================ */

.page-contact {
    margin-top: var(--nav-height);
    min-height: 80vh; /* 保证页面不空 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.contact-container {
    width: 100%;
    max-width: 800px;
    padding: 60px 40px;
    
    /* 简单的入场动画 */
    animation: fadeIn 0.8s ease-out;
}

.contact-block {
    margin-bottom: 80px; /* 块与块之间的距离拉大，显得大气 */
    text-align: left; /* 左对齐 */
}

/* 板块小标题 */
.section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    
    /* 🔴 核心修改：Regular 400 */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    
    color: #000; /* 统一改为纯黑 */
}

/* 超大文字 (邮箱) - 纯展示版 */
.big-link {
    font-size: 36px;
    text-decoration: none;
    
    /* 🔴 核心修改：去掉 border-bottom 和 transition */
    border-bottom: none; 
    transition: none; 
    
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 300;
    color: #000;
    
    /* 确保是默认鼠标指针 */
    cursor: default; 
    margin: 0;
}

/* 地址文字 */
.address-text {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 10px;
    
    /* 🔴 核心修改：Light 300 */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 300;
    
    color: #000;
}

/* 电话文字 */
.phone-text {
    font-size: 18px;
    
    /* 🔴 核心修改：Light 300 */
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 300;
    
    color: #000;
}

/* ============================
   社交媒体列表样式 (图片版 - 最终修正)
   ============================ */

.social-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.social-item {
    display: flex;
    align-items: center;
    gap: 15px;           /* 图标和文字间距 */
    text-decoration: none;
    color: #000;         /* 文字颜色 */
    transition: opacity 0.3s;
}

/* 图片图标样式 */
.social-icon-img {
    width: 32px;         /* 设定统一宽度 */
    height: 32px;        /* 设定统一高度 */
    object-fit: contain; /* 关键：保证图片在框里自动缩放，绝不变形 */
    flex-shrink: 0;      /* 防止被挤扁 */
    display: block;      /* 消除图片底部可能出现的微小间隙 */
    transition: transform 0.3s; /* 添加放大动画 */
}

/* 文字样式 */
.social-text {
    font-size: 24px;
    font-family: 'Raleway', 'Noto Sans SC', sans-serif;
    font-weight: 300;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.3s;
}

/* --- 交互效果 (悬停) --- */
.social-item:hover {
    opacity: 0.8; /* 鼠标放上去微微变透明，增加交互感 */
}

.social-item:hover .social-text {
    border-bottom: 1px solid #000; /* 文字出现黑色下划线 */
}

/* 悬停时图标轻微放大 */
.social-item:hover .social-icon-img {
    transform: scale(1.1); 
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================
   移动端适配
   ============================ */
@media screen and (max-width: 768px) {
    /* 1. 页面容器：改为 Flex 布局以便居中 */
    .page-contact {
        display: flex; 
        justify-content: center; /* 水平居中 */
        margin-top: var(--nav-height);
        padding-top: 40px; 
    }

    /* 2. 内容容器：文字居中 */
    .contact-container {
        padding: 0 20px 60px 20px; 
        width: 100%;
        text-align: center; /* 让内部文字居中 */
    }

    /* 3. 版块容器：强制 Flex 居中对齐 */
    .contact-block {
        margin-bottom: 50px;
        text-align: center; /* 确保文字居中 */
        display: flex;
        flex-direction: column;
        align-items: center; /* 让内部块级元素(如社交列表)水平居中 */
    }

    /* --- 第 1 个板块 (项目合作/邮箱) --- */
    .contact-block:nth-of-type(1) {
        /* 控制整个板块距离顶部的距离 (上下位置) */
        margin-top: 20px; 
        /* 控制它离下面那个板块的距离 */
        margin-bottom: 60px; 
    }
    /* --- 第 1 个板块内部：标题与邮箱的间距 --- */
    .contact-block:nth-of-type(1) .section-title {
        /* 控制 "项目合作" 和 邮箱文字 之间的距离 */
        margin-bottom: 10px;
    }


    /* --- 第 2 个板块 (关注我们/社交图标) --- */
    .contact-block:nth-of-type(2) {
        /* 控制它距离上面板块的额外距离 (通常设0，由上面那个的margin-bottom控制) */
        margin-top: 0px; 
        /* 控制它距离页面最底部的距离 */
        margin-bottom: 80px; 
    }

    /* --- 第 2 个板块内部：标题与图标的间距 --- */
    .contact-block:nth-of-type(2) .section-title {
        /* 控制 "关注我们" 和 下方图标 之间的距离 */
        margin-bottom: 10px;
    }

    /* 4. 社交列表容器 */
    .social-list {
        /* 让容器宽度“收缩”到刚好包住最长的那一行文字 */
        display: inline-flex; 
        width: auto;          /* 不再是 100% */
        min-width: 200px;     /* 给个最小宽，防止太窄 */
        
        flex-direction: column;
        
        /* 容器内部左对齐，所有 Logo 就会画出一条垂直线 */
        align-items: flex-start; 
    }

    /* 5. 社交单项 (图标+文字) */
    .social-item {
        width: 100%;
        
        /* 内容靠左 (配合上面的父级左对齐) */
        justify-content: flex-start; 
        
        gap: 15px; /* 图标和文字之间的间距，可微调 */
    }

    /* 字体调整 (保持不变) */
    .section-title {
        font-size: 13px;
        color: #000;
    }

    .big-link {
        font-size: 24px;
        line-height: 1.3;
        word-break: break-all;
    }

    .address-text, .phone-text {
        font-size: 15px;
        line-height: 1.8;
    }

    /* 图标调整 */
    .social-icon-img {
        width: 26px;
        height: 26px;
    }
    
    .social-text {
        font-size: 18px;
    }
}