/*
Theme Name: 我的第一个主题
Theme URI: https://你的网站地址.com/
Author: 你的名字
Author URI: https://你的个人地址.com/
Description: 这是我用 WordPress 开发的第一个主题
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

/* 以下可添加自定义样式 */
body {
    font-family: "Microsoft YaHei", sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}
.header {
    
    color: black;
    padding: 1rem;
}
.content {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}
.footer {
    background: #666;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}
/* 导航栏容器 */
.main-nav {
    margin-left: 0 ;/* 让导航靠右（和 logo 左右分开） */
}

/* 顶部菜单栏样式 */
.top-bar {
    
    padding: 8px 0;
}

/* 顶部栏内层容器（控制按钮位置） */
.top-bar-inner {
    max-width: 1200px; /* 和页面内容宽度一致 */
    margin: 0 auto;
    padding: 0 1rem;
}

/* 按钮组靠右 */
.auth-buttons {
    display: flex;
    gap: 10px; /* 按钮间距 */
    justify-content: flex-end; /* 强制按钮靠右 */
}

/* 按钮基础样式 */
.btn {
    padding: 6px 12px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    color: white;
    transition: background 0.3s;
}

/* 按钮颜色区分 */
.register-btn { background: #4285f4; }
.login-btn { background: #777; }
.support-btn { background: #34a853; }
.register-btn:hover { background: #3367d6; }
.login-btn:hover { background: #555; }
.support-btn:hover { background: #2a8644; }

/* 导航栏容器（确保居中） */
.nav-container {
   
    padding: 1rem 0;
}

/* 导航菜单居中 */
.main-nav {
    max-width: 1200px;
    margin: 0 auto; /* 居中关键 */
    padding: 0 1rem;
    text-align: center; /* 文字居中（应对小屏幕） */
}

/* 导航链接横向排列 */
.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* 链接横向居中 */
    gap: 20px; /* 链接间距 */
}

.nav-links li a {
    color: white;
    text-decoration: none;
    padding: 8px 12px;
}

.nav-links li a:hover {
    color: #ffd700;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}
/* 导航链接列表（移除默认样式） */
.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* 横向排列 */
    gap: 2px; /* 链接之间的间距 */
}

/* 单个导航链接样式 */
.nav-links li a {
    color: black; /* 文字颜色（和 header 背景对比） */
    text-decoration: none; /* 去掉下划线 */
    padding: 8px 12px; /* 点击区域扩大 */
    font-size: 16px;
 
}

/* 鼠标悬停效果 */
.nav-links li a:hover {
    color: #ffd700; /* hover 时变色 */
    background: rgba(255,255,255,0.1); /* 轻微背景色 */
    border-radius: 4px;
}
/* 页脚链接容器 */
.footer-links {
    margin-bottom: 15px; /* 与版权信息保持距离 */
    padding-bottom: 10px;
    border-bottom: 3px solid rgba(255,255,255,0.1); /* 分隔线（灰色背景用浅色线） */
}

/* 页脚链接样式 */
.footer-links a {
    color: white; /* 文字颜色（与页脚背景对比） */
    text-decoration: none;
    margin: 0 8px; /* 链接之间的间距 */
    font-size: 14px;
}

/* 鼠标悬停效果 */
.footer-links a:hover {
    color: #ffd700; /* 悬停变色 */
    text-decoration: underline;
}

/* 如果页脚是浅灰色，文字用深色 */
/* （如果你的页脚是浅灰，取消下面注释） */

.footer {
    color: #333;
}
.footer-links a {
    color: #333;
}
.footer-links a:hover {
    color: #000;
}
/* 导航容器：让菜单和按钮左右排列 */
.nav-container {
    display: flex; /* 横向排列 */
    justify-content: space-between; /* 菜单居左，按钮居右 */
    align-items: center; /* 垂直居中 */
    max-width: 1200px; /* 和页面内容宽度一致 */
    margin: 0 auto; /* 居中显示 */
    padding: 0 1rem;
}

/* 按钮组样式 */
.auth-buttons {
    display: flex;
    gap: 10px; /* 按钮之间的间距 */
}

/* 基础按钮样式 */
.btn {
    padding: 6px 12px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    transition: background 0.3s;
}

/* 注册按钮（浅蓝色） */
.register-btn {
    background: #4285f4;
}
.register-btn:hover {
    background: #3367d6;
}

/* 登录按钮（灰色） */
.login-btn {
    background: #777;
}
.login-btn:hover {
    background: #555;
}

/* 联系客服按钮（绿色） */
.support-btn {
    background: #34a853;
}
.support-btn:hover {
    background: #2a8644;
}

/* 外层容器：占满整个屏幕高度 */
.site-container {
    min-height: 100vh; /* 至少占满屏幕高度 */
    display: flex;
    flex-direction: column; /* 垂直排列子元素（页头、内容、页脚） */
}

/* 主内容区：自动伸缩，挤压页脚到底部 */
.site-content {
    flex: 1; /* 关键：让内容区占据剩余空间 */
}

/* 页脚样式：锁定在底部 */
.footer {
    background: #666;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: auto; /* 辅助推到最底部（配合 flex 布局） */
    width: 100%; /* 确保占满宽度 */
    box-sizing: border-box; /* 避免 padding 导致横向滚动 */
}

/* 固定页脚核心样式 */
.site-wrap {
    min-height: 100vh; /* 占满屏幕高度 */
    display: flex;
    flex-direction: column; /* 垂直排列元素 */
}

.site-main {
    flex: 1; /* 让内容区自动占满剩余空间，把页脚推到底部 */
}

/* 页脚链接文字改为黑色 */
.footer-links a {
    color: white; /* 黑色 */
}

/* 鼠标悬停时也保持黑色（可选，根据需要调整） */
.footer-links a:hover {
    color: #000000; /* 悬停时仍为黑色 */
    /* 若想悬停时稍深，可改为 #333333 */
}