/* ============================================================
   觅壹学习社区 · 全站共用顶栏与页脚
   ------------------------------------------------------------
   一处定义，各页引用三行：
     <link rel="stylesheet" href="…/shared/site.css">          放在页面 <style> 之前
     <script src="…/shared/site.js"></script>                  body 最前
     <script src="…/shared/site.js" data-part="foot"></script> body 最后

   变量沿用各页 :root 里已有的 --ink / --ink-2 / --line /
   --muted / --brand，取不到时回落到这里的默认值，所以页面
   自己的配色不用跟着改。
   ============================================================ */

/* ---------------- 跳转主内容（键盘可达） ---------------- */
.skip{
  position:fixed; left:16px; top:-60px; z-index:99;
  background:var(--ink,#16323A); color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:10px; font-size:13px; font-weight:700;
  transition:top .15s;
}
.skip:focus{top:12px}

/* ---------------- 顶栏 ---------------- */
/* 跳转主内容时给吸顶栏留出高度 */
#main{scroll-margin-top:80px}
@media (max-width:980px){ #main{scroll-margin-top:112px} }

.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(255,253,249,.94);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line,#EDE5D8);
}
.site-head .wrap,
.site-foot .wrap{width:min(1160px, calc(100% - 56px)); margin-inline:auto}

.head-in{display:flex; align-items:center; gap:20px; min-height:70px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand svg{width:34px; height:34px}
.brand-txt b{
  display:block; font-size:16px; font-weight:900;
  letter-spacing:1.4px; line-height:1.25; color:var(--ink,#16323A);
}
.brand-txt i{
  display:block; font-style:normal; font-size:10px; font-weight:700;
  letter-spacing:2.2px; color:var(--muted,#5F7379);
}

.nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav a{
  position:relative;
  padding:8px 12px; border-radius:9px;
  font-size:13.5px; font-weight:700; letter-spacing:.3px;
  text-decoration:none; color:var(--ink-2,#41606A);
  transition:color .15s, background-color .15s;
}
.nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  border-radius:2px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .18s;
}
.nav a:hover{color:var(--ink,#16323A); background:#F7F3EA}
.nav a:hover::after{transform:scaleX(1)}
.nav a:focus-visible{outline:3px solid var(--ink,#16323A); outline-offset:2px}
.nav a[aria-current="page"]{color:var(--ink,#16323A)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .hot{color:var(--brand,#4B36E0)}
.nav .hot::before{
  content:""; display:inline-block; vertical-align:1px;
  width:6px; height:6px; margin-right:5px; border-radius:999px; background:currentColor;
}

/* ---------------- 页脚 ---------------- */
.site-foot{margin-top:0; border-top:1px solid var(--line,#EDE5D8); background:#FBF8F1}
.foot-in{padding:34px 0 42px}
.foot-top{display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:flex-start}
.foot-brand{display:flex; align-items:center; gap:11px}
.foot-brand svg{width:32px; height:32px}
.foot-brand b{display:block; font-size:15px; font-weight:900; letter-spacing:1.4px; color:var(--ink,#16323A)}
.foot-brand i{font-style:normal; font-size:11.5px; color:var(--muted,#5F7379); letter-spacing:.5px}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 16px; max-width:520px; justify-content:flex-end}
.foot-links a{
  font-size:12.5px; font-weight:700; color:var(--ink-2,#41606A); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.foot-links a:hover{color:var(--ink,#16323A); border-bottom-color:#C9BFA8}
.foot-links a:focus-visible{outline:3px solid var(--ink,#16323A); outline-offset:2px; border-radius:4px}
.foot-rule{margin:22px 0 16px; border-top:1px dashed #E6DFD0}
.foot-note{font-size:12px; line-height:1.95; color:#6B787E}
.foot-note b{color:var(--ink-2,#41606A); font-weight:800}
.foot-note a{color:var(--ink-2,#41606A); font-weight:800; text-decoration:none; border-bottom:1px solid #D9D0BC}
.foot-note a:hover{border-bottom-color:var(--ink,#16323A)}
.icp{margin-top:8px; font-size:11.5px}
.icp a{color:#7C878C; text-decoration:none}
.icp a:hover{color:var(--ink-2,#41606A)}

/* ---------------- 窄屏 ---------------- */
@media (max-width:980px){
  .head-in{flex-wrap:wrap; gap:0 14px; padding:10px 0; min-height:0}
  .brand{order:1}
  .nav{
    order:2; width:100%; margin:8px 0 0; gap:4px;
    overflow-x:auto; scrollbar-width:none; padding-bottom:2px; padding-right:30px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap; background:#fff; border:1px solid var(--line,#EDE5D8); padding:6px 11px; font-size:12.5px}
  .nav a::after{display:none}
}
@media (max-width:760px){
  .site-head .wrap,
  .site-foot .wrap{width:calc(100% - 36px)}
  .foot-links{justify-content:flex-start}
}