/* ==========================================================================
   CHINA TOP CABLE — 深色页头 "Industrial"（批次 B，独立文件便于单独回滚）
   --------------------------------------------------------------------------
   回滚：functions.php 里注释 ctc-header-dark 的 enqueue 两行；
        并把 porto_settings['logo'] 换回 ctc-logo-light.svg（配浅色页头）
   依赖：logo 必须同步换成深底版 ctc-logo-dark.svg（白字），否则深底上看不见
   --------------------------------------------------------------------------
   选择器依据：Porto 实际输出（内联 style）里的
     #header .main-menu > li.menu-item > a{...color:#1668ff...}
     #header .main-menu > li.menu-item:hover > a{background-color:#1668ff;color:#fff}
   故同选择器 + !important 覆盖
   ========================================================================== */

/* --- 1. 页头底色：白 → 深钢灰，底部 3px 橙指示线 ---
   ⚠️ 关键：Porto 的 header-bg-gradient = 1，页头背景是「渐变(background-image)」驱动，
      只改 background-color 会被白色渐变盖住（computed style 显示已生效、视觉仍是白色）。
      必须同时 background-image:none，否则改了等于没改。 */
#header,
#header .header-main,
#header.header-builder .header-main,
#header .header-wrapper,
#header.sticky-header,
#header.sticky-header .header-main {
  background-color: #1a1e23 !important;
  background-image: none !important;
}
#header { border-bottom: 3px solid #ff6a13 !important; }

/* --- 2. 顶层菜单项 --- */
#header .main-menu > li.menu-item > a { color: #e8ebee !important; }

#header .main-menu > li.menu-item.active > a,
#header .main-menu > li.menu-item:hover > a,
#header .main-menu > li.menu-item.active:hover > a {
  background-color: #ff6a13 !important;
  color: #1a1e23 !important;   /* 橙底配深字：5.99:1 */
}

/* 有子菜单的三角指示器跟着变色 */
#header .main-menu > li.has-sub:before,
#header .main-menu > li.has-sub:after { border-bottom-color: #ff6a13 !important; }

/* --- 3. 下拉 / mega menu：橙顶线保持，卡片化（近直角 + 工业阴影） --- */
#header .main-menu .narrow ul.sub-menu,
#header .main-menu .wide .popup {
  border-top: 3px solid #ff6a13 !important;
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(21,24,29,.22) !important;
}
/* 下拉里的一级项：hover 用浅橙底而不是蓝 */
#header .main-menu .popup ul.sub-menu > li > a:hover,
#header .main-menu .popup ul.sub-menu > li.current-menu-item > a {
  color: #c74a00 !important;
  background-color: #fff1e8 !important;
}

/* --- 4. 搜索 / 迷你购物车 / 汉堡 --- */
#header .search-toggle { color: #e8ebee !important; }
#header .search-toggle:hover { color: #ff6a13 !important; }
#header .cart-head { color: #e8ebee !important; }
#mini-cart .cart-items,
#mini-cart .cart-items-text { color: #ff6a13 !important; }
#mini-cart .cart-icon:after,
#mini-cart.minicart-text .cart-head:after { border-color: #ff6a13 !important; }
#mini-cart .cart-popup { border-radius: 3px; }

#header .mobile-toggle {
  background-color: #ff6a13 !important;
  color: #1a1e23 !important;   /* 原为白字蓝底，改深字橙底 */
  border-radius: 3px;
}

/* --- 5. sticky 态保持深色 --- */
#header.sticky-header .main-menu > li.menu-item > a { color: #e8ebee !important; }
#header.sticky-header .main-menu > li.menu-item:hover > a,
#header.sticky-header .main-menu > li.menu-item.active > a {
  background-color: #ff6a13 !important;
  color: #1a1e23 !important;
}

/* --- 6. 搜索框（深底上的输入框） --- */
#header .searchform input {
  background-color: #2b3138 !important;
  color: #e8ebee !important;
}
#header .searchform input::placeholder { color: #9aa3ad !important; }
#header .searchform { border-color: #3d444e !important; }

/* --- 7. 页头与内容衔接：深底下方若紧跟白块，加一条硬边 --- */
#header + .page-wrapper,
#header + #main { border-top: 0 !important; }

/* --- 8. Mega menu 布局修复（2026-09-28）---
   问题：Porto 的 .porto-wide-sub-menu 是 display:flex + 换行，13 个产品族每个 273px，
        行高由「该行最胖的组」决定。Audio & Video cable(19 行) / USB Cables(19 行) 各自
        把所在行抬到 ~650px，4 行相加 → popup 实测 1719px，远超视口，鼠标一移开就消失，
        底部根本够不到。属批次 D（narrow→wide col-4）引入的设计缺陷。
   修法：换成 CSS 多列流式布局 + 组内不断页（break-inside:avoid），让 13 个族均衡
        落进 4 列；再用 max-height 兜底，保证任何视口下都不超出。 */
#header .main-menu .wide .popup > .inner > ul.porto-wide-sub-menu {
  display: block !important;
  flex-wrap: nowrap !important;
  column-count: 4 !important;
  column-gap: 26px !important;
}
#header .main-menu .wide .popup > .inner > ul.porto-wide-sub-menu > li.menu-item {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* 组标题：深字 + 底部橙线，和工业风一致 */
#header .main-menu .wide .popup > .inner > ul.porto-wide-sub-menu > li.menu-item > a {
  color: #1a1e23 !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #ff6a13 !important;
  padding: 0 0 6px 0 !important;
  margin: 0 0 8px 0 !important;
  display: block !important;
}
/* 兜底：永远不超视口，超出改为面板内滚动 */
#header .main-menu .wide .popup > .inner {
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#header .main-menu .wide .popup > .inner::-webkit-scrollbar { width: 8px; }
#header .main-menu .wide .popup > .inner::-webkit-scrollbar-thumb { background: #c3c9d1; border-radius: 0; }
#header .main-menu .wide .popup > .inner::-webkit-scrollbar-track { background: #f1f3f5; }

/* --- 9. Mega menu 行距收紧（2026-09-28）---
   Porto 默认每行约 37px，82 行内容摊进 4 列后仍是 1126px 高（可视仅 772px）→ 被迫内部滚动。
   收紧到每行 ~23px 后可整屏放下，滚动条只在极端小视口才出现。 */
#header .main-menu .wide .popup .inner ul.sub-menu li > a {
  padding: 3px 0 !important;
  line-height: 1.35 !important;
  display: block !important;
}
#header .main-menu .wide .popup .inner ul.sub-menu li {
  margin: 0 !important;
}
/* 组标题保持略松，作为视觉分隔 */
#header .main-menu .wide .popup > .inner > ul.porto-wide-sub-menu > li.menu-item > a {
  padding: 0 0 6px 0 !important;
  line-height: 1.25 !important;
  font-size: 13px !important;
}
/* 二级缩进保持（Guitar Cable 那层） */
#header .main-menu .wide .popup .inner ul.sub-menu ul.sub-menu { padding-left: 10px !important; }