/* LUMIÈRE Mega Menu — frontend
   Colors use Astra global CSS variables so the menu follows theme Customizer. */

/* ── Mega panel: full-width dropdown ── */
/* 让子菜单相对整个 header 定位（mega li 保持 static，继承定位祖先） */
.ast-builder-layout-element li.lumiere-mega { position: static; }

/* 子菜单宽面板：fixed 相对视口，1400px 屏幕居中（不依赖祖先定位）
   top 由 mega-menu.js 在 hover 时根据菜单项位置计算。
   注意：绝不能给 top 加 !important —— 它会盖过 JS 写入的内联 top，
   面板会落到静态位置、盖住 header。 */
.main-header-menu li.lumiere-mega > .sub-menu {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    z-index: 9900; /* 悬浮面板：高于页面内容（含 shop 的 Filter 按钮 z-index:100），低于促销弹框(9995) */
    transform: translateX(-50%) !important;
    width: min(var(--lumiere-mm-panel-width, 1400px), calc(100vw - 2rem)) !important;
    max-width: var(--lumiere-mm-panel-width, 1400px) !important;
    margin: 0 !important;
    padding: 2em 2.5em !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 1em 2.5em;
    background: var(--lumiere-mm-panel-bg, var(--ast-global-color-4, #fff));
    border: 1px solid var(--ast-border-color, #e9e4dd);
    border-top: 2px solid var(--lumiere-mm-accent, var(--lumiere-rose, #c9a087));
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    list-style: none;
}

/* 面板内的列 = 每个二级菜单项（面板图片格除外） */
.main-header-menu li.lumiere-mega > .sub-menu > li:not(.lumiere-mm-image) {
    flex: 1 1 0;
    min-width: 150px;
    max-width: var(--lumiere-mm-col-max, 260px); /* 单列宽度上限（插件设置页可调）：列不随面板宽度拉宽，避免过宽 */
    background: none !important;
    padding: var(--lumiere-mm-col-padding, 1em 1.2em) !important;
    border: var(--lumiere-mm-col-border, none);
}
/* 管理员选择的列数（PHP 输出 lumiere-mega-cols-N 类）：
   子项数量与列数不一致时，也按设定列宽排布 */
.main-header-menu li.lumiere-mega.lumiere-mega-cols-2 > .sub-menu > li:not(.lumiere-mm-image) {
    flex: 1 1 50%;
    min-width: 0;
}
.main-header-menu li.lumiere-mega.lumiere-mega-cols-4 > .sub-menu > li:not(.lumiere-mm-image) {
    flex: 1 1 25%;
    min-width: 0;
}
/* 面板顶部标题栏（面板模板里 Columns 之前的 Heading 块） */
.main-header-menu li.lumiere-mega > .sub-menu > li.lumiere-mm-header {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ast-global-color-0, #111);
    padding: 0 0 0.7em !important;
    margin-bottom: 0.8em;
    border: none; /* 列边框打开时也不给标题栏加框 */
    border-bottom: 1px solid var(--lumiere-border, #e9e4dd);
    background: none !important;
}
/* 手动设置的列宽（菜单编辑器"列宽"字段）：覆盖默认 260px 上限与列数均分 */
.main-header-menu li.lumiere-mega > .sub-menu > li.lumiere-mm-col-w {
    flex: 0 0 var(--lumiere-mm-col-width, 260px) !important;
    max-width: var(--lumiere-mm-col-width, 260px) !important;
    min-width: 0 !important;
}
/* 列分隔线（面板编辑器：点列 → 高级 → 附加CSS类）：只显示单侧边框 */
.main-header-menu li.lumiere-mega > .sub-menu > li.lumiere-mm-bl {
    border: none;
    border-left: 1px solid #999;
    padding: 1em 1.2em !important;
}
.main-header-menu li.lumiere-mega > .sub-menu > li.lumiere-mm-br {
    border: none;
    border-right: 1px solid #999;
    padding: 1em 1.2em !important;
}

/* 二级标题（"产品" 之类） */
.main-header-menu li.lumiere-mega > .sub-menu > li > a {
    display: block;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em; /* 与品牌手风琴标题一致 */
    color: var(--ast-global-color-0, #111);
    padding-bottom: 0.6em;
    margin-bottom: 0.4em;
    border-bottom: 1px solid var(--lumiere-border, #e9e4dd);
    transition: color 0.2s ease;
}
.main-header-menu li.lumiere-mega > .sub-menu > li > a:hover,
.main-header-menu li.lumiere-mega > .sub-menu > li > a:focus-visible {
    color: var(--lumiere-rose, #c9a087);
}

/* 三级子项 */
.main-header-menu li.lumiere-mega > .sub-menu > li > .sub-menu {
    position: static !important;
    left: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0 !important;
    margin: 0;
}
.main-header-menu li.lumiere-mega > .sub-menu > li > .sub-menu > li {
    margin: 0;
    padding: 0.3em 0 !important;
    background: none !important;
}
.main-header-menu li.lumiere-mega > .sub-menu > li > .sub-menu > li > a {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--ast-global-color-3, #4a4a4a);
    border: none;
    padding: 0.15em 0;
    margin: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}
.main-header-menu li.lumiere-mega > .sub-menu > li > .sub-menu > li > a:hover,
.main-header-menu li.lumiere-mega > .sub-menu > li > .sub-menu > li > a:focus-visible {
    color: var(--lumiere-rose, #c9a087);
    transform: translateX(4px);
}

/* 列内图片：随列宽显示，按自然比例（无高度上限） */
.main-header-menu li.lumiere-mega .lumiere-mm-image {
    margin-top: 0.8em;
}
.main-header-menu li.lumiere-mega .lumiere-mm-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* 面板横幅图片（面板模板顶层 / legacy 菜单项图片）：全宽 + 细线分隔 + 高度上限 */
.main-header-menu li.lumiere-mega .lumiere-mm-image-banner {
    flex: 1 1 100%;
    margin-top: 1.2em;
    padding-top: 1.2em;
    border-top: 1px solid var(--lumiere-border, #e9e4dd);
}
.main-header-menu li.lumiere-mega .lumiere-mm-image-banner img {
    max-height: var(--lumiere-mm-image-height, 200px); /* 面板图片高度上限（插件设置页可调） */
    object-fit: cover;
}
/* 手动设置的图片宽度（菜单编辑器"图片宽度"字段）：横幅按设定宽度居中，分隔线保持全宽 */
.main-header-menu li.lumiere-mega .lumiere-mm-image-banner.lumiere-mm-image-w img {
    width: var(--lumiere-mm-image-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ── 设备可见性（面板编辑器：点列/图片 → 右侧栏 Device visibility）── */
@media (max-width: 921px) {
    .main-header-menu li.lumiere-mega .lumiere-mm-desktop { display: none !important; }
}
@media (min-width: 922px) {
    .main-header-menu li.lumiere-mega .lumiere-mm-mobile { display: none !important; }
}

/* ── Mobile: accordion ── */
@media (max-width: 921px) {
    /* 还原为普通堆叠，面板内嵌套正常展开
       !important：压过桌面基础规则的 fixed/居中/宽度（否则面板在移动端仍是 fixed 覆盖层） */
    .main-header-menu li.lumiere-mega { position: relative; }
    .main-header-menu li.lumiere-mega > .sub-menu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0;
        padding: 0 0 0 1em !important;
        display: none !important;
        flex-direction: column;
        gap: 0;
        border: none;
        box-shadow: none;
    }
    /* 手风琴展开态 */
    .main-header-menu li.lumiere-mega.lumiere-mm-open > .sub-menu {
        display: block !important;
    }
    .main-header-menu li.lumiere-mega > .sub-menu > li { min-width: 0; border: none; padding: 0 !important; }
    /* 移动端手风琴里不显示列分隔线 */
    .main-header-menu li.lumiere-mega > .sub-menu > li.lumiere-mm-bl,
    .main-header-menu li.lumiere-mega > .sub-menu > li.lumiere-mm-br {
        border: none;
        padding: 0 !important;
    }
    .main-header-menu li.lumiere-mega > .sub-menu > li > .sub-menu {
        display: block !important;
        padding-left: 1em !important;
    }
    .main-header-menu li.lumiere-mega .lumiere-mm-image { display: none; } /* 移动端隐藏大图 */

    /* 移动端手风琴 2/3 级间距收紧（off-canvas / full-screen 弹层适配）：
       桌面版的大边距/行距不适用于窄屏抽屉 */
    .main-header-menu li.lumiere-mega > .sub-menu > li > a {
        padding-bottom: 0.25em;
        margin-bottom: 0.1em;
        font-size: 0.78rem;
        letter-spacing: 0.08em;
    }
    .main-header-menu li.lumiere-mega > .sub-menu > li > .sub-menu > li {
        padding: 0.15em 0 !important;
    }
    .main-header-menu li.lumiere-mega > .sub-menu > li > .sub-menu > li > a {
        line-height: 1.35;
        padding: 0.1em 0;
    }
}

/* 超菜单项上的移动端折叠箭头 */
@media (max-width: 921px) {
    /* 隐藏 Astra 自带的 toggle 按钮（超菜单项用手风琴 +/− 代替，避免双箭头） */
    .main-header-menu li.lumiere-mega > .ast-menu-toggle { display: none !important; }
    .main-header-menu li.lumiere-mega > .menu-link {
        display: flex !important; /* 压过任何外部 display 覆盖 */
        align-items: center;
        justify-content: space-between; /* 左：菜单名；右：图标 */
        gap: 1em;
    }
    .main-header-menu li.lumiere-mega > .menu-link::after {
        content: '+';
        margin-left: auto; /* 双保险：即使 justify-content 被覆盖也贴最右 */
        flex-shrink: 0;
        font-size: 1.5rem;
        line-height: 1;
        font-weight: 300;
        color: var(--ast-global-color-3, #4a4a4a);
        transition: transform 0.2s ease;
    }
    .main-header-menu li.lumiere-mega.lumiere-mm-open > .menu-link::after {
        content: '−';
    }
}