/* 内部页面标题样式优化 */
/* 适用于除首页外的所有页面 */

:root {
  /* 标题字体定义 - 使用高端时尚杂志风格字体 */
  --font-chinese-heading: 'Noto Sans SC', 'Source Sans Pro', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-english-heading: 'Futura', 'Helvetica Neue', Arial, sans-serif;
  
  /* 标题颜色定义 - 白色字体 */
  --color-heading-white: #FFFFFF;
  --color-heading-primary: #222222;
  --color-heading-secondary: #C6A050;
  --color-heading-tertiary: #444444;
  
  /* 遮罩层颜色定义 */
  --color-overlay: rgba(0, 0, 0, 0.8);
  --color-overlay-light: rgba(0, 0, 0, 0.4);
  
  /* 统一标题样式 */
  --font-size-heading-h1: 32px;
  --font-size-heading-h2: 32px;
  --font-size-heading-h3: 24px;
  
  /* 行高定义 */
  --line-height-heading-h1: 38.4px; /* 1.2倍行高 */
  --line-height-heading-h2: 38.4px; /* 1.2倍行高 */
  --line-height-heading-h3: 28.8px; /* 1.2倍行高 */
  
  /* 字重定义 */
  --font-weight-heading-h1: 700;
  --font-weight-heading-h2: 700;
  --font-weight-heading-h3: 600;
  
  /* 字间距定义 */
  --letter-spacing-heading: 1px;
  --letter-spacing-heading-wide: 1.5px;
  
  /* 间距定义 */
  --spacing-heading-top: 1.5rem;
  --spacing-heading-bottom: 1rem;
}

/* H1 标题样式 - 白色字体 */
h1 {
  font-family: var(--font-chinese-heading);
  font-size: var(--font-size-heading-h1);
  line-height: var(--line-height-heading-h1);
  font-weight: var(--font-weight-heading-h1);
  color: var(--color-heading-white); /* 白色字体 */
  letter-spacing: var(--letter-spacing-heading-wide); /* 字间距 */
  margin-top: var(--spacing-heading-top);
  margin-bottom: var(--spacing-heading-bottom);
  text-align: left;
}

h1:lang(en) {
  font-family: var(--font-english-heading);
}

/* H2 标题样式 - 白色字体 */
h2 {
  font-family: var(--font-chinese-heading);
  font-size: var(--font-size-heading-h2);
  line-height: var(--line-height-heading-h2);
  font-weight: var(--font-weight-heading-h2);
  color: var(--color-heading-white); /* 白色字体 */
  letter-spacing: var(--letter-spacing-heading); /* 字间距 */
  margin-top: var(--spacing-heading-top);
  margin-bottom: var(--spacing-heading-bottom);
  text-align: left;
}

h2:lang(en) {
  font-family: var(--font-english-heading);
}

/* H3 标题样式 - 白色字体 */
h3 {
  font-family: var(--font-chinese-heading);
  font-size: var(--font-size-heading-h3);
  line-height: var(--line-height-heading-h3);
  font-weight: var(--font-weight-heading-h3);
  color: var(--color-heading-white); /* 白色字体 */
  letter-spacing: var(--letter-spacing-heading); /* 字间距 */
  margin-top: var(--spacing-heading-top);
  margin-bottom: var(--spacing-heading-bottom);
  text-align: left;
}

h3:lang(en) {
  font-family: var(--font-english-heading);
}

/* 页面Hero区域标题特殊样式 - 确保不会影响背景图显示 */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-heading-white);
}

.hero-content h1 {
  color: var(--color-heading-white);
  text-align: center;
  margin-bottom: var(--spacing-md);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: var(--letter-spacing-heading-wide);
  font-size: var(--font-size-heading-h1);
  line-height: var(--line-height-heading-h1);
}

/* Hero Section Subtitle */
.hero-subtitle {
  font-size: 20px;
  color: var(--color-light);
  opacity: 0.9;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: var(--spacing-md);
  text-align: center;
  word-break: keep-all; /* 保持中文词语完整性 */
  overflow-wrap: break-word; /* 允许在单词内换行以防止溢出 */
  white-space: normal; /* 允许文本正常换行 */
}

/* 确保Hero图像的样式不会被覆盖 */
.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 添加遮罩层样式 */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-overlay);
  z-index: 1;
}

/* 在非Hero区域的H1标题可以有不同的颜色 */
.content-section h1 {
  color: var(--color-heading-primary);
}

/* 在非Hero区域的H2标题可以有不同的颜色 */
.content-section h2 {
  color: var(--color-heading-secondary);
}

/* 在非Hero区域的H3标题可以有不同的颜色 */
.content-section h3 {
  color: var(--color-heading-tertiary);
}

/* 主理人招募页面申请入口标题例外规则 */
.application-entry h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  :root {
    --font-size-heading-h1: 28px;
    --font-size-heading-h2: 28px;
    --font-size-heading-h3: 22px;
    
    --line-height-heading-h1: 33.6px;
    --line-height-heading-h2: 33.6px;
    --line-height-heading-h3: 26.4px;
  }
  
  h1, h2, h3 {
    text-align: left;
    letter-spacing: 0.5px;
  }
  
  .hero-content h1 {
    text-align: center;
  }
  
  .hero-subtitle {
    font-size: 16px;
    white-space: nowrap; /* 确保在同一行显示 */
    overflow: visible; /* 允许内容完整显示 */
  }
}

@media screen and (max-width: 480px) {
  :root {
    --font-size-heading-h1: 24px;
    --font-size-heading-h2: 24px;
    --font-size-heading-h3: 20px;
    
    --line-height-heading-h1: 28.8px;
    --line-height-heading-h2: 28.8px;
    --line-height-heading-h3: 24px;
  }
  
  h1, h2, h3 {
    letter-spacing: 0.3px;
  }
  
  .hero-subtitle {
    font-size: 14px;
    white-space: nowrap; /* 确保在同一行显示 */
    overflow: visible; /* 允许内容完整显示 */
  }
}