/* --- 基础布局 --- */
#footer {
    position: relative;
    background: #e68282;
    background-attachment: scroll;
    background-position: bottom;
    background-size: cover;
}

#footer-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    /* 合并了重复的 padding，统一使用 5% 以适应响应式 */
    padding: 50px 5% 35px 5%; 
}

#footer-wrap > div {
    width: 50%;
    box-sizing: border-box; /* 防止padding导致溢出 */
}

#footer-left {
    text-align: left;
}

#footer-right {
    text-align: right;
    margin-top: auto;
}

/* --- 动物装饰墙 --- */
#footer-animal {
    position: relative;
    width: 100%;
}

#footer-animal .animal-wall {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 36px;
    max-width: none;
    background: #bcb0a4 url(/wp-content/themes/Mxchild/assets/img/footer_wall.avif) repeat center;
    background-size: auto 100%;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .15);
}

#footer-animal img.animal {
    position: relative;
    max-width: min(974px, 100%);
    margin: 0 auto;
    display: block;
}

/* --- 文字与链接 --- */
.footer-title {
    font-size: 30px;
    color: #fff;
}

#footer-right p,
#footer-right a {
    color: #fff;
}

.footer-info a {
    margin-left: 20px;
    transition: 0.2s;
    text-decoration: none;
}

.footer-info a:hover img {
    filter: none !important;
    transition: 0.2s;
}

.footer-service img {
    height: 30px;
    filter: brightness(1000%); /* 这是一个非常极端的滤镜，通常用于将图标变白 */
    margin-left: 20px;
    margin-top: 10px;
    transition: 0.2s;
}

.footer-service img:hover {
    filter: brightness(100%);
    transition: 0.2s;
}

/* --- 回到顶部按钮 --- */
.footer-totop {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.footer-totop i {
    font-size: 2rem;
    animation: footerToTop 1.2s linear infinite;
    color: #fff;
}

@keyframes footerToTop {
    0% { transform: translateY(0); }
    60% { transform: translateY(-25%); }
    100% { transform: translateY(0); }
}

/* --- 字数统计 (.wordcount) --- */
.wordcount {
    color: #F8F9F9;
    width: 70%; /* 默认桌面端宽度 */
}

/* --- 响应式适配 --- */

/* 平板及更小屏幕 */
@media screen and (max-width: 1023px) {
    #footer-animal .animal-wall {
        height: 4vw;
    }
    
    .wordcount {
        width: 100%;
        margin: 10px 0;
        padding: 0 5px;
        text-align: justify;
        text-align-last: center;
        line-height: 1.6;
        box-sizing: border-box;
    }
}

/* 手机端 */
@media screen and (max-width: 768px) {
    #footer-wrap > div {
        width: 100%;
        text-align: center; /* 移动端居中 */
    }
    
    /* 修正：确保移动端字数统计也居中显示 */
    .wordcount {
        margin: 0 auto;
        text-align: center; 
    }
}