/*
 * nav.css - 全站统一导航栏
 * 用法：<link rel="stylesheet" href=".../nav.css">
 * 两种变体：.site-nav--guest（游客/首页/登录） / .site-nav--user（已登录/内页）
 */

:root {
  --nav-clay: #b7653e;
  --nav-clay-deep: #8b4028;
  --nav-ink: #29415d;
  --nav-muted: #5f6b7b;
  --nav-cream: rgba(255, 250, 241, 0.88);
  --nav-line: rgba(232, 226, 215, 0.8);
  --nav-shadow-sm: 0 6px 18px rgba(60, 73, 90, 0.08);
  --nav-radius: 15px;
}

.site-nav {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 100;
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  /* 导航背景铺满视口；内容仍用响应式安全边距，不会贴到屏幕边缘。 */
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0 clamp(20px, 6vw, 120px);
}

/* ========== 品牌区 ========== */
.site-nav__logo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 950;
  font-size: 24px;
  color: var(--nav-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.site-nav__logo:hover { opacity: 0.85; }
.site-nav__mark {
  width: 25px;
  height: 34px;
  background: url("../images/theme/xunyun-tongxin-brand-mark.png") center / contain no-repeat;
  flex-shrink: 0;
}
.site-nav__mark::before {
  display: none;
}

/* 常规导航统一使用“埙韵童心”正式字标；成长岛页已直接使用同一套图片。 */
.site-nav__logo:not(.site-nav__logo--xunyun) > span:not(.site-nav__mark) {
  display: block;
  width: 96px;
  height: 32px;
  overflow: hidden;
  background: url("../images/theme/xunyun-tongxin-brand-wordmark.png") center / contain no-repeat;
  font-size: 0;
}
.site-nav__logo:not(.site-nav__logo--xunyun) > span:not(.site-nav__mark) b { display: none; }

/* ========== 菜单 ========== */
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.site-nav__links a {
  padding: 7px 10px;
  border-radius: var(--nav-radius);
  font-size: 17px;
  color: var(--nav-muted);
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s;
  white-space: nowrap;
}
.site-nav__links a:hover,
.site-nav__links a.active {
  background: #fff;
  color: var(--nav-clay-deep);
  box-shadow: var(--nav-shadow-sm);
}

/* Student navigation groups two related destinations without treating them as a form. */
.site-nav__group { position: relative; }
.site-nav__group > summary {
  display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: var(--nav-radius);
  color: var(--nav-muted); cursor: pointer; font-size: 17px; font-weight: 700; list-style: none; white-space: nowrap;
}
.site-nav__group > summary::-webkit-details-marker { display: none; }
.site-nav__group > summary:focus-visible { outline: 3px solid #f0be59; outline-offset: 3px; }
.site-nav__group > summary::after { content: "⌄"; font-size: 15px; line-height: 1; transition: transform .2s ease; }
.site-nav__group[open] > summary::after { transform: rotate(180deg); }
.site-nav__group > summary:hover,
.site-nav__group > summary.active,
.site-nav__group[open] > summary { background: #fff; color: var(--nav-clay-deep); box-shadow: var(--nav-shadow-sm); }
.site-nav__group-menu {
  position: absolute; z-index: 30; top: calc(100% + 9px); left: 50%; min-width: 166px; padding: 8px;
  transform: translateX(-50%); border: 1px solid #ebdccd; border-radius: 18px; background: #fffdf8;
  box-shadow: 0 16px 30px rgba(69, 62, 51, .16);
}
.site-nav__group-menu::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: #fffdf8; border-top: 1px solid #ebdccd; border-left: 1px solid #ebdccd; }
.site-nav__links .site-nav__group-choice { display: flex; align-items: center; gap: 9px; padding: 10px 11px; font-size: 16px; position: relative; }
.site-nav__choice-check { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #d9c6ae; border-radius: 6px; color: transparent; font-size: 13px; line-height: 1; }
.site-nav__group-choice.active .site-nav__choice-check { background: #e59a6a; border-color: #e59a6a; color: #fff; }

/* The logo already returns home, so this duplicate control is not needed on student pages. */
.site-nav--user .site-nav__home { display: none; }

/* ========== 右侧区 ========== */
.site-nav__right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 4px;
}

/* ========== 游客态 ========== */
.site-nav--guest {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
}
.site-nav--guest .site-nav__cta {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--nav-ink);
  color: #fff !important;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(47, 80, 108, 0.18);
  transition: transform 0.2s, box-shadow 0.2s;
}
.site-nav--guest .site-nav__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(47, 80, 108, 0.24);
}

/* ========== 已登录态 ========== */
.site-nav--user {
  position: sticky;
  top: 0;
  background: var(--nav-cream);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--nav-line);
}

.site-nav__home {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--nav-muted);
  text-decoration: none;
  font-size: 22px;
  box-shadow: var(--nav-shadow-sm);
  transition: 0.2s;
}
.site-nav__home:hover {
  color: var(--nav-clay-deep);
  transform: translateY(-1px);
}

.site-nav__user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-nav__avatar {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(145deg, #ffd9b4, #e8a577);
  display: grid;
  place-items: center;
  font-weight: 950;
  color: #7e4a37;
  border: 2px solid #fff;
  box-shadow: var(--nav-shadow-sm);
}
.site-nav__avatar--photo { overflow: hidden; background: #f3e6d8; color: transparent; }
.site-nav__avatar--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-nav__user-info { line-height: 1.2; }
.site-nav__user-info b { font-size: 15px; display: block; color: var(--nav-ink); }
.site-nav__user-info small { font-size: 12px; color: #8a94a1; }
.site-nav__logout{border:0;border-radius:12px;padding:8px 10px;background:#fff4eb;color:#9b5a3f;font:inherit;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}.site-nav__logout:hover{background:#ffe7d5}

/* The profile itself is the single account trigger: no second boxed “account” control. */
.xun-account-menu--profile { margin-left: 2px; }
.xun-account-menu--profile > summary { align-items: center; gap: 8px; }
.xun-account-menu--profile > summary::after { margin-left: 8px; color: #18324b; font-size: 12px; }
.xun-account-menu--profile .site-nav__avatar { flex: 0 0 auto; }
.xun-account-menu--profile .site-nav__user-info { min-width: 0; }
.xun-account-menu--profile .xun-account-menu__panel { right: 0; }

/* ========== 移动端 ========== */
@media (max-width: 980px) {
  .site-nav { height: 56px; padding: 0 14px; gap: 10px; }
  .site-nav__logo { font-size: 22px; }
  .site-nav__mark { width: 22px; height: 29px; }
  .site-nav__logo:not(.site-nav__logo--xunyun) > span:not(.site-nav__mark) { width: 84px; height: 28px; }
  .site-nav__links { display: none; }
  .site-nav--user .site-nav__user-info { display: none; }
}

/* ===== 最小字号保护（自动追加） ===== */
/* 保证所有可见文字至少 12px，避免 8-11px 不可读 */
:is(h1, h2, h3, h4, h5, h6,
    p, span, a, b, i, small, strong, em, u, s, mark, del, ins,
    li, td, th, dt, dd, label, button, figcaption, caption) {
  font-size: max(12px, 1em);
}