/* 全局样式重置 */
* {
  /* 清除所有元素默认外边距 */
  margin: 0;
  /* 清除所有元素默认内边距 */
  padding: 0;
  /* 统一盒模型计算方式 */
  box-sizing: border-box;
}

/* 导航栏样式 */
.navbar {
  /* 启用Flex布局 */
  display: flex;
  /* 水平左对齐 */
  justify-content: flex-start;
  /* 垂直居中 */
  align-items: center;
  /* 内边距（上/右/下/左） */
  padding: 1rem 2rem;
  /* 背景颜色 */
  background: #f8f8f8;
  /* 子元素水平间距 */
  gap: 1.5rem;
  /* 启用相对定位 */
  position: relative;
  /* 允许子元素自动换行 */
  flex-wrap: wrap;
}

/* 导航项通用样式 */
.nav-item {
  /* 移除链接默认下划线 */
  text-decoration: none;
  /* 文字颜色 */
  color: #333;
  /* 水平外边距 */
  margin: 0 10px;
  /* 鼠标指针样式 */
  cursor: pointer;
  /* 禁止文字换行 */
  white-space: nowrap;
}

/* logo样式 */
.logo {
  /* 固定高度 */
  height: 40px;
}

/* 语言切换样式（桌面端） */
.lang-switch {
  /* 将元素推到右侧 */
  margin-left: auto;
  /* 启用Flex布局 */
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 子元素水平间距 */
  gap: 0.5rem;
}

/* 语言分隔符样式 */
.lang-switch .or1,
/* 当前语言样式 */
.lang-switch .langchosen,
/* 激活状态样式 */
.lang-switch .active {
  /* 字体大小 */
  font-size: 16px;
}

/* 未激活语言颜色 */
.lang-switch .or1 {
  color: #ccc;
}

/* 可点击语言项样式 */
.lang-switch .langchosen {
  /* 文字颜色 */
  color: #333;
  /* 移除链接下划线 */
  text-decoration: none;
}

/* 当前激活语言样式 */
.lang-switch .active {
  /* 高亮颜色 */
  color: orange;
}

/* 移动端适配样式 */
@media (max-width: 768px) {
  /* 导航栏适配 */
  .navbar {
    /* 允许子元素换行 */
    flex-wrap: wrap;
    /* 水平居中对齐 */
    justify-content: center;
  }

  /* 移动端logo样式 */
  .logo {
    /* 占满视口宽度 */
    width: 100vw;
    /* 限制最大高度 */
    max-height: 60px;
    /* 水平内边距 */
    padding: 0 2rem;
    /* 包含内边距计算 */
    box-sizing: border-box;
    /* 居中对齐 */
    margin: 0 auto;
    /* 强制独占一行 */
    flex: 0 0 100%;
    /* 图片自适应 */
    object-fit: contain;
  }
}

/* 内容区域样式 */
.content {
  /* 内边距 */
  padding: 2rem;
  /* 文字居中 */
  text-align: center;
}

/* 标题样式 */
.content h1 {
  /* 下方外边距 */
  margin-bottom: 1rem;
  /* 文字居中 */
  text-align: center;
}

/* 段落样式 */
.content p {
  /* 最大宽度限制 */
  max-width: 600px;
  /* 水平居中 */
  margin: 0 auto;
  /* 文字居中 */
  text-align: center;
}

/* 分割线样式 */
.divider-5px {
  /* 固定高度 */
  height: 5px;
  /* 橙色背景 */
  background: orange;
}

.divider-1px {
  /* 固定高度 */
  height: 1px;
  /* 浅灰色背景 */
  background: #eaeaea;
  /* 上下外边距 */
  margin: 2rem 0;
}

/* 底部样式 */
.footer {
  /* 内边距 */
  padding: 2rem;
  /* 文字居中 */
  text-align: center;
}

/* 社交图标容器 */
.social-icons {
  /* 启用Flex布局 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 子元素水平间距 */
  gap: 1rem;
  /* 上方外边距 */
  margin-top: 1rem;
}

/* 单个社交图标 */
.social-icon {
  /* 固定宽度 */
  width: 40px;
  /* 固定高度 */
  height: 40px;
}