/* ==========================================================================
   手机端吸顶导航（.mtop）—— 全站唯一实现 · 2026-10-28
   --------------------------------------------------------------------------
   干什么：手机上的白条（毛玻璃），左品牌双行字、右汉堡，点开是从条下展开的菜单抽屉。
          桌面端整块不渲染，页面与加之前逐像素一致。

   🔴 出现时机：**不是一进页面就有**。页面开头两三屏不放任何东西，滚到脚本定的
      阈值（2 个屏高，见 js/mtopnav.js 的 SHOW_AFTER_SCREENS）之后，条才从屏幕上沿
      滑下来、盖在内容上；滚回阈值以内自动收回。所以不需要占位块，也不需要给
      hero 让位 —— 页面首屏与没有这个条时逐像素一致。

   🔴 只在 ≤820px 生效。所有规则都包在媒体查询里，PC 端连 display:none 都不需要
      （.mtop 本身默认 display:none，兜一层防止页面误传媒体查询）。

   引用方式（页面里三样东西，缺一不可）：
     1. <link rel="stylesheet" href="css/mtopnav.css?v=20261028">
     2. <body> 之后第一行贴 <header class="mtop">…</header> + <div class="mtop-mask"></div>
     3. <script src="js/mtopnav.js?v=20261028" defer></script>

   🔴 安全区：iPhone 刘海屏靠 env(safe-area-inset-top) 顶开，--mtop-h 只算内容高度，
      所以「顶栏实际遮挡高度」= --mtop-h + safe-area。凡是需要给条让位的地方
      （如页内 sticky 元素），一律用这个和，不要写死 54px。
   ========================================================================== */

.mtop { display: none; }
.mtop-mask { display: none; }

@media (max-width: 820px) {

  /* 条高 50：老杨要求 48–56 之间，太高会吃掉手机视口。
     里面装的是品牌两行字（16.5px + 11px ≈ 30px）和 40px 的汉堡按钮，
     50 是「两行字不挤、按钮点击区还够」的最小值，别再往上涨。 */
  :root { --mtop-h: 50px; }

  /* ---------- 条 ---------- */
  .mtop {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .07), 0 4px 16px rgba(16, 24, 40, .05);
    padding-top: env(safe-area-inset-top, 0px);
    /* 默认整体推到屏幕外；滚过阈值后加 .is-on 滑下来 */
    transform: translateY(-100%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
  }
  .mtop.is-on { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .mtop { transition: none; }
  }
  .mtop-inner {
    height: var(--mtop-h);
    max-width: var(--page-w, 960px);
    margin: 0 auto;
    padding: 0 var(--page-pad, 20px);
    display: flex; align-items: center;
  }

  /* ---------- 品牌（左） ---------- */
  .mtop-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .mtop-logo {
    flex: none; width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg, #0e7490, #155e75);
    color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .5px;
    display: flex; align-items: center; justify-content: center;
  }
  .mtop-brand-t { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
  .mtop-brand-t b {
    font-size: 16.5px; font-weight: 700; color: #155e75; letter-spacing: .5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mtop-brand-t i {
    font-style: normal; font-size: 11px; font-weight: 600;
    color: #8b9aa8;
    /* 字距是按「让 LinguaTest 右端和上面「菲律宾游学」齐平」算出来的：
       中文 5 字 16.5px ≈ 85px，LinguaTest 11px 本体约 63.6px，差 21.4px 摊到 9 个字缝 ≈ 2.4px。
       改中文行字号或品牌字，这里要跟着重算，否则两行右端会错开。 */
    letter-spacing: 2.6px;
  }

  /* ---------- 汉堡（右） ---------- */
  .mtop-burger {
    margin-left: auto; flex: none;
    width: 40px; height: 40px; padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: none; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mtop-burger span {
    display: block; width: 23px; height: 2.5px; border-radius: 2px;
    background: #155e75;
    transition: transform .2s ease, opacity .16s ease;
  }
  /* 展开变 × */
  .mtop.is-open .mtop-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .mtop.is-open .mtop-burger span:nth-child(2) { opacity: 0; }
  .mtop.is-open .mtop-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* ---------- 抽屉菜单 ---------- */
  .mtop-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #eef2f6;
    box-shadow: 0 16px 28px rgba(16, 24, 40, .14);
    max-height: calc(100vh - var(--mtop-h) - env(safe-area-inset-top, 0px) - 8px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 max(10px, env(safe-area-inset-bottom, 0px));
    display: none;
  }
  .mtop.is-open .mtop-menu { display: block; }

  .mtop-menu a {
    position: relative;
    display: flex; align-items: center;
    min-height: 47px; padding: 0 var(--page-pad, 20px) 0 calc(var(--page-pad, 20px) + 12px);
    font-size: 15px; color: #1f2733;
    border-bottom: 1px solid #f1f5f9;
  }
  .mtop-menu a > span { flex: 1 1 auto; min-width: 0; }
  .mtop-menu a:last-child { border-bottom: 0; }
  .mtop-menu a:active { background: #f5f7fa; }
  /* 当前页：左侧一条竖线 + 主色字。竖线用绝对定位挂在留白里，
     这样所有行的文字都在同一条左边线上，不会因为多一条竖线而右移。 */
  .mtop-menu a.is-cur { color: #0e7490; font-weight: 700; }
  .mtop-menu a.is-cur::before {
    content: ""; position: absolute; left: var(--page-pad, 20px); top: 50%;
    width: 3px; height: 16px; margin-top: -8px;
    border-radius: 2px; background: #0e7490;
  }

  /* 菜单项右侧小箭头（纯装饰，用边框画，不引图标字体） */
  .mtop-menu a::after {
    content: ""; flex: none; width: 6px; height: 6px; margin-left: 10px;
    border-right: 1.5px solid #c3ccd6; border-bottom: 1.5px solid #c3ccd6;
    transform: rotate(-45deg);
  }

  /* ---------- 遮罩 ---------- */
  .mtop-mask {
    display: block; position: fixed; inset: 0; z-index: 89;
    background: rgba(15, 23, 42, .3);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }
  .mtop.is-open ~ .mtop-mask { opacity: 1; pointer-events: auto; }

  /* ---------- 与站内其它吸顶元素共存 ----------
     条是盖在内容上的，会压住页内 sticky 元素。所以只在条真的显示时（body 带 mtop-on），
     才把页内那些「贴顶」的条推到条下面；条没出现时它们照旧贴顶，不凭空多出一条空缝。

     现在有两处：schools 页的筛选/排序条 .results-head、对比页的当前选择条 .cmp-now。
     🔴 以后哪页再加 position:sticky + top:0 的横条，往这个选择器组里加一条即可，
        别在页面自己的 CSS 里写 top:50px —— 条不出现时就多出一条空缝。 */
  body.mtop-on .results-head,
  body.mtop-on .cmp-now {
    top: calc(var(--mtop-h) + env(safe-area-inset-top, 0px)) !important;
    transition: top .26s cubic-bezier(.32, .72, 0, 1);
  }

  /* ---------- 打开菜单时锁滚动 ---------- */
  body.mtop-lock, html.mtop-lock { overflow: hidden; }
}