/* ================================================================
   mhpn.cn · 特种作业考证咨询 · 全站基础样式（base.css）
   ----------------------------------------------------------------
   风格定位：画册高级风 · 米白 + 深棕 + 墨黑
   本文件负责：设计令牌 / 重置 / 排版基线 / 右侧垂直固定导航 /
               移动端顶栏与抽屉 / 统一页脚 / 通用组件 / 动画 / 响应式
   页面私有布局一律写入各分类 css（pages-*.css），禁止内联样式。
   ================================================================ */

/* ============ 一、设计令牌（Design Tokens） ============ */
:root{
  /* 色板：米白 / 深棕 / 墨黑 */
  --paper:      #F4EEE2;   /* 米白·主背景 */
  --paper-2:    #ECE2CF;   /* 米白·深一阶（分区底） */
  --paper-3:    #FBF7ED;   /* 米白·浅一阶（浮层） */
  --ink:        #191510;   /* 墨黑·主文字 / 深底 */
  --ink-2:      #2D2720;   /* 墨黑·柔和 */
  --brown:      #4A3726;   /* 深棕·品牌主色 */
  --brown-2:    #6E563B;   /* 中棕 */
  --brown-3:    #9A7B54;   /* 浅棕·点缀 */
  --gold:       #C9A96A;   /* 金棕·点睛（印章/对勾） */
  --line:       #D8CBB2;   /* 分隔线 */
  --line-soft:  #E6DDC9;   /* 分隔线·浅 */
  --danger:     #9C3B2B;   /* 警示（考试延期等） */
  --ok:         #4E6B4A;   /* 通过/核验通过 */

  /* 字体：标题衬线 · 正文无衬线（系统字体，零外部依赖） */
  --font-serif: "Songti SC","Noto Serif SC","STSong","SimSun",serif;
  --font-sans:  "PingFang SC","Microsoft YaHei","Microsoft YaHei UI","Helvetica Neue",Arial,sans-serif;

  /* 尺寸 */
  --nav-w:      92px;              /* 右侧固定导航宽度 */
  --radius:     3px;               /* 画册风·小圆角 */
  --radius-lg:  10px;
  --shadow:     0 14px 34px rgba(25,21,16,.10);
  --shadow-sm:  0 6px 16px rgba(25,21,16,.08);
  --container:  1280px;
  --transition: .32s cubic-bezier(.4,0,.2,1);
}

/* ============ 二、重置与基线 ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.8;
  color:var(--ink);
  background:var(--paper);
  /* 右侧为固定导航让位 */
  padding-right:var(--nav-w);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; border:0; }
a{ color:inherit; text-decoration:none; transition:color var(--transition); }
a:hover{ color:var(--brown-2); }
ul,ol{ list-style:none; }
button{ font:inherit; border:0; background:none; cursor:pointer; color:inherit; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-serif); font-weight:700; line-height:1.35; letter-spacing:.02em; }
em,i{ font-style:normal; }
::selection{ background:var(--brown); color:var(--paper-3); }

/* 无障碍：隐藏但可读 */
.sr-only{
  position:absolute; width:1px; height:1px;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* 页面整体入场 */
.page-wrap{ animation:pageIn .7s ease both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

/* ============ 三、版心与分区 ============ */
.container{ width:min(var(--container), calc(100% - 48px)); margin-inline:auto; }

.section{ position:relative; padding:88px 0; }
.section--tint{ background:var(--paper-2); }
.section--dark{ background:var(--ink); color:var(--paper-3); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--paper-3); }

/* 章节标题（眉题 + 主标题 + 说明） */
.sec-head{ margin-bottom:46px; max-width:760px; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--brown-3); margin-bottom:14px;
}
.sec-head__kicker::before{ content:""; width:26px; height:1px; background:var(--gold); }
.sec-head--center .sec-head__kicker::after{ content:""; width:26px; height:1px; background:var(--gold); }
.sec-head__title{ font-size:clamp(26px,3.4vw,40px); color:var(--ink); }
.section--dark .sec-head__title{ color:var(--paper-3); }
.sec-head__desc{ margin-top:14px; color:var(--ink-2); font-size:15.5px; }
.section--dark .sec-head__desc{ color:rgba(244,238,226,.72); }

/* ============ 四、右侧垂直固定导航 ============ */
.side-nav{
  position:fixed; top:0; right:0; z-index:120;
  width:var(--nav-w); height:100vh;
  display:flex; flex-direction:column; align-items:center;
  background:var(--ink); color:var(--paper-3);
  padding:22px 0 18px;
  box-shadow:-8px 0 30px rgba(25,21,16,.28);
}

/* 品牌 */
.side-nav__brand{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding-bottom:18px; margin-bottom:6px;
  border-bottom:1px solid rgba(244,238,226,.16);
  width:100%;
}
.side-nav__brand img{ width:52px; height:52px; }
.side-nav__brand-name{
  font-family:var(--font-serif); font-size:15px; letter-spacing:.08em; font-weight:700;
  color:var(--paper-3);
}
.side-nav__brand-sub{ font-size:10px; letter-spacing:.24em; color:var(--gold); }

/* 导航项 */
.side-nav__list{ flex:1; width:100%; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:8px 0; }
.side-nav__link{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px; text-align:center;
  color:rgba(244,238,226,.62);
  transition:color var(--transition), background var(--transition);
}
.side-nav__link::before{
  content:""; position:absolute; left:0; top:22%; bottom:22%;
  width:2px; background:var(--gold);
  transform:scaleY(0); transition:transform var(--transition);
}
.side-nav__link:hover{ color:var(--paper-3); background:rgba(244,238,226,.05); }
.side-nav__link:hover::before{ transform:scaleY(1); }
.side-nav__link.active{ color:var(--paper-3); }
.side-nav__link.active::before{ transform:scaleY(1); }
.side-nav__icon{ width:22px; height:22px; }
.side-nav__label{ font-size:11.5px; letter-spacing:.16em; }

/* 导航底部：电话 + 区域 */
.side-nav__aside{ width:100%; text-align:center; padding-top:14px; border-top:1px solid rgba(244,238,226,.16); }
.side-nav__tel{
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  font-family:var(--font-serif); font-size:13.5px; color:var(--gold); letter-spacing:.04em;
}
.side-nav__tel svg{ width:17px; height:17px; }
.side-nav__tel:hover{ color:var(--paper-3); }
.side-nav__area{ margin-top:7px; font-size:10px; letter-spacing:.2em; color:rgba(244,238,226,.4); }

/* ============ 五、移动端顶栏 ============ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:none; align-items:center; justify-content:space-between;
  height:62px; padding:0 18px;
  background:transparent; color:var(--ink);
  transition:background var(--transition), box-shadow var(--transition), color var(--transition);
}
.topbar.scrolled{ background:var(--paper-3); box-shadow:0 4px 18px rgba(25,21,16,.10); color:var(--ink); }
.topbar__brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-serif); font-weight:700; font-size:18px; letter-spacing:.04em; }
.topbar__brand img{ width:34px; height:34px; }

/* 汉堡按钮 */
.topbar__burger{ position:relative; width:42px; height:42px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.topbar__burger span{ display:block; width:22px; height:2px; background:currentColor; transition:transform var(--transition), opacity var(--transition); }
.topbar__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.topbar__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.topbar__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* 移动端抽屉：侧导航变为从右侧滑入 */
@media (max-width:960px){
  body{ padding-right:0; }
  .side-nav{
    width:264px; height:100vh;
    transform:translateX(100%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
  }
  .side-nav.is-open{ transform:translateX(0); }
  .side-nav__list{ justify-content:flex-start; padding-top:10px; overflow-y:auto; }
  .side-nav__link{ flex-direction:row; justify-content:flex-start; gap:14px; padding:13px 26px; }
  .side-nav__link::before{ left:auto; right:0; top:20%; bottom:20%; }
  .side-nav__label{ font-size:14px; letter-spacing:.12em; }
  .topbar{ display:flex; }
  .nav-mask{
    position:fixed; inset:0; z-index:105;
    background:rgba(25,21,16,.42); opacity:0; pointer-events:none;
    transition:opacity var(--transition);
  }
  .nav-mask.show{ opacity:1; pointer-events:auto; }
}

/* ============ 六、统一页脚 ============ */
.site-footer{ background:var(--ink); color:rgba(244,238,226,.66); margin-top:0; }
.footer-top{ padding:64px 0 44px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px;
}
.footer-brand__logo{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.footer-brand__logo img{ width:48px; height:48px; }
.footer-brand__logo b{ font-family:var(--font-serif); font-size:20px; color:var(--paper-3); letter-spacing:.05em; }
.footer-brand__desc{ font-size:14px; line-height:1.9; max-width:300px; }
.footer-title{
  font-size:15px; color:var(--paper-3); letter-spacing:.18em; margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.footer-title::before{ content:""; width:18px; height:1px; background:var(--gold); }
.footer-links li{ margin-bottom:9px; }
.footer-links a{ font-size:14px; color:rgba(244,238,226,.6); }
.footer-links a:hover{ color:var(--gold); padding-left:4px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; margin-bottom:12px; }
.footer-contact svg{ width:16px; height:16px; flex:none; margin-top:5px; color:var(--gold); }
.footer-contact a:hover{ color:var(--gold); }
.footer-icp{ margin-top:18px; font-size:12.5px; color:rgba(244,238,226,.42); }
.footer-icp a{ color:rgba(244,238,226,.5); }
.footer-icp a:hover{ color:var(--gold); }
.footer-bottom{
  border-top:1px solid rgba(244,238,226,.12);
  padding:18px 0; text-align:center;
  font-size:12.5px; color:rgba(244,238,226,.42); letter-spacing:.06em;
}

/* ============ 七、通用组件 ============ */
/* 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 30px; border-radius:var(--radius);
  font-size:15px; letter-spacing:.12em;
  border:1px solid transparent;
  transition:transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
  cursor:pointer; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--brown); color:var(--paper-3); box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--brown-2); color:var(--paper-3); }
.btn--ghost{ border-color:var(--brown); color:var(--brown); background:transparent; }
.btn--ghost:hover{ background:var(--brown); color:var(--paper-3); }
.btn--ink{ background:var(--ink); color:var(--paper-3); }
.btn--ink:hover{ background:#2B241B; color:var(--paper-3); }
.btn--light{ background:var(--paper-3); color:var(--brown); }
.btn--light:hover{ background:var(--paper); }
.btn--sm{ padding:9px 18px; font-size:13px; }
.btn--lg{ padding:16px 40px; font-size:16px; }
.btn .icon{ width:17px; height:17px; }

/* 面包屑 */
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:13px; color:var(--brown-3);
  padding:16px 0 0;
}
.crumb a{ color:var(--brown-3); }
.crumb a:hover{ color:var(--brown); }
.crumb .sep{ color:var(--line); }
.crumb .cur{ color:var(--ink-2); }

/* 标签 */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border:1px solid var(--line);
  border-radius:999px; font-size:12px; letter-spacing:.08em; color:var(--brown-2);
  background:var(--paper-3);
}
.chip--gold{ border-color:var(--gold); color:var(--brown); }
.chip--dark{ background:var(--ink); border-color:var(--ink); color:var(--paper-3); }

/* 基础卡片（页面私有布局在此基础上扩展） */
.card{
  background:var(--paper-3);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }

/* 分隔装饰（画册感） */
.rule{ display:flex; align-items:center; gap:14px; color:var(--brown-3); margin:26px 0; }
.rule::before,.rule::after{ content:""; flex:1; height:1px; background:var(--line); }
.rule .dot{ width:6px; height:6px; background:var(--gold); transform:rotate(45deg); }

/* 数字统计 */
.stat{ text-align:center; }
.stat__num{ font-family:var(--font-serif); font-size:clamp(30px,4vw,46px); font-weight:700; color:var(--brown); }
.stat__num small{ font-size:.55em; margin-left:2px; color:var(--brown-3); }
.stat__label{ margin-top:6px; font-size:13px; letter-spacing:.2em; color:var(--ink-2); }

/* 步骤条 */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px; counter-reset:step; }
.step{ position:relative; padding-top:52px; }
.step::before{
  counter-increment:step; content:"0" counter(step);
  position:absolute; top:0; left:0;
  font-family:var(--font-serif); font-size:34px; font-weight:700; color:var(--gold);
  line-height:1;
}
.step__title{ font-size:17px; color:var(--ink); margin-bottom:8px; }
.step__desc{ font-size:14px; color:var(--ink-2); }

/* 表单 */
.form{ display:grid; gap:18px; }
.form-row{ display:grid; gap:8px; }
.form-row label{ font-size:13px; letter-spacing:.14em; color:var(--brown-2); }
.form-row input,.form-row select,.form-row textarea{
  width:100%; padding:13px 16px;
  background:var(--paper-3); border:1px solid var(--line);
  border-radius:var(--radius); outline:none;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:var(--brown-3); box-shadow:0 0 0 3px rgba(154,123,84,.14);
}
.form-row textarea{ min-height:120px; resize:vertical; }
.form-note{ font-size:12.5px; color:var(--brown-3); }

/* 表格 */
.tbl{ width:100%; border-collapse:collapse; font-size:14.5px; background:var(--paper-3); }
.tbl th,.tbl td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line-soft); }
.tbl th{ font-family:var(--font-serif); font-size:14px; letter-spacing:.1em; color:var(--brown); background:var(--paper-2); }
.tbl tr:hover td{ background:rgba(236,226,207,.5); }

/* 时间轴：每个 .tl-node 自身三列（时间/轴线/内容），避免网格子项被塞进单列 */
.timeline{ display:block; }
.tl-node{ display:grid; grid-template-columns:92px 24px 1fr; gap:0 14px; position:relative; padding-bottom:30px; }
.tl-node__time{ text-align:right; font-family:var(--font-serif); font-size:14px; color:var(--brown-2); padding-top:2px; }
.tl-node__axis{ position:relative; display:flex; justify-content:center; }
.tl-node__axis::before{ content:""; position:absolute; top:8px; bottom:-30px; width:1px; background:var(--line); }
.tl-node:last-child .tl-node__axis::before{ display:none; }
.tl-node__dot{
  width:11px; height:11px; margin-top:7px;
  background:var(--gold); transform:rotate(45deg);
  box-shadow:0 0 0 4px var(--paper);
  z-index:1;
}
.tl-node__body{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:16px 20px; }
.tl-node__body h4{ font-size:16px; margin-bottom:6px; }
.tl-node__body p{ font-size:14px; color:var(--ink-2); }

/* 引用/警示框 */
.notice{ display:flex; gap:14px; padding:18px 20px; border-left:3px solid var(--gold); background:var(--paper-3); border-radius:var(--radius); }
.notice--warn{ border-left-color:var(--danger); }
.notice__icon{ flex:none; width:20px; height:20px; margin-top:3px; color:var(--brown-3); }
.notice--warn .notice__icon{ color:var(--danger); }
.notice p{ font-size:14px; color:var(--ink-2); }

/* ============ 八、动画 ============ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.6,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }
.reveal[data-delay="4"]{ transition-delay:.48s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* 回到顶部 */
.back-top{
  position:fixed; right:calc(var(--nav-w) + 18px); bottom:30px; z-index:90;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper-3); border-radius:50%;
  box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transform:translateY(12px);
  transition:opacity var(--transition), transform var(--transition), background var(--transition);
}
.back-top.show{ opacity:1; pointer-events:auto; transform:none; }
.back-top:hover{ background:var(--brown); }
.back-top svg{ width:18px; height:18px; }

/* Toast 提示 */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:200;
  transform:translate(-50%, 20px);
  background:var(--ink); color:var(--paper-3);
  padding:13px 26px; border-radius:var(--radius);
  font-size:14px; letter-spacing:.06em;
  box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity var(--transition), transform var(--transition);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast::before{ content:""; display:inline-block; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); margin-right:10px; }

/* ============ 九、响应式 ============ */
@media (max-width:1200px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .section{ padding:72px 0; }
}

@media (max-width:960px){
  .back-top{ right:16px; bottom:24px; }
  .container{ width:min(100% - 36px, var(--container)); }
}

@media (max-width:640px){
  body{ font-size:15px; }
  .section{ padding:56px 0; }
  .sec-head{ margin-bottom:32px; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .tl-node{ grid-template-columns:64px 20px 1fr; }
  .btn--lg{ padding:14px 26px; }
}

/* ============ 通用工具类（内联样式清理用） ============ */
.u-underline{ text-decoration:underline; }
.u-deco-none{ text-decoration:none; }
.u-dim3{ color:rgba(244,238,226,.3); }
.u-brown{ color:var(--brown); }
.u-note{ margin-top:26px; font-size:13px; color:var(--brown-3); }
.u-mt14{ margin-top:14px; }
.u-py56{ padding:56px 0; }
.u-pt0{ padding-top:0; }
.u-mt18{ margin-top:18px; }
.u-mt20{ margin-top:20px; }
.u-mt24{ margin-top:24px; }
.u-mt36{ margin-top:36px; }
.u-mb20{ margin-bottom:20px; }
.u-mb40{ margin-bottom:40px; }
.u-dim{ color:rgba(244,238,226,.78); }
.u-gold{ color:var(--gold); }
.u-sm5{ font-size:.5em; }
.u-fs16{ font-size:16px; }
.u-danger{ color:var(--danger); font-weight:700; }
.u-h3b{ font-size:19px; margin-bottom:14px; }
.u-gridlist{ display:grid; gap:10px; font-size:14.5px; color:var(--ink-2); }