/* =============================================================
   wsfzx-v7.css —— v7 蓝体系视觉覆盖层
   在 assets/styles.css / components.css / warm-editorial.css 之后加载。
   只做「令牌层 + 组件取色 + 移动端增强」，不改动任何 PHP 模板结构。
   灰度期为轻量覆盖层，全部改动集中在 :root 令牌与高亮组件取色；
   回退 = 删除 layout.php 中本文件引用即可，不影响 styles.css 原始行为。
   ============================================================= */

/* ---------- 0. Light 令牌：墨蓝金 → v7 蓝体系（保留语义命名，避免模板改样） ---------- */
:root {
  /* 品牌主色 */
  --primary:      #1677FF;   /* warm-editorial 原映射为 --ink，覆盖为品牌蓝 */
  --primary-hover:#4096FF;
  --primary-active:#0958D9;
  --primary-soft: rgba(22,119,255,.09);

  /* 金色强调 → 蓝（成就/强调/导航高亮/btn 主操作/crest） */
  --gold:        #1677FF;
  --gold-soft:   rgba(22,119,255,.09);
  --gold-deep:   #0958D9;

  /* 认证/成功 teal：原 #2E8B7A 在浅底上 4.13:1 略低于 AA，加深一档 */
  --teal:        #186C5C;

  /* 次级文字对比度：原 --text-mute #8B93A8/浅底 3.07:1 → #5E6B85 ≈ 5.1:1（AA） */
  --text-mute:   #5E6B85;

  /* 字体：去除衬线展示体，全站无衬线（PingFang SC 优先） */
  --font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-latin:   "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;

  /* 反色表面：品牌深蓝黑不变，浅字对比保持 */
  --surface-inverse: var(--ink);
  --text-on-inverse: #FFFFFF;
}

/* ---------- 1. 主操作按钮：墨蓝 → 品牌蓝 ---------- */
.btn--primary,
.search__btn {
  background: var(--primary);
  color: #fff;
}
.btn--gold {
  background: var(--gold);
  color: var(--text-on-inverse, #fff);
}
.btn--gold:hover {
  background: var(--gold-deep);
}
.btn--primary:hover,
.search__btn:hover {
  background: var(--primary-hover);
}
.btn--primary:active,
.search__btn:active {
  background: var(--primary-active);
}

/* ---------- 1b. 分段控件兜底（排名页/资讯页，原为 detail.css 条件加载） ---------- */
.rank-seg, .news-seg { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.rank-seg > a, .news-seg > a,
.rank-seg > button, .news-seg > button {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; font-size: var(--fs-sm);
  font-family: inherit; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-soft); cursor: pointer; text-decoration: none;
  transition: all var(--t-fast);
}
.rank-seg > a:hover, .news-seg > a:hover,
.rank-seg > button:hover, .news-seg > button:hover { border-color: var(--line-strong); color: var(--text); }
.rank-seg > a.is-active, .news-seg > a.is-active,
.rank-seg > button.is-active, .news-seg > button.is-active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.rank-seg > a.is-active:hover, .news-seg > a.is-active:hover,
.rank-seg > button.is-active:hover, .news-seg > button.is-active:hover { background: var(--primary-hover); }
[data-theme="dark"] .rank-seg > a.is-active, [data-theme="dark"] .news-seg > a.is-active,
[data-theme="dark"] .rank-seg > button.is-active, [data-theme="dark"] .news-seg > button.is-active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* 导航/news 等页面里的次级蓝按钮 hover（styles.css .btn--ghost 保持不变） */
[data-theme="light"] .nav a.is-active,
.nav a.is-active {
  background: var(--primary-soft);
  color: var(--primary-active);
}

/* ---------- 2. 徽记 crest：暖金 → 品牌蓝 ---------- */
.crest {
  background: linear-gradient(150deg, #3A8BFF, #1677FF) !important;
  color: #fff !important;
  box-shadow: var(--sh-xs), inset 0 0 0 1px rgba(255,255,255,.25) !important;
}

/* ---------- 3. Hero / CTA：金光径向 → 蓝光径向 ---------- */
.hero {
  background:
    radial-gradient(1200px 480px at 82% -12%, rgba(22,119,255,.10), transparent 60%),
    var(--paper);
}
.cta {
  background-image: radial-gradient(620px 260px at 86% 0%, rgba(64,150,255,.30), transparent 62%);
}
.cta .btn--primary {
  background: #fff;
  color: var(--primary-active);
}
.cta .btn--primary:hover {
  background: rgba(255,255,255,.88);
}
.cta h2, .cta p { color: var(--text-on-inverse); }

/* ---------- 4. 卡片 hover 金线 → 蓝线 ---------- */
.major-card::before {
  background: linear-gradient(90deg, var(--primary), transparent);
}
.major-card:hover::before { opacity: 1; }

/* ---------- 5. 详情页/对比表/机构页高频取色点（补齐 warm-editorial 未覆盖处） ---------- */
.logo-tile, .dh__logo {
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.cmp__tag--ok {
  background: var(--teal-soft);
  color: var(--teal);
}
.rank-trend--up { color: #186C5C; }

/* ---------- 6. 焦点可见性强化（键盘可达） ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- 7. 移动端：筛选抽屉（≤720px 生效，需搭配 layout 注入的 .filter-toggle） ---------- */
.filter-toggle { display: none; }
@media (max-width: 720px) {
  .filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: var(--fs-sm);
    font-weight: 600;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
  }
  .filter-toggle svg { width: 15px; height: 15px; }
  .filter-toggle[aria-expanded="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }
  .layout .filter {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    z-index: 60;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    box-shadow: var(--sh-lg);
    padding: var(--sp-5);
    transform: translateX(-105%);
    transition: transform .26s ease;
  }
  .layout .filter.is-open {
    transform: translateX(0);
  }
  .layout .filter.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.42);
    z-index: -1;
  }
  /* 抽屉内顶部标题 */
  .layout .filter.is-open::after {
    content: "筛选条件";
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: var(--sp-4);
    color: var(--text);
  }
  /* 抽屉打开时锁定背景滚动 */
  body.filter-lock { overflow: hidden; }
}

/* ---------- 8. 移动端：底部导航条（≤720px 显示） ---------- */
.bottom-nav {
  display: none;
}
@media (max-width: 720px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(15,23,42,.06);
  }
  .bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    color: var(--text-mute);
    text-decoration: none;
  }
  .bottom-nav a svg { width: 20px; height: 20px; }
  .bottom-nav a.is-active {
    color: var(--primary-active);
    font-weight: 600;
  }
  .footer { margin-bottom: 56px; }
}

/* ---------- 9. 375px 窄屏明细（线上原断点最小 420px） ---------- */
@media (max-width: 375px) {
  .toolbar__count { font-size: var(--fs-xs); }
  .sort { gap: 4px; }
  .sort select { padding: 6px 8px; font-size: var(--fs-xs); }
  .school-grid { gap: var(--sp-2); }
  .section { padding-block: var(--sp-8); }
  .footer__inner { gap: var(--sp-6); }
  .auth-card { padding: var(--sp-8); }
}

/* ---------- 10. Dark 令牌同步（蓝体系） ---------- */
[data-theme="dark"] {
  --gold:        #4096FF;
  --gold-soft:   rgba(22,119,255,.16);
  --gold-deep:   #7BB2FF;
  --teal:        #45B89E;
  --text-mute:   #9AA6C2;
  --primary:     #1677FF;
  --primary-hover:#4096FF;
  --primary-active:#69A7FF;
  --primary-soft: rgba(22,119,255,.16);
}
[data-theme="dark"] .btn--primary,
[data-theme="dark"] .search__btn {
  background: #1677FF;
}
[data-theme="dark"] .btn--primary:hover,
[data-theme="dark"] .search__btn:hover { background: #4096FF; }
[data-theme="dark"] .nav a.is-active,
[data-theme="dark"] .uc-nav a.is-active,
[data-theme="dark"] .help-cat.is-active {
  background: var(--primary-soft);
  color: var(--primary-active);
}
[data-theme="dark"] .crest {
  background: linear-gradient(150deg, #4D94FF, #1677FF) !important;
  color: #fff !important;
  box-shadow: var(--sh-xs), inset 0 0 0 1px rgba(255,255,255,.22) !important;
}
[data-theme="dark"] .cta .btn--primary {
  background: #1677FF;
  color: #fff;
}
[data-theme="dark"] .cta .btn--primary:hover { background: #4096FF; }
[data-theme="dark"] .major-card::before {
  background: linear-gradient(90deg, #4096FF, transparent);
}
[data-theme="dark"] .hero {
  background:
    radial-gradient(1200px 480px at 82% -12%, rgba(22,119,255,.14), transparent 60%),
    var(--paper);
}
[data-theme="dark"] .bottom-nav {
  background: rgba(14,21,36,.92);
  border-top-color: #2A3854;
}
[data-theme="dark"] .filter-toggle {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text-soft);
}
[data-theme="dark"] .cs-tel {
  color: #E6F0FF;
  background: rgba(22,119,255,.16);
  border-color: rgba(22,119,255,.5);
}
[data-theme="dark"] .cs-tel svg { color: #7BB2FF; }
[data-theme="dark"] .cs-tel i { color: var(--text-mute); }
.badge--wait {
  background: rgba(22,119,255,.10);
  color: var(--primary);
  border-color: rgba(22,119,255,.28);
}
[data-theme="dark"] .badge--wait {
  background: rgba(22,119,255,.14);
  color: #7BB2FF;
  border-color: rgba(22,119,255,.32);
}