/* style.css */

/* --- 全局设置 和 REM 基础 --- */
html {
    /* 设置根字体大小，使用 clamp(最小值, 首选值, 最大值) */
    /* 4.27vw 大约是基于 375px 屏幕宽度下 1rem = 16px 的比例 (16/375*100) */
    /* 这表示字体大小会随视口宽度缩放，但最小不小于 14px，最大不超过 18px */
    /* 这意味着 1rem 的实际像素值会在 14px 到 18px 之间变化 */
    font-size: clamp(14px, 4.27vw, 18px);
  
    /* （可选）让页面滚动更平滑 */
    /* scroll-behavior: smooth; */
  
    /* （可选）盒子模型设置为 border-box，让 padding 和 border 不会撑大元素 */
    box-sizing: border-box;
  }
  
  /* 让所有元素的盒子模型也继承 border-box */
  *, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: sans-serif;
    background-color: #f0f8ff;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center;  垂直居中可能需要微调或不同策略 */
    padding: 1.25rem; /* 20px / 16 = 1.25rem (给页面加点边距) */
    min-height: 100vh;
    margin: 0;
}
h1 {
    color: #4682b4;
    text-shadow: 0.0625rem 0.0625rem 0.125rem #ccc; /* 1px 1px 2px */
    margin-bottom: 1rem; /* 16px */
    font-size: 2rem; /* 假设原来是 32px */
    text-align: center; /* 确保标题居中 */
}

p {
    font-size: 1.1rem; /* 保持相对单位或微调 */
    line-height: 1.6;
    max-width: 37.5rem; /* 600px / 16 = 37.5rem */
    /* 在小屏幕上可能需要更灵活，见下方媒体查询 */
    width: 90%; /* 使用百分比让段落宽度适应父容器 */
    text-align: center;
    margin-bottom: 1.875rem; /* 30px / 16 = 1.875rem */
}

/* --- 下面是给按钮加的新样式 --- */
#playButton {
    background-color: #ffb6c1;
    color: white;
    border: none;
    padding: 0.9375rem 1.875rem; /* 15px 30px */
    border-radius: 1.5625rem; /* 25px / 16 = 1.5625rem */
    font-size: 1.2rem; /* 保持或微调 */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 0 4px 8px */
}
#playButton:hover { background-color: #ff99aa; }
#playButton:active {
    background-color: #ff8899; /* 保留背景色变化 */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1); /* 转换 2px 4px */
    transform: translateY(0.0625rem); /* 转换 1px */
}
/* --- 新增：语言切换按钮的样式 --- */
.language-switcher {
    margin-bottom: 1.25rem; /* 20px / 16 = 1.25rem */
    /* 如果要定位到右上角，top/right 值也要用 rem 或 % */
}

.language-switcher button {
    background-color: #e0e0e0;
    color: #333;
    border: 1px solid #ccc; /* 细边框可以保留 px */
    padding: 0.3125rem 0.75rem; /* 5px 12px */
    margin: 0 0.3125rem; /* 0 5px */
    border-radius: 0.9375rem; /* 15px / 16 = 0.9375rem */
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}

.language-switcher button:hover {
    background-color: #d0d0d0; /* 鼠标悬停时变深一点 */
}

.language-switcher button:active {
    background-color: #c0c0c0; /* 点击时再深一点 */
}
#babyImage {
    display: block;
    /* width: 12.5rem;  /* 200px / 16 = 12.5rem */
    max-width: 80%; /* 使用百分比让图片自适应，最大宽度限制 */
    width: 12.5rem; /* 可以保留一个固定宽度作为参考，但 max-width 更重要 */
    height: auto;
    margin-top: 1.5625rem; /* 25px / 16 = 1.5625rem */
    margin-bottom: 2.1875rem; /* 35px / 16 = 2.1875rem */
    margin-left: auto; /* 让图片水平居中 */
    margin-right: auto; /* 让图片水平居中 */
    border-radius: 0.9375rem; /* 15px / 16 = 0.9375rem */
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.15); /* 0 6px 12px */
    border: 0.25rem solid white; /* 4px / 16 = 0.25rem */
    background-color: #eee;
}

/* --- 新增：按钮容器的样式 --- */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9375rem; /* 15px / 16 = 0.9375rem */
    margin-top: 2.1875rem; /* 35px / 16 = 2.1875rem */
    flex-wrap: wrap; /* 允许按钮换行 */
}

/* --- 新增：“下一首”按钮的样式 --- */
#nextButton {
    background-color: #add8e6;
    color: white;
    border: none;
    padding: 0.75rem 1.5625rem; /* 12px 25px */
    border-radius: 1.25rem; /* 20px / 16 = 1.25rem */
    font-size: 1rem; /* 保持或微调 */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1); /* 0 3px 6px */
}
#nextButton:hover {
    background-color: #9bcdde; /* 悬停时颜色变深 */
}
#nextButton:active {
    background-color: #8ac6d6; /* 点击时颜色更深 */
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1); /* 转换 1px 3px (我猜的，你按需调整) */
    transform: translateY(0.0625rem); /* 保持位移 */
}
.site-footer {
    width: 100%;
    padding: 0.80rem 0; /* 20px / 16 = 1.25rem */
    margin-top: 3.125rem; /* 50px / 16 = 3.125rem */
    text-align: center;
    color: #777;
    font-size: 0.7rem;
    border-top: 1px solid #eee; /* 细边框保留 px */
    background-color: #f9f9f9;
}
.footer-links {
    text-align: center; /* 新增或确认此行，确保 p 元素内的文本内容居中 */
    /* 你可以根据需要添加其他样式，例如上下间距 (margin) */
    margin-top: 0.5rem; /* 例如，增加一点上边距 */
    margin-bottom: 0.5rem; /* 例如，增加一点下边距 */
    width: 100%;
    max-width: none;
    font-size: 0.7rem;
}

.visitor-stats {
    margin: 0 0.9375rem; /* 0 15px */
    display: inline-block;
}

/* 给 Font Awesome 图标一点样式 (如果你用了图标库) */
.visitor-stats i {
    margin-right: 0.3125rem; /* 5px / 16 = 0.3125rem */
    color: #aaa;
}

/* “蒜子计数”的数字 span 样式 */
#busuanzi_value_site_pv,
#busuanzi_value_site_uv {
    font-weight: bold; /* 数字加粗显示 */
    color: #555; /* 数字颜色深一点 */
}

.copyright {
    margin-top: 0.9375rem; /* 15px / 16 = 0.9375rem */
    font-size: 0.8rem;
    color: #999;
    width: 100%;
    max-width: none;
}
/* --- 媒体查询：针对小屏幕的调整 --- */
/* 当屏幕宽度小于等于 600px 时，应用以下样式 */
@media (max-width: 37.5rem) { /* 600px / 16 = 37.5rem */

    body {
        padding: 0.8rem; /* 手机上边距可以小一点 */
    }

    h1 {
        font-size: 1.8rem; /* 手机上标题可以小一点 */
    }

    p {
        font-size: 1rem; /* 手机上段落文字也可以稍小 */
        /* max-width: 95%; */ /* 之前设了 width: 90%，这里可以不用改 */
    }

    #babyImage {
        max-width: 70%; /* 手机上图片占比可以小一点，留白多些 */
        margin-bottom: 1.5rem; /* 调整间距 */
    }

    .button-container {
        flex-direction: column; /* 让按钮垂直排列 */
        gap: 0.8rem; /* 垂直间距 */
        margin-top: 1.5rem; /* 调整间距 */
    }

    #playButton, #nextButton {
        width: 80%; /* 让按钮宽度适应屏幕 */
        padding: 0.8rem 1rem; /* 调整内边距 */
        font-size: 1.1rem; /* 调整字体大小 */
    }

    .site-footer {
        margin-top: 2.5rem; /* 调整页脚间距 */
    }

    .visitor-stats {
        display: block; /* 让统计信息也竖排显示 */
        margin: 0.5rem 0; /* 调整间距 */
    }
}

/* --- 新增：内容页面 (隐私政策、关于我们、联系我们) 的样式 --- */
.content-page {
    background-color: #fff; /* 白色背景卡片 */
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.1); /* 类似图片阴影，但稍柔和 */
    padding: 2rem; /* 32px 内边距 */
    margin-top: 2rem; /* 32px 与顶部或语言切换器的间距 */
    margin-bottom: 2rem; /* 32px 与页脚的间距 */
    max-width: 50rem; /* 800px 最大宽度 */
    width: 90%; /* 响应式宽度 */
    /* 从 body 继承 flex, flex-direction, align-items, min-height, margin:0, padding(body) */
    /* body 已有 display:flex, align-items:center，这里不需要重复，content-page 会在 body 内居中 */
}

/* 内容页面内的元素 */
.content-page h1 {
    color: #4682b4; /* 与主页 H1 颜色一致 */
    text-shadow: 0.0625rem 0.0625rem 0.125rem #ccc; /* 与主页 H1 阴影一致 */
    font-size: 1.8rem; /* 比主页 H1 略小或根据内容调整 */
    margin-bottom: 1.5rem; /* 24px */
    text-align: left; /* 内容页面标��通常左对齐 */
}

.content-page h2 {
    color: #5a9ac6; /* 比 H1 略浅的蓝色 */
    font-size: 1.5rem; /* 24px */
    margin-top: 2rem; /* 32px */
    margin-bottom: 1rem; /* 16px */
    text-align: left;
}

.content-page p,
.content-page ul,
.content-page ol {
    font-size: 1rem; /* 16px, 或根据 clamp() 动态调整 */
    line-height: 1.7;
    text-align: left;
    margin-bottom: 1rem; /* 16px */
    color: #333; /* 确保文字颜色 */
}

.content-page ul,
.content-page ol {
    padding-left: 1.5rem; /* 列表缩进 24px */
}

.content-page li {
    margin-bottom: 0.5rem; /* 列表项间距 8px */
}

.content-page a {
    color: #4682b4; /* 使用 H1 的蓝色作为链接颜色 */
    text-decoration: none;
}

.content-page a:hover,
.content-page a:focus {
    text-decoration: underline;
    color: #336791; /* 悬停时加深 */
}

/* 内容页面底部的“返回首页”链接 */
.content-page .footer-link {
    display: inline-block; /* 改为 inline-block 或 block 以应用样式 */
    margin-top: 2rem; /* 32px */
    padding: 0.75rem 1.5rem; /* 12px 24px */
    background-color: #add8e6; /* 使用主页 nextButton 的浅蓝色 */
    color: white;
    border-radius: 1.25rem; /* 20px */
    text-decoration: none;
    font-size: 1rem;
    box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.1s ease;
    text-align: center;
}

.content-page .footer-link:hover,
.content-page .footer-link:focus {
    background-color: #9bcdde; /* 悬停颜色加深 */
    color: white; /* 确保文字颜色不变 */
    text-decoration: none;
    transform: translateY(-0.0625rem); /* 轻微上移 */
}

/* 联系我们页面的特定样式 */
.contact-info {
    margin-bottom: 2rem; /* 32px */
}

.contact-info p strong {
    color: #4682b4;
}

/* 如果未来启用表单，这里可以放表单样式 */
/*
.contact-form .form-group label { ... }
.contact-form .form-group input, 
.contact-form .form-group textarea { ... }
.contact-form .form-group button { ... }
*/

/* --- 针对内容页面在小屏幕上的调整 --- */
@media (max-width: 37.5rem) { /* 600px */
    .content-page {
        padding: 1.5rem; /* 手机上内边距减小 */
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        width: 95%; /* 确保在小屏幕有足够边距 */
    }

    .content-page h1 {
        font-size: 1.6rem; /* 调整标题大小 */
    }

    .content-page h2 {
        font-size: 1.3rem;
    }

    .content-page p,
    .content-page ul,
    .content-page ol {
        font-size: 0.95rem; /* 调整正文文字大小 */
    }

    .content-page .footer-link {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}