/* ==========================================================================
   epjob-chrome.css  ·  页面「外框」行为（6 页共享）
   消息 23 需求（脚本/截图前缀沿用 r22_）：
     1) 顶部红色渐变覆盖层默认关闭（只留灰色底 #F7F7F7）；URL 带 ?color=1 时才开启
     2) 头部导航 + 搜索框区域 滚动时固定在顶部
   --------------------------------------------------------------------------
   ⚠️ 依赖的前提（实测值，改版需重测）：
     #header         高 49px
     .column-search-panel 高 142px  → 合计 191px（6 页一致）
     各页 body 底色 = #F7F7F7
     祖先链无 transform / filter / will-change / contain（fixed 才生效）
     .column-search-panel 每页恰好 1 个；原站 JS 滚动时不会给它加 .fixed 类
   ========================================================================== */

/* ---------- ① 头部导航 + 搜索区 固定 ---------- */
#header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1012 !important;
}
.column-search-panel {
    position: fixed !important;
    top: 49px !important;
    left: 0 !important;
    right: 0 !important;
    /* ⚠️ 必须显式 bottom:auto：若任何规则同时留下 bottom，fixed 元素会被拉伸到
       「top → bottom」的高度（实测会从 142px 变成 1512px） */
    bottom: auto !important;
    z-index: 1011 !important;
}
/* 🔴 固定后搜索面板「必须不透明」，否则页面内容会从固定条下方透出来。
       default 态 = 纯灰底 #f7f7f7（与页面底色一致 → 边界看不见）；
       ?color=1 态 = 在这个灰底上再叠一条渐变（见 ②，切片与原 ::before 对齐）。
   ⚠️ 选择器必须写足「2 元素 + 2 类名 + !important」：
      companylist.html 里有一条前几轮留下的内联样式
        .page-gongsi .column-search-panel{ background-color:transparent !important; }
      （2 类名 + !important，目的是让「当时的常开渐变」贯通）。
      单类名规则会被它静默吃掉 → 面板保持透明 → 滚动时列表从搜索栏下透出。
      对比： (0,2,2) > (0,2,0)。改选择器前先 grep 一遍全部 !important 覆盖。 */
html body .column-search-panel.search-panel-new {
    background-color: #f7f7f7 !important;
}
/* 固定后必须把「占位高度」补回文档流，否则内容会整块上移 191px */
body.home-body-wrapper > #wrap { padding-top: 191px; }   /* index.html */
#epjob-kit-head { padding-top: 191px; }                  /* 其余 5 页 */

/* 滚动后才给搜索区一道淡分隔（未滚动时不留阴影） */
html.epjob-scrolled .column-search-panel {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .07);
}

/* ---------- ② 顶部红色渐变覆盖层：默认关闭 ---------- */
/* ?color=1 → <html class="epjob-color"> 时恢复 */
html:not(.epjob-color) body.home-body-wrapper:before,
html:not(.epjob-color) body.page-gongsi:before,
html:not(.epjob-color) body.company-body-wrapper:before,
html:not(.epjob-color) body.job-body-wrapper:before,
html:not(.epjob-color) #wrap.page-jobs:before,
html:not(.epjob-color) .page-company-position:before {
    content: none !important;
    background: none !important;
}

/* ?color=1 开启渐变时，固定住的搜索区要接上同一条渐变（否则会露出一条灰带）
   background-size 撑到 614px = 原 ::before 的高度，取的就是那条渐变的前 142px；
   灰底由上面那条 !important 规则负责，这里只叠渐变层。 */
html.epjob-color .column-search-panel.search-panel-new {
    background-image: linear-gradient(180deg,
            rgba(214, 21, 24, .1) 0,
            rgba(255, 136, 138, .1) 50%,
            rgba(255, 255, 255, .1) 100%);
    background-size: 100% 614px;
    background-position: 0 0;
    background-repeat: no-repeat;
}