/* ==========================================================================
   全局样式配置
   ========================================================================== */

/* 字体设置 */
body {
    font-family: "LXGW WenKai Screen", sans-serif;
}

/* 内容区域布局 - 动态响应式 */
#content-inner {
    /* 使用clamp()函数实现动态宽度：最小值, 首选值, 最大值 */
    max-width: clamp(320px, 98vw, 1200px);
    /* 在小屏幕时接近98%，大屏幕时不超过1200px */
    width: clamp(85%, 70vw + 15%, 80%);
}

#recent-posts {
    /* 使用视口宽度单位实现平滑过渡 */
    max-width: clamp(300px, 50vw + 300px, 800px);
    margin: 0 auto;
}

/* ==========================================================================
   背景与透明度设置
   ========================================================================== */

/* 页脚透明 */
#footer {
    background: transparent !important;
}

#footer::before {
    background: transparent !important;
}

/* 头图透明 */
#page-header {
    background: transparent !important;
}

/* 头图遮罩层透明 */
/* #page-header::before {
    background: transparent !important;
} */

/* 夜间模式遮罩层透明 */
[data-theme="dark"] #footer::before {
    background: transparent !important;
}

[data-theme="dark"] #page-header::before {
    background: transparent !important;
}

/* 背景图片模糊效果 */
#web_bg {
    /* filter: blur(1px); */
    z-index: -1;
    opacity: 0;
    animation: fadeInBlur 0.5s ease-in forwards;
}

/* ==========================================================================
   磨砂玻璃效果
   ========================================================================== */

/* 页面内容区域玻璃效果 - 动态响应式 */
#page,
#post,#category,
.recent-post-item,
#archive {
    background: rgba(230, 238, 247, 0.75) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    /* 动态圆角：小屏幕时较小，大屏幕时较大 */
    border-radius: clamp(8px, 2vw, 16px);
    /* 动态边距：根据视口宽度调整 */
    margin: clamp(0.3rem, 1vw, 1rem);
    /* 动态内边距 */
    /* padding: clamp(1rem, 3vw, 2rem); */
    transition: all 0.3s ease;
}

/* 夜间模式下的页面样式 */
[data-theme="dark"] #page,
[data-theme="dark"] #post,
[data-theme="dark"] #category,
[data-theme="dark"] .recent-post-item,
[data-theme="dark"] #sidebar-menus,
[data-theme="dark"] #archive {
    background: rgba(29, 35, 49, 0.75) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   页面头部设置
   ========================================================================== */

#page-header.not-home-page {
    height: 300px !important;
}

#page-header #page-site-info {
    top: 150px !important;
}

/* ==========================================================================
   关于页面样式
   ========================================================================== */

/* 头像容器 */
.about-avatar {
    position: relative;
    margin-bottom: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 头像图片 */
.about-avatar img {
    position: relative;
    /* 动态偏移：根据视口宽度调整 */
    top: -100px;
    /* 动态尺寸：小屏幕时较小，大屏幕时较大 */
    width: clamp(120px, 25vw, 180px);
    height: clamp(120px, 25vw, 180px);
    border-radius: 50%;
    transition: all 0.3s ease;
    /* 动态下边距补偿 */
    margin-bottom: clamp(-60px, -12vw, -100px);
}

.about-avatar img:hover {
    transform: rotate(180deg);
}

/* 头像下方文字 */
.about-avatar h2 {
    margin-top: 0;
    color: var(--font-color);
}

.about-avatar p {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--font-color);
    font-size: 1.8em;
    font-weight: bold;
}

/* 社交图标 */
.social-icons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 0;
}

.social-icons a {
    font-size: 1.5rem;
    color: var(--font-color);
    transition: all 0.3s ease;
}

.social-icons a:hover {
    transform: scale(1.3);
}

/* 特定图标的悬停颜色 */
.social-icons a.qq-icon:hover {
    color: #12B7F5;
}

.social-icons a.wechat-icon:hover {
    color: #07C160;
}

.social-icons .fab-github:hover {
    color: #333;
}

/* ==========================================================================
   追番页面样式
   ========================================================================== */

.bangumi-summary {
    font-size: 14px !important;
}

.bangumi-info-items {
    font-size: 15px !important;
    /* 确保内容不换行挤压 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bangumi-title a {
    color: darksalmon;
}

/* ==========================================================================
   动画效果
   ========================================================================== */

@keyframes fadeInBlur {
    to {
        opacity: 1;
    }
}

/* ==========================================================================
   响应式布局
   ========================================================================== */

/* 平板和小屏设备 */
@media screen and (max-width: 768px) {
    #content-inner {
        max-width: 95%;
    }

    #page,
    #post,
    .recent-post-item,
    #archive {
        margin: 0.5rem;
        border-radius: 12px;
    }

    /* 调整头像在移动端的大小和位置 */
    .about-avatar img {
        width: 150px;
        height: 150px;
        top: -80px;
        margin-bottom: -60px;
    }

    /* 调整社交图标在移动端的大小 */
    .social-icons a {
        font-size: 1.2rem;
    }

    /* 追番页面移动端优化 */
    .bangumi-info-items {
        font-size: 13px !important;
        /* 允许换行显示完整内容 */
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.4;
    }

    .bangumi-summary {
        font-size: 12px !important;
        line-height: 1.3;
    }

    /* 番剧卡片间距调整 */
    .bangumi-card {
        margin-bottom: 1rem;
        padding: 0.8rem;
    }
}

/* 手机竖屏 */
@media screen and (max-width: 480px) {
    #content-inner {
        max-width: 98%;
    }

    #page,
    #post,
    .recent-post-item,
    #archive {
        margin: 0.3rem;
        padding: 1rem;
    }

    /* 极窄屏幕下的追番页面优化 */
    .bangumi-info-items {
        font-size: 12px !important;
        padding: 0.3rem 0;
    }

    .bangumi-title a {
        font-size: 14px;
        line-height: 1.3;
    }

    .bangumi-summary {
        font-size: 11px !important;
    }
}