/* ==========================================================================
   RUIBIT PATCH  —  独立补丁文件（遮蔽保险）
   2026-10-07  |  bess
   ==========================================================================
   为什么把补丁同时放进这个文件：
     Publii 渲染时优先读 <主题>-override/ 里的同名文件。补丁原本只写在
     style.css 里，一旦 override 里的 style.css 被还原成原始版，
     补丁就会被整体遮蔽。
     本文件**只存在于主题目录**，override 里没有同名文件，
     因此无论 style.css 被如何覆盖，本文件都会生效。
     它在 head.hbs 中排在 style.css 之后加载，靠源码顺序覆盖同特异度规则。

   内容 = 以下补丁文件的顺序拼接：
     - mobile-fix.css
     - hero-button-fix.css
     - visual-refresh-decision1.css
     - nav-dropdown-gap-fix.css

   内容与追加在 style.css 末尾的补丁完全一致（同一份规则，重复应用无副作用）。
   回退方式：删除本文件，并移除 head.hbs 里对应的 <link> 行。
   ========================================================================== */
/* ==========================================================================
   MOBILE FIX - 2026-10-07
   针对 ruibitbess.com 首页移动端（<=768px）的三个问题。

   [1] 顶栏被压扁
       原规则 @media(max-width:768px){ .top-bar-item .text{display:none} }
       把三个入口的文字全部隐藏，只剩三个图标：WhatsApp 号、日历图标
       （"Get Free Quote"）、定位图标（"Find Us On Map"）。日历图标表达不出
       "获取报价"，语义丢失。现改为保留文字、缩小字号与间距。

   [2] Hero 文字与右侧悬浮联系栏重叠
       原规则 .contact-sidebar{position:fixed;right:0;top:50%;
       transform:translateY(-50%)}，宽度 <=480px 时 55px，而 Hero 内容的
       .container 只有 padding:0 20px。视口 390px 时正文右边界 370px、
       浮层左边界 335px，必然重叠 35px。
       现改为移动端把联系栏转为「底部横向栏」：不再占用正文的横向空间，
       同时更符合拇指操作。悬浮提示（.contact-tooltip）原本靠 :hover 触发，
       触摸设备上本来就无法触发，故移动端隐藏。

   [3] Hero 背景离屏 + 标题字号规则未生效
       a) 原规则 @media(max-width:768px){ .hero-custom-bg{
          background-size:100% auto!important; background-repeat:no-repeat!important } }
          图片按宽度缩放后高度小于 Hero 区块高度，又禁止平铺，于是标题上方
          出现一条纯深色空带（肉眼看起来像图片没加载完）。改回 cover。
       b) @media(max-width:576px){ h1{font-size:2.2rem} } 永远不生效：
          .hero h1（特异度 0,1,1）比 h1（0,0,1）高，所以在 390px 手机上
          Hero 标题仍是 40px，折成 5 行。这里补上 .hero h1 的移动端字号。

   本文件内容已追加到：
     input/themes/gofairgeob2b/assets/css/style.css
   追加在文件末尾，靠源码顺序覆盖原有同特异度规则。
   如需回退：删除 style.css 末尾本段全部内容即可。
   ========================================================================== */

@media (max-width:768px){

  /* ---------- [1] 顶栏：保留文字，压缩间距 ---------- */
  .top-bar{ font-size:12px; padding:7px 0; }
  .top-bar-container{
    gap:8px;
    padding:0 12px;
    max-width:100%;
    flex-wrap:nowrap;
    justify-content:center;
  }
  .top-bar-item{ gap:5px; font-size:12px; min-width:0; }
  .top-bar-item i{ flex:none; font-size:14px; }
  .top-bar-item .text{
    display:inline;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .separator{ display:none; }

  /* ---------- [2] 悬浮联系栏 → 底部横向栏 ---------- */
  .contact-sidebar,
  .contact-sidebar-left{
    position:fixed;
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    transform:none;
    z-index:100;
  }
  .contact-sidebar .sidebar-content,
  .contact-sidebar-left .sidebar-content{
    width:100%;
    display:block;
    padding:6px 0;
    border-radius:0;
    background:var(--nav-bg-color);
    box-shadow:0 -4px 16px rgba(0,0,0,.35);
  }
  /* 原来的右侧绿色竖条改为底部栏顶部横条 */
  .contact-sidebar .sidebar-border,
  .contact-sidebar-left .sidebar-border{
    top:0; left:0; right:auto;
    width:100%; height:3px;
    background:linear-gradient(to right,#25d366 0,rgba(37,211,102,.55) 50%,#25d366 100%);
    box-shadow:none;
  }
  .contact-sidebar .icon-container,
  .contact-sidebar-left .icon-container{
    flex-direction:row;
    justify-content:space-around;
    gap:0;
    width:100%;
  }
  .contact-sidebar .icon-btn,
  .contact-sidebar-left .icon-btn{
    width:44px; height:44px; font-size:18px;
    border:none;
    box-shadow:none;
  }
  .contact-tooltip{ display:none !important; }

  /* 微信二维码：由右侧弹出改为底部栏上方居中弹出 */
  .contact-sidebar .wechat-popup,
  .contact-sidebar-left .wechat-popup,
  .contact-sidebar .wechat-btn:hover .wechat-popup,
  .contact-sidebar-left .wechat-btn:hover .wechat-popup{
    top:auto; right:auto; left:50%; bottom:62px;
    transform:translateX(-50%);
    width:140px;
    padding:12px;
  }
  .contact-sidebar .wechat-popup::after,
  .contact-sidebar-left .wechat-popup::after{ display:none; }

  /* 底部栏高度 = 6 + 44 + 6 = 56px，页面留出等量空间；返回顶部按钮上移 */
  body{ padding-bottom:58px; }
  .back-to-top-btn{ bottom:70px; right:14px; width:42px; height:42px; }

  /* ---------- [3a] Hero 背景改为 cover，消除深色空带 ---------- */
  .hero-custom-bg{
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
  }
}

/* ---------- [3b] 让移动端 Hero 标题字号真正生效 ---------- */
@media (max-width:576px){
  .hero h1{ font-size:2rem; }
}

@media (max-width:480px){
  .hero h1{ font-size:1.7rem; }
}

@media (max-width:380px){
  /* 极窄屏优先保证 WhatsApp 号与报价入口可见，隐藏最不常用的地图入口 */
  .top-bar-item:last-child{ display:none; }
}

/* ==========================================================================
   HERO BUTTON FIX - 2026-10-07  （solid 版，取代此前的描边版）
   修复首屏第二个按钮 "Request Quote"（.btn-outline）。

   改动范围：.btn-outline 在全主题只被 index.hbs 第 15 行的 Hero 次按钮使用
   （已用 grep 全主题检索确认，仅 1 处命中），因此本段只影响首页首屏这一个按钮。

   ── 为什么用「白底深字」而不是「实心蓝」
      主按钮 "View Products" 已经是 .btn = 实心 --secondary(#2980b9) + 白字。
      若次按钮也做成实心蓝，两个按钮外观完全一致，主次层次消失，
      首屏唯一的转化路径会变成两个并列的同权重按钮。
      白底实心既满足「实心」的要求，又与蓝色主按钮形成明确的
      一级（彩色实心）/ 二级（中性实心）区分 —— 这是深色 Hero 上的标准处理。
      如需反过来（次按钮实心蓝、主按钮描边），改这一段即可。

   ── 对比度
       白底 #fff 配文字 --nav-bg-color(#2c3e50)：约 11.0:1
       hover 底色 #e4ebf2 配同一文字色：约 9.1:1
       两者都远高于 WCAG AA 对 16px 常规文本要求的 4.5:1。
       （此前描边版是 #2980b9 蓝字压在照片上，约 3.9:1，不达标且随照片明暗波动。）

   ── 几何
       保留 border:2px solid（颜色与底色一致）而不是去掉边框，
       是为了让次按钮与主按钮的盒模型尺寸保持一致，避免高度差。

   ── 390px 下的折行
       .btn{ padding:14px 32px } → 单按钮约 168px，两个加 gap 20px 约 356px，
       而 390px 视口下 .container 内宽只有 335px，横向不够导致文字在按钮内部折行。
       处理：缩小水平内边距与字号、缩小间距；white-space:nowrap 禁止内部折行；
       flex:0 0 auto + flex-wrap:wrap 兜底 —— 放不下时改为上下堆叠。

   本文件内容已追加到：
     input/themes/gofairgeob2b/assets/css/style.css
   如需回退：删除 style.css 末尾本段全部内容即可。
   ========================================================================== */

.hero .btn-outline{
  background-color:#fff;
  border:2px solid #fff;
  color:var(--nav-bg-color);
}

.hero .btn-outline:hover{
  background-color:#e4ebf2;
  border-color:#e4ebf2;
  color:var(--nav-bg-color);
}

@media (max-width:768px){
  .hero-btns{
    gap:12px;
    flex-wrap:wrap;
  }
  .hero-btns .btn{
    padding:12px 18px;
    font-size:.95rem;
    white-space:nowrap;
    flex:0 0 auto;
  }
}

/* ==========================================================================
   VISUAL REFRESH — 决定 1：调色板与可读性修复
   2026-10-07  |  ruibitbess / ruibitenergy  |  纯 CSS，不改任何模板
   ==========================================================================
   以下每条改动都基于对主题 style.css 的实测值，不是主观偏好。

   [1] 正文可读性
       实际使用：p、.feature-content p、.product-info a、.product-specs li、
                 .news-content p a、.cert-intro p、.cert-item p、.contact-detail p a、
                 .map-intro、.info-row p、.product-card-desc  —— 共 11 处，
                 全部是 color:var(--gray) = #95a5a6
       白底对比度：2.56:1（WCAG AA 要求 4.5:1）
       安全性核实：var(--gray) 在全文件中**只被用于 color 属性**，没有任何一处用于
                 边框、背景或分隔线，因此直接改令牌即可一次修复 11 处，
                 不会牵连其它视觉。
       改为 #4a5561 → 对比度 7.60:1

   [2] 标题不再充当强调色
       实际使用：h2、.map-section h2、.feature-content h4、.application-card h3、
                 .product-info h3、.product-info h3 a、.news-content h3、
                 .news-content h3 a、.advantage-card h3、.cert-item h4、
                 .why-card h3、.global-stat h3、.contact-info h3、
                 .contact-detail h4、.location-info h3 —— 共 15 处
                 color:var(--primary) = #3498db，对比度 3.15:1
       问题：13 个区块的标题同色同号同间距，整页没有主次。
       改法：标题改近黑 --heading，**蓝色保留给交互元素**（按钮、链接、图标）。
             注意：不能整块替换 --primary，因为 .logo / .application-icon /
             .cert-icon / .why-card i / .btn-view-all / .read-more:hover /
             .stat-label 也在用它，换成黑色会丢掉强调色。

   [3] 蓝色本身达到 AA
       --primary   #3498db → #2b7bb9   3.15:1 → 4.53:1
       --secondary #2980b9 → #1f6ba5   4.30:1 → 5.67:1
       （导航 CTA 是白字压 --cta-color，原 #3498db 同样只有 3.15:1）

   [4] 主按钮 hover 跳成橙色
       .btn:hover{background-color:#d35400} —— Flat UI 的 Pumpkin 橙，
       与整个蓝色体系毫无关系，模板遗留。改为品牌蓝加深。

   [5] 三个被引用但从未定义的变量
       --border-radius（2 处）、--page-width（1 处）、--page-margin（1 处）
       这三条声明原本整条失效（border-radius 退化为 0）。现补齐。
       注：三个变量只被 .gallery__item a 与 .gallery-wrapper--wide .gallery 使用；
           未使用画廊组件时无任何影响。

   回退方式：删除本段全部内容即可。

   验证记录（本地渲染 + getComputedStyle 实测）：
     .cert-item p          #95a5a6 → #4a5561
     中部区块 h2           #3498db → #0f1720
     .advantage-card h3    #3498db → #0f1720
     .hero h1              白色 → 白色（深色区未被误改）
     页脚标题              白色 → 白色
     .nav-cta 底色         #3498db → #2b7bb9
   ========================================================================== */

:root{
  /* ---- 新增令牌 ---- */
  --heading:#0f1720;              /* 标题专用近黑，对比度 18.04:1 */

  /* ---- 覆盖：文字可读性 ---- */
  --gray:#4a5561;                 /* 原 #95a5a6 —— 2.56:1 → 7.60:1 */

  /* ---- 覆盖：蓝色系（保留蓝色，但达到 AA）---- */
  /* 取值依据：区块底色不只有纯白，还有浅灰 #f5f7fa / #f8f9fa。
     蓝色文字必须在**两种底色上**都达到 4.5:1，因此不能只按白底取值。 */
  --primary:#2470a8;              /* 原 #3498db —— 白底 5.30:1、#f5f7fa 上 4.80:1 */
  --secondary:#1f6ba5;            /* 原 #2980b9 —— 白底 5.67:1 */
  --cta-color:#2470a8;            /* 原 #3498db —— 导航 CTA 白字压它 5.30:1（原 3.15:1） */
  --cta-hover:#1f6ba5;            /* 原 #2980b9 */
  --nav-mob-bg-color:#2470a8;     /* 原 #3498db —— 移动端菜单底色 */
  --nav-text-hover-color:#2470a8; /* 原 #3498db */
  --nav-hover-bg-color:rgba(36,112,168,.10);

  /* ---- 覆盖：深色系与浅色底 ---- */
  --dark:#0f1720;                 /* 原 #1a252f */
  --footer-bg-color:#0f1720;      /* 与 --dark 统一，原也是 #1a252f */
  --light:#f4f6f8;                /* 原 #ecf0f1，略微提亮、去掉灰绿调 */

  /* ---- 补齐：原文件中被引用但未定义的变量 ---- */
  --border-radius:6px;
  --page-width:1200px;
  --page-margin:20px;
}

/* --------------------------------------------------------------------------
   [2] 标题改用近黑 —— 把强调色让给交互元素
   深色容器内的标题单独保持浅色，避免改成黑字后压在深底上看不见。
   -------------------------------------------------------------------------- */
h2,
.map-section h2,
.feature-content h4,
.application-card h3,
.product-info h3,
.product-info h3 a,
.news-content h3,
.news-content h3 a,
.advantage-card h3,
.cert-item h4,
.why-card h3,
.global-stat h3,
.contact-info h3,
.contact-detail h4,
.location-info h3{
  color:var(--heading);
}

.hero h1,.hero h2,.hero h3,.hero h4,.hero h5,.hero h6,
.footer h1,.footer h2,.footer h3,.footer h4,.footer h5,.footer h6,
.top-bar h1,.top-bar h2,.top-bar h3,.top-bar h4{
  color:var(--white);
}

/* 卡片标题是链接时，hover 仍给出蓝色反馈 */
.product-info h3 a:hover,
.news-content h3 a:hover{
  color:var(--primary);
}

/* --------------------------------------------------------------------------
   [4] 主按钮 hover：去掉与蓝色体系无关的橙色
   注意：不能沿用 --secondary（#1f6ba5），因为按钮底色就是它，
         两者相同会导致悬停没有任何可见反馈。这里用更深一档。
   -------------------------------------------------------------------------- */
.btn:hover{
  background-color:#17527d;
}

/* --------------------------------------------------------------------------
   [6] 必须的配套修复：深色页脚内的文字
   原因：全局 p{color:var(--gray)} 会被页脚继承。--gray 从 #95a5a6 调深到
         #4a5561 后，页脚灰字压在深底上只有 2.37:1（原本 6.1:1），几乎读不出。
   这里为深色页脚单独指定浅色文字，并顺带修掉页脚链接使用浏览器默认蓝
   （rgb(0,0,238)，在两种版本里对比度都只有 1.92:1）的既有问题。
   -------------------------------------------------------------------------- */
.footer p,
.footer .footer_email,
.footer .footer-content p,
.footer .footer-col p{
  color:#9fb0c0;              /* 压 #0f1720 → 8.11:1 */
}

.footer a{
  color:#7fb3d9;              /* 压 #0f1720 → 8.03:1 */
}

.footer a:hover{
  color:#ffffff;
}


/* ==========================================================================
   NAV DROPDOWN GAP FIX
   2026-10-07  |  bess + energy 两个站通用
   ==========================================================================
   修复：移动端展开汉堡菜单后，菜单面板与页头之间出现一条空隙，
   中间露出 Hero 背景（看起来像渲染错误）。

   原因：原始 CSS 在 @media (max-width:768px) 里写的是
           .main-nav{ position:absolute; top:140px; ... }
        但 `header`（header.top-header）**从未设置 position**，是 static，
        因此 .main-nav 的定位基准是「初始包含块」（整个页面），
        top:140px 就是从页面顶端往下 140px 的固定位置。

        而页头实际高度随「顶部工具条」开关而变：
           bess   topbarEnable=true   → 顶栏 33px + 页头 84px = 117px
           energy topbarEnable=false  → 无顶栏，            84px

        于是菜单面板顶边与页头底边之间：
           bess   140 - 117 = 23px 空隙
           energy 140 -  84 = 56px 空隙（实测确认，截图可见深色带）

        即 140px 这个硬编码值与任何一个站的实际页头高度都不吻合，
        而且顶栏一开关就会错位。

   修复：把页头设为定位基准，让菜单贴着页头下沿，不再依赖硬编码高度。
           header.top-header{ position:relative; }
           .main-nav{ top:100%; }
        top:100% = 页头高度的 100%，所以无论顶栏开或关都紧贴下沿。

   为什么要把 header 的 position 限定在移动端：桌面端的 .main-nav 用
   display:flex 排在同一行，不依赖绝对定位；只在移动端加，可避免桌面端
   产生副作用（header 上原本有一条 z-index:1000，但因为是 static 而未生效，
   一旦设为 relative 就会激活——这也是只在移动端加的原因之一）。

   适用范围：两个站共用，本段内容一字不改地追加到两边 style.css 末尾。

   回退方式：删除本段全部内容即可。
   ========================================================================== */

@media (max-width:768px){

  /* 把页头变成 .main-nav 的定位基准 */
  header.top-header{
    position:relative;
  }

  /* 菜单面板紧贴页头下沿（100% = 页头高度，含顶栏与否都成立） */
  .main-nav{
    top:100%;
  }
}