/* Eggy Car - Unified Text Styles */

/* Optimized heading styles - using CSS variables */
h1 {
  font-size: var(--font-3xl);
  font-weight: bold;
  color: white;
  margin-bottom: var(--spacing-md);
  text-shadow: var(--shadow-sm);
  line-height: 1.2;
}

h2 {
  font-size: var(--font-2xl);
  font-weight: bold;
  color: white;
  margin-bottom: var(--spacing-md);
  text-shadow: var(--shadow-sm);
  line-height: 1.2;
}

/* Blog article heading styles - optimized using CSS variables */
.legal-content h1 {
  font-size: var(--font-3xl);
}

.legal-content h2 {
  font-size: var(--font-2xl);
  margin-top: var(--spacing-lg);
}

h3 {
  font-size: var(--font-xl);
  font-weight: bold;
  color: white;
  margin-bottom: var(--spacing-sm);
  text-shadow: var(--shadow-sm);
  line-height: 1.3;
}

h4 {
  font-size: var(--font-lg);
  font-weight: bold;
  color: white;
  margin-bottom: var(--spacing-sm);
  text-shadow: var(--shadow-sm);
  line-height: 1.3;
}

/* 正文样式 */
p {
  font-size: var(--font-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-md);
}

/* 博客文章正文样式 */
.legal-content p {
  font-size: var(--font-sm);
  line-height: 1.5;
}

/* 列表样式 */
ul, ol {
  font-size: var(--font-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.legal-content ul, .legal-content ol {
  font-size: var(--font-sm);
  line-height: 1.5;
}

li {
  margin-bottom: var(--spacing-sm);
}

/* 按钮文字样式 */
.game-button {
  font-size: var(--font-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.game-button.small {
  font-size: var(--font-sm);
}

/* 导航菜单文字样式 */
nav ul li a {
  font-size: var(--font-base);
  font-weight: 600;
}

/* 页脚文字样式 */
.footer-nav ul li a {
  font-size: var(--font-base);
  font-weight: 600;
}

.copyright p {
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.7);
}

/* 卡片标题样式 */
.game-title, .blog-card h3 {
  font-size: var(--font-xl);
  font-weight: bold;
  text-align: center;
  margin-bottom: var(--spacing-sm);
}

/* Blog card H2 heading styles - maintain original H3 styles */
.blog-card h2 {
  font-size: var(--font-xl);
  font-weight: bold;
  text-align: center;
  margin-bottom: var(--spacing-sm);
  color: white;
  text-shadow: var(--shadow-sm);
  line-height: 1.3;
}

/* Blog card H3 description styles - maintain original P styles */
.blog-card h3 {
  font-size: var(--font-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-md);
  font-weight: normal;
  text-align: left;
  text-shadow: none;
}

/* Card content styles */
.game-content p, .blog-content p {
  font-size: var(--font-base);
  line-height: 1.6;
}

/* Date styles */
.blog-date {
  font-size: var(--font-sm);
  font-weight: bold;
}

/* Read more link styles */
.read-more-container a {
  font-size: var(--font-base);
  font-weight: bold;
}

/* Responsive adjustments - using CSS variables */
@media (max-width: 768px) {
  h1 {
    font-size: var(--font-responsive-h1-tablet);
  }

  h2 {
    font-size: var(--font-responsive-h2-tablet);
  }

  h3 {
    font-size: var(--font-responsive-h3-tablet);
  }

  p, ul, ol {
    font-size: var(--font-responsive-p-tablet);
  }

  /* Blog card responsive styles */
  .blog-card h2 {
    font-size: var(--font-lg);
  }

  .blog-card h3 {
    font-size: var(--font-responsive-p-tablet);
  }

  .legal-content h1 {
    font-size: var(--font-2xl);
  }

  .legal-content h2 {
    font-size: var(--font-xl);
  }

  .legal-content p, .legal-content ul, .legal-content ol {
    font-size: var(--font-sm);
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: var(--font-responsive-h1-mobile);
  }

  h2 {
    font-size: var(--font-responsive-h2-mobile);
  }

  h3 {
    font-size: var(--font-responsive-h3-mobile);
  }

  p, ul, ol {
    font-size: var(--font-responsive-p-mobile);
  }

  /* Blog card small screen responsive styles */
  .blog-card h2 {
    font-size: var(--font-base);
  }

  .blog-card h3 {
    font-size: var(--font-responsive-p-mobile);
  }

  .legal-content h1 {
    font-size: var(--font-2xl);
  }

  .legal-content h2 {
    font-size: var(--font-xl);
  }

  .legal-content p, .legal-content ul, .legal-content ol {
    font-size: var(--font-xs);
  }
}