/* =========================================================================
 * 主题头部微调（覆盖层）
 *
 * ★ 这个文件只做「覆盖」，不改 Synex 原版的 main.css / header.php ★
 * 所有规则都靠 #sticky-header 这个 id 提权压过 main.css，原文件保持出厂状态，
 * 以后升级主题不会冲掉，出问题把这一个文件停掉就全部还原。
 *
 * 解决的问题（都能在 main.css 里找到出处，也都实测过）：
 *  1. 下拉后那条白底太厚 —— 100px。按钮里那个黑圆点 46px 加上下 7px 就是 60px，
 *     再加 .header-1 的上下 20px，正好 100px。头部占满一屏的 1/8，压过内容
 *  2. .sticky-menu 每次挂上都重播一次 400ms 的 fadeInDown
 *  3. 白底和阴影是瞬间出现的，没有过渡
 *  4. 别的板块要给悬浮头部让位时只能自己硬写 94px
 *
 * 一开始还以为左右内边距会跳，实测没有，原因见下面「左右内边距：不用管」。
 *
 * 配套 header.js：滚动阈值加迟滞、把当前头部高度写进 --hdr-h。
 * ====================================================================== */

:root{
  /* 由 header.js 实时写入；这里给一个和出厂尺寸一致的兜底值，
     JS 没跑起来时用它也不会错得离谱。 */
  --hdr-h:100px;

  --hdr-ease:cubic-bezier(.4,0,.2,1);
  --hdr-dur:.28s;
}

/* --------------------------------------------------------------- 过渡 */
/* position 从 absolute 变 fixed 是没法过渡的，能过渡的是「变矮」和「出白底」
   这两件事，它们恰好是眼睛最容易注意到的部分。 */
#sticky-header{
  transition:padding var(--hdr-dur) var(--hdr-ease),
             background-color var(--hdr-dur) var(--hdr-ease),
             box-shadow var(--hdr-dur) var(--hdr-ease);
}
#sticky-header .navbar-brand img,
#sticky-header .mobile-topbar .logo img{
  transition:height var(--hdr-dur) var(--hdr-ease);
}
#sticky-header .theme-btn-main.style-2,
#sticky-header .theme-btn-main.style-2 .theme-btn-arrow-left,
#sticky-header .theme-btn-main.style-2 .theme-btn-arrow-right,
#sticky-header .theme-btn-main.style-2 .theme-btn{
  transition:width var(--hdr-dur) var(--hdr-ease),
             height var(--hdr-dur) var(--hdr-ease),
             padding var(--hdr-dur) var(--hdr-ease),
             font-size var(--hdr-dur) var(--hdr-ease),
             margin var(--hdr-dur) var(--hdr-ease);
}

/* ------------------------------------------------------ 左右内边距：不用管 */
/* 一开始以为切成悬浮条时左右会从 120px 跳到 150px，实测没有 ——
   .sticky-menu{padding:18px 150px} 在 main.css:1271，
   .header-1{padding:20px 120px} 在 main.css:2103，两条特异度都是 0,1,0，
   后写的 .header-1 永远赢。也就是说 .sticky-menu 里那套左右内边距（以及
   1199px 以下那个 90px）是**从来没生效过的死代码**，两个状态本来就一致。
   所以这里一条都不写，免得再压一层反而把以后改 .header-1 的人绕进去。
   ★ 但上下内边距要压 ★ .header-1 的 padding 简写把上下定死在 20px，
   下面「变矮」那段必须用带 id 的选择器才压得过它。 */

/* ------------------------------------------------------- 1. 悬浮条变矮 */
/* 96px → 64px。三处一起收，只收一处会让另外两处顶着高度下不来：
     · 上下内边距 18 → 9
     · 按钮里那个黑圆点 46 → 34（它才是撑高度的那个）
     · Logo 高度（后台设的是内联 style，只能用 !important 压） */
#sticky-header.sticky-menu{
  padding-top:9px;
  padding-bottom:9px;
}
#sticky-header.sticky-menu .navbar-brand img,
#sticky-header.sticky-menu .mobile-topbar .logo img{
  height:34px !important;
  width:auto !important;
}
#sticky-header.sticky-menu .theme-btn-main.style-2{
  padding:5px 20px;
  padding-right:5px;
}
/* main.css:276 的 .theme-btn-main.style-2:hover 把 padding-right 撑到 25px，
   特异度 0,3,0 比不过上面那条带 id 的，不补一条 hover 就没了。 */
#sticky-header.sticky-menu .theme-btn-main.style-2:hover{ padding-right:20px; }
#sticky-header.sticky-menu .theme-btn-main.style-2 .theme-btn-arrow-left,
#sticky-header.sticky-menu .theme-btn-main.style-2 .theme-btn-arrow-right{
  width:34px;height:34px;
}
#sticky-header.sticky-menu .theme-btn-main.style-2 .theme-btn{
  font-size:15px;
  margin-right:11px;
}
#sticky-header.sticky-menu .navbar-nav .nav-item .nav-link{ font-size:15px; }

/* 悬浮条变矮之后，一级菜单的下拉面板也要跟着往上贴，
   不然菜单和面板之间会空出一条缝，鼠标划过去就关了。
   main.css:1319 写的是 top:118%，那是按 96px 高算的。 */
#sticky-header.sticky-menu .header-main .navbar .navbar-nav .nav-item > .sub-menu{ top:126%; }

/* --------------------------------------------- 2. 不要重播 fadeInDown */
/* 原来是 animate.css 的 fadeInDown，400ms、从自身高度的 -100% 落下来，
   而且每次挂上 .sticky-menu 都重播一次。换成更短更浅的一版。 */
#sticky-header.sticky-menu{ animation:hdr-drop .26s var(--hdr-ease) both; }
@keyframes hdr-drop{
  from{ transform:translateY(-14px);opacity:0; }
  to  { transform:none;opacity:1; }
}

/* 白底也收一点：纯白 + 那道蓝阴影在浅色板块上会显得「浮得太高」，
   换成半透明白 + 毛玻璃，压在内容上更轻。 */
#sticky-header.sticky-menu{
  background-color:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
          backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 rgba(16,52,110,.08),0 8px 24px -12px rgba(16,52,110,.28);
}
/* 不支持毛玻璃的浏览器退回不透明白，否则内容会透上来糊成一片 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #sticky-header.sticky-menu{ background-color:#fff; }
}
#sticky-header.sticky-menu .mobile-menu-area{
  background-color:transparent;
  box-shadow:none;
}

/* ------------------------------------------------------ 3. 当前页高亮 */
/* WordPress 自己会在 li 上加 current-menu-item / current-menu-ancestor，
   原主题没用上，白放着。 */
#sticky-header .navbar-nav .nav-item.current-menu-item > .nav-link,
#sticky-header .navbar-nav .nav-item.current-menu-ancestor > .nav-link,
#sticky-header .navbar-nav .nav-item.current_page_item > .nav-link{
  color:var(--theme);
}
#sticky-header .navbar-nav .nav-item > .nav-link{ position:relative; }
#sticky-header .navbar-nav .nav-item > .nav-link::after{
  content:"";position:absolute;left:50%;bottom:-6px;
  width:0;height:2px;border-radius:2px;
  background-image:linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%);
  transform:translateX(-50%);
  transition:width .25s var(--hdr-ease);
}
#sticky-header .navbar-nav .nav-item.current-menu-item > .nav-link::after,
#sticky-header .navbar-nav .nav-item.current-menu-ancestor > .nav-link::after,
#sticky-header .navbar-nav .nav-item.current_page_item > .nav-link::after,
#sticky-header .navbar-nav .nav-item > .nav-link:hover::after{
  width:18px;
}

/* --------------------------------------------------------- 4. 锚点让位 */
/* 页面内 #锚点 跳转时，浏览器会把目标顶到视口最上沿 —— 正好被悬浮头部盖住。
   scroll-padding-top 让它自动留出头部的高度，各板块不用再自己算。 */
html{ scroll-padding-top:calc(var(--hdr-h) + 16px); }

/* --------------------------------------------------------------- 移动端 */
@media (max-width:1199px){
  /* 手机上头部本来就只有 logo + 汉堡，收得更紧一点 */
  #sticky-header.sticky-menu{ padding-top:6px;padding-bottom:6px; }
  #sticky-header.sticky-menu .navbar-brand img,
  #sticky-header.sticky-menu .mobile-topbar .logo img{ height:30px !important; }
}

@media (prefers-reduced-motion:reduce){
  #sticky-header,
  #sticky-header .navbar-brand img,
  #sticky-header .mobile-topbar .logo img,
  #sticky-header .theme-btn-main.style-2,
  #sticky-header .theme-btn-main.style-2 .theme-btn-arrow-left,
  #sticky-header .theme-btn-main.style-2 .theme-btn-arrow-right,
  #sticky-header .navbar-nav .nav-item > .nav-link::after{ transition:none; }
  #sticky-header.sticky-menu{ animation:none; }
}