/* ============================================================
   base.css —— 全站共用样式
   所有页面都要引入本文件

   目录:
     1. 变量              2. 全局重置
     3. 页面背景          4. 顶部导航
     5. 通用组件:卡片     6. 手机提示条
     7. 分隔线 hr         8. 导航下划线动画
     9. 页脚              10. 响应式
   ============================================================ */


/* 思源黑体(Noto Sans SC)—— 通过 Google Fonts 中国镜像加载
   授权:SIL OFL,免费商用(微软雅黑是商业字体,不能这样用)
   原理:按 unicode-range 切成几百个小文件,页面用到哪些字才下哪些 */
@import url("https://fonts.googleapis.cn/css2?family=Noto+Sans+SC:wght@400;600;700&display=swap");


/* ============================================================
   1. 变量 —— 全站颜色只在这里定义,改一处即可换配色
   ============================================================ */
:root {
    --main_color: rgba(74, 201, 201, 0.539);   /* 主色:导航栏 / 卡片 / 分隔线 */
    --main_font_color: #fff;                   /* 主文字色:白色 */
}


/* ============================================================
   2. 全局重置
   ============================================================ */
* {
    /* width 包含 padding 和 border,避免"加了 padding 元素就变宽" */
    box-sizing: border-box;
}


/* ============================================================
   3. 页面背景
   ============================================================ */
body {
    /* 注意:本文件在 css/ 子目录里,图片要先 ../ 回到上一级,再进 images/ */
    background-image: url("../images/background.jpg");
    background-size: cover;                    /* 铺满视口(可能裁掉边缘) */
    background-position: center;               /* 居中显示 */
    background-attachment: fixed;              /* 滚动时背景固定不动 */
    margin: 0;                                 /* 去掉浏览器默认的 8px 外边距 */
    padding: 0;
    /* 默认用思源黑体;如果没加载出来,依次退回系统字体 */
    font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;

    /* 让页脚能贴到页面底部:body 撑满一屏 + 竖向排列,
       页脚再用 margin-top: auto 吃掉剩余空间 */
    min-height: 100vh;
    min-height: 100dvh;              /* 新浏览器用动态视口高度,避开手机地址栏的坑 */
    display: flex;
    flex-direction: column;
}


/* ============================================================
   4. 顶部导航
   ============================================================ */
    .phone-main{
        display: none;
    }
   header {
    display: flex;                    /* 让 logo 和 nav 左右排列 */
    align-items: center;              /* 交叉轴居中(垂直中线对齐) */
    justify-content: space-between;   /* 两端对齐:logo 靠左,导航靠右 */
    padding: 12px 24px;
    background-color: var(--main_color);
}

/* --- 左侧:图标 + 名字 --- */
.logo {
    display: flex;                  /* 图标和文字横排 */
    align-items: center;
    gap: 16px;                      /* 图标与文字的间距 */
    color: var(--main_font_color);
    text-decoration: none;          /* 去掉链接默认下划线 */
    font-size: 1.1rem;
    font-weight: 600;
}

.logo img {
    height: 32px;      /* 固定高度,避免按原图尺寸撑高导航 */
    width: auto;       /* 按比例缩放,不变形 */
    display: block;    /* 去掉图片底部的几像素空白 */
}

/* --- 右侧:导航列表 --- */
nav ul {
    display: flex;        /* 让 li 横排(li 默认块级,会竖着堆) */
    align-items: center;
    gap: 1.25rem;         /* 导航项之间的间距 */
    margin: 0;            /* 去掉 ul 默认外边距 */
    padding: 0;           /* 去掉 ul 默认左缩进(约 40px) */
    list-style: none;     /* 去掉每项前面的圆点 */
    position: relative;
}

nav a {
    display: block;                /* 让 padding 真正撑开点击区域 */
    padding: 8px 4px;
    color: var(--main_font_color);
    text-decoration: none;
    position: relative;            /* 关键:给 ::after 下划线建立定位参照 */
    transition: opacity 0.2s;
}
/* ============================================================
   导航项外观(非链接版)
   为什么需要它:上面的 nav a 只匹配 <a> 标签,而下拉菜单的触发项
   "学科"用的是 <span>,拿不到 nav a 的样式,所以把同样的外观复制一份。
   改动时注意:这里的数值要和 nav a 保持一致,否则两个导航项会不等高。
   ============================================================ */
.special_underline {
    display: block;                /* 让它表现得像块级:padding 才能真正撑开区域 */
    padding: 8px 4px;              /* 和 nav a 一致,保证高度对齐 */
    color: var(--main_font_color); /* 和 nav a 同色 */
    text-decoration: none;
    position: relative;            /* 关键:给 ::after 下划线建立定位参照 */
    transition: opacity 0.2s;      /* 悬浮时透明度平滑变化 */
}

nav a:hover {
    opacity: 0.7;                  /* 悬浮变淡,给出可点击的反馈 */
}

.special_underline:hover {
    opacity: 0.7;                  /* 和 nav a:hover 保持一致 */
}

/* ============================================================
   5. 通用组件:卡片 —— 多个页面都可能用到
   ============================================================ */
.card {
    text-align: center;                  /* 文字水平居中 */
    background-color: var(--main_color);
    border-radius: 20px;
    color: #ffffff;
    width: 100%;                         /* flex 里必须显式写,否则会收缩成内容宽度 */
    max-width: 800px;                    /* 限制最大宽度,避免宽屏拉太长 */
    margin: 1.2rem auto;                 /* 上下留白,左右 auto = 水平居中 */
    padding: 1.2rem 2rem;                /* 用内边距撑开高度,代替写死 height */
}


/* ============================================================
   6. 手机提示条 —— "建议用电脑访问"
   默认隐藏,只有在窄屏(≤768px)时才显示,规则见文件末尾的响应式小节
   ============================================================ */
.phone-card {
    display: none;                       /* 桌面端:不显示 */
}


/* ============================================================
   7. 分隔线 hr
   ============================================================ */
hr {
    border: none;                          /* 去掉默认的 3D 凹陷边框 */
    height: 3px;
    background-color: var(--main_color);
    width: 100%;                           /* 先占满可用宽度 */
    max-width: 800px;                      /* 但不超过卡片宽度,保持对齐 */
    margin: 1.1rem auto;                   /* 上下留白 + 水平居中 */
}


/* ============================================================
   8. 导航悬停:下划线从左侧展开
   ============================================================ */
nav a::after {
    content: "";                           /* 伪元素必须写 content 才会生成 */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;                              /* 初始宽度 0:不可见 */
    height: 3px;
    background-color: rgba(49, 137, 137, 0.539);
    transition: width 0.35s ease;          /* 过渡必须写在基础状态 */
}

nav a:hover::after {
    width: 100%;                           /* 悬浮时长满,形成"滑出"效果 */
}

/* 同样的下划线动画,复制给 .special_underline(<span> 版导航项)
   因为 ::after 的规则是按选择器匹配的,nav a::after 覆盖不到 <span> */
.special_underline::after {
    content: "";                           /* 伪元素必须写 content 才会生成 */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;                              /* 初始宽度 0:不可见 */
    height: 3px;
    background-color: rgba(49, 137, 137, 0.539);
    transition: width 0.35s ease;          /* 过渡必须写在基础状态 */
}

.special_underline:hover::after {
    width: 100%;                           /* 悬浮时长满,形成"滑出"效果 */
}

/* ============================================================
   徽章 —— 小标签,用于 "beta"、"New" 这类状态标记
   ============================================================ */
.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 999px;                      /* 胶囊形 */
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    vertical-align: middle;                    /* 和旁边文字对齐 */
    white-space: nowrap;
}
/* ============================================================
   下拉菜单(dropdown)
   结构:li.has-dropdown > a + .Accordion_card
   原理:li 建立定位参照,面板绝对定位贴在下方,默认隐藏,悬停显示
   ============================================================ */

/* 有下拉的菜单项 —— 必须有 relative,否则面板会相对页面定位 */
.has-dropdown {
    position: relative;
}

.Accordion_card {
    position: absolute;           /* 脱离文档流:不占位置,浮在页面内容之上 */
    top: 100%;                    /* 100% = 父元素自身的高度,所以正好贴在它下边缘。
                                     不能留缝:留缝的话鼠标移出父元素的一瞬间 hover 就断了,
                                     "还没够到面板就收起来" */
    left: 0;                      /* 左边缘和父元素对齐 */
    z-index: 999;                 /* 盖在页面内容之上,数值只要比同级元素大就行 */

    border: 0.2rem solid var(--main_color);   /* 边框颜色和全站主色统一 */
    min-width: 150px;             /* 不然宽度会缩成文字那么窄,看起来像个标签 */
    padding: 8px;                 /* 面板内边距;条目自己还有内边距,所以这里小一点 */
    background-color: var(--main_color);      /* 半透明主色,能隐约透出背后的背景图 */
    border-radius: 10px;          /* 圆角,和卡片保持一致的圆润感 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);  /* 阴影:让它看起来真的"浮起来" */

    /* 默认隐藏。用 opacity + visibility 组合,而不是 display: none ——
       因为 display 无法参与过渡动画,会"啪"地瞬间出现/消失 */
    opacity: 0;                   /* 完全透明 */
    visibility: hidden;           /* 同时不可见,并且不响应鼠标 */
    transform: translateY(-6px);  /* 先上移 6px,展开时向下滑出,比纯淡入更有方向感 */
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* 悬停 / 键盘聚焦时显示 */
.has-dropdown:hover .Accordion_card,
.has-dropdown:focus-within .Accordion_card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 面板里的链接 */
.Accordion_card a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--main_font_color);
    white-space: nowrap;          /* 不换行,保持一行一个条目 */
}

.Accordion_card a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


/* ============================================================
   9. 页脚 —— 全站共用
   
   ============================================================ */
.copyright {
    padding: 0.8rem 1rem 1rem;                 /* 用内边距撑高度,内容多少都自适应 */
    border-top: 0.15rem solid var(--main_font_color);
    background-color: var(--main_color);
    width: 100%;
    text-align: center;
    color: var(--main_font_color);
    font-size: 0.78rem;
    line-height: 1.2;
    margin-top: auto;                          /* 页脚贴底:把上方剩余空间全部吃掉 */
}

/* 头像:必须是块级,否则会坐在文字基线上,凭空多出约 6px 空隙 */
.copyright img {
    display: block;
    height: 32px;
    width: auto;
    margin: 10px auto 0;                       /* 块级之后 text-align 管不到,要靠 auto 居中 */
}

.copyright p {
    margin: 0.4rem 0 0;                        /* 只保留上边距,约 6.4px */
}

/* 免责声明:页脚里最重要的一条,稍微加粗 */
.copyright .disclaimer {
    font-weight: 600;
}

/* 版权信息:最次要,稍小稍淡 */
.copyright .meta {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.65rem;
}
/* ============================================================
   手机端下拉菜单
   结构:div.phone-dropdown-wrap > span.phone-dropdown + div.phone-accordion
   关键:position: relative 必须放在外层 div 上 ——
        面板是 span 的"兄弟",不是"子元素",放在 span 上定位不到它
   ============================================================ */
.phone-dropdown-wrap {
    position: relative;           /* 定位参照:面板要相对它定位 */
}

.phone-accordion {
    position: absolute;
    top: 100%;                    /* 贴在父元素下边缘,不留缝 */
    right: 0;                     /* 它在屏幕右侧,用 right:0 对齐;用 left:0 会跑到屏幕外 */
    z-index: 999;

    border: 0.2rem solid var(--main_color);
    min-width: 150px;
    padding: 8px;
    background-color: var(--main_color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

    /* 默认隐藏:用 opacity + visibility,不用 display(display 无法过渡) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* 悬停 / 键盘聚焦时显示 —— 少了这段,面板会永远是透明的 */
.phone-dropdown-wrap:hover .phone-accordion,
.phone-dropdown-wrap:focus-within .phone-accordion {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 面板里的链接 */
.phone-accordion a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--main_font_color);
    white-space: nowrap;
    text-decoration: none;        /* 去掉链接默认下划线 */
}

.phone-accordion a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


/* ============================================================
   面板里的二级菜单(嵌套导航)
   思路:不用"往右飞出",而是"往下展开 + 缩进"
   理由:手机屏幕窄,往右飞会超出屏幕;往下展开更符合直觉
   ============================================================ */
.sub-trigger {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--main_font_color);
    cursor: pointer;              /* 提示这里可点 */
    white-space: nowrap;
}

.sub-trigger:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 子菜单默认收起 */
.sub-menu {
    display: none;
    margin-left: 12px;
    padding-left: 14px;                                 /* 缩进 = 视觉上的层级 */
    border-left: 2px solid rgba(255, 255, 255, 0.25);    /* 左侧竖线,强化层级感 */
}

/* 悬停 / 键盘聚焦时展开 */
.sub-wrap:hover > .sub-menu,
.sub-wrap:focus-within > .sub-menu {
    display: block;
}

.sub-menu a {
    display: block;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--main_font_color);
    text-decoration: none;
    opacity: 0.85;
    white-space: nowrap;
}

.sub-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}





/* ============================================================
   10. 响应式:屏幕宽度 ≤ 768px 时生效
      必须放在文件末尾 —— 同优先级时后写的规则才生效
   ============================================================ */
   @media (max-width: 768px) {

    /* 导航改为上下两行:第一行 logo,第二行导航 */
    .main
        {
                display: none;
        }    
    
        header {
        flex-direction: column;
        gap: 8px;
        padding: 10px 16px;
    }

    /* 导航项允许换行,并整体居中 */
    nav ul {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 关键:禁止词内断行,解决"首/页"被拆成两行的问题 */
    nav a {
        white-space: nowrap;
        font-size: 0.9rem;
        padding: 6px 4px;
    }

    /* 手机端:显示"建议用电脑访问"提示条
       (基础规则在"6. 手机提示条"里写了 display: none) */
    .phone-card {
        display: block;
    }
    .phone-main{
        display: flex;
        align-items: center;              /* 垂直居中对齐 */
        justify-content: space-between;   /* 两端分开:头像靠左,更多靠右 */
        flex-direction: row; 
        color: var(--main_font_color);
        
    }
}