@charset "utf-8";
/* ==========================================================================
   冲击波英语 / 杨斯毅教育研究院 —— 顶栏「品牌报头」  v2   2026-09-23
   --------------------------------------------------------------------------
   把母版默认可有可无的 60px 通用导航，升级为有「学术机构报头」气质的页头。

   三层手段
     ① 尺度：页头加高（60 → 88 / 100），Logo 图形放大约 90% ~ 115%
        ★ 关键发现：logo 图片本身自带巨大留白 —— 电脑版 2172×724 的画布里，
          上方空了 28.0%、下方空了 22.7%（合计 51% 的高度是白边），
          图形只占 1870×358。所以无论 max-height 设多大，
          看上去都只有设定值的一半高 —— 这才是「logo 显小」的真凶。
          解法：object-fit:cover 裁掉白边，再用负 margin 把图形左缘拉回
          与栏目内容左缘对齐。
     ② 秩序：顶部 3px 品牌渐变饰条 + 底部 1px 发丝线 + 极淡浮起投影
             + 菜单右侧独立「登录 / 注册」胶囊按钮组
     ③ 交互：悬停 = 淡色晕染（轻微放气淡入）＋ 渐变文字 ＋
             由中心向两侧展开的渐变指示条（带同色辉光）
             彻底替换母版那条 #298dff 纯蓝实心下划线。

   布局：≥1200px 时把 .row 改成 flex（nowrap），彻底杜绝「菜单被挤到第二行」，
        并把 Logo / 菜单 / 登录三块的左右关系固定下来。
        折叠箭头用绝对定位放进菜单项自己的右内边距里 —— 占位宽度为 0，
        不跟 Logo 抢那几十像素。

   依赖：必须在 metv75.css 之后加载；选择器一律写到 (0,4,0) 以上，
        用来压过母版里带 !important 的规则。
   ========================================================================== */

/* ==========================================================================
   0. 尺度变量
   —— 图形几何全部由 --sy-logo-w 一个量推导，避免手改散落常数。
      电脑版 logo 图片（2172×724）：图形 x 183~2052、y 203~560
        图形宽 = 0.8609 × 盒宽      图形高 = 0.1648 × 盒宽
        左侧白边 = 0.0843 × 盒宽
        cover 要完整露出图形需 盒高 ≥ 0.1824 × 盒宽
      手机版 logo 图片（2103×748）：图形 x 425~1689、y 253~483
        图形宽 = 0.6015 × 盒宽      图形高 = 0.1098 × 盒宽
        左侧白边 = 0.2021 × 盒宽
        盒高需落在 0.1151 ~ 0.3556 × 盒宽 之间
   ========================================================================== */
:root{
  /* —— 手机 / 平板（≤1199px）—— */
  --sy-head-h:68px;
  --sy-logo-w:264px;                                   /* mb logo 盒宽 */
  --sy-logo-h:calc(var(--sy-logo-w) * .235);           /* = 62px */
  --sy-logo-dx:calc(var(--sy-logo-w) * -.2021);
  --sy-logo-occ:calc(var(--sy-logo-w) * .7979);

  --sy-nav-fs:15px;
  --sy-nav-pad:9px;
  --sy-gap-ln:20px;
  --sy-gap-nu:12px;

  --sy-grad-brand:linear-gradient(90deg,#1BAADB 0%,#12A8A0 45%,#0E9F7E 72%,#C8862B 100%);
  --sy-grad-ink:linear-gradient(96deg,#0A4A70 0%,#0E7FB8 38%,#13A0B8 66%,#0E9F7E 100%);
  --sy-grad-btn:linear-gradient(135deg,#0E7FB8 0%,#12A0C0 45%,#0E9F7E 100%);
}

/* ==========================================================================
   1. 报头外壳：顶部饰条 / 白底 / 发丝线 / 浮起投影
   ========================================================================== */
.met-head .met-nav{
  position:relative;
  min-height:var(--sy-head-h);
  background:#FFFFFF;
  border-bottom:1px solid #E7EEF4;
  box-shadow:0 12px 34px -22px rgba(11,36,56,.30);
  z-index:20;
}
/* 顶部 3px 品牌渐变饰条 —— 与栏目横幅底边同一条渐变，形成全站视觉锚点 */
.met-head .met-nav::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--sy-grad-brand);
  z-index:6;
  pointer-events:none;
}
.met-head .met-nav > .container{ height:var(--sy-head-h); }
/* 吸顶时 body 的补偿内距必须跟着新高度走，否则正文被盖住 */
body.met-navfixed{ padding-top:var(--sy-head-h) !important; }

/* ==========================================================================
   2. 通用菜单项外观（折叠菜单里也复用）
   ========================================================================== */
.met-head .met-nav .navlist > .nav-item > .nav-link{
  position:relative;
  z-index:2;
  font-weight:500;
  letter-spacing:.012em;
  white-space:nowrap;
  background-color:transparent;
  transition:color .26s cubic-bezier(.22,.61,.36,1);
}
.met-head .met-nav .navlist > .nav-item > .nav-link::before,
.met-head .met-nav .navlist > .nav-item > .nav-link::after{ pointer-events:none; }

/* ==========================================================================
   3. 电脑版（≥1200px）—— 主体
   ========================================================================== */
@media (min-width:1200px){
  :root{
    --sy-head-h:88px;
    --sy-logo-w:270px;                                /* 图形约 232×44，旧的约 129×25 */
    --sy-logo-h:calc(var(--sy-logo-w) * .196);        /* = 52.9px ≥ 0.1824 倍盒宽 */
    --sy-logo-dx:calc(var(--sy-logo-w) * -.0843);
    --sy-logo-occ:calc(var(--sy-logo-w) * .9157);
    --sy-nav-fs:14.5px;
    --sy-nav-pad:7px;
    --sy-gap-ln:16px;
    --sy-gap-nu:8px;
  }

  /* ---------- 3.1 三块横向布局：flex 化，杜绝换行 ---------- */
  .met-head .met-nav > .container > .row{
    display:flex !important;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-end;
    height:var(--sy-head-h);
  }
  .met-head .met-nav .met-nav-btn{
    order:1;
    flex:0 0 auto;
    margin-right:auto;              /* 弹性留白全部落在 Logo 与菜单之间 */
    width:auto;
    height:var(--sy-head-h);
  }
  .met-head .met-nav #met-nav-collapse{ order:2; flex:0 0 auto; float:none !important; display:block !important; }
  .met-head .met-nav #met-head-user-collapse{ order:3; flex:0 0 auto; float:none !important; display:block !important; }

  /* ---------- 3.2 Logo ---------- */
  .met-head .met-nav .navbar-header{
    float:none !important;
    width:var(--sy-logo-occ);
    height:var(--sy-head-h);
  }
  .met-head .met-nav .met-logo{
    display:flex !important;                            /* 压过 .block 的 !important */
    align-items:center;
    float:left;
    width:var(--sy-logo-w);
    height:var(--sy-head-h);
    margin-left:var(--sy-logo-dx);
    overflow:visible;
  }
  .met-head .met-nav .met-logo .vertical-align-middle{
    display:block; width:100%; line-height:0;
  }
  .met-head .met-nav .met-logo img.pclogo{
    display:block !important;
    width:var(--sy-logo-w) !important;
    height:var(--sy-logo-h) !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover;                                   /* ★ 裁掉图片自带的 51% 上下白边 */
    object-position:center center;
    margin:0 !important;
    transition:filter .4s ease;
  }
  .met-head .met-nav .met-logo:hover img.pclogo{ filter:saturate(1.06) brightness(1.02); }

  /* ---------- 3.3 菜单 ---------- */
  .met-head .met-nav .navlist{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    margin:0 0 0 var(--sy-gap-ln);
    padding:0;
    list-style:none;
  }
  .met-head .met-nav .navlist > .nav-item{
    float:none !important;
    margin-left:0 !important;
    position:relative;
  }
  .met-head .met-nav .navlist > .nav-item > .nav-link{
    display:block;
    height:var(--sy-head-h);
    line-height:var(--sy-head-h) !important;
    padding:0 var(--sy-nav-pad);
    font-size:var(--sy-nav-fs);
    color:#3E4C57 !important;
    background-color:transparent !important;
  }

  /* 悬停晕染层：由中心轻微放大淡入，像被「点亮」而不是被涂满 */
  .met-head .met-nav .navlist > .nav-item > .nav-link::before{
    content:"";
    position:absolute; z-index:-1;
    left:calc(var(--sy-nav-pad) - 7px);
    right:calc(var(--sy-nav-pad) - 7px);
    top:50%; height:40px; margin-top:-20px;
    border-radius:12px;
    background:radial-gradient(128% 150% at 50% 118%,
                rgba(27,170,219,.17) 0%,
                rgba(14,159,126,.08) 46%,
                rgba(200,134,43,.05) 74%,
                rgba(255,255,255,0) 100%);
    opacity:0;
    transform:scale(.78);
    transition:opacity .28s ease, transform .36s cubic-bezier(.22,.61,.36,1);
  }
  .met-head .met-nav .navlist > .nav-item:hover > .nav-link::before,
  .met-head .met-nav .navlist > .nav-item.open > .nav-link::before,
  .met-head .met-nav .navlist > .nav-item > .nav-link.active::before{
    opacity:1; transform:scale(1);
  }

  /* 指示条：3px 圆头渐变条，由中心向两侧展开 + 同色辉光 */
  .met-head .met-nav .navlist > .nav-item > .nav-link::after{
    content:"";
    position:absolute; z-index:3;
    left:calc(var(--sy-nav-pad) - 1px);
    right:calc(var(--sy-nav-pad) - 1px);
    top:auto; bottom:calc(50% - 17px);
    height:3px;
    margin:0;
    border-radius:3px;
    background:var(--sy-grad-brand);
    box-shadow:0 2px 11px rgba(14,159,126,.48);
    transform:scaleX(0);
    transform-origin:50% 50%;
    opacity:0;
    transition:transform .40s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
  }
  .met-head .met-nav .navlist > .nav-item:hover > .nav-link::after,
  .met-head .met-nav .navlist > .nav-item.open > .nav-link::after,
  .met-head .met-nav .navlist > .nav-item > .nav-link.active::after{
    transform:scaleX(1); opacity:1;
  }

  /* 文字由实心色变成品牌渐变（明亮、新鲜，不是母版那种发闷的纯蓝） */
  .met-head .met-nav .navlist > .nav-item:hover > .nav-link,
  .met-head .met-nav .navlist > .nav-item.open > .nav-link,
  .met-head .met-nav .navlist > .nav-item > .nav-link.active{
    background-image:var(--sy-grad-ink);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:#0A4A70 !important;
    font-weight:600;
    background-color:transparent !important;
  }

  /* ---------- 3.4 折叠箭头：绝对定位塞进右侧内边距，占位宽度 = 0 ---------- */
  .met-head .met-nav .navlist > .nav-item.dropdown > .nav-link > span{
    position:relative;
  }
  .met-head .met-nav .navlist > .nav-item.dropdown > .nav-link > span::after{
    content:"";
    position:absolute;
    left:100%; margin-left:3px;
    top:50%;
    width:4px; height:4px;
    border-right:1.7px solid #A3B6C3;
    border-bottom:1.7px solid #A3B6C3;
    transform:translateY(-50%) rotate(45deg);
    transition:border-color .26s ease, transform .32s cubic-bezier(.22,.61,.36,1);
  }
  .met-head .met-nav .navlist > .nav-item.dropdown:hover > .nav-link > span::after,
  .met-head .met-nav .navlist > .nav-item.dropdown.open > .nav-link > span::after{
    border-color:#0E9F7E;
    transform:translateY(-50%) rotate(45deg) scale(1.16);
  }

  /* ---------- 3.5 下拉面板 ---------- */
  .met-head .met-nav .dropdown-menu{
    top:calc(100% - 12px);
    left:auto; right:0;
    min-width:198px;
    margin:0;
    padding:9px 8px;
    border:1px solid #E4EBF1;
    border-radius:14px;
    background:#fff;
    box-shadow:0 24px 48px -24px rgba(11,36,56,.36),
               0 5px 16px -7px rgba(11,36,56,.10);
    overflow:hidden;
    animation:syDropIn .26s cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes syDropIn{
    from{ opacity:0; transform:translateY(-7px); }
    to  { opacity:1; transform:translateY(0); }
  }
  .met-head .met-nav .dropdown-menu::before{
    content:"";
    position:absolute; left:0; right:0; top:0; height:2px;
    background:var(--sy-grad-brand);
    opacity:.92;
  }
  .met-head .met-nav .dropdown-menu .dropdown-item{
    position:relative;
    display:block;
    padding:9px 14px 9px 17px;
    border-radius:9px;
    font-size:13.5px;
    line-height:1.55;
    color:#4A5A67 !important;
    text-indent:0 !important;
    background:transparent;
    transition:background .22s ease, color .22s ease,
               padding-left .28s cubic-bezier(.22,.61,.36,1);
  }
  .met-head .met-nav .dropdown-menu .dropdown-item::before{
    content:"";
    position:absolute; left:6px; top:50%; margin-top:-7px;
    width:3px; height:14px; border-radius:2px;
    background:linear-gradient(180deg,#1BAADB,#0E9F7E);
    transform:scaleY(0);
    transition:transform .28s cubic-bezier(.22,.61,.36,1);
  }
  .met-head .met-nav .dropdown-menu .dropdown-item:hover,
  .met-head .met-nav .dropdown-menu .dropdown-item:focus{
    background:linear-gradient(90deg,#F1F9FE 0%,#F3FBF8 100%) !important;
    color:#0A4A70 !important;
    padding-left:23px;
    text-indent:0 !important;
  }
  .met-head .met-nav .dropdown-menu .dropdown-item:hover::before,
  .met-head .met-nav .dropdown-menu .dropdown-item:focus::before{ transform:scaleY(1); }
  /* 三级菜单：贴父级右侧，别被 top:calc(100% - 12px) 带到下方 */
  .met-head .met-nav .dropdown-menu .dropdown-submenu{ position:relative; }
  .met-head .met-nav .dropdown-menu .dropdown-submenu > .dropdown-menu{
    top:-9px; left:100%; right:auto; margin-left:5px;
  }

  /* ---------- 3.6 右侧「登录 / 注册」胶囊组 ---------- */
  /* 语言切换块（当前只有中文 → 容器是空的）会白占 15px margin，把它收掉，
     这 15px 直接让给 Logo */
  .met-head .met-nav #met-nav-collapse > .metlang{ margin-left:0; }
  .met-head .met-nav #met-head-user-collapse{
    height:var(--sy-head-h);
    margin-left:var(--sy-gap-nu);
  }
  .met-head .met-nav .met-head-user.no-login{
    height:var(--sy-head-h) !important;
    display:flex; align-items:center;
    margin-left:0;
  }
  .met-head .met-nav .met-head-user.no-login > li{
    display:flex; align-items:center; gap:8px;
    line-height:1;
  }
  .met-head .met-nav .met-head-user.no-login a.met_navbtn{
    display:inline-flex; align-items:center; justify-content:center;
    height:38px;
    padding:0 11px !important;
    border-radius:999px;
    font-size:13px !important;
    font-weight:600;
    letter-spacing:.02em;
    line-height:1;
    text-decoration:none;
    border:1px solid transparent;
    border-left:1px solid transparent !important;
    transition:color .26s ease, background .3s ease, border-color .26s ease,
               transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
  }
  .met-head .met-nav .met-head-user.no-login a.met_navbtn:first-of-type{
    color:#2E4756 !important;
    background:#FFFFFF;
    border-color:#DBE6EE !important;
  }
  .met-head .met-nav .met-head-user.no-login a.met_navbtn:first-of-type:hover{
    color:#FFFFFF !important;
    background:linear-gradient(135deg,#123A56 0%,#0A2438 100%);
    border-color:#0A2438 !important;
    transform:translateY(-1px);
    box-shadow:0 9px 22px -8px rgba(11,36,56,.55);
  }
  .met-head .met-nav .met-head-user.no-login a.met_navbtn:last-of-type{
    color:#FFFFFF !important;
    background-image:var(--sy-grad-btn);
    border-color:transparent !important;
    box-shadow:0 7px 18px -8px rgba(14,127,184,.65);
  }
  .met-head .met-nav .met-head-user.no-login a.met_navbtn:last-of-type:hover{
    transform:translateY(-1px);
    box-shadow:0 13px 28px -9px rgba(14,159,126,.72);
    filter:brightness(1.06) saturate(1.06);
  }
  /* 已登录时的头像条也顺手对齐高度 */
  .met-head .met-nav .met-head-user:not(.no-login){
    height:var(--sy-head-h) !important;
    display:flex; align-items:center;
  }
}

/* ==========================================================================
   4. 大屏（≥1600px，容器放宽到 1310）—— 再放一档尺度
   ========================================================================== */
@media (min-width:1600px){
  :root{
    --sy-head-h:100px;
    --sy-logo-w:326px;                                 /* 图形约 281×54 */
    --sy-logo-h:calc(var(--sy-logo-w) * .196);
    --sy-logo-dx:calc(var(--sy-logo-w) * -.0843);
    --sy-logo-occ:calc(var(--sy-logo-w) * .9157);
    --sy-nav-fs:15.5px;
    --sy-nav-pad:9px;
    --sy-gap-ln:18px;
    --sy-gap-nu:10px;
  }
  .met-head .met-nav .met-head-user.no-login a.met_navbtn{ height:40px; padding:0 13px !important; }
}

/* ==========================================================================
   5. 手机 / 平板（≤1199px）—— 折叠菜单版
   ========================================================================== */
@media (max-width:1199px){
  .met-head .met-nav .navbar-header{
    height:var(--sy-head-h);
    position:relative;
  }
  .met-head .met-nav .met-logo{
    display:flex !important;
    align-items:center;
    float:left;
    width:var(--sy-logo-w);
    height:var(--sy-head-h);
    margin-left:var(--sy-logo-dx);
    overflow:visible;
  }
  .met-head .met-nav .met-logo .vertical-align-middle{ display:block; width:100%; line-height:0; }
  .met-head .met-nav .met-logo img.mblogo{
    display:block !important;
    width:var(--sy-logo-w) !important;
    height:var(--sy-logo-h) !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover;
    object-position:center center;
    margin:0 !important;
  }
  .met-head .met-nav .navbar-toggler{
    height:var(--sy-head-h);
    line-height:var(--sy-head-h);
    color:#2E4756;
  }
  .met-head .met-nav .navbar-toggler .icon{ font-size:20px; }
  /* 展开后的折叠面板：一级项做品牌化处理，别再是默认灰字 */
  .met-head .met-nav .navbar-collapse-toolbar.in,
  .met-head .met-nav .navbar-collapse-toolbar.collapsing{
    background:#FFFFFF;
    border-top:1px solid #EDF2F6;
    box-shadow:0 20px 40px -18px rgba(11,36,56,.28);
  }
  .met-head .met-nav .navlist > .nav-item > .nav-link{
    padding:13px 15px;
    font-size:15.5px;
    color:#3E4C57 !important;
    height:auto;
    line-height:1.5 !important;
    border-radius:10px;
  }
  .met-head .met-nav .navlist > .nav-item > .nav-link.active,
  .met-head .met-nav .navlist > .nav-item.open > .nav-link{
    color:#0A5A85 !important;
    font-weight:600;
    background:linear-gradient(90deg,#F1F9FE,#F3FBF8) !important;
  }
  .met-head .met-nav .navlist > .nav-item > .nav-link:active{
    background:#EEF7FC !important;
  }
}

/* ==========================================================================
   6. 可访问性 / 动效偏好
   ========================================================================== */
.met-head .met-nav .navlist > .nav-item > .nav-link:focus-visible,
.met-head .met-nav .met-head-user.no-login a.met_navbtn:focus-visible{
  outline:2px solid #1BAADB;
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .met-head .met-nav *,
  .met-head .met-nav *::before,
  .met-head .met-nav *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}