/* ==========================================================================
   RUIBIT AQUARIUM — 优化补丁
   2026-10-07  |  https://ruibitaquarium.com  |  Ruibit Aquarium Theme
   ==========================================================================
   这是一个**独立文件**，不写进 style.css。

   为什么独立成文件：本机观察到 `assets/css/style.css` 的修改时间会在
   内容未变的情况下被重写（2026-10-07 16:36:20，md5 与线上一致），说明
   有一套未知机制会重写主题的 CSS 文件。独立文件在该机制的认知之外，
   且本文件在 head.hbs 中排在 style.css 之后加载，靠源码顺序覆盖同特异度
   规则。（这套做法已在 ruibitbess / ruibitenergy 上实测有效。）

   回退方式：删除本文件，并移除 head.hbs 里对应的那一行 <link>。
   ========================================================================== */


/* ==========================================================================
   A. 补上 3 个「被引用但从未定义」的 CSS 变量
   --------------------------------------------------------------------------
   原主题里这三个变量只被引用、没有定义，导致对应属性失效：
     .gallery__item a                  border-radius: var(--border-radius)  → 失效
     .gallery__item a::after           border-radius: var(--border-radius)  → 失效
     .gallery-wrapper--wide .gallery   max-width: var(--page-width)         → 失效
     .gallery-wrapper--wide .gallery   padding: var(--page-margin)          → 失效
   取值与站点既有语言一致（全站圆角 4–6px、内容宽 1200px）。
   注意：这会让文章相册恢复圆角与宽度限制，属于轻微视觉变化；
        不想要就删掉本节 5 行。
   ========================================================================== */
:root{
  --border-radius:6px;
  --page-width:1200px;
  --page-margin:0 20px;
}


/* ==========================================================================
   B. 正文字色对比度：3.35:1 → 5.40:1
   --------------------------------------------------------------------------
   --gray: #78909c（Material Blue Grey 400）压白只有 3.35:1，不达 WCAG AA 的 4.5:1。
   该令牌被当作 color 用了 11 处，含裸 p、.product-info a、.product-card-desc、
   .cert-item p、.info-row p、.map-intro 等，也就是**几乎所有正文**。

   改为 #546e7a（Material Blue Grey 600）——**同一色相家族、深两档**，
   视觉上仍是那支偏冷的灰，把改动降到最小。实测：
     #78909c  白 3.35  浅灰#f5f7fa 3.17  浅蓝#e3f2fd 2.93   ← 全部不达标
     #546e7a  白 5.40  浅灰#f5f7fa 5.10  浅蓝#e3f2fd 4.73   ← 全部达标

   站内实际用到的浅色底：#f5f7fa（.news-section / .certifications /
   .global-presence / .map-section）、--light #e3f2fd（.why-card:hover）、白。
   ========================================================================== */
:root{
  --gray:#546e7a;
}


/* ==========================================================================
   B2. 修掉上面这条改动带出的连带问题：页脚版权行
   --------------------------------------------------------------------------
   根因：原主题有一条裸选择器 `p{ color:var(--gray) }`。
        页脚版权行是 `<div class="copyright"><p>…</p></div>`，
        `.copyright` 虽然设了 color:#d0d7e0，但那作用在外层 div 上；
        内层 <p> 自己命中裸 `p` 规则、拿到了直接的 color 声明，
        **直接声明优先于继承**，所以版权行的 <p> 实际取的是 --gray。

        于是它压在深蓝页脚 #0d47a1 上：
          改前 #78909c → 2.58:1 ❌（这本来就是既有缺陷）
          改后 #546e7a → 1.60:1 ❌（我把它变得更明显了，必须一并修）

        注意 `.footer-col p` 有自己的规则（color:#d0d7e0），所以只有
        .footer-col 之外的段落受影响，实测就是版权行这一处。

   修法：用 `footer p`（特异度 0,0,2）盖过裸 `p`（0,0,1），并显式覆盖版权行。
        #d0d7e0 压 #0d47a1 = 5.95:1 ✅，也正是 .copyright 原本想表达的颜色。
   ========================================================================== */
footer p,
.copyright p{
  color:#d0d7e0;
}


/* ==========================================================================
   C. 橙色当作「文字色」的地方 → 换深一档（橙色【底】一律不变）
   --------------------------------------------------------------------------
   原始 CSS 里把 --secondary 当 color 用的规则共 13 条，其中真正的**文字**是 5 处。
   本补丁改其中 4 处，另外 1 处（.btn-outline）**刻意不改**，原因见下。

   为什么不直接改 --secondary：它同时被用作 .btn / .nav-cta>a / .news-date /
   .btn-view-all:hover / h2:after / .footer-col h3:after 等元素的
   background-color，改它会把橙色底一并改掉。所以新增独立令牌。

   ── 改（4 处）────────────────────────────────────────────────────
     .stat-number     底色 .stats = 白          #ff6f00 2.79:1 → #c2410c 5.18:1 ✅
     .news-category   底色 .news-section        2.64:1 → 4.89:1 ✅
                      = #f5f7fa
     .read-more       同 .news-section          2.64:1 → 4.89:1 ✅
     （内部 <i> 箭头无自身 color，随父级一起变深）

   ── 页脚链接 hover 反而要【更浅】的橙 ────────────────────────────
     .footer-col a:hover 的底色是 footer{background:var(--footer-bg-color)}
     = #0d47a1（深蓝），所以这里的橙色需要更亮而不是更深：
       #ff6f00 压深蓝 = 3.09:1 ❌   #c2410c 压深蓝 = 1.67:1 ❌（更深反而更差）
       #ffb74d 压深蓝 = 4.99:1 ✅

   ── 刻意不改：.btn-outline（hero 里的 "Request Factory Quote"）─────
     它 background-color:transparent，压在 .hero 的
     `linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), url(照片)` 上。
     按白底算出的 2.79:1 是**错的**——真实底色是 70% 变暗的照片：
       #ff6f00 压 #1a1a1a ≈ 6.1:1 ✅   压 #333 ≈ 4.5:1 ✅
       #c2410c 压 #1a1a1a ≈ 3.3:1 ❌（改深反而更差）
     结论：**这一处保持原样**，理由与实测数据同上。

   ── 同样刻意不改：橙色【底】+ 白字 ────────────────────────────────
     .btn（白字压 #ff6f00 = 2.79:1）、.nav-cta>a、.news-date、
     .btn-view-all:hover、.btn-outline:hover 都属这一类。
     它们不是"橙色文字"，而是"橙底白字"，不在本次「只把橙色文字改深」的范围内，
     需要另作决定（把文字改深色即可，橙色底不动）。
   ========================================================================== */
:root{
  --orange-text:#c2410c;
}

.stat-number,
.news-category,
.read-more{
  color:var(--orange-text);
}

.footer-col a:hover{
  color:#ffb74d;
}


/* ==========================================================================
   D. 移动端修复（≤768px）
   --------------------------------------------------------------------------
   与 ruibitbess / ruibitenergy 同源同族主题，缺陷完全一致，本节的修法在那两站
   上已验证过。逐条对应的原始规则见各小节注释。
   ========================================================================== */
@media (max-width:768px){

  /* ── D1 顶栏：恢复文字，压缩间距 ───────────────────────────────────
     原始规则：.top-bar-item .text{display:none} + .top-bar-item i{font-size:20px}
               .top-bar-container{gap:40px}
     后果：四个入口的文字全被隐藏，只剩图标，表达不出内容。 */
  .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;
  }

  /* ── D2 悬浮联系栏 → 贴底横向栏 ───────────────────────────────────
     原始规则：.contact-sidebar{position:fixed;right:0;top:50%;transform:translateY(-50%)}
               .sidebar-content{width:70px}（1200/480 断点递减到 60px / 55px）
     后果：窄屏下这个竖条会压住正文。
     底部栏底色用主题自己的 --nav-mob-bg-color (#1565c0)，
     不用 --nav-bg-color（那是 #e3f2fd 极浅蓝，做底栏会与白色内容糊在一起）。 */
  .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-mob-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%;
  }
  /* 图标尺寸沿用主题自己的响应式档位（768px→45px，480px→40px），此处不覆盖 */
  .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 + 45 + 6 = 57px，给页面留出等量空间；返回顶部按钮上移让位 */
  body{
    padding-bottom:58px;
  }
  .back-to-top-btn{
    bottom:70px;
    right:14px;
    width:42px;
    height:42px;
  }

  /* ── D3 Hero 背景：消除离屏与上下空带 ─────────────────────────────
     原始规则（仅移动端查询内覆写了基础值）：
       .hero-custom-bg{background-size:100% auto!important;...}
     后果：图片按宽缩放后高度不足，又禁止平铺，标题上下露出空白/深色带。 */
  .hero-custom-bg{
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
  }

  /* ── D5 移动端下拉菜单与页头对齐 ───────────────────────────────────
     原始规则：.main-nav{position:absolute;top:140px;...}
     但 header.top-header 从未设置 position（static），所以 .main-nav 的定位基准
     是**整个页面**，top:140px 是距页面顶端的固定值，与页头实际高度无关。

     实测（viewport 390）：页头实际高度 142.4px，而硬编码是 140px，
     于是菜单顶边 **压进页头 2.4px**；顶栏开关会改变页头高度，这个错位也就跟着变。
     修法：把页头设为定位基准，top:100% = 页头高度的 100%，与硬编码值解耦。
     实测修复后空隙 = 0 ✓

     注意 header 上有一条 z-index:1000，因为原本是 static 而未生效；
     设为 relative 会激活它，所以本节只在移动端生效。 */
  header.top-header{
    position:relative;
  }
  .main-nav{
    top:100%;
  }
}

/* ── D4 Hero 标题字号：让移动端字号真正生效 ──────────────────────────
   原始规则：.hero h1{font-size:2.5rem}（特异度 0,1,1）比
             @media(max-width:576px){h1{...}}（0,0,1）高，所以后者永不生效，
             手机上标题一直是 40px，折行过多。 */
@media (max-width:576px){
  .hero h1{
    font-size:2rem;
  }
}

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

/* ── 极窄屏：顶栏去掉最后一项，避免挤成一团 ─────────────────────── */
@media (max-width:380px){
  .top-bar-item:last-child{
    display:none;
  }
}