/* ============================================================
   豫北八大员报考服务平台 · rytg.cn
   全站共享样式基座 base.css
   风格：护腰靠垫风 —— 浅灰 + 奶白 + 浅绿，柔和、温润、专业
   说明：本文件只承载全站统一资产（导航/页脚/按钮/表单/动效/排版），
        每个页面的差异化布局放在对应页面专属 css 中。
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  --c-bg:      #EEF1EB;   /* 页面浅灰 */
  --c-cream:   #FAF7F0;   /* 奶白 */
  --c-paper:   #FFFFFF;   /* 纯白卡片 */
  --c-line:    #E2E7DF;   /* 分隔线 */
  --c-green:   #7EA17E;   /* 主浅绿 */
  --c-green-mid:#5E8A61;  /* 中绿 */
  --c-green-deep:#3E6845; /* 深绿 */
  --c-green-pale:#E7EFE4; /* 浅绿底 */
  --c-ink:     #2E342E;   /* 标题深色 */
  --c-body:    #4C554C;   /* 正文 */
  --c-mute:    #8A938A;   /* 弱化文字 */
  --r-card:    20px;      /* 卡片圆角 */
  --r-pill:    999px;
  --shadow-soft: 0 12px 32px rgba(62,104,69,.09);
  --shadow-float: 0 22px 48px rgba(62,104,69,.14);
  --font: "Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans SC",Arial,sans-serif;
  --header-h: 76px;
}

/* ---------- 基础重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  color:var(--c-body);
  background:var(--c-bg);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
  animation:pageIn .45s ease;
}
@keyframes pageIn{ from{ opacity:0 } to{ opacity:1 } }
img{ max-width:100%; display:block; }
a{ color:var(--c-green-deep); text-decoration:none; transition:color .3s ease; }
a:hover{ color:var(--c-green-mid); }
ul,ol{ list-style:none; }
h1,h2,h3,h4,h5{ color:var(--c-ink); font-weight:700; line-height:1.35; }
h1{ font-size:clamp(26px,4vw,42px); }
h2{ font-size:clamp(22px,3vw,34px); }
h3{ font-size:clamp(18px,2.2vw,24px); }
h4{ font-size:18px; }
p{ margin-bottom:1em; }
strong{ color:var(--c-ink); }
small{ font-size:.85em; }
:focus-visible{ outline:3px solid var(--c-green); outline-offset:2px; border-radius:6px; }

/* ---------- 通用容器 ---------- */
.container{ width:min(1200px,92%); margin-inline:auto; }
.container-wide{ width:min(1400px,94%); margin-inline:auto; }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.9em 1.9em; border-radius:var(--r-pill);
  font-size:15px; font-weight:600; letter-spacing:.03em;
  cursor:pointer; border:2px solid transparent;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
  line-height:1.2;
}
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }
.btn-green{ background:var(--c-green-deep); color:#fff; box-shadow:0 10px 24px rgba(62,104,69,.28); }
.btn-green:hover{ background:#33573C; color:#fff; box-shadow:0 14px 30px rgba(62,104,69,.36); }
.btn-ghost{ background:transparent; color:var(--c-green-deep); border-color:var(--c-green); }
.btn-ghost:hover{ background:var(--c-green-pale); color:var(--c-green-deep); }
.btn-cream{ background:var(--c-cream); color:var(--c-green-deep); box-shadow:var(--shadow-soft); }
.btn-cream:hover{ background:#F3EDE0; color:var(--c-green-deep); }
.btn-white{ background:#fff; color:var(--c-green-deep); box-shadow:var(--shadow-soft); }
.btn-white:hover{ background:var(--c-green-pale); color:var(--c-green-deep); }
.btn-arrow::after{ content:"→"; font-weight:400; transition:transform .3s ease; }
.btn-arrow:hover::after{ transform:translateX(4px); }
.btn-sm{ padding:.6em 1.2em; font-size:13.5px; }

/* ---------- 顶部导航 ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--header-h);
  background:rgba(250,247,240,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(226,231,223,.7);
  transition:background .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{ background:#F6F4EC; box-shadow:0 8px 30px rgba(46,52,46,.10); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:100%; position:relative; }

.brand{ display:inline-flex; align-items:center; gap:.7em; }
.brand-logo{ width:44px; height:44px; border-radius:14px; object-fit:cover; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text em{ font-style:normal; font-weight:800; font-size:19px; color:var(--c-green-deep); letter-spacing:.06em; }
.brand-text small{ font-size:11.5px; color:var(--c-mute); letter-spacing:.14em; }

.site-nav{ display:flex; align-items:center; gap:10px; }
.nav-list{ display:flex; align-items:center; gap:2px; }
.nav-link{
  display:block; padding:.55em .9em; border-radius:var(--r-pill);
  font-size:15px; font-weight:500; color:var(--c-ink);
  position:relative;
}
.nav-link:hover{ color:var(--c-green-deep); background:var(--c-green-pale); }
.nav-cta{
  margin-left:8px; padding:.6em 1.4em; border-radius:var(--r-pill);
  background:var(--c-green-deep); color:#fff; font-weight:600; font-size:14.5px;
  box-shadow:0 8px 20px rgba(62,104,69,.26);
  transition:transform .3s ease, background .3s ease;
}
.nav-cta:hover{ background:#33573C; color:#fff; transform:translateY(-2px); }

/* 下拉子菜单 */
.has-sub{ position:relative; }
.submenu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,8px);
  min-width:210px; padding:10px;
  background:var(--c-paper); border:1px solid var(--c-line); border-radius:16px;
  box-shadow:var(--shadow-float);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
  z-index:110;
}
.submenu a{ display:block; padding:.55em .9em; border-radius:10px; color:var(--c-body); font-size:14px; }
.submenu a:hover{ background:var(--c-green-pale); color:var(--c-green-deep); }
.submenu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; width:330px; }
.has-sub:hover .submenu,
.has-sub:focus-within .submenu{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }

/* 汉堡按钮 */
.nav-toggle{ display:none; width:44px; height:44px; border:0; background:var(--c-green-pale); border-radius:12px; cursor:pointer; position:relative; }
.nav-toggle span{ position:absolute; left:11px; right:11px; height:2.4px; border-radius:3px; background:var(--c-green-deep); transition:transform .3s ease, top .3s ease, opacity .3s ease; }
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:28px; }
.nav-toggle.open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* ---------- 页脚 ---------- */
.site-footer{ background:#EDF0EA; border-top:1px solid var(--c-line); margin-top:0; }
.footer-main{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px;
  padding:60px 0 44px;
}
.footer-brand{ display:inline-flex; align-items:center; gap:.7em; margin-bottom:14px; }
.footer-brand img{ width:42px; height:42px; border-radius:13px; object-fit:cover; }
.footer-brand em{ font-style:normal; font-weight:800; font-size:17px; color:var(--c-green-deep); display:block; }
.footer-brand small{ font-size:11px; color:var(--c-mute); letter-spacing:.14em; }
.footer-col p{ font-size:14px; color:var(--c-body); max-width:34ch; }
.footer-col h4{ font-size:15px; margin-bottom:16px; color:var(--c-ink); position:relative; padding-bottom:10px; }
.footer-col h4::after{ content:""; position:absolute; left:0; bottom:0; width:28px; height:3px; border-radius:3px; background:var(--c-green); }
.footer-col ul li{ margin-bottom:9px; }
.footer-col ul a{ font-size:14px; color:var(--c-body); }
.footer-col ul a:hover{ color:var(--c-green-deep); }
.footer-contact li{ font-size:14px; color:var(--c-body); }
.footer-contact a{ color:var(--c-green-deep); font-weight:600; }
.footer-bar{ border-top:1px solid var(--c-line); padding:18px 0; background:#E8ECE5; }
.footer-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer-bar p{ margin:0; font-size:13px; color:var(--c-mute); }
.footer-bar .footer-icp{ font-size:13px; color:var(--c-green-mid); }

/* ---------- 面包屑 ---------- */
.crumbs{ padding:14px 0; font-size:13px; color:var(--c-mute); }
.crumbs a{ color:var(--c-mute); }
.crumbs a:hover{ color:var(--c-green-deep); }
.crumbs span{ color:var(--c-green-deep); }

/* ---------- 区块标题 ---------- */
.sec-head{ margin-bottom:38px; }
.sec-kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:13.5px; font-weight:600; letter-spacing:.18em; color:var(--c-green-mid);
  margin-bottom:12px;
}
.sec-kicker::before{ content:""; width:26px; height:3px; border-radius:3px; background:var(--c-green); }
.sec-head h2{ margin-bottom:10px; }
.sec-head p{ color:var(--c-mute); max-width:62ch; }
.sec-head.center{ text-align:center; }
.sec-head.center .sec-kicker::after{ content:""; width:26px; height:3px; border-radius:3px; background:var(--c-green); }
.sec-head.center p{ margin-inline:auto; }

/* ---------- 滚动渐入动画 ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s cubic-bezier(.2,.6,.2,1), transform .75s cubic-bezier(.2,.6,.2,1); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal-left{ opacity:0; transform:translateX(-34px); transition:opacity .75s ease, transform .75s ease; }
.reveal-left.in{ opacity:1; transform:none; }
.reveal-right{ opacity:0; transform:translateX(34px); transition:opacity .75s ease, transform .75s ease; }
.reveal-right.in{ opacity:1; transform:none; }
.reveal-zoom{ opacity:0; transform:scale(.94); transition:opacity .7s ease, transform .7s ease; }
.reveal-zoom.in{ opacity:1; transform:none; }

/* ---------- 标签徽章 ---------- */
.tag{
  display:inline-block; padding:.28em .85em; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600; letter-spacing:.05em;
  background:var(--c-green-pale); color:var(--c-green-deep);
}
.tag-cream{ background:var(--c-cream); color:var(--c-green-deep); border:1px solid var(--c-line); }
.tag-line{ background:transparent; color:var(--c-green-mid); border:1.5px solid var(--c-green); }

/* ---------- 表单 ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:14px; font-weight:600; color:var(--c-ink); margin-bottom:7px; }
.field input,
.field select,
.field textarea{
  width:100%; padding:.8em 1em; border:1.6px solid var(--c-line); border-radius:12px;
  background:#fff; font-family:inherit; font-size:14.5px; color:var(--c-ink);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--c-green); box-shadow:0 0 0 4px rgba(126,161,126,.18);
}
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-note{ font-size:12.5px; color:var(--c-mute); margin-top:6px; }
.form-note a{ color:var(--c-green-mid); }

/* ---------- 表格 ---------- */
.tbl{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-soft); }
.tbl th{ background:var(--c-green-pale); color:var(--c-green-deep); font-size:14.5px; padding:.95em 1em; text-align:left; font-weight:700; }
.tbl td{ padding:.9em 1em; font-size:14px; border-top:1px solid var(--c-line); color:var(--c-body); }
.tbl tr:nth-child(even) td{ background:#FAFBF7; }

/* ---------- Toast 提示 ---------- */
.toast{
  position:fixed; left:50%; bottom:46px; transform:translate(-50%,20px);
  background:var(--c-green-deep); color:#fff; padding:.9em 1.6em; border-radius:14px;
  font-size:14.5px; box-shadow:var(--shadow-float); z-index:3000;
  opacity:0; transition:opacity .35s ease, transform .35s ease; pointer-events:none;
  max-width:88%; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- 返回顶部 ---------- */
#backTop{
  position:fixed; right:26px; bottom:30px; z-index:900;
  width:48px; height:48px; border-radius:50%;
  background:var(--c-green-deep); color:#fff; border:0; cursor:pointer;
  font-size:20px; box-shadow:var(--shadow-float);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
#backTop.show{ opacity:1; visibility:visible; transform:none; }
#backTop:hover{ background:#33573C; }

/* ---------- 工具类 ---------- */
.muted{ color:var(--c-mute); }
.ta-c{ text-align:center; }
.mt-1{margin-top:12px}.mt-2{margin-top:24px}.mt-3{margin-top:40px}.mt-4{margin-top:60px}
.pill{ border-radius:var(--r-pill); }
.ratio-169{ aspect-ratio:16/9; object-fit:cover; }
.ratio-32{ aspect-ratio:3/2; object-fit:cover; }
.no-wrap{ white-space:nowrap; }

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .footer-main{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:980px){
  :root{ --header-h:64px; }
  .nav-toggle{ display:block; }
  .site-nav{
    position:fixed; top:var(--header-h); right:0; bottom:0;
    width:min(340px,86vw); background:var(--c-cream);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:22px 18px 30px; gap:0; overflow-y:auto;
    box-shadow:-12px 0 40px rgba(46,52,46,.14);
    transform:translateX(102%); transition:transform .4s cubic-bezier(.2,.6,.2,1);
    border-left:1px solid var(--c-line);
  }
  .site-nav.open{ transform:none; }
  .nav-list{ flex-direction:column; align-items:stretch; gap:2px; width:100%; }
  .nav-link{ padding:.8em 1em; }
  .nav-cta{ margin:16px 0 0; text-align:center; }
  .submenu, .submenu-grid{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    min-width:0; width:100%; box-shadow:none; border:0; background:transparent;
    max-height:0; overflow:hidden; padding:0 10px;
    transition:max-height .4s ease, padding .3s ease;
  }
  .has-sub.open > .submenu{ max-height:520px; padding:8px 10px; }
  .submenu-grid{ display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  body{ font-size:15px; }
  .footer-main{ grid-template-columns:1fr; gap:26px; padding:44px 0 30px; }
  .footer-bar .container{ justify-content:center; text-align:center; }
  .field-row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal,.reveal-left,.reveal-right,.reveal-zoom{ opacity:1; transform:none; }
}