/* =========================
   世界动物主题网站样式
   用途：动物百科 / 动物信息网站
   风格：自然、森林生态风
   ========================= */


/* -------------------------
   全局颜色与变量
   使用位置：整个网站统一配色
-------------------------- */
:root {
  --color-primary: #4f7c5a;        /* 主绿色：导航栏、按钮 */
  --color-primary-dark: #35543d;   /* 深绿色：标题 */
  --color-secondary: #8fb996;      /* 辅助绿色：背景元素 */
  --color-accent: #d9a441;         /* 强调色：按钮悬停 */
  --color-bg: #f6f3ea;             /* 页面整体背景 */
  --color-surface: #fffdf8;        /* 卡片背景 */
  --color-text: #2d3a2f;           /* 正文文字 */
  --color-text-light: #5d6b60;     /* 次级文字 */
  --color-border: #d9dfd2;         /* 卡片边框 */

  --radius-lg: 18px;               /* 大圆角：卡片 */
  --radius-md: 12px;               /* 中圆角 */
  --radius-sm: 8px;                /* 小圆角 */
}


/* -------------------------
   全局重置
   使用位置：整个网站基础样式
-------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* 页面整体背景与字体 */
body {
  font-family: "Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  line-height: 1.75;
  color: var(--color-text);
  background: linear-gradient(to bottom,#f4f7f1,var(--color-bg));
}


/* 图片统一样式
   使用位置：动物图片、文章图片 */
img {
  max-width: 100%;
  display: block;
  border-radius: var(--radius-md);
}


/* 链接样式
   使用位置：导航链接、卡片链接、文章链接 */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: var(--color-accent);
}


/* 页面内容容器
   使用位置：首页、分类页、详情页主体 */
.container {
  width: min(92%,1200px);
  margin: 0 auto;
}



/* =========================
   导航栏区域
   使用位置：首页顶部导航
   包含：logo + 导航菜单
========================= */

header {
  position: sticky;
  top: 0;
  background: rgba(255,253,248,0.9);
  border-bottom: 1px solid var(--color-border);
}

/* 导航栏布局 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

/* 网站logo */
.logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* 导航菜单 */
.nav-links {
  display: flex;
  gap: 22px;
}

/* 导航菜单链接 */
.nav-links a {
  font-weight: 500;
}


/* =========================
   首页横幅 Hero
   使用位置：首页顶部大图介绍
========================= */

.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(rgba(32,49,36,0.4),rgba(32,49,36,0.4)),
    url("images/hero.jpg") center/cover no-repeat;
  color: white;
  text-align: center;
}

/* 横幅文字区域 */
.hero-content {
  width: min(90%,800px);
  margin: 0 auto;
}

/* 横幅标题 */
.hero h1 {
  font-size: 4rem;
  margin-bottom: 20px;
}

/* 横幅简介 */
.hero p {
  font-size: 1.1rem;
}


/* =========================
   按钮样式
   使用位置：首页按钮、搜索按钮等
========================= */

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
}

/* 主按钮
   使用位置：首页“探索动物”按钮 */
.btn-primary {
  background: var(--color-accent);
  color: white;
}


/* =========================
   动物分类卡片
   使用位置：首页动物分类
   例如：哺乳动物 / 鸟类 / 爬行动物
========================= */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 24px;
}

/* 分类卡片 */
.category-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
}

/* 分类图标 */
.category-icon {
  width: 68px;
  height: 68px;
}


/* =========================
   动物卡片
   使用位置：动物列表页
   例如：熊猫、狮子、老虎
========================= */

.animal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 28px;
}

/* 单个动物卡片 */
.animal-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* 动物图片 */
.animal-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* 卡片文字区域 */
.animal-card-content {
  padding: 22px;
}

/* 动物名称 */
.animal-card h3 {
  font-size: 1.3rem;
}

/* 动物标签
   例如：哺乳动物 / 食肉动物 */
.animal-meta span {
  font-size: 0.85rem;
  background: #eef5ec;
  padding: 6px 10px;
  border-radius: 999px;
}


/* =========================
   动物详情页
   使用位置：单个动物介绍页面
========================= */

/* 详情页布局
   左边图片 + 右边信息 */
.detail-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
}

/* 动物信息卡片 */
.detail-content {
  background: var(--color-surface);
  padding: 30px;
}

/* 信息列表
   例如：寿命 / 分布 / 食物 */
.info-list {
  display: grid;
  gap: 14px;
}

/* 单条信息 */
.info-item {
  display: flex;
  justify-content: space-between;
}


/* =========================
   搜索框
   使用位置：动物搜索功能
========================= */

.search-box {
  max-width: 680px;
  margin: 0 auto 36px;
  display: flex;
  border-radius: 999px;
}

/* 搜索输入框 */
.search-box input {
  flex: 1;
  padding: 16px;
}

/* 搜索按钮 */
.search-box button {
  background: var(--color-primary);
  color: white;
}


/* =========================
   文章内容
   使用位置：动物科普文章
========================= */

.article-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px;
}

/* 文章标题 */
.article-content h2,
.article-content h3 {
  color: var(--color-primary-dark);
}

/* 文章段落 */
.article-content p {
  margin-bottom: 16px;
}


/* =========================
   页脚
   使用位置：网站底部
========================= */

footer {
  background: var(--color-primary-dark);
  color: white;
  padding: 28px 0;
}

/* 页脚内容布局 */
.footer-content {
  display: flex;
  justify-content: space-between;
}

/* 页脚链接 */
.footer-links a {
  color: rgba(255,255,255,0.8);
}