/*
Theme Name: 好体育 2026
Theme URI: https://haotiyuapp.com
Author: 好体育 HaoTiYu
Author URI: https://haotiyuapp.com
Description: 好体育官方WordPress主题，专为2026FIFA世界杯打造。支持SEO优化、Google/Bing索引、后台自定义导航按钮与赛程订阅入口。适配移动端，深色运动风格。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://haotiyuapp.com/license
Text Domain: haotiyu-2026
Tags: sports, dark, seo, world-cup, responsive, customizer
*/

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  --ht-red:    #E8001D;
  --ht-gold:   #FFD100;
  --ht-dark:   #0A0A0F;
  --ht-mid:    #13131C;
  --ht-card:   #1A1A28;
  --ht-text:   #F0EEE8;
  --ht-muted:  #888890;
  --ht-accent: #00D4FF;
  --ht-border: rgba(255,255,255,0.06);
  --ht-radius: 8px;
  --ht-transition: all .25s ease;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--ht-dark);
  color: var(--ht-text);
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ===== ANIMATIONS ===== */
@keyframes ht-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: .6; }
}
@keyframes ht-fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ht-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}
@keyframes ht-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5 {
  font-family: 'Bebas Neue', 'Noto Sans SC', sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
}

/* ===== UTILITY ===== */
.ht-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}
.ht-section { padding: 80px 0; }
.ht-section-alt { background: var(--ht-mid); }

.ht-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 2px;
  border: 1px solid rgba(232,0,29,0.3);
  color: var(--ht-red);
}
.ht-tag-gold {
  border-color: rgba(255,209,0,0.3);
  color: var(--ht-gold);
}

.ht-live-dot {
  width: 7px; height: 7px;
  background: var(--ht-red); border-radius: 50%;
  display: inline-block;
  animation: ht-pulse .9s infinite;
}

/* ===== SECTION HEADER ===== */
.ht-section-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 36px;
}
.ht-section-title {
  font-size: 42px;
  letter-spacing: 2px;
}
.ht-section-more {
  margin-left: auto;
  font-size: 13px;
  color: var(--ht-accent);
  letter-spacing: 1px;
  transition: var(--ht-transition);
}
.ht-section-more:hover { text-decoration: underline; }

/* ===== LOADING SKELETON ===== */
.ht-skeleton {
  background: linear-gradient(90deg, var(--ht-card) 0%, #22223a 50%, var(--ht-card) 100%);
  background-size: 800px 100%;
  animation: ht-shimmer 1.4s infinite;
  border-radius: var(--ht-radius);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .ht-container { padding: 0 32px; }
}
@media (max-width: 768px) {
  .ht-container { padding: 0 20px; }
  .ht-section { padding: 56px 0; }
  .ht-section-title { font-size: 32px; }
}