/* ══════════════════════════════════════════════════════════
   header-align.css — 顶部导航统一（2026-09-28）
   用途：给【未加载 portal.css】的页面补上与首页一致的头部/导航样式。
        受影响页面：profile.html / course.html / module.html
        （这些页面只加载 style.css + modules.css，头部会变成
         「logo 一行 + 导航一行、左对齐、还往上顶出可视区被切掉」）
   加载顺序：必须放在页面自身样式（如 profile.css）之后。
   ══════════════════════════════════════════════════════════ */

/* ⚠️ 根因：.header 是 position:fixed 却没设宽度 → fixed 元素默认收缩到内容宽，
   实测整个头部只有 889px 宽、贴在左边，右边空出 400px。
   首页靠 portal.css 的 .header{width:100%} 撑满，这里必须补上。 */
.header {
  left: 0;
  right: 0;
  width: 100%;
}

.header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* .header 是 flex 容器，.header-inner 会被当成伸缩项 → 也必须显式撑满 */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.header .logo-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.15rem;
  color: var(--text, #1f2430);
}
.header .logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}
.header .tagline {
  margin: 0;
  padding-left: 10px;
  border-left: 1px solid var(--border, #e3e7f0);
  font-size: 0.72rem;
  color: var(--text-dim, #5b6b8c);
  line-height: 1.2;
}

.header .nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.header .nav-link {
  color: var(--text-dim, #5b6b8c);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.header .nav-link:hover {
  color: #232838;
  background: rgba(79, 70, 229, 0.15);
}
.header .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.header .user-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 12px;
  /* ★ 2026-11-05 容器高度钉死成和导航一致。
     实测过的问题：#user-area 自己高 51px（里面按钮只有 37px），
     父容器 flex 居中时按 51px 算，按钮中轴 y=35，而导航 y=28 —— 差 7px。
     多出来的 14px 来自 .user-menu 里常驻的空 inline-block 锚点。
     按钮本体的颜色/圆角/内边距统一在 portal.css 的 .zf-login 里定义，这里不重复。 */
  height: 37px;
  min-height: 37px;
  line-height: 1;
  font-size: 0;
}
.header .user-area > * {
  font-size: 0.85rem;   /* 抵消上面 font-size:0 的清零 */
  line-height: 1.4;
  flex: 0 0 auto;
}
.header .user-area .user-menu {
  font-size: 0.8rem;
}
.header .user-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ≥1200px：一行，导航靠右（与首页一致） */
@media (min-width: 1150px) {
  .header .header-inner {
    flex-wrap: nowrap;
  }
  .header #main-nav {
    margin-left: auto;
  }
}

/* 769–1199px：两行但排整齐；头部改 sticky，避免 fixed 死高盖住正文 */
@media (min-width: 769px) and (max-width: 1149px) {
  .header {
    position: sticky;
    top: 0;
    height: auto;
    min-height: 56px;
  }
  .header .header-inner {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .header .user-area {
    order: 2;
    margin-left: auto;
  }
  .header #main-nav {
    order: 3;
    width: 100%;
    justify-content: center;
  }
  .main {
    margin-top: 0;
  }
}

/* ══════════════════════════════════════════════════════════
   ★ 2026-11-05 补：手机端（<769px）页眉布局
   根因：原文件只有 ≥769px 的断点，手机上 9 个导航项挤成一行、
        logo/导航/按钮互相压住，看起来"乱"。
   做法：手机上改为两行 —— 第一行 logo + 联系我们，第二行导航横向可滑。
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
  }
  .header .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    gap: 6px;
  }
  /* 第一行：logo 靠左，联系我们靠右 */
  .header .logo-section {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }
  .header .logo {
    font-size: 1.15rem;
    margin: 0;
    gap: 6px;
    white-space: nowrap;
  }
  .header .logo-icon,
  .header .logo img {
    width: 26px;
    height: 26px;
  }
  .header .user-area {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .header .user-area .btn {
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  /* 第二行：导航独占一行，横向滑动，不换行不挤压 */
  .header #main-nav {
    order: 3;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    margin: 2px -12px 0;
    padding: 0 12px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header #main-nav::-webkit-scrollbar {
    display: none;
  }
  .header .nav-link {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 12.5px;
    white-space: nowrap;
    border-radius: 999px;
  }
  /* 手机端页眉不再是固定高度 56px，正文偏移要归零 */
  body {
    padding-top: 0 !important;
  }
  .main {
    margin-top: 0;
  }
}

/* ══════════════════════════════════════════════════════════
   ★ 2026-11-05 修「logo 被压成 40px、品牌名看不见」
   原因：.logo-section 在 flex 容器里被算成 40px（只算到图标宽），
        文字溢出后被裁掉；.logo 又继承了 style.css 的 margin-bottom 等规则。
   做法：强制 logo-section 按内容撑开、不收缩，logo 内部不换行。
   ══════════════════════════════════════════════════════════ */
.header .logo-section {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  width: auto !important;
}
.header .logo {
  width: auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  font-size: 1.15rem !important;
  overflow: visible !important;
}
.header .logo a,
.header .logo > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}