/* ==============================================================================
   /portal/assets/css/nav.hang.css        ← 挂网式四级菜单
  电脑端（布局导航样式）----放：全局PC样式（变量、布局、reset）
  组件自身内部的CSS样式放组件自己的CSS样式里；组件整体在手机UI的布局属于全局，放这文件  
 ============================================================================== */ 
 
 /* ================================================================
   PC Mega Menu（阿里云风格）
   ================================================================ */

/* ============================
   左侧区域（固定宽度 + 独立滚动）
   ============================ */
#portal-mega-panel-hang .hang-left {
  width: 260px;
  background: #f3f4f6;
  border-right: 1px solid #e5e7eb;
  padding: 20px 25px;         /* ⭐ 数值代表：上下---左右距离 */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 20px;          /* ⭐ 左侧栏二级菜单与上面的间距 */
  overflow-y: auto;  /* ⭐ 左侧栏独立滚动 */
  /*max-height: calc(100vh - var(--portal-nav-height) - 20px);这个高度控制改为#portal-mega-panel-grid.open {控制*/
}

/* ------------一级标题（左栏顶部）------------- */
#portal-mega-panel-hang .hang-l1-title {
  font-size: 22px;        /* ⭐ 控制字号大小 */
  font-weight: 550;       /* ⭐ 控制字体粗细（加粗程度） */
  padding-top: 0px;       /* 控制与上方的间距 */
  padding-bottom: 13px;    /* 控制与下方的间距 */
  padding-left: 16px;     /* 控制与左边的间距 */
  padding-right: 16px;    /* 控制与右边的间距 */
  color: #111827;         /* 控制字体颜色 */
  letter-spacing: 1.2px;  /* ⭐ 控制字间距 */
}

/* 左侧栏一级菜单小字描述（阿里云风格） */
#portal-mega-panel-hang .hang-l1-desc {
    font-size: 14px;          /* ⭐ 小字字号 */
    font-weight: 400;         /* ⭐ 字体粗细：常规，不加粗 */
    color: #6b7280;           /* ⭐ 字体颜色：阿里云灰色 */
    letter-spacing: 1.0px;    /* ⭐ 字间距：让中文不挤，更高级 */
    line-height: 1.45;        /* ⭐ 行高：更舒服的阅读体验 */

    margin-top: 13px;          /* ⭐ 与标题之间的垂直间距 */
    padding: 2px 16px;        /* ⭐ 上下 2px、左右 16px，与标题对齐并增加呼吸感 */

    display: block;           /* ⭐ 让布局更稳定，避免 inline 元素的对齐问题 */
}

/* ----------------二级菜单（左侧栏）-------------------- */
#portal-mega-panel-hang .hang-l2-item {
    margin: 0 -25px;           /* ⭐ 左侧菜单蓝色hover宽度调整 */    
    padding: 10px 40px;        /* ⭐ 更舒适的上下左右间距 *//* hover 背景的“内边距 + 高度 + 宽度” */
    font-size: 15px;           /* ⭐ 字号更大，更清晰 */
    font-weight: 400;          /* ⭐ 默认不加粗，保持稳重 */
    letter-spacing: 1.2px;     /* ⭐ 字间距微调，让中文不挤 */
    line-height: 1.45;         /* ⭐ 行高更舒服 */
    color: #374151;            /* 默认深灰 */
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

/* hover：背景变浅蓝，文字保持原色 */
#portal-mega-panel-hang .hang-l2-item:hover {
    background: #eef2ff;
}

/* active：阿里云同款蓝色 + 半粗 */
#portal-mega-panel-hang .hang-l2-item.active {
    background: #e0e7ff;
    color: #1d4ed8;
    font-weight: 500;
}

/* -----------------------------------------右侧栏相关代码------------------------------------------------ */
/* ================================
   右侧栏（无三级菜单时）二级菜单
   ================================ */
/* 卡片容器 */
#portal-mega-panel-hang .hang-l2-link {
    font-size: 14px;
    color: #374151;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    height: 130px;      /* ⭐ 固定 hover 灰底高度原130px */
	width: 275px;     /* 固定 hover 宽度原300px */

    /* ⭐ 你要的重点：控制灰底与文字的距离 */
    padding-top: 20px;      /* 控制灰底与文字的上边距 */
    padding-left: 20px;     /* 控制灰底与文字的左边距 */
    padding-right: 14px;    /* 控制右边距 */
    padding-bottom: 6px;    /* 控制下边距 */

    overflow: hidden;
    border-radius: 6px;
	background: transparent;
    
}

#portal-mega-panel-hang .hang-l2-link:hover {
    background: #f3f4f6;    /* 灰底 hover */
}

/* 右侧栏二级标题风格 */
#portal-mega-panel-hang .hang-l2-title {
    font-size: 16px;          /* ⭐ 字号更大，更清晰 */
    font-weight: 500;         /* ⭐ 半粗，稳重 */
    letter-spacing: 1.2px;    /* ⭐ 字间距，让中文不挤 */
    line-height: 1.45;        /* ⭐ 行高更舒服 */
    color: var(--portal-text-main);
}

/* ================================
   右侧栏三级菜单
   ================================ */
/* 卡片容器 */
#portal-mega-panel-hang .hang-l3-link {
    font-size: 14px;
    color: #374151;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    height: 130px;      /* ⭐ 固定 hover 灰底高度原130px */
	width: 275px;     /* 固定 hover 宽度原300px */
	
    /* ⭐ 控制灰底与文字的距离 */
    padding-top: 16px;       /* 控制灰底与文字的上边距 */
    padding-left: 18px;     /* 控制灰底与文字的左边距 */
    padding-right: 10px;    /* 控制右边距 */
    padding-bottom: 4px;    /* 控制下边距 */

    overflow: hidden;
    border-radius: 6px;
	background: transparent;
    
}

#portal-mega-panel-hang .hang-l3-link:hover {
    background: #f3f4f6;      /* 灰底 hover */
}

/* 右侧栏三级标题风格 */
#portal-mega-panel-hang .hang-l3-title {
    font-size: 16px;          /* ⭐ 字号更大，更清晰 */
    font-weight: 500;         /* ⭐ 半粗，稳重 */
    letter-spacing: 1.2px;    /* ⭐ 字间距，让中文不挤 */
    line-height: 1.45;        /* ⭐ 行高更舒服 */
    color: var(--portal-text-main);
}

/* ===================================================
   右侧栏三级菜单标题 + 四级菜单（挂网式）
   ================================================== */

/* -------四级卡片容器（整体卡片样式）--------*/
#portal-mega-panel-hang .hang-l4-link {
    font-size: 14px;          /* ⭐ 小字字号（描述用） */
    color: #374151;           /* ⭐ 默认字体颜色（深灰） */
    text-decoration: none;    /* 去掉下划线 */

    display: flex;            /* ⭐ 垂直布局：标题 + 描述 */
    flex-direction: column;
    justify-content: flex-start;

    height: 130px;      /* ⭐ 固定 hover 灰底高度原130px */
	width: 275px;     /* 固定 hover 宽度原300px */

    /* ⭐ 控制卡片内部文字的上下左右间距 */
    padding-top: 16px;        /* 上边距 */
    padding-left: 18px;       /* 左边距（hover 时会左移） */
    padding-right: 10px;      /* 右边距 */
    padding-bottom: 4px;      /* 下边距 */

    overflow: hidden;         /* 超出隐藏 */
    border-radius: 6px;       /* ⭐ 卡片圆角 */
    background: transparent;  /* 默认透明背景 */

}

/* ---------四级标题（大字标题）（四级菜单上的分组标题字体设置放最后的）---------- */
#portal-mega-panel-hang .hang-l4-title {
    font-size: 16px;          /* ⭐ 标题字号（与三级一致） */
    font-weight: 500;         /* ⭐ 半粗（与三级一致） */
    letter-spacing: 1.2px;    /* ⭐ 字间距（让中文更高级） */
    line-height: 1.45;        /* ⭐ 行高（阅读更舒服） */
    color: var(--portal-text-main); /* ⭐ 默认主文本颜色 */
}

/* ===========================================================================================================
   -------------通用 hover 动态效果（L2 / L3 / L4 全部统一）如果不用动态效果，注释掉这一段即可 ------------- 
   ========================================================================================================= */
   /* ⭐⭐⭐ 通用 hover 动效（L2 / L3 / L4 全部统一） ⭐⭐⭐ */
/* ⭐ 动画：左移 + 背景渐变 */
#portal-mega-panel-hang .hang-l2-link,
#portal-mega-panel-hang .hang-l3-link,
#portal-mega-panel-hang .hang-l4-link {
    transition:
        padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.15s ease;
}

/* ---------卡片 hover 效果--------- */
#portal-mega-panel-hang .hang-l2-link:hover,
#portal-mega-panel-hang .hang-l3-link:hover,
#portal-mega-panel-hang .hang-l4-link:hover {
    padding-left: 6px;        /* ⭐ 左移动效 */
    background: #f3f4f6;      /* ⭐ 灰底 hover */
}

/* ======================================================================
   -------------右侧栏标题 hover 变蓝，小字说明保持灰色------------------
   ===================================================================== */

/* 二级菜单（无三级时）：hover 只影响标题 */
#portal-mega-panel-hang .hang-right .hang-l2-link:hover .hang-l2-title {
    color: var(--portal-primary);
}

/* 二级菜单：描述保持灰色 */
#portal-mega-panel-hang .hang-right .hang-l2-desc {
    color: #6b7280;
}

/* 右侧栏二级菜单描述小字 */
#portal-mega-panel-hang .hang-l2-desc {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.0px;
    line-height: 1.4;
    color: #6b7280;
    margin-top: 4px;
}  
   
/* ⭐ 三级菜单：hover 只影响标题 */
#portal-mega-panel-hang .hang-right .hang-l3-link:hover .hang-l3-title {
    color: var(--portal-primary);
}

/* ⭐ 三级菜单：描述保持灰色 */
#portal-mega-panel-hang .hang-right .hang-l3-desc {
    color: #6b7280;
}

/* 右侧栏三级菜单描述小字 */
#portal-mega-panel-hang .hang-l3-desc {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.0px;
    line-height: 1.4;
    color: #6b7280;
    margin-top: 4px;
}

/* ⭐ 四级菜单：hover 只影响标题（新增） */
#portal-mega-panel-hang .hang-right .hang-l4-link:hover .hang-l4-title {
    color: var(--portal-primary);
}

/* ⭐ 四级菜单：描述保持灰色（新增） */
#portal-mega-panel-hang .hang-right .hang-l4-desc {
    color: #6b7280;
}

/* --------四级描述（小字说明）---------- */
#portal-mega-panel-hang .hang-l4-desc {
    font-size: 14px;          /* ⭐ 小字字号 */
    font-weight: 400;         /* ⭐ 常规字体，不加粗 */
    letter-spacing: 1.0px;    /* ⭐ 字间距（让中文不挤） */
    line-height: 1.4;         /* ⭐ 行高（更易读） */
    color: #6b7280;           /* ⭐ 阿里云灰色（描述色） */
    margin-top: 4px;          /* ⭐ 标题与描述之间的垂直间距 */
}

/* ---------------------------右侧栏菜单下滑和上滑控制---------------------------------- */
/* ============================================
   PC 全屏 Mega Panel（独立 DOM）
   ============================================ */

/* ⭐ 动画核心（方案 A：JS 控制高度动画） */
#portal-mega-panel-hang {
  position: absolute;
  top: 100%;
  left: 0;

  width: 100vw;
  max-width: 100vw;
  background: #fff;

  display: flex;
  flex-direction: row;

  /* ⭐ 初始收起（动画从这里开始） */
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;

  transition:
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease-out;

  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
/* ⭐ -----------------------------双栏菜单高度设置--------------------------------- */
/* ⭐ 打开状态（JS 控制高度，不写 height:auto） */
#portal-mega-panel-hang.open {
  opacity: 1;
  pointer-events: auto;

  /* ⭐ 基础高度（阿里云同款） */
  min-height: 320px;

  /* ⭐ 最大高度（超过后整体滚动） */
  max-height: calc(100vh - var(--portal-nav-height) - 200px);

  /* ⭐ 超过最大高度才滚动 */
  overflow: hidden;   /* ⭐ 不让整个 panel 滚动 */
}

/* ============================
  阿里云四列样式版的话
  overflow-y: auto;
  overflow-x: hidden;
  要换成  overflow: hidden;
  否则双栏菜单不弹。所以统一都写
  overflow: hidden;
============================ */

/* ================================================
   PC 全屏 Mega Panel - 右侧四列布局（阿里云风格）
   =============================================== */

#portal-mega-panel-hang .hang-right {
  flex: 1;
  padding: 25px 24px;    /* 长方形hover距离上下，左右的距离，原来20；24*/
  box-sizing: border-box;

  /* ⭐ 双栏右侧栏菜单列数+间距 */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* ⭐ 控制最多 4 列 */
  column-gap: 16px;                                   /* ⭐ 控制列与列之间的水平间距 */
  row-gap: 8px;                                      /* ⭐ 控制行与行之间的垂直间距 */

  /* ⭐ 关键修复：禁止 Grid 拉伸行高 */
  align-content: flex-start;

  background: #ffffff;
  overflow-y: auto;
  /*max-height: calc(100vh - var(--portal-nav-height) - 20px);这个高度控制改为#portal-mega-panel-grid.open {控制*/
}

/* 只让当前激活的三级菜单参与 grid */
#portal-mega-panel-hang .hang-right .hang-l3-list.active {
    display: contents;
}

/* 未激活的三级菜单继续隐藏 */
#portal-mega-panel-hang .hang-right .hang-l3-list {
    display: none;
}

/* --------------------------（右侧栏）右上角关闭按钮--------------------------------- */
/* ⭐ 右上角关闭按钮（X） */
#portal-mega-panel-hang .hang-close-btn {
    position: absolute;   /* 绝对定位，让 X 固定在面板右上角 */
    top: 3px;            /* ⭐ 距离顶部的距离（调这里控制上下位置）原来8px*/
    right: 35px;          /* ⭐ 距离右侧的距离（调这里控制左右位置）原来48px*/

    font-size: 30px;      /* ⭐ X 的大小（越大越显眼） */
    font-weight: 600;     /* ⭐ X 的粗细（300=细，400=正常，500=稍粗） */

    color: #6b7280;       /* ⭐ 默认颜色（灰色） */
    cursor: pointer;      /* 鼠标变成手型，表示可点击 */

    z-index: 9999;        /* ⭐ 确保 X 永远在最上层，不被内容遮挡 */
    transition: color 0.15s ease;  /* ⭐ 悬停时颜色渐变更丝滑 */
}

/* ⭐ 鼠标悬停时的 X 颜色变化 */
#portal-mega-panel-hang .hang-close-btn:hover {
    color: #111827;       /* ⭐ hover 时变深色，更明显 */
}

/* --------------------------有三级 / 无三级的布局差异--------------------------------- */
/* 无三级菜单时：右栏显示二级，左栏更窄 */
#portal-mega-panel-hang .hang-menu.no-l3 .hang-left {
  width: 160px;
}

#portal-mega-panel-hang .hang-menu.no-l3 .hang-right {
  padding-left: 0;
}

/* 有三级菜单时：左栏显示二级，右栏显示三级 */
#portal-mega-panel-hang .hang-menu.has-l3 .hang-left {
  width: 200px;
}

#portal-mega-panel-hang .hang-menu.has-l3 .hang-right {
  padding-left: 0;
}
/* -------------------------------------------结束---------------------------------------- */  

/* ============================
   全局滚动条美化（阿里云风格）
   ============================ */

/* Chrome / Edge / Safari */
#portal-mega-panel-hang::-webkit-scrollbar {
    width: 6px;
}

#portal-mega-panel-hang::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
}

#portal-mega-panel-hang::-webkit-scrollbar-track {
    background: transparent;
}

/* Firefox */
#portal-mega-panel-hang* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.25) transparent;
}

/* =================================================================
   Mega Menu 标题统一为导航栏风格（统一菜单文字样式）
   =============================================================== */
/* 左侧栏二级标题（左侧菜单） */
#portal-mega-panel-hang .hang-left .hang-l2-item {
    font-size: 16px;
    font-weight: 400;
}

/* 右侧栏二级标题（无三级菜单时） */
#portal-mega-panel-hang .hang-right .hang-l2-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--portal-text-main);
}

/* 右侧栏三级标题（普通三级卡片用） */
#portal-mega-panel-hang .hang-right .hang-l3-link .hang-l3-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--portal-text-main);
}

/* ⭐ 四级菜单标题（独立格子） */
#portal-mega-panel-hang .hang-l3-title-block {
    font-size: 18px;
    font-weight: 550;
    color: #111827;

    padding: 6px 4px 10px 4px;
    margin-bottom: 4px;
    line-height: 1.45;

    /* ⭐ 关键：让标题成为独立格子 */
    display: block;
    grid-column: span 4;
}

/* =================================================================
   隐藏渲染器里的模板结构，只让 Panel 显示 
   =============================================================== */
/* 隐藏渲染器里的模板结构，只让 Panel 显示 */
.portal-nav-item-hang > .mega-menu-hang {
  display: none;
}

/* -------------------END结束-----------只让 Panel 显示------------- */