/* 页头/页脚的滚动行为 —— 建站器「页眉/页脚 · 外观 · 滚动行为」那两组选项的实现。
 *
 * 在此之前这一族**只有开关没有效果**:模板(header_visibility_* / template_footer_slideout)
 * 从 Odoo 逐字移植过来,忠实地把 o_header_fixed / o_footer_slideout 这些 class 加到了
 * <header>/<footer> 上,而全仓 grep 这些类名一条 CSS/JS 都没有 —— 面板上四档随便切,
 * 页面纹丝不动。Odoo 那边它们由 website 的 SCSS + public widgets 实现,两样都没随
 * 模板一起移植。
 *
 * ── 契约(JS 只加三个类,其余全在这里)────────────────────────────────────
 *   <html>:
 *     o_scroll_fx        website_runtime.js 启动即打 = "JS 在场"。
 *                        ★ 凡是**先隐藏、等 JS 再显示**的初值都必须挂在它下面:
 *                        建站器画布把文档里的 <script> 全剥掉(Canvas.stripScripts),
 *                        无条件写 opacity:0 的话画布上那块永久不可见,而访客站是好的。
 *   <header id="top">:
 *     o_header_standard / o_header_fixed / o_header_disappears /
 *     o_header_fade_out / o_header_shrink        ← 模板给(互斥,选项组 header_visibility)
 *     o_header_scrolled  ← 已滚过一个页头高度(投影/缩小按它)
 *     o_header_hidden    ← 正在向下滚(隐去/淡出按它)
 *   <footer id="bottom">:
 *     o_footer_slideout / o_footer_fade_in       ← 模板给(互斥,选项组 footer_visibility)
 *     o_footer_in_view   ← 页脚进入视口(渐入按它)
 *   <div id="wrapwrap">:
 *     o_footer_effect_enable                     ← 模板给(滑出式要正文压在页脚之上)
 *
 * 排在 header.css 之后加载:下面几条要盖过它对侧栏版式的定位。
 */

/* ── 页头:除「常规」外的四档都把页头粘在视口顶部 ─────────────────────────
   用 sticky 而不是 fixed:fixed 会让页头脱离文档流、正文整体上移一个页头的高度,
   得再补一个等高的占位块 —— 而页头高度随版式(默认/通栏/销售 1~4…)与断点变,
   那个占位块只能靠 JS 量,量错的表现是页顶多/少一条白缝。sticky 不脱流,没有这笔账。

   ★ 必须排除侧栏版式:它在 >=lg 时本身就是 position:fixed 的左侧竖栏(header.css),
   再压一条 sticky 上去等于把整条侧栏钉回页顶。这里的选择器带 #top(1,1,1),
   比 header.css 里那条 header.o_header_sidebar(0,1,1) 强,不排除就一定压过去。 */
header#top.o_header_fixed:not(.o_header_sidebar),
header#top.o_header_disappears:not(.o_header_sidebar),
header#top.o_header_fade_out:not(.o_header_sidebar),
header#top.o_header_shrink:not(.o_header_sidebar) {
  position: sticky;
  top: 0;
  z-index: 1020;
  /* ★ **`margin-bottom` 绝对不能列进来。** 「固定并缩小」那一档由 runtime 拿它
     补偿页头收缩掉的高度（见 website_runtime.js 的 compensate），值是**逐帧现算**
     的，本身已经是连续的。再给它一条 .3s 过渡，就是每一帧都用新目标重启一次
     300ms 动画 —— margin 永远追不上页头，成了一条指数滞后的尾巴：实测页头 300ms
     就收到 76px 的终值，margin 却过了 600ms 才爬到 57px，正文在这半秒里一路被
     往回拽（单帧最大 13.7px）。写成"两条动画同步"看着最自然，恰恰是错的。 */
  transition: transform .3s ease, opacity .3s ease,
              box-shadow .3s ease, padding .3s ease;
}

/* 滚起来之后与正文之间落一道投影。没有它,固定页头与正文同色时二者糊成一片,
   看不出页头是浮在上面的。 */
header#top.o_header_scrolled:not(.o_header_standard):not(.o_header_sidebar) {
  box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .12);
}

/* 隐去:向下滚时整条滑出视口上方,向上滚立刻回来。 */
header#top.o_header_disappears.o_header_hidden {
  transform: translateY(-100%);
}

/* 淡出:位置不动,透明度归零。
   ★ pointer-events 必须一起关:一条看不见但仍在原位的页头会吃掉正文顶部那一带的
   点击,表现是"页面最上面那几行链接点不动",而画面上什么也看不见。 */
header#top.o_header_fade_out.o_header_hidden {
  opacity: 0;
  pointer-events: none;
}

/* 固定并缩小:滚过之后把页头收紧。四条一起上,因为 11 套版式的高度来源不同 ——
   只改其中一条的结果是"这套版式选了没反应",而面板上看不出差别。

   ★ 不要写 `.navbar { padding: … }`:本仓主题把 --bs-navbar-padding-y 设成 0,
   navbar 的上下留白本来就是 0,"收紧"它是无操作(实测 sales_four 版式 padding
   0px → 0px、页头高度 95px 一动不动)。真正撑起高度的是内层元素,所以按来源各收
   一处;改 Bootstrap 的变量而不是 padding 本身,免得和 py-* 工具类的 !important 打架。 */
header#top.o_header_shrink .o_header_hide_on_scroll,
header#top.o_header_shrink .navbar,
header#top.o_header_shrink .nav-link,
header#top.o_header_shrink .navbar-brand img,
header#top.o_header_shrink .navbar-brand svg {
  transition: max-height .3s ease, padding .3s ease, opacity .3s ease;
}
/* ★★ 展开态的 max-height 必须是一个**数**。
   `max-height` 的初值是关键字 `none`，而 `none → 0` **不可插值** —— 浏览器不做过渡，
   直接跳到 0。于是"收起"是在一帧里完成的：实测 sales_one 的页头高度 133.2 → 90.8、
   附加条 51.2 → 16，全在同一帧，`transition` 那行写了等于没写。这就是"抖"的主因。
   runtime 量出附加条的实际高度写进 `--o-hdr-bar-h`（见 website_runtime.js 的
   measureHeader），过渡因此是精确的 51.2px → 0。
   没有 JS 时回落到一个足够大的常量：附加条实测最高 58px，12rem 不限制任何东西，
   行为与从前逐字相同（建站器画布把 <script> 全剥掉，靠的就是这个回落）。 */
header#top.o_header_shrink .o_header_hide_on_scroll {
  max-height: var(--o-hdr-bar-h, 12rem);
}

/* ① 附加条(销售版式的顶/底条:语言、联系方式、促销语)整条收起。
   `o_header_hide_on_scroll` 是 Odoo 的契约类名,本仓此前只给了它一条 width:100%,
   注释里写着"滚动收起是运行时行为" —— 那个运行时一直不存在。 */
header#top.o_header_shrink.o_header_scrolled .o_header_hide_on_scroll {
  max-height: 0;
  /* ★ min-height:0 不能省。这条附加条是弹性容器 .o_main_nav 的成员,弹性项的
     自动最小尺寸(min-height:auto = 内容高)**压过 max-height** —— 少了这一行,
     max-height:0 写了等于没写,实测销售版式的页头 95px 只掉到 79px(那 16px 是
     下面 nav-link 那条的功劳),68px 的附加条一动不动。 */
  min-height: 0;
  /* ★ `!important` 不能省：模板上这条附加条带着 Bootstrap 的 `py-2`
     （`padding-top: .5rem !important`），不加就是**工具类赢**——实测收起之后
     附加条并没有回到 0，而是留着 8+8=16px，页头比该有的高度高一截，
     而 max-height/overflow 一切正常，从样式面板上看不出是谁在撑。 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
/* ② 导航条自身的留白(靠 Bootstrap 变量,不硬写 padding) */
header#top.o_header_shrink.o_header_scrolled .navbar {
  --bs-navbar-padding-y: .25rem;
}
/* ③ 菜单项的上下留白:默认版式的高度基本就是它撑的 */
header#top.o_header_shrink.o_header_scrolled .nav-link {
  --bs-nav-link-padding-y: .25rem;
}
/* ④ logo 压矮 */
header#top.o_header_shrink.o_header_scrolled .navbar-brand img,
header#top.o_header_shrink.o_header_scrolled .navbar-brand svg {
  max-height: 2rem;
}

/* ── 页脚 · 滑出式 ───────────────────────────────────────────────────────
   正文压着页脚滑过去,滚到底才把页脚"拉"出来。三件事缺一不可:
     ① 页脚 sticky 在视口底(它是 #wrapwrap 的最后一个孩子,所以整个滚动过程里
        都贴在视口下沿等着);
     ② 正文不透明并叠在上层 —— 不给背景色的话滚动全程都能透出下面的页脚,
        效果反而像"页脚印在正文底下"(Odoo 那边正文背景来自 o_cc1,本仓的页面
        背景变量是 --o-body-bg);
     ③ 页脚的 z-index 必须比正文低,否则它就是普通地叠在正文上面。
   页头这里不写 position/z-index:上面四档已经把它抬成 sticky z-index:1020,
   在这里再写一条 position:relative 会按特异度打架,而页头与页脚本来就不重叠。 */
#wrapwrap.o_footer_effect_enable > footer.o_footer_slideout {
  position: sticky;
  bottom: 0;
  z-index: 0;
}
#wrapwrap.o_footer_effect_enable > main {
  position: relative;
  z-index: 1;
  background-color: var(--o-body-bg, #fff);
}

/* ── 页脚 · 渐入 ─────────────────────────────────────────────────────────
   ★ 初值挂在 html.o_scroll_fx 之下,见文件头的契约:没有 JS 就没人来加
   o_footer_in_view,无条件 opacity:0 等于把页脚永久藏掉。 */
html.o_scroll_fx #wrapwrap > footer.o_footer_fade_in {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .6s ease, transform .6s ease;
}
html.o_scroll_fx #wrapwrap > footer.o_footer_fade_in.o_footer_in_view {
  opacity: 1;
  transform: none;
}

/* ── 回到顶部按钮 ────────────────────────────────────────────────────────
   模板(option_footer_scrolltop)把它插在 <footer id="bottom"> 里、#footer 之后,
   外层是一个 h-0 的容器 —— 于是按钮骑在一条零高度的线上,靠 sticky 贴住视口下沿:
   页脚还在视口外时它被限制在自己的包含块里(看不见),页脚一露头它就浮出来。
   纯 CSS,不需要 JS 判滚动位置;JS 只接管点击时的平滑滚动(无 JS 时 href="#top"
   仍然直达页顶,只是不平滑)。
   pointer-events:none 在容器上、auto 在按钮上:容器是通栏的,吃了指针事件就等于
   在页脚上盖了一条看不见的横带。 */
#o_footer_scrolltop_wrapper {
  position: sticky;
  bottom: 1.5rem;
  z-index: 3;
  pointer-events: none;
}
#o_footer_scrolltop {
  width: 3rem;
  height: 3rem;
  pointer-events: auto;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
}

/* 尊重系统的"减少动态效果":这一族全是位移/淡入淡出,前庭功能障碍者对它敏感。
   只关过渡,不关最终状态 —— 页头照样固定、页脚照样出现,只是不再有动画。 */
@media (prefers-reduced-motion: reduce) {
  header#top[class*="o_header_"],
  header#top .navbar,
  #wrapwrap > footer[class*="o_footer_"] {
    transition: none !important;
  }
}