/*
 * 站点层：落地页与多页导航的样式。
 *
 * 为什么独立于 styles/app.css：
 * app.html 是讲题主线的应用外壳，它有自己的 :root 令牌与 .main 版心（720px 窄列），
 * 那是「一次只做一件事」的界面。落地页是另一种东西——宽度铺开、要把三件事讲清楚。
 * 两者挤在一份样式表里，最后一定是互相将就。所以分开，代价只是两处引用。
 *
 * 令牌只做「继承」不做「重定义」：颜色、圆角、阴影全部 --mh-* 引 styles/app.css 的
 * :root 值。站点层只新增排版尺度（字号阶梯、间距节奏）和落地页独有的版心。
 */

:root{
  /* 落地页版心。讲题页是 720px 窄列，这里放开到 960px，
     因为要并排放三张功能卡，窄列会把卡片压扁。 */
  --mh-page: 960px;
  --mh-page-narrow: 680px;
}

/* ---------- 通用版心与节奏 ---------- */
.mh-wrap{ max-width:var(--mh-page); margin:0 auto; padding:0 24px; }
.mh-wrap-narrow{ max-width:var(--mh-page-narrow); margin:0 auto; padding:0 24px; }

/* 段落节奏统一走一组间距，不随手写 px——落地页有五六个区块，
   各自随手定间距是页面看起来「散架」的主因。 */
.mh-section{ padding:56px 0; }
.mh-section + .mh-section{ border-top:1px solid var(--line-s); }

/* ---------- 顶部导航 ---------- */
.mh-nav{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line-s);
}
.mh-nav-in{
  display:flex; align-items:center; gap:20px;
  height:56px;
}
.mh-logo{
  font-weight:650; font-size:16px; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.mh-logo em{ font-style:normal; color:var(--brand); }
.mh-navlinks{ display:flex; gap:4px; margin-left:8px; }
.mh-navlinks a{
  color:var(--muted); text-decoration:none; font-size:14px;
  padding:6px 10px; border-radius:var(--rx);
}
.mh-navlinks a:hover{ color:var(--ink); background:var(--line-s); }
/* 当前页高亮。data-cur 由 nav.js 按 location.pathname 写入，
   这样多页之间不需要各自维护「我是不是当前页」。 */
.mh-navlinks a[data-cur]{ color:var(--brand); background:var(--brand-weak); font-weight:600; }
.mh-nav-cta{ margin-left:auto; }

/* 窄屏：导航挤成一行可横向滚动，不折行、不汉堡——
   本站只有三四个入口，汉堡的层级成本高于它省下的空间。 */
@media (max-width:720px){
  .mh-nav-in{ gap:10px; height:52px; }
  .mh-navlinks{ overflow-x:auto; scrollbar-width:none; }
  .mh-navlinks::-webkit-scrollbar{ display:none; }
  .mh-logo{ font-size:15px; }
}

/* ---------- 应用内嵌（app.html）----------
   讲题主线本身是 720px 窄列的应用外壳。站点导航条要跟它对齐，
   否则导航拉满 960px、下面内容卡在 720px，中间会有一条很难看的错位。 */
.mh-app .mh-nav-in{ max-width:720px; }
.mh-app .mh-nav{
  background:color-mix(in srgb, var(--card) 92%, transparent);
  border-bottom:1px solid var(--line-s);
}

/* ---------- 首屏 ---------- */
.mh-hero{ padding:72px 0 56px; }
.mh-hero h1{
  margin:0 0 16px;
  font-size:clamp(30px, 5.2vw, 46px);
  line-height:1.18; letter-spacing:-.02em; font-weight:680;
  color:var(--ink);
}
.mh-hero .sub{
  margin:0 0 28px; max-width:34em;
  font-size:clamp(15px, 1.8vw, 18px); line-height:1.65; color:var(--muted);
}
.mh-cta-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.mh-cta-note{ margin:20px 0 0; font-size:13px; color:var(--faint); }

/* ---------- 区块标题 ---------- */
.mh-h2{
  margin:0 0 8px;
  font-size:clamp(21px, 3vw, 27px);
  letter-spacing:-.015em; font-weight:660; color:var(--ink);
}
.mh-lede{ margin:0 0 32px; max-width:40em; font-size:15px; line-height:1.7; color:var(--muted); }

/* ---------- 三步 ---------- */
.mh-steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:28px; grid-template-columns:repeat(3, 1fr);
}
.mh-step-n{
  display:block; margin-bottom:10px;
  font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--brand); font-variant-numeric:tabular-nums;
}
.mh-step h3{ margin:0 0 6px; font-size:16px; font-weight:640; color:var(--ink); }
.mh-step p{ margin:0; font-size:14px; line-height:1.7; color:var(--muted); }
@media (max-width:720px){ .mh-steps{ grid-template-columns:1fr; gap:22px; } }

/* ---------- 功能卡 ---------- */
.mh-cards{
  display:grid; gap:16px; grid-template-columns:repeat(2, 1fr);
}
.mh-card{
  display:block; text-decoration:none;
  padding:22px 22px 20px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.mh-card:hover{
  border-color:var(--brand-line); box-shadow:var(--shl);
  transform:translateY(-1px);
}
.mh-card h3{ margin:0 0 6px; font-size:16px; font-weight:640; color:var(--ink); }
.mh-card p{ margin:0; font-size:14px; line-height:1.65; color:var(--muted); }
.mh-card .go{ display:inline-block; margin-top:12px; font-size:13px; color:var(--brand); font-weight:600; }
/* 尚未上线的功能：不假装能用，明确标出来。
   出题模块还没搬过来（见 docs/网站设计.md §7），这里先占位不点。 */
.mh-card[data-soon]{ background:var(--bg); }
.mh-card[data-soon] .go{ color:var(--faint); }
@media (max-width:720px){ .mh-cards{ grid-template-columns:1fr; } }

/* ---------- 证言 ---------- */
.mh-quotes{ display:grid; gap:16px; grid-template-columns:repeat(3, 1fr); }
.mh-quote{
  margin:0; padding:20px;
  border-left:2px solid var(--brand-line);
  background:var(--card); border-radius:0 var(--rs) var(--rs) 0;
}
.mh-quote p{ margin:0 0 10px; font-size:14px; line-height:1.75; color:var(--ink); }
.mh-quote footer{ font-size:12px; color:var(--faint); }
@media (max-width:720px){ .mh-quotes{ grid-template-columns:1fr; } }

/* ---------- 收尾 CTA ---------- */
.mh-close{
  padding:52px 0 56px;
  border-top:1px solid var(--line-s);
  text-align:center;
}
.mh-close h2{ margin:0 0 10px; font-size:clamp(20px, 3vw, 26px); letter-spacing:-.015em; font-weight:660; color:var(--ink); }
.mh-close p{ margin:0 0 24px; font-size:15px; color:var(--muted); }
.mh-close .mh-cta-row{ justify-content:center; }

/* ---------- 页脚 ---------- */
.mh-foot{ padding:36px 0 48px; border-top:1px solid var(--line-s); background:var(--card); }
.mh-foot-in{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; }
.mh-foot-col h4{
  margin:0 0 10px; font-size:12px; font-weight:700;
  letter-spacing:.06em; color:var(--faint); text-transform:uppercase;
}
.mh-foot-col a{
  display:block; margin-bottom:7px;
  color:var(--muted); text-decoration:none; font-size:14px;
}
.mh-foot-col a:hover{ color:var(--brand); }
.mh-foot-note{ margin:26px 0 0; font-size:12px; color:var(--faint); line-height:1.7; }

/* ---------- 工具页骨架：左侧边栏 + 右侧主区 ---------- */
.mh-page{ display:flex; align-items:flex-start; }
.mh-page-main{ flex:1; min-width:0; display:flex; align-items:flex-start; }
.mh-page-main > main{ flex:1; min-width:0; }

/* ---------- 左侧边栏（讲题主线之外的工具页用） ---------- */
.mh-side{
  width:220px; flex:0 0 220px;
  padding:20px 12px;
  border-right:1px solid var(--line-s);
}
.mh-side h4{
  margin:16px 0 6px; padding:0 10px;
  font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--faint);
}
.mh-side h4:first-child{ margin-top:0; }
.mh-side a{
  display:block; padding:8px 10px; margin-bottom:1px;
  border-radius:var(--rx); color:var(--muted);
  text-decoration:none; font-size:14px;
}
.mh-side a:hover{ background:var(--line-s); color:var(--ink); }
.mh-side a[data-cur]{ background:var(--brand-weak); color:var(--brand); font-weight:600; }
.mh-side-note{
  margin:20px 10px 0; padding-top:14px;
  border-top:1px solid var(--line-s);
  font-size:12px; line-height:1.7; color:var(--faint);
}
@media (max-width:720px){
  /* 窄屏侧边栏收成顶部横向滚动条，而不是汉堡。
     家长在手机上单手操作，一个需要点开的菜单比一排可滑的标签更难点。 */
  .mh-side{
    width:auto; flex:none; display:flex; gap:4px;
    padding:8px 16px; overflow-x:auto; scrollbar-width:none;
    border-right:none; border-bottom:1px solid var(--line-s);
  }
  .mh-side::-webkit-scrollbar{ display:none; }
  .mh-side h4, .mh-side-note{ display:none; }
  .mh-side a{ white-space:nowrap; }
}