/*
 * header-layout.css —— 页头栏的几何：高度、logo 尺寸、导航居中。
 *
 * 为什么不在 Elementor 里改：页头是 Elementor 模板（post 11），这些值散在
 * 逐元素生成的 post-11.css 里。客户后续只做内容维护、不动版式，所以版式
 * 统一收在主题代码里，改一处、全站生效，也便于回退。
 *
 * 权重说明：Elementor 逐元素规则形如
 *   .elementor-11 .elementor-element.elementor-element-XXXX   -> (0,3,0)
 * 所以这里一律加 html 前缀凑到 (0,3,1) 压过它，不依赖加载顺序
 * （组件样式是 widget 按需入队的，顺序不可控）。
 *
 * 对应客户需求：GL-02 导航栏高度、NV-02 菜单居中、NV-04 logo 缩小。
 */

/* ---------------------------------------------------------------- GL-02
   导航栏高度 80 -> 72px。
   80px 本身就是常见标准值；客户觉得"高"，和字号那件事是同一个成因——
   同样的 px 在 1920 上占屏比例比 2k 大。72px 仍在标准区间内（64/72/80）。
   下拉面板的 top 是 JS 按页头底边实时算的，改高度不会留缝。 */
html .elementor-location-header .elementor-element.elementor-element-3bce8a7,
html .elementor-location-header .elementor-element.elementor-element-41d77db,
html .elementor-location-header .elementor-element.elementor-element-41d77db > .e-con-inner {
  min-height: 72px;
}

/* ---------------------------------------------------------------- 页头 logo
   152 -> 128px（等比，高度随 height:auto 缩到约 33px）。

   注：客户 NV-04 那条「logo 太大」其实指的是页尾 logo（已单独改成 160px）。
   页头这个是先前误判时一并改的，业主暂时保留，要不要退回 152px 待定。 */
html .elementor-location-header .elementor-element.elementor-element-2b58ccb img {
  width: 128px;
}

/* ---------------------------------------------------------------- NV-02
   导航居中。

   原结构是两段式：[logo] ……… [导航][工具]，导航夹在右侧组里，
   被工具区的 margin-left:180px 推得偏右约 89px。

   要真正居中，左右两侧必须"配重"相等，而导航得是行内的独立一段。
   这里用 display:contents 把右侧组的盒子取消掉，让导航和工具直接成为
   行的 flex 子项，再给 logo 段和工具段同样的 flex:1 1 0 —— 导航就落在正中。
   该组本身无背景/内边距/边框，取消它的盒子没有副作用（已核对）。

   注意：不能用 transform: translateX(-50%) 来居中。下拉面板是
   position:fixed + width:100vw，且是 .amm 的后代；祖先一旦有 transform
   就会成为 fixed 的包含块，整个全屏面板会被压缩到导航那么宽。 */
html .elementor-location-header .elementor-element.elementor-element-41d77db > .e-con-inner {
  display: flex;
  align-items: center;
}

html .elementor-location-header .elementor-element.elementor-element-a62c604 {
  display: contents;
}

/* 左右两段等宽配重，中间导航按自身宽度居中 */
html .elementor-location-header .elementor-element.elementor-element-2b58ccb {
  flex: 1 1 0;
  min-width: 0;
}

html .elementor-location-header .elementor-element.elementor-element-2f9dc26 {
  flex: 0 0 auto;
}

html .elementor-location-header .elementor-element.elementor-element-577a3f2 {
  flex: 1 1 0;
  min-width: 0;
  margin-left: 0;          /* 原来的 180px 是用来手动推开导航的，现在由配重接管 */
  justify-content: flex-end;
}

/* 窄屏抽屉布局不走上面这套三段配重：导航整体收进汉堡菜单，
   右侧组恢复成正常盒子，否则 display:contents 会打乱抽屉的堆叠。 */
@media (max-width: 1200px) {
  html .elementor-location-header .elementor-element.elementor-element-a62c604 {
    display: flex;
  }

  html .elementor-location-header .elementor-element.elementor-element-2b58ccb,
  html .elementor-location-header .elementor-element.elementor-element-577a3f2 {
    flex: 0 1 auto;
  }
}

/* ---------------------------------------------------------------- NV-01
   页头底色三态：默认透明 / 鼠标经过白底 / 滚动后白底。

   【只在首页】透明才成立：首页是 [导航][海报]，海报顶到 y=0，导航浮在图上。
   内页是 [导航][面包屑 48px][海报]，导航底下压着的是白色面包屑条，
   "透明" 看起来和白色导航没区别，所以内页保持白底。

   is-scrolled 由 assets/js/header-chrome.js 按滚动位置加；
   悬停和「菜单已展开」两种情况纯 CSS 就够 —— 菜单是悬停展开的，
   :has() 那条是给键盘 Tab 和触屏兜底（那时没有 :hover）。

   末尾把 elementor-element-3bce8a7 又写了一遍：这是提权，不是笔误。
   Elementor 给这层设白底的规则是
     .elementor-11 .elementor-element.elementor-element-3bce8a7:not(.elementor-…)
   —— :not() 会把括号里选择器的权重算进去，所以它是 (0,4,0)，
   而 html + 三个类只有 (0,3,1)，压不住。重复一次类名凑到 (0,4,1) 才赢。 */
html body.home .elementor-location-header:not(.is-scrolled):not(:hover):not(:has(.amm__top-item.is-open))
  .elementor-element.elementor-element-3bce8a7.elementor-element-3bce8a7 {
  background-color: transparent;
}

html .elementor-location-header
  .elementor-element.elementor-element-3bce8a7.elementor-element-3bce8a7 {
  transition: background-color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  html .elementor-location-header
    .elementor-element.elementor-element-3bce8a7.elementor-element-3bce8a7 {
    transition: none;
  }
}

/* ---- 透明态下文字与图标转白 ----
   客户反馈：悬浮状态下默认的黑色压在照片上看不清。
   这里只翻两个变量，具体元素各自去读，避免把那串 :not() 链重复好几遍。 */
html .elementor-location-header {
  --hdr-fg: var(--amm-text-strong, #000000);
  --hdr-img-filter: none;
}

html body.home .elementor-location-header:not(.is-scrolled):not(:hover):not(:has(.amm__top-item.is-open)) {
  --hdr-fg: #ffffff;
  /* logo 和工具图标都是位图，没有白色版素材，用滤镜整体转白。
     brightness(0) 先压成纯黑再 invert 成纯白，比直接 invert 稳 —— 后者会把红色变成青色。 */
  --hdr-img-filter: brightness(0) invert(1);
}

html .elementor-location-header .amm__top-link,
html .elementor-location-header .astra-ht__btn {
  color: var(--hdr-fg);
}

/* 箭头、下拉小三角走 currentColor，跟着上面的 color 自动变，不用单独写 */

/* 只有地球 / 搜索这类工具图标跟着变白。
   logo 不参与 —— 业主要求保持原样：滤镜会把红色太阳图标一起刷成白色，
   品牌标识就没了。它压在首屏那片浅色天空上，原色也看得清。 */
html .elementor-location-header .astra-ht__btn img {
  filter: var(--hdr-img-filter);
  transition: filter 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  html .elementor-location-header .astra-ht__btn img {
    transition: none;
  }
}

/* ---------------------------------------------------------- NV-01 + GL-06
   首屏海报顶到页面最上沿，从透明导航下面透出来，并且正好一屏。

   这两条需求其实是同一件事。客户在 GL-06 里写得很清楚：
   「满屏填充，这个是包括导航栏透明的区域」——导航透明之后，它下面得有东西透出来，
   否则只是露出页面白底，跟原来的白条没区别。

   原来的算法是「导航栏 + 海报 = 一屏」：海报从 y=72 起、高 100vh-72。
   现在改成海报从 y=0 起、高 100vh，导航浮在它顶上那 72px。
   page-banner.css 里 .astra-banner--top 的注释「导航压在图上」说明设计本就如此。

   负 margin 只加在海报组件上，不去动 Elementor 的 sticky spacer ——
   spacer 是全站生效的，动了它会让没有海报的页面（搜索结果等）内容钻到导航底下。

   只在桌面端生效：≤1200 是抽屉式导航，另一套布局，不在本次需求范围内。 */
:root {
  --astra-header-h: 72px;
}

@media (min-width: 1201px) {
  /* 首页大图轮播 */
  html .index_banner_box {
    height: 100vh;
    height: 100dvh;
    margin-top: calc(-1 * var(--astra-header-h));
  }

  /* 内页首屏海报：高度原来是 Elementor 里逐页填的固定 px（About 是 980，
     起点 y=120，底部落到 1100，超出一屏 20px —— 就是客户说的「被遮挡」）。

     不能简单顶到 y=0：内页在导航和海报之间还夹着一条 48px 的面包屑，
     各页面压在海报上面的东西也不一样。所以让海报自己减掉「上方占用的高度」，
     这个值由 header-chrome.js 实测后写进 --astra-banner-top。
     变量拿不到时回落成 0，就是整屏高，不会出现塌成一条的情况。 */
  /* 只作用于页面里的第一个横幅（首屏海报）。
     data-astra-hero 由 header-chrome.js 标在第一个 .astra-banner 上。
     页面底部的「Make Energy Everywhere」CTA 带用的也是这个组件，
     不加这个限定的话它也会被撑成整屏 —— 客户 FT-01 抱怨的「上下太宽」就是这个。 */
  html .astra-banner[data-astra-hero] {
    min-height: calc(100vh - var(--astra-banner-top, 0px));
    min-height: calc(100dvh - var(--astra-banner-top, 0px));
  }

  /* 文案靠上的那款要避开导航，否则标题会被压在导航底下 */
  html .astra-banner--top {
    padding-top: calc(var(--banner-offset-top, 40px) + var(--astra-header-h));
  }
}