/*
 * ============================================================================
 * Redstone NOOB 博客通用样式表 (blog-common.css)
 * ============================================================================
 * 说明：
 *   这个文件包含了所有博客页面（包括博客首页和各篇博文）共用的基础样式。
 *   以后新建博文时，只需要在 <head> 里引入这一行：
 *
 *       <link rel="stylesheet" href="../blog-common.css">
 *
 *   然后从 body 开头插入导航栏 HTML（见下方注释中的模板），
 *   再把正文内容放到 <div class="main-content"> 里面即可。
 *
 *   如果你需要覆盖某些样式，可以在引入本文件之后，再写一段 <style>
 *   或者在元素上加 style="..." 内联样式。
 * ============================================================================
 */

/* ========== 全局重置 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
 * 原理：
 *   不能直接给 body 设置 background-image 后再用 opacity 调透明度，
 *   因为 opacity 会让 body 里的所有文字、卡片也跟着变透明。
 *   所以这里使用 CSS 伪元素 ::before，相当于在 body 里面插入一个
 *   看不见的 div 专门放壁纸，再把真正的内容盖在上面。
 */
body {
    font-family: 'Noto Sans SC', Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #202124;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;

    /*
     * 必须给 body 加上 position: relative，
     * 这样 body::before 才会以 body 为参照进行定位。
     * 如果没有这一行，伪元素可能会以整个窗口去定位，虽然效果一样，
     * 但规范写法建议加上，方便理解层级关系。
     */
    position: relative;

    /*
     * 给 body 加一个淡淡的底色，当壁纸还没加载出来时页面不会太白，
     * 同时也能让壁纸和文字之间的对比更柔和。
     */
    background-color: #f8f9fa;
}

/*
 * ::before 伪元素 —— 专门用来承载背景壁纸
 * ------------------------------------------------
 * content: "" 是伪元素的必填项，即使里面没有文字也要写，
 * 否则浏览器不会渲染这个伪元素。
 */
body::before {
    content: "";

    /*
     * position: fixed 让壁纸固定在屏幕上，不随滚动条滚动。
     * 如果你希望壁纸跟着页面一起滚动，可以改成 position: absolute。
     * 但通常壁纸用 fixed 体验更好，像很多现代网站那样。
     */
    position: fixed;

    /*
     * top / left / right / bottom 都设为 0，
     * 等价于写 width: 100%; height: 100%，
     * 让伪元素铺满整个浏览器可视区域。
     */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /*
     * 在这里填写你的壁纸路径。
     * 因为从 /blog/ 子目录访问，需要回到根目录找图片，
     * 所以路径写成 /winxp壁纸.jpg。
     * 我又不想用winxp壁纸了所以换成blog目录下的壁纸了
     */
    background-image: url(./beach_wallpaper.jpg);

    /*
     * 让壁纸铺满整个屏幕，保持比例不变形，超出的部分会被裁掉。
     * 可选值对比：
     *   cover   → 铺满屏幕，保持比例（推荐）
     *   contain → 整张图片完整显示，可能在屏幕边缘留白
     *   100% 100% → 拉伸铺满，图片可能会变形
     */
    background-size: cover;

    /*
     * 让图片在屏幕中居中显示。
     * 配合 cover 使用，确保裁切时以中心为基准，不会只裁到边缘。
     */
    background-position: center;

    /*
     * 不重复平铺图片。如果去掉这行且图片很小，
     * 浏览器会默认像铺瓷砖一样重复显示。
     */
    background-repeat: no-repeat;

    /*
     * ========== 透明度调节（核心）==========
     * opacity 的取值范围是 0 ~ 1：
     *   0    → 完全透明（看不见壁纸）
     *   0.5  → 半透明（50%透明度，当前设置）
     *   1    → 完全不透明（壁纸原样显示）
     *
     * 提示：如果你觉得太淡，可以改大，比如 0.6、0.7；
     *       如果觉得太抢眼，可以改小，比如 0.3、0.4。
     * 只改这一行数字，其他内容完全不受影响！
     */
    opacity: 0.5;

    /*
     * z-index 控制图层顺序，负数表示放在最底层，
     * 这样文字、导航栏、卡片才会浮在壁纸上方。
     * 如果改成正数，壁纸会盖住内容，你就只能看到壁纸了。
     */
    z-index: -1;
}

/* ========== 导航栏 ========== */
.mainnav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 20px 0;

    /*
     * ========== 液态玻璃 / 毛玻璃效果 ==========
     * 核心属性 backdrop-filter 会让元素背后的内容产生模糊，
     * 配合半透明背景色，就能做出类似磨砂玻璃/液态玻璃的质感。
     *
     * blur(12px)      → 模糊半径，越大越糊。建议 8~20px 之间。
     * saturate(160%)  → 提升背后颜色的饱和度，让玻璃更通透有质感。
     *                   可以删掉这行看看区别。
     */
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%); /* Safari 兼容 */

    /*
     * 玻璃不可能完全不透明。rgba(255,255,255,0.25) 表示白色，
     * 但只有 25% 不透明度，背后壁纸能隐约透过来。
     * 想更透明就改小（如 0.15），想更实就改大（如 0.4）。
     */
    background-color: rgba(255, 255, 255, 0.7);

    /*
     * 玻璃边缘通常有一圈淡淡的高光或反光。
     * 用半透明白色边框模拟这个效果，比实色边框更有质感。
     */
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);

    /*
     * 柔和的投影，让导航栏和背景产生层次，看起来像浮在壁纸上。
     */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;

    /*
     * 给 nav-container 加上相对定位，
     * 这样 .nav-back（返回博客主页按钮）才能以它为参照进行绝对定位。
     */
    position: relative;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.mainnav img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.nav-brand h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 500;
    color: #1a73e8;
    letter-spacing: -0.5px;
}

.nav-desc {
    font-size: 0.95rem;
    color: #5f6368;
    font-weight: 300;
    max-width: 600px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.nav-links {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.mainnav .nav_a {
    color: #5f6368;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.mainnav a:hover {
    color: #1a73e8;
    background-color: #f1f3f4;
}

/* ========== 返回博客主页按钮（仅用于子博文页面） ========== */
.nav-back {
    position: absolute;
    top: 20px;
    left: 24px;
    /* 桌面端固定在左上角，不会随 flex 布局移动 */
}

.nav-back a {
    color: #5f6368;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-back a:hover {
    color: #1a73e8;
    background-color: #f1f3f4;
}

/* ========== 天气信息（导航栏右上角） ========== */
.weather-info {
    position: absolute;
    top: 20px;
    right: 24px;
    color: #5f6368;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.weather-info:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

/* ========== 主内容区 ========== */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
}

/* ========== 通用卡片（适用于单篇博文、特殊页面等） ========== */
.blog-card {
    border-radius: 16px;  /* 玻璃卡片圆角稍大一点更优雅 */
    overflow: hidden;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 32px;

    /*
     * ========== 卡片液态玻璃 / 毛玻璃效果 ==========
     * 和导航栏同样的原理：backdrop-filter 模糊背后壁纸。
     */
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);

    /*
     * 卡片用比导航栏稍高一点的透明度，保证文字可读性。
     * rgba(255,255,255,0.35) 表示 35% 不透明度。
     * 如果文字看不清，把这个值调高；想更 glassy 就调低。
     */
    background-color: rgba(255, 255, 255, 0.25);

    /*
     * 玻璃反光边框：半透明白色外框 + 极淡的内侧高光（box-shadow inset）。
     * inset 阴影会在卡片内部产生一圈淡淡的白光，模拟玻璃折射。
     */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),            /* 外部漂浮阴影 */
        inset 0 1px 0 rgba(255, 255, 255, 0.5);   /* 内部顶部高光，玻璃感关键 */

    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-card:hover {
    /*
     * hover 时阴影加深，卡片稍微上浮，配合玻璃质感非常高级。
     */
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* ========== 博客列表页专用样式 ========== */
.blog-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 720px;
    margin: 0 auto;
}

.blog-list-item {
    border-radius: 16px;
    overflow: hidden;
    padding: 32px 28px;

    /* 液态玻璃效果 */
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    background-color: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);

    transition: box-shadow 0.2s ease, transform 0.2s ease;
    text-align: left;
}

.blog-list-item:hover {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/*
 * 博客标题链接样式
 * ------------------------------------------------
 * 现在整个标题就是一个可点击的链接，直接跳转到博客全文。
 * 去掉了按钮，让页面更简洁，同时标题本身就是最好的入口提示。
 */
.blog-title {
    display: inline-block;   /* 让 a 标签的宽高由内容决定，同时能设置上下边距 */
    font-size: 1.6rem;
    font-weight: 500;
    color: #202124;
    margin-bottom: 16px;
    line-height: 1.3;
    text-decoration: none;   /* 去掉链接默认的下划线 */

    /*
     * transition 让颜色变化有过渡动画，不会瞬间跳变。
     * color 0.2s ease 表示颜色在 0.2 秒内平滑变化。
     */
    transition: color 0.2s ease;
}

/*
 * :hover 伪类 —— 当鼠标悬停在标题上时触发。
 * 这里把颜色改成蓝色，同时鼠标指针会变成手型（因为 a 标签默认就是手型）。
 */
.blog-title:hover {
    color: #1a73e8;
}

.blog-excerpt {
    color: #3c4043;
    font-size: 1rem;
    line-height: 1.7;
}

.blog-excerpt p {
    margin-bottom: 12px;
}

/* ========== 单篇博文正文样式 ========== */
.blog-content {
    color: #3c4043;
    font-size: 1rem;
    line-height: 1.7;
    text-align: left;
}

.blog-content p {
    margin-bottom: 12px;
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4 {
    color: #202124;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    line-height: 1.3;
}

.blog-content h1 {
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1em;
}

.blog-content h2 {
    font-size: 1.5rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 0.3em;
}

.blog-content h3 {
    font-size: 1.25rem;
    font-weight: 500;
}

.blog-content h4 {
    font-size: 1.1rem;
    font-weight: 500;
}

.blog-content a {
    color: #1a73e8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-content a:hover {
    text-decoration: underline;
}

.blog-content img {
    max-width: 100%;
    border-radius: 8px;
    display: block;
    margin: 16px auto;
}

.blog-content blockquote {
    margin: 16px 0;
    padding: 12px 20px;
    background-color: rgba(255, 255, 255, 0.4);
    border-left: 4px solid #1a73e8;
    border-radius: 0 8px 8px 0;
}

.blog-content pre,
.blog-content code {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.blog-content code {
    padding: 2px 6px;
    font-size: 0.9em;
}

.blog-content pre {
    padding: 16px;
    overflow-x: auto;
    margin-bottom: 16px;
}

.blog-content pre code {
    background: none;
    padding: 0;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    /*
     * 手机端：隐藏头像和站点描述，节省导航栏垂直空间。
     */
    .nav-brand img {
        display: none;
    }

    .nav-brand h2 {
        font-size: 1.4rem;
    }

    .nav-desc {
        display: none;
    }

    .nav-links {
        gap: 4px;
    }

    /*
     * 子博文页面（有返回按钮的页面）：手机端隐藏"博客主页"链接。
     * 因为左上角已有返回按钮，再显示博客主页链接会冗余。
     */
    body.blog-subpage .nav_a[href="/blog/"] {
        display: none;
    }

    .mainnav .nav_a {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    /*
     * 手机端：返回按钮取消绝对定位，作为普通 flex item 自然落到
     * 导航栏内容的最下方，不再遮挡其他元素。
     */
    .nav-back {
        position: static;
        margin-top: 4px;
    }

    .nav-back a {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    /*
     * 手机端：天气信息直接隐藏，导航栏空间有限，
     * 优先保证标题和导航链接的显示。
     */
    .weather-info {
        display: none;
    }

    .main-content {
        padding: 32px 16px;
    }

    .blog-card {
        padding: 28px 20px;
    }

    .blog-list-item {
        padding: 24px 20px;
    }

    .blog-title {
        font-size: 1.3rem;
    }
}
