/*
 * style.css - 木友圈网站主样式文件
 * 作用：定义全站通用的基础样式，包括 CSS 变量、重置样式、全局布局、字体等
 * 设计风格：温暖木质风格，原木色调
 */

/* ========== 第1部分：CSS 变量（颜色、字体等统一管理） ========== */
/* 好处：以后要改颜色，只改这里就行，不用到处找 */
:root {
    /* 主色调：原木色系 */
    --wood-dark: #8B5A2B;       /* 深棕色 - 主色调，用于标题、按钮 */
    --wood-medium: #A0522D;     /* 中棕色 -  hover 状态 */
    --wood-light: #D2B48C;      /* 浅木色 - 背景、边框 */
    --wood-pale: #F5F5DC;       /* 米白色 - 页面背景 */
    --wood-cream: #FFF8DC;      /* 奶油色 - 卡片背景 */

    /* 辅助色：深绿色（呼应自然、木工） */
    --forest-dark: #2E5D3A;     /* 深绿色 - 强调色 */
    --forest-light: #4A7C59;    /* 浅绿色 - hover 状态 */

    /* 文字颜色 */
    --text-primary: #3E2723;    /* 深褐色 - 主要文字 */
    --text-secondary: #6D4C41;  /* 中褐色 - 次要文字 */
    --text-muted: #9E9E9E;      /* 灰色 - 辅助文字 */
    --text-white: #FFFFFF;      /* 白色文字 */

    /* 边框和分割线 */
    --border-light: #E8DCC8;    /* 浅木色边框 */
    --border-medium: #D2B48C;   /* 中木色边框 */

    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(139, 90, 43, 0.1);    /* 小阴影 */
    --shadow-md: 0 4px 16px rgba(139, 90, 43, 0.15);  /* 中阴影 */
    --shadow-lg: 0 8px 32px rgba(139, 90, 43, 0.2);   /* 大阴影 */

    /* 圆角 */
    --radius-sm: 6px;     /* 小圆角 */
    --radius-md: 12px;    /* 中圆角 */
    --radius-lg: 20px;    /* 大圆角 */

    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                   "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
                   Helvetica, Arial, sans-serif;

    /* 最大宽度 */
    --max-width: 1200px;   /* 内容区域最大宽度 */
}

/* ========== 第2部分：CSS 重置（清除浏览器默认样式） ========== */
/* 不同浏览器默认样式不一样，先统一清零，再自己定义 */
* {
    margin: 0;                    /* 外边距清零 */
    padding: 0;                   /* 内边距清零 */
    box-sizing: border-box;       /* 盒子模型：边框和内边距算在宽度内 */
}

/* 让 html 和 body 撑满整个屏幕 */
html, body {
    height: 100%;
    width: 100%;
}

/* 全局字体和基础样式 */
body {
    font-family: var(--font-family);  /* 使用上面定义的字体 */
    font-size: 16px;                  /* 基础字号 16px */
    line-height: 1.6;                 /* 行高 1.6 倍，阅读更舒服 */
    color: var(--text-primary);       /* 主要文字颜色 */
    background-color: var(--wood-pale); /* 页面背景色：米白色 */
    -webkit-font-smoothing: antialiased;  /* 让字体在苹果系统更清晰 */
}

/* 列表样式清零 */
ul, ol {
    list-style: none;
}

/* 链接样式 */
a {
    text-decoration: none;            /* 去掉下划线 */
    color: var(--wood-dark);          /* 链接颜色 */
    transition: color 0.3s ease;      /* 颜色变化有过渡动画 */
}

a:hover {
    color: var(--wood-medium);        /* 鼠标悬停变浅一点 */
}

/* 图片自适应 */
img {
    max-width: 100%;    /* 图片最大宽度不超过父容器 */
    height: auto;       /* 高度自动按比例缩放 */
    display: block;     /* 去掉图片下方的小空隙 */
}

/* 按钮默认样式清零 */
button {
    font-family: inherit;   /* 继承父级字体 */
    cursor: pointer;        /* 鼠标放上去变成手型 */
    border: none;           /* 去掉默认边框 */
    background: none;       /* 去掉默认背景 */
}

/* 输入框样式 */
input, select, textarea {
    font-family: inherit;   /* 继承字体 */
    font-size: inherit;     /* 继承字号 */
    outline: none;          /* 去掉聚焦时的蓝色边框 */
}

/* ========== 第3部分：通用工具类 ========== */
/* 这些类可以直接加在 HTML 元素上用，类似"快捷方式" */

/* 内容容器：限制最大宽度，水平居中 */
.container {
    max-width: var(--max-width);
    margin: 0 auto;             /* 左右 auto = 水平居中 */
    padding: 0 20px;            /* 左右留点空间，手机上不会贴边 */
}

/* 区块的上下内边距 */
.section {
    padding: 60px 0;
}

/* 区块标题 */
.section-title {
    font-size: 32px;
    font-weight: bold;
    color: var(--wood-dark);
    margin-bottom: 12px;
    text-align: center;
}

/* 区块副标题 */
.section-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 40px;
}

/* 文字居中 */
.text-center {
    text-align: center;
}

/* 隐藏元素 */
.hidden {
    display: none !important;
}

/*  flex 居中 */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== 第4部分：顶部导航栏 ========== */
.navbar {
    position: sticky;           /* 滚动时固定在顶部 */
    top: 0;
    z-index: 100;               /* 层级最高，不会被其他内容盖住 */
    background-color: var(--wood-cream);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border-light);
}

/* 导航栏内部容器 */
.navbar-inner {
    display: flex;                      /* 横向排列 */
    align-items: center;                /* 垂直居中 */
    justify-content: space-between;     /* 左右两端对齐 */
    height: 70px;                       /* 导航栏高度 */
}

/* Logo 样式 */
.navbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;                  /* Logo 图标和文字之间的距离 */
    font-size: 24px;
    font-weight: bold;
    color: var(--wood-dark);
}

/* Logo 图标（用文字/emoji 代替图片） */
.navbar-logo-icon {
    font-size: 32px;
}

/* 导航菜单 */
.navbar-menu {
    display: flex;
    gap: 8px;                   /* 每个菜单项之间的距离 */
}

/* 导航链接 */
.navbar-menu a {
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;  /* 所有属性变化都有过渡 */
}

/* 鼠标悬停导航链接 */
.navbar-menu a:hover {
    color: var(--wood-dark);
    background-color: var(--wood-light);
}

/* 当前页面的导航链接（高亮） */
.navbar-menu a.active {
    color: var(--wood-dark);
    background-color: var(--wood-light);
    font-weight: bold;
}

/* 移动端菜单按钮（默认隐藏，手机上显示） */
.navbar-toggle {
    display: none;
    font-size: 24px;
    color: var(--wood-dark);
    padding: 8px;
}

/* ========== 第5部分：Hero 区域（首页大横幅） ========== */
.hero {
    position: relative;
    padding: 100px 0 80px;
    background: linear-gradient(135deg, var(--wood-cream) 0%, var(--wood-pale) 50%, #E8DCC8 100%);
    overflow: hidden;
}

/* Hero 装饰（木纹效果） */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 100px,
            rgba(139, 90, 43, 0.03) 100px,
            rgba(139, 90, 43, 0.03) 102px
        );
    pointer-events: none;   /* 不影响鼠标点击 */
}

/* Hero 内容容器 */
.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Hero 大标题 */
.hero-title {
    font-size: 48px;
    font-weight: bold;
    color: var(--wood-dark);
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Hero 副标题 */
.hero-subtitle {
    font-size: 20px;
    color: var(--text-secondary);
    margin-bottom: 40px;
    line-height: 1.8;
}

/* Hero 按钮组 */
.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;        /* 空间不够时自动换行 */
}

/* ========== 第6部分：页脚 ========== */
.footer {
    background-color: var(--wood-dark);
    color: var(--wood-pale);
    padding: 50px 0 20px;
    margin-top: 60px;
}

/* 页脚内容区域 */
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;  /* 四列布局 */
    gap: 40px;
    margin-bottom: 30px;
}

/* 页脚标题 */
.footer h4 {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--wood-cream);
}

/* 页脚链接列表 */
.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--wood-light);
    font-size: 14px;
}

.footer-links a:hover {
    color: var(--wood-cream);
}

/* 页脚介绍文字 */
.footer-about p {
    color: var(--wood-light);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 10px;
}

/* 版权信息 */
.footer-copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: var(--wood-light);
}

/* ========== 第7部分：筛选栏（通用） ========== */
.filter-bar {
    background-color: var(--wood-cream);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
}

/* 筛选项 */
.filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.filter-item:last-child {
    margin-bottom: 0;
}

.filter-label {
    font-weight: bold;
    color: var(--wood-dark);
    min-width: 70px;
    font-size: 14px;
}

/* 搜索框 */
.search-box {
    display: flex;
    gap: 8px;
    flex: 1;
    max-width: 400px;
}

.search-box input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    background-color: white;
    color: var(--text-primary);
}

.search-box input:focus {
    border-color: var(--wood-dark);
}

/* ========== 第8部分：加载更多按钮 ========== */
.load-more-container {
    text-align: center;
    margin-top: 40px;
}

/* ========== 第9部分：弹窗（模态框） ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);   /* 半透明黑色遮罩 */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;    /* 淡入动画 */
}

/* 弹窗内容 */
.modal-content {
    background-color: var(--wood-cream);
    border-radius: var(--radius-lg);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;               /* 最大高度不超过屏幕 90% */
    overflow-y: auto;               /* 内容太多时滚动 */
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;   /* 从下往上滑入 */
    position: relative;
}

/* 弹窗关闭按钮 */
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--wood-pale);
    color: var(--wood-dark);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background-color: var(--wood-light);
    transform: rotate(90deg);   /* 悬停时旋转一下 */
}

/* ========== 第10部分：动画关键帧 ========== */
/* 淡入效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 从下滑入 */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 第11部分：响应式设计（平板和手机） ========== */
/* 屏幕宽度小于 992px 时（平板） */
@media (max-width: 992px) {
    .hero-title {
        font-size: 36px;    /* 标题变小 */
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .section {
        padding: 40px 0;    /* 区块间距变小 */
    }

    .section-title {
        font-size: 26px;
    }

    /* 页脚变成两列 */
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* 屏幕宽度小于 768px 时（手机） */
@media (max-width: 768px) {
    /* 导航菜单隐藏，显示汉堡按钮 */
    .navbar-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        flex-direction: column;     /* 竖着排 */
        background-color: var(--wood-cream);
        padding: 10px 20px;
        box-shadow: var(--shadow-md);
    }

    /* 菜单展开时显示 */
    .navbar-menu.open {
        display: flex;
    }

    .navbar-menu a {
        padding: 12px 16px;
        border-radius: var(--radius-sm);
    }

    .navbar-toggle {
        display: block;     /* 显示汉堡按钮 */
    }

    .hero {
        padding: 60px 0 40px;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .section-title {
        font-size: 22px;
    }

    /* 页脚变成一列 */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* 筛选栏变竖排 */
    .filter-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-box {
        max-width: 100%;
    }
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}