/* =======================================================
   主样式文件 - Northgard Races 网站样式
   包含基础样式、组件样式和布局规则
======================================================= */

/* =======================================================
   字体导入
   使用 Google Fonts 引入两种字体：
   - Cinzel: 用于标题，具有北欧风格的衬线字体
   - Lato: 用于正文，清晰易读的无衬线字体
======================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Lato:wght@300;400;700&display=swap');

/* =======================================================
   全局CSS变量定义
   集中管理网站配色方案和常用样式值，便于维护和主题切换
======================================================= */
:root {
    --primary-color: #4A90E2; /* 冰蓝色 - 用于主要交互元素 */
    --secondary-color: #E67E22; /* 暖橙色 - 用于强调和CTA按钮 */
    --background-dark: #2C3E50; /* 深灰色 - 用于导航栏和深色背景 */
    --background-light: #F8F9FA; /* 雪白色 - 用于页面主体背景 */
    --text-dark: #333333; /* 深色文本 - 用于主要内容 */
    --text-light: #FFFFFF; /* 浅色文本 - 用于深色背景上 */
    --border-radius: 8px; /* 统一圆角值 */
    --box-shadow: 0 4px 12px rgba(187, 240, 199, 0.1); /* 通用阴影效果 */
    --transition: all 0.3s ease; /* 通用过渡效果 */
}

/* =======================================================
   重置样式
   消除浏览器默认样式差异，确保一致的基础样式
======================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =======================================================
   基础元素样式
   设置页面主体、标题和段落的默认样式
======================================================= */
body { /* 页面主体样式 */
    font-family: 'Lato', sans-serif; /* 使用无衬线字体增强可读性 */
    font-size: 16px; /* 基础字体大小 */
    line-height: 1.6; /* 行高，提高可读性 */
    color: var(--text-dark); /* 基础文本颜色 */
    background-color: var(--background-light); /* 页面背景色 */
    overflow-x: hidden; /* 防止水平滚动条 */
}

h1, h2, h3, h4, h5, h6 { /* 标题元素样式 */
    font-family: 'Cinzel', serif; /* 使用衬线字体突出标题 */
    font-weight: 700; /* 粗体显示 */
    margin-bottom: 1rem; /* 底部边距 */
    line-height: 1.3; /* 更紧凑的行高 */
    /* 功能说明：使用特定字体和加粗效果，使标题在视觉上更加突出和有层次感 */
}

p {
    max-width: 40ch; /* 限制段落宽度为约40个字符，优化阅读体验 */
    margin-bottom: 0.5rem;
    /* 功能说明：控制文本行长度，提高长段落的可读性和舒适感 */
}

/* =======================================================
   容器样式
   定义主要内容容器，控制页面最大宽度和边距
======================================================= */
.container {
  width: 100%; /* 全宽适配 */
  max-width: 1200px; /* 桌面端最大宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 15px; /* 左右内边距 */
    /* 功能说明：实现响应式布局的基础容器，确保内容在各种屏幕尺寸下都有良好的显示效果 */
}

/* =====================================================
   通用按钮样式
   CTA (Call To Action) 按钮样式，带有悬停动画效果
======================================================= */
.cta-button { /* 关键按钮样式：带动画效果的行动号召按钮 */
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--secondary-color);
    color: var(--text-light);
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: bold;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-align: center;
    /* 统一按钮大小，以"立即组队"按钮为准 */
    width: auto;
    margin: 0.5rem 0;
}

.cta-button::before {
    content: '';
    position: absolute; /* 绝对定位，覆盖整个按钮区域 */
    top: 0;
    left: -100%; /* 初始位置在按钮左侧外部 */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* 渐变高光效果 */
    transition: 0.5s; /* 过渡动画持续时间 */
    z-index: -1; /* 置于按钮内容下方 */
    /* 功能说明：创建从左到右的光效动画，提升按钮视觉吸引力 */
}

.cta-button:hover::before {
    left: 100%; /* 悬停时移动到按钮右侧外部 */
    /* 功能说明：实现光效从左到右划过按钮的动画效果 */
}

.cta-button:hover {
    background-color: #d35400; /* 颜色加深 */
    transform: translateY(-2px); /* 轻微上浮效果 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* 增强阴影效果 */
    /* 功能说明：提供多维度的悬停反馈，增强按钮的交互感 */
}

/* =======================================================
   通用部分标题样式
   为页面各个部分标题提供统一的样式和装饰效果
======================================================= */
.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--background-dark);
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); /* 渐变色下划线 */
    margin: 0.5rem auto;
    border-radius: 2px;
    /* 功能说明：为标题添加视觉分割线，使用品牌渐变色增强设计一致性 */
}


/* 精选内容区域样式已移至races.css */

/* =======================================================
     顶部导航栏样式
     包含网站标题、导航链接、搜索框和用户操作按钮
======================================================= */
.main-header {
    background-color: var(--background-dark);
    color: var(--text-light);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* 导航栏布局结构 */
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo样式 */
.logo h1 {
    font-size: 2rem;
    margin-bottom: 0;
    color: var(--primary-color);
}

.logo p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 0;
}

/* 主导航样式 */
.main-nav {
    display: flex;
    align-items: center;
}

/* 导航内容布局 */
.nav-content {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
}

.nav-content .search-box {
    margin-right: 1.5rem;
}



/* 导航菜单列表 */
.nav-content ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-content ul li {
    margin-left: 1.5rem;
}

.nav-content ul li a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
}

.nav-content ul li a:hover,
.nav-content ul li a.active {
    background-color: var(--primary-color);
    /* 功能说明：悬停和激活状态使用主色调背景，提供清晰的视觉反馈 */
}

/* 搜索框样式 */
.search-box {
    display: flex;
}

/* 搜索输入框样式 */
.search-box input {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    width: 200px;
}

.search-box button {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    cursor: pointer;
    transition: var(--transition);
}

.search-box button:hover {
    background-color: #d35400; /* 颜色加深 */
    /* 功能说明：搜索按钮悬停状态，提供清晰的视觉反馈 */
}

/* 用户操作按钮样式 */
.user-actions .login-btn {
    background-color: transparent;
    color: var(--text-light);
    border: 1px solid var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition);
    display: inline-block;
    font-weight: 500;
}

.user-actions .login-btn:hover {
    background-color: var(--primary-color); /* 背景变为实色 */
    /* 功能说明：登录按钮悬停状态，从透明变为实色背景，增强交互感 */
}



/* =======================================================
  card点击事件
======================================================= */
.race-card .image-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* =======================================================
  弹窗样式
======================================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    max-width: 500px;
    width: 90%;
    position: relative;
    padding: 2rem;
    text-align: center;
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-dark);
    transition: var(--transition);
}

.close-modal:hover {
    color: var(--secondary-color);
}

.modal-body {
    margin-top: 1rem;
}

.modal-qrcode {
    width: 200px;
    height: 200px;
    margin: 0 auto 1rem;
    display: block;
}

.modal-body p {
    margin-bottom: 1rem;
    max-width: 100%;
}

.modal-body .cta-button {
    margin-top: 1rem;
    display: inline-block;
}

/* =======================================================
  下拉菜单样式
======================================================= */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--background-dark);
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: var(--border-radius);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.dropdown-content a {
    color: var(--text-light);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: var(--transition);
    border-radius: 0;
}

.dropdown-content a:hover {
    background-color: var(--primary-color);
}

.dropdown:hover .dropdown-content {
    display: block;
    transform: scaleY(1);
}

.arrow {
    transition: transform 0.3s ease;
}

.dropdown:hover .arrow {
    transform: rotate(180deg);
}

/* 移动端下拉菜单样式 */
@media screen and (max-width: 767px) {
    .dropdown-content {
        position: static;
        display: none;
        transform: none;
        box-shadow: none;
        background-color: rgba(44, 62, 80, 0.9);
        margin-top: 5px;
    }
    
    .dropdown:hover .dropdown-content {
        transform: none;
    }
    
    .dropdown.active .dropdown-content {
        display: block;
    }
    
    .dropdown.active .arrow {
        transform: rotate(180deg);
    }
}