/* ============================================================================
   Helian LED · 导航面板（Mega Menu）样式
   ----------------------------------------------------------------------------
   放哪：子主题  assets/hl-mega-menu.css
   谁加载：B4 第 9.5 节（全站 enqueue，外链，桌面包 (min-width:1025px)）
   改完：直接替换这个文件即可 —— B4 用 ?m=<文件修改时间> 破缓存，不用改版本号。
   作用：只覆盖桌面端「LED Profiles」Mega 面板；移动端手风琴完全不受影响
         （所有规则都在 @media (min-width:1025px) 里）。
   实现：15 个条目图标走内联 SVG + mask（background-color: currentColor），
         零图片请求、自动跟随文字色。
   ============================================================================ */

/* ============================================================================
   LED Profiles 下拉面板（Mega Menu）· 重新设计
   生成于 2026-09-30 · Helian LED (hlled.com)
   ----------------------------------------------------------------------------
   放哪里（二选一）：
     ① 外观 → 自定义 → 额外 CSS          ← 推荐（不动主题文件）
     ② 子主题 Kadence Child / style.css 末尾
   生效范围：仅桌面（≥1025px）的「LED Profiles」下拉。
   移动端用的是手风琴，本文件全部规则都已用媒体查询隔离，不会影响它。

   要换配色，只改下面 --hl-* 那几个变量即可（浅色方案见文件末尾）。
   ============================================================================ */

@media (min-width: 1025px) {

  /* ── 0 · 设计变量（改这里） ─────────────────────────────────────────── */
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled {
    --hl-panel-w: 864px;                                  /* 面板宽度（原来占满屏 1392px） */
    --hl-panel-pad: 34px 36px 30px;                       /* 内边距（原来是 0，内容贴边） */
    --hl-panel-bg: #222222;                               /* 面板底色 */
    --hl-panel-radius: 0 0 12px 12px;                     /* 下方圆角（原来是直角） */
    --hl-panel-shadow: 0 26px 64px -14px rgba(0, 0, 0, .62),
                       0 2px 10px rgba(0, 0, 0, .28);
    --hl-col-gap: 34px;                                   /* 列间距 */
    --hl-divider: rgba(255, 255, 255, .09);               /* 分隔线 */
    --hl-colhead: rgba(255, 255, 255, .54);               /* 列标题（对比度 5.0:1） */
    --hl-item: rgba(255, 255, 255, .88);                  /* 条目文字 */
    --hl-item-hover: #ffffff;
    --hl-accent: #5AA2FF;                                 /* 强调色 = 品牌蓝 #2B6CB0 的亮化版 */
    --hl-ms: .2s cubic-bezier(.16, 1, .3, 1);
  }

  /* ── 1 · 定位：让面板左边缘对齐「LED Profiles」这一项 ───────────────── */
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled {
    position: relative !important;
  }
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }

  /* ── 2 · 面板本体 ───────────────────────────────────────────────────── */
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu {
    width: var(--hl-panel-w) !important;
    padding: var(--hl-panel-pad) !important;
    background: var(--hl-panel-bg) !important;
    border-radius: var(--hl-panel-radius) !important;
    box-shadow: var(--hl-panel-shadow) !important;
    column-gap: var(--hl-col-gap) !important;
    row-gap: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* ── 3 · 三列：列间竖线分隔，第一列不加 ─────────────────────────────── */
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li {
    padding-left: 22px !important;
    border-left: 1px solid var(--hl-divider) !important;
  }
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li:first-child {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  /* ── 4 · 列标题：11px 大写 + 0.15em 字距 + 半透明，明显弱于条目 ─────── */
  /*    原来列标题和条目都是 12px/700 白色，看不出谁是组名。 */
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li.menu-item-has-children > a {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    color: var(--hl-colhead) !important;
    border-bottom: 1px solid var(--hl-divider) !important;
    padding: 0 0 11px !important;
    margin-bottom: 6px !important;
    width: auto !important;
    cursor: default;
    pointer-events: none;          /* 列标题是 "#" 占位链接，不让它吃掉点击 */
  }

  /* 🔴 上面这条必须限定 li.menu-item-has-children —— 它是「列标题」专用规则，带
     pointer-events: none（列标题是 href="#" 的占位项，不能吃点击）。
     若写成一刀切的 `> li > a`，同一层的非列标题项（如底部 CTA li.hl-mega-all）会被
     一起禁掉点击 → 按钮看起来正常却点不动。2026-09-30 实测踩过：
     CTA 的 computed pointer-events 变成 none、可点率 0%（1716 个采样点全被 LI 拦下）。 */

  /* ── 5 · 条目：13.5px 常规字重，去掉逐条分隔线（原来每条都有，像表格） ─ */
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: var(--hl-item) !important;
    border-bottom: 0 !important;
    padding: 8px 0 8px 11px !important;
    transition: color .16s ease, transform .16s ease;
  }

  /* hover：文字变亮 + 左侧 2px 强调色竖条 + 右移 2px */
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 15px;
    margin-top: -7.5px;
    border-radius: 1px;
    background: var(--hl-accent);
    transform: scaleY(0);
    transition: transform var(--hl-ms);
  }
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a:focus-visible {
    color: var(--hl-item-hover) !important;
    transform: translateX(2px);
  }
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a:hover::before,
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a:focus-visible::before {
    transform: scaleY(1);
  }

  /* ── 6 · 键盘可达 ───────────────────────────────────────────────────── */
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a:focus-visible {
    outline: 2px solid var(--hl-accent);
    outline-offset: 2px;
    border-radius: 3px;
  }

  /* ── 6.5 · 目录页入口（醒目横条，跨三列） ───────────────────────────────
     menu item id 25041 · class = hl-mega-all · 指向 /led-profiles/ 目录页（220 款全量 + 筛选器）。
     它是 ul.sub-menu 的第 4 个直接子项 → 默认会掉到第二行第 1 列，
     所以必须 grid-column: 1 / -1 让它横跨三列。
     改文案：后台 外观→菜单→Menu 2026→改这一项的「导航标签」即可，不用动 CSS。 */
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li.hl-mega-all {
    grid-column: 1 / -1 !important;
    margin-top: 22px !important;
    padding: 20px 0 0 !important;
    border-top: 1px solid var(--hl-divider) !important;
    border-left: 0 !important;
  }
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li.hl-mega-all > a {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 9px !important;
    cursor: pointer;
    pointer-events: auto !important;   /* 双保险：万一列标题那条规则又变宽 */
    transition: background .18s ease, border-color .18s ease;
  }
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li.hl-mega-all > a::after {
    content: "\2192";              /* → */
    margin-left: auto;             /* 靠这个把箭头顶到最右（比 justify-content 可靠） */
    padding-left: 20px;
    font-size: 16px;
    line-height: 1;
    color: var(--hl-accent);
    transition: transform var(--hl-ms);
  }
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li.hl-mega-all > a:hover,
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li.hl-mega-all > a:focus-visible {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(90, 162, 255, .55) !important;
  }
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li.hl-mega-all > a:hover::after,
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li.hl-mega-all > a:focus-visible::after {
    transform: translateX(4px);
  }

  /* ── 8 · 条目图标（15 个 · 内联 SVG + mask · 零图片请求） ────────────────
     原理：SVG 当遮罩，颜色由 background-color: currentColor 提供 → 图标自动跟随文字色，
     hover 变亮时一起变。默认 55% 不透明度，避免抢文字。
     ⚠️ data URI 里的 # 必须编码成 %23，否则 # 之后的 SVG 会被当 fragment 截断（踩过）。
     ⚠️ mask 用长属性分开写，不要用 mask 简写 + var()（Chrome 解析不出来，踩过）。
     换图标：改对应 .menu-item-XXXXX 那行的 path 数据（20x20 viewBox，1.5px 描边）。 */
.header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a {
    display: flex !important;
    align-items: center;
  }
.header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a::after {
    content: "";
    order: -1;                 /* 图标排到文字前面 */
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    background-color: currentColor;
    opacity: .55;
    -webkit-mask-image: var(--hl-ico);
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--hl-ico);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    transition: opacity .16s ease;
  }
.header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a:hover::after,
.header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a:focus-visible::after { opacity: 1; }

  /* Suspended */
  .menu-item-19774 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 3.5h14%22/%3E%3Cpath d=%22M10 3.5v6%22/%3E%3Crect x=%225%22 y=%229.5%22 width=%2210%22 height=%224%22 rx=%221%22/%3E%3C/svg%3E"); }
  /* Recessed */
  .menu-item-19776 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M2 6h16%22/%3E%3Cpath d=%22M5 6v6h10V6%22/%3E%3Cpath d=%22M8 15h4%22/%3E%3C/svg%3E"); }
  /* Surface */
  .menu-item-19780 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M2 14.5h16%22/%3E%3Crect x=%225%22 y=%226.5%22 width=%2210%22 height=%225%22 rx=%221%22/%3E%3C/svg%3E"); }
  /* Corner */
  .menu-item-24321 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M5 3v9a3 3 0 0 0 3 3h9%22/%3E%3C/svg%3E"); }
  /* Ceiling & Cove */
  .menu-item-25030 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M2 9.5L10 3l8 6.5%22/%3E%3Cpath d=%22M5.5 9.5v6h9v-6%22/%3E%3Cpath d=%22M7 12.5h6%22/%3E%3C/svg%3E"); }
  /* Wall */
  .menu-item-25031 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%225.5%22 y=%222.5%22 width=%229%22 height=%2215%22 rx=%221%22/%3E%3Cpath d=%22M8.5 6v7%22/%3E%3C/svg%3E"); }
  /* Under Cabinet */
  .menu-item-25032 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%223%22 y=%223.5%22 width=%2214%22 height=%227%22 rx=%221%22/%3E%3Cpath d=%22M7 14.5h6%22/%3E%3C/svg%3E"); }
  /* Floor & Stair */
  .menu-item-25033 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 17h4v-4h4V9h4V5h2%22/%3E%3C/svg%3E"); }
  /* Waterproof */
  .menu-item-25034 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M10 3.5S15 9 15 12a5 5 0 0 1-10 0c0-3 5-8.5 5-8.5z%22/%3E%3C/svg%3E"); }
  /* Black Anodized */
  .menu-item-25035 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%225.5%22 fill=%22%23000%22 stroke=%22none%22/%3E%3C/svg%3E"); }
  /* Mini */
  .menu-item-25036 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 3h3M3 3v3M17 3h-3M17 3v3M3 17h3M3 17v-3M17 17h-3M17 17v-3%22/%3E%3Crect x=%227%22 y=%227%22 width=%226%22 height=%226%22 rx=%221%22/%3E%3C/svg%3E"); }
  /* Lens */
  .menu-item-25037 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M7.5 4.5c2.5 2.2 2.5 8.8 0 11M12.5 4.5c-2.5 2.2-2.5 8.8 0 11%22/%3E%3C/svg%3E"); }
  /* Dual-Emitting */
  .menu-item-25038 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M10 4v12%22/%3E%3Cpath d=%22M6.5 7.5L10 4l3.5 3.5%22/%3E%3Cpath d=%22M6.5 12.5L10 16l3.5-3.5%22/%3E%3C/svg%3E"); }
  /* Flexible */
  .menu-item-25039 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 12.5c2.5 0 2.5-5 5-5s2.5 5 5 5 4-2.5 4-5%22/%3E%3C/svg%3E"); }
  /* Ultra Slim */
  .menu-item-25040 > a { --hl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 5.5h14M3 14.5h14%22/%3E%3Cpath d=%22M6 10h8%22/%3E%3C/svg%3E"); }

  /* ── 7 · 动效降级 ───────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > a,
    .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a,
    .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > ul.sub-menu > li > a::before {
      transition: none !important;
      transform: none !important;
    }
  }
}

/* ============================================================================
   备选配色 · 浅色通透版
   把你的面板改成白底。若要用，把上面第 0 节的这几个变量替换为：
     --hl-panel-bg: #FFFFFF;
     --hl-panel-radius: 0 0 12px 12px;
     --hl-panel-shadow: 0 26px 64px -16px rgba(20,20,18,.24), 0 2px 8px rgba(20,20,18,.07);
     --hl-divider: rgba(0, 0, 0, .09);
     --hl-colhead: #6E6E68;
     --hl-item: #2C2C2C;
     --hl-item-hover: #2B6CB0;
     --hl-accent: #2B6CB0;
   并且给面板补一条上边框把它们和导航条分开：
     .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu {
       border: 1px solid rgba(0,0,0,.09) !important; border-top: 0 !important;
     }
   ============================================================================ */