/* --- 基础样式 --- */

/* 定义一个容器，让内容居中并设置最大宽度 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 头部样式 --- */

.site-header {
    background-color: #f4f7f6; /* 选择一个干净、专业的背景颜色 */
    padding: 20px 0; /* 在内容上下留出空间 */
    border-bottom: 1px solid #e0e6e4; /* 添加一条细底边 */
}

.header-container {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中内容 */
    justify-content: space-between; /* 在水平方向上让 Logo 和其他内容（如导航）分别靠在两边 */
}

/* --- Logo 样式 --- */

.logo-link {
    display: block; /* 使链接充满图片 */
    text-decoration: none; /* 移除链接的下划线 */
}

/* 样式化：完整横版 Logo */
.logo-full {
    height: 60px; /* 设置一个固定高度，防止 Logo 显得过大 */
    width: auto; /* 让宽度自动调整以保持图片比例，不被拉伸 */
    display: block; /* 移除图片默认的边距 */
}

/* 样式化：单一徽章 Logo (如果需要显示) */
.logo-emblem {
    height: 50px;
    width: auto;
    display: block;
}

/* --- 响应式设计 (可选) --- */

/* 例如，在手机端（屏幕宽度小于 768px 时），
  我们隐藏完整版 Logo，显示更小、更简洁的徽章 Logo。
*/

@media (max-width: 767px) {
    /* 前提是你已经按照 HTML 中的建议，在 CSS 选择器中精确区分，
      并且（如果需要）在 HTML 中正确添加了 .logo-emblem。
      这里我们演示一种假设你已经在 HTML 中添加了两者的逻辑。
    
      这里需要精细调整你的 HTML 和 CSS 以匹配这种需求。
      例如：如果手机端显示徽章，那么在 PC 端我们就得隐藏徽章。
    */
    
    /* 通常在手机端，我们会：
       1. 如果 HTML 中有 .logo-full 和 .logo-emblem 两个 img 标签：
          .logo-full { display: none; }
          .logo-emblem { display: block; }
          
       2. 如果只想用 .logo-full 变窄：
          .logo-full { height: 40px; }
    */
}