/* =========================
 * File: /wp-content/plugins/cc-mega-menu-dd/assets/ccmm.css
 * 更新：支持可调间距/宽度，对齐模式（左/居中/全宽），更稳的悬停桥接。
 * ========================= */

/* ---- 基础变量（按需改值） ---- */
.ccmm{
  position: relative;
  --ccmm-gap: 10px;                 /* 按钮与下拉的垂直间距 */
  --ccmm-min-width: 720px;          /* 下拉最小宽 */
  --ccmm-max-width: 1200px;         /* 下拉最大宽（与参考站一致） */
  --ccmm-left-width: 260px;         /* 左列宽度 */
  --ccmm-radius: .6rem;             /* 圆角 */
  --ccmm-shadow: 0 18px 60px rgba(0,0,0,.15);
  --ccmm-border: 1px solid rgba(0,0,0,.08);
}

/* 触发按钮（保持不变，仅略微清理） */
.ccmm-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;border-radius:999px;background:#e53935;color:#fff;
  border:1px solid rgba(0,0,0,.08);cursor:pointer;font-weight:600
}
.ccmm-btn .ccmm-caret{opacity:.9;transform:translateY(1px)}
.ccmm:hover .ccmm-btn{filter:saturate(110%)}

/* ---- 下拉容器：默认靠左对齐，宽度自适应（clamp） ---- */
.ccmm-drop{
  position:absolute;left:0;top:calc(100% + var(--ccmm-gap));
  display:none;
  width: clamp(var(--ccmm-min-width), 92vw, var(--ccmm-max-width));
  background:#fff;border:var(--ccmm-border);box-shadow:var(--ccmm-shadow);
  border-radius:var(--ccmm-radius);z-index:999;
}
.ccmm.is-open .ccmm-drop{ display:block; }

/* 透明桥接层：鼠标穿过间距时不触发关闭 */
.ccmm.is-open::after{
  content:"";position:absolute;left:0;right:0;top:100%;
  height:var(--ccmm-gap);background:transparent;z-index:998;
}

/* ---- 对齐模式（可选）：给根容器加类名启用 ---- */
/* 居中对齐：把下拉水平居中在按钮下方 */
.ccmm.ccmm--center .ccmm-drop{
  left:50%;transform:translateX(-50%);
}
/* 全宽（within viewport）：左右贴近视口，适合复杂 Mega */
.ccmm.ccmm--full .ccmm-drop{
  left:50%;transform:translateX(-50%);
  width: min(96vw, var(--ccmm-max-width)); /* 可把 max 提大如 1400px */
}

/* ---- 内部布局 ---- */
.ccmm-inner{display:flex;align-items:stretch}

/* 左列：类目列表 */
.ccmm-left{
  width:var(--ccmm-left-width);
  padding:1rem .75rem;border-right:1px solid rgba(0,0,0,.06);
  display:flex;flex-direction:column;gap:.25rem
}
.ccmm-left-item{
  display:flex;align-items:center;padding:.55rem .75rem;border-radius:.5rem;
  text-decoration:none;color:inherit;border:2px solid transparent
}
.ccmm-left-item:hover{background:rgba(0,0,0,.04)}
.ccmm-left-item.is-active{border-color:#1e88e5;background:rgba(30,136,229,.06)}

/* 右侧：联动面板 */
.ccmm-right{flex:1;min-width:0;padding:1.25rem}
.ccmm-panel{display:none}
.ccmm-panel.is-active{display:block}

/* 列数（由短代码 columns 控制；要竖排=columns="1" 并保证下方样式存在） */
.ccmm-grid{display:grid;gap:1.25rem 2rem}
.ccmm-grid.columns-1{grid-template-columns:1fr}
.ccmm-grid.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ccmm-grid.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ccmm-grid.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ccmm-grid.columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* 分组列 */
.ccmm-col{min-width:0}
.ccmm-heading{
  font-size:1rem;margin:0 0 .5rem;font-weight:700;
  border-bottom:1px solid rgba(0,0,0,.08);padding-bottom:.4rem
}
.ccmm-list{list-style:disc;margin:.25rem 0 0 1rem;padding:0;display:grid;gap:.25rem}
.ccmm-list a{text-decoration:none}

/* 可选右侧图片位 */
.ccmm-img{display:flex;align-items:flex-end;justify-content:flex-end}
.ccmm-img img{max-width:220px;height:auto;display:block}

/* 视觉弱化 */
.ccmm-empty{opacity:.6}

/* ---- 响应式 ---- */
@media (max-width: 1280px){
  .ccmm{ --ccmm-max-width: 1100px; }     /* 稍微收窄 */
}
@media (max-width: 1024px){
  .ccmm-drop{
    position:fixed;left:2%;right:2%;top:70px;transform:none !important;
    width:auto;max-width:none;border-radius:.8rem;
  }
  .ccmm-inner{flex-direction:column}
  .ccmm-left{
    width:auto;border-right:0;border-bottom:1px solid rgba(0,0,0,.06);
    flex-wrap:wrap;flex-direction:row;gap:.5rem
  }
  .ccmm-left-item{padding:.4rem .6rem}
}