/* Footer 外层容器 */
.footer-wrapper {
    background-color: var(--tiffany-blue);  /* dark-tiffany - MODIFIED to match top-bar */
    padding-top: 40px; /* 增加顶部内边距，与上方内容区形成间距 */
    margin-bottom: 0;
    height: auto;
    overflow: visible;
}

/* Footer 内容区域 */
.footer {
    width: 100%;
    max-width: 1300px; /* 与 global.css 中 .container 一致 */
    margin: 0 auto;
    padding: 50px 40px; /* 上下50px, 左右40px (与 .container 的 padding 匹配) */
}

/* Footer 标题样式 */
.footer h4 {
    color: #fff;
    font-size: 1.3rem; /* 略微增大标题字号 */
    font-weight: 600;
    margin-bottom: 25px; /* 增加标题下方间距 */
    padding-bottom: 10px; /* 为可能的下边框留出空间 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 添加浅色下边框 */
    display: block; /* 使边框宽度适应其容器宽度 (列宽) */
}

/* Footer 关于我们部分 */
.footer-about {
    color: rgba(255, 255, 255, 0.85); /* 略微降低文字亮度，与标题区分 */
    line-height: 1.7; /* 增加行高 */
    margin-bottom: 20px;
    hyphens: auto; /* 允许浏览器自动断字以改善右边缘的整齐度 */
    -webkit-hyphens: auto; /* 针对旧版 Safari */
    -ms-hyphens: auto; /* 针对 IE/Edge */
}

/* Footer 社交媒体部分 */
.footer-social {
    display: flex;
    gap: 15px;
    margin-top: 25px; /* 增加与上方文字的间距 */
}

.social-link {
    width: 40px; /* 略微增大社交图标尺寸 */
    height: 40px;
    background: rgba(255, 255, 255, 0.1); /* 使背景更透明一些 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 添加细边框 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s ease;
}

.social-link:hover {
    transform: translateY(-3px) scale(1.05); /* 增加轻微缩放效果 */
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Footer 快速链接部分 */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px; /* 恢复并调整列表项间距 */
}

.footer-links a {
    color: rgba(255, 255, 255, 0.85); /* 统一普通链接文字颜色 */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative; /* 为伪元素定位 */
    padding-bottom: 3px;
}

.footer-links a::after { /* 添加悬停下划线动效 */
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: #fff;
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}

.footer-links a:hover {
    color: #fff;
    /* transform: translateX(5px); // 移除之前的位移，用下划线代替 */
}

.footer-links a:hover::after {
    width: 100%;
    left: 0;
    background-color: #fff;
}

/* Footer 联系信息部分 */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    color: rgba(255, 255, 255, 0.85); /* 统一普通文字颜色 */
    margin-bottom: 12px; /* 恢复并调整列表项间距 */
    display: flex;
    align-items: center; /* 保持垂直居中对齐 */
    gap: 12px; /* 略微调整图标与文字间距 */
}

.footer-contact i {
    color: #fff; /* 图标颜色保持纯白以突出 */
    font-size: 1.1rem;
    width: 20px; /* 给图标一个固定宽度，优化对齐 */
    text-align: center;
}

/* 版权部分样式 */
.copyright-wrapper {
    background-color: #E0F2F1;  /* pale-tiffany */
    margin-top: 0; /* 通常footer-wrapper的padding-bottom和它的padding-top会形成间距 */
    padding: 25px 40px; /* 增加版权区上下内边距, 左右与 .container 匹配 */
    border-top: 1px solid rgba(94, 191, 183, 0.2); /* 使用深蒂芙尼蓝的浅色作为分割线 */
    display: block;
    height: auto;
    overflow: visible;
}

.copyright {
    width: 100%;
    max-width: 1200px; /* 与 global.css 中 .container 一致 */
    margin: 0 auto;
    /* padding: 10px 15px; // 由 copyright-wrapper 控制 */
    text-align: center;
    color: #508A85; /* 略微加深版权文字颜色，增强对比度 */
    font-size: 0.9rem;
    line-height: 1.6; /* 增加行高 */
}

.copyright p {
    margin: 0;
    padding: 0;
    font-weight: 500;
}

/* Responsive Adjustments for Footer */

/* Tablet devices (<= 992px) */
@media (max-width: 992px) {
    .footer {
        padding: 40px 30px; /* Adjust padding for tablets */
    }

    /* Assuming footer columns are direct children of a .row or similar structure */
    /* If using Bootstrap, .col-md-X classes would handle this. 
       If custom, you might need to target specific column classes.
       Example: .footer .footer-column-class { width: 50%; margin-bottom: 30px; } 
       For simplicity, we'll adjust general footer elements that might be in columns.
    */

    .footer h4 {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    .footer-about {
        font-size: 0.95rem; /* Slightly smaller text for better fit */
    }
    
    .footer-social {
        gap: 12px; /* Slightly smaller gap for social icons */
        margin-top: 20px;
    }

    .social-link {
        width: 36px;
        height: 36px;
    }
    .social-link i {
        font-size: 0.9em; /* Adjust icon size within the link */
    }

    .footer-links li,
    .footer-contact li {
        margin-bottom: 10px;
        font-size: 0.95rem; /* Adjust link/contact text size */
    }
    
    .footer-contact i {
        font-size: 1rem;
    }

    .copyright-wrapper {
        padding: 20px 30px;
    }
    .copyright {
        font-size: 0.85rem;
    }
}

/* Mobile devices (<= 767px) */
@media (max-width: 767px) {
    .footer {
        padding: 30px 20px; /* Further adjust padding for mobile */
        /* On mobile, footer sections (about, links, contact) typically stack.
           If they are in Bootstrap columns (e.g., .col-lg-3, .col-lg-4),
           they will stack automatically. If not, you might need to set
           their width to 100% and add margin-bottom.
        */
    }
    /* Example for stacking custom columns if not using a grid system that handles it:
    .footer > div { // Assuming direct div children are columns
        width: 100%;
        margin-bottom: 30px; 
    }
    .footer > div:last-child {
        margin-bottom: 0;
    }
    */

    .footer h4 {
        font-size: 1.15rem; /* Smaller titles on mobile */
        margin-bottom: 15px;
        text-align: left; /* Titles often look better left-aligned when stacked */
        /* border-bottom: none; /* Optionally remove border or keep it */
        /* padding-bottom: 8px; */
    }
    
    /* If all footer sections stack, their shared parent might be a flex container */
    /* Or, if they are in a grid, the grid columns would be set to 1fr */
    /* E.g., if .footer is a grid container:
       .footer { display: grid; grid-template-columns: 1fr; gap: 20px; }
    */


    .footer-about {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 25px; /* Space before next stacked section */
        text-align: left;
    }

    .footer-social {
        justify-content: flex-start; /* Align social icons to the left when stacked */
        margin-top: 15px;
        margin-bottom: 25px; /* Space before next stacked section */
    }
    
    .social-link {
        width: 35px;
        height: 35px;
    }
    
    .footer-links,
    .footer-contact {
        text-align: left; /* Align links and contact info to the left */
        margin-bottom: 25px; /* Space before next stacked section (if applicable) */
    }
    
    .footer-links li,
    .footer-contact li {
        font-size: 0.9rem;
        margin-bottom: 8px;
        gap: 10px;
    }
    
    .footer-contact:last-child, .footer-links:last-child { /* If they are the last element in a stacked layout */
        margin-bottom: 0;
    }


    .copyright-wrapper {
        padding: 15px 20px;
    }
    .copyright {
        font-size: 0.8rem;
        line-height: 1.5;
    }
    .copyright p {
        /* Potentially split copyright line for better readability */
        /* display: block; */
    }
}
