html {
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;

    padding-left: 1rem; /* margin */
    padding-right: 1rem; /* margin */

    box-sizing: border-box; /* 防止box被撑大破坏布局 */

    scroll-behavior: smooth;

    user-select: none; /* 禁止选中 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

code {
    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
}

footer {
    font-size: 0.6rem;
}

.footer-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* 小屏幕自动换行 */
    gap: 5rem;
}

a {
    transition: color 0.5s;
}

a:link {
    color: var(--text);
}

a:visited {
    color: var(--text);
}

a:hover {
    color: #f0c35b;
    text-decoration: none;
}

.social-link {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    text-decoration: none;
}

.social-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

[data-theme="dark"] {
    --background: #1e1f22;
    --text: #ffffff;
    --border: #595c62;
    --opacity: 0.6;
}

[data-theme="light"] {
    --background: #ffffff;
    --text: #000000;
    --border: #a9aebe;
    --opacity: 0.4;
}

#theme-toggle,
#menu-toggle {
    background: var(--background);
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer; /* 鼠标变成手形 */
    transition: background-color 1.5s, color 0.5s;
}

#theme-toggle {
    position: absolute; /* 绝对定位到右侧 */
    right: 2rem; /* 和padding一致 */
    display: block;
}

#menu-toggle {
    position: absolute; /* 绝对定位到右侧 */
    left: 2rem; /* 和padding一致 */
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: background-color 1.5s, color 0.5s, opacity 0.5s, visibility 0s 0.5s;
}

/* border test*/
#theme-toggle:hover,
#menu-toggle:hover {
    color: #f0c35b;
    text-decoration: none;
}


body {
    background-color: var(--background);
    color: var(--text);
    transition: background-color 1.5s, color 0.5s;

    max-width: 55rem;
    margin: 0px auto;
    padding: 0 0px;

    padding-top: 2.5rem; /* navigation bar 避免内容被导航栏遮住 */
}

h1 {
    scroll-margin-top: 3rem; /* navigation bar 避免定位到标题时，标题被导航栏遮住 */
}



/*  navigation bar  */
.navbar {
    background: var(--background);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    border-bottom: 0.1rem solid var(--border);
    transition: background-color 1.5s, border-bottom 1.5s;
    
}

.nav-container {
    margin: 0 auto; /* 水平居中 */
    padding: 1rem 2rem; /* 上下1rem，左右2rem */

    min-height: 1.5rem; /* 响应式导航栏隐藏后仍保留原有内容高度 */
    
    display: flex;
    justify-content: center; /* 子元素居中 */
    align-items: center;
    position: relative; /* 绝对定位以nav-container容器为基准 */
}

.nav-items {
    display: flex;
    gap: 2rem;

    opacity: 1;
    transition: opacity 0.5s;
}

.nav-items a {
    text-decoration: none;
    font-weight: 600;
}

/* mobile dropdown 跨入 desktop 时，保留一份竖向菜单用于淡出 */
.nav-items.is-breakpoint-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    flex-direction: column;
    gap: 1rem;
    padding: 2rem 3rem;

    background: var(--background);
    border-bottom: 0.1rem solid var(--border);
    opacity: 1;
    visibility: visible;
    pointer-events: none;

    transition: background-color 1.5s, color 0.5s, border-bottom 1.5s, opacity 1.5s 0.5s, visibility 0s 2s;
}

.nav-items.is-breakpoint-dropdown.is-fading-out {
    opacity: 0;
    visibility: hidden;
}

.nav-items.is-breakpoint-dropdown a {
    animation: nav-breakpoint-item-out 1s both;
    transition: color 0.5s;
}

.nav-items.is-breakpoint-dropdown a:nth-child(1) {
    animation-delay: 0.5s;
}

.nav-items.is-breakpoint-dropdown a:nth-child(2) {
    animation-delay: 0.4s;
}

.nav-items.is-breakpoint-dropdown a:nth-child(3) {
    animation-delay: 0.3s;
}

.nav-items.is-breakpoint-dropdown a:nth-child(4) {
    animation-delay: 0.2s;
}

.nav-items.is-breakpoint-dropdown a:nth-child(5) {
    animation-delay: 0.1s;
}

@keyframes nav-breakpoint-item-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-3rem);
    }
}

/* desktop navigation 与旧 dropdown 同时渐显，避免布局切换闪烁 */
.nav-items.is-desktop-entering {
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.nav-items.is-desktop-entering.is-visible {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s;
}

/* responsive navigation */
@media (max-width: 48rem) { /* 页面宽度过窄时生效 */

    #menu-toggle {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transition: background-color 1.5s, color 0.5s, opacity 0.5s, visibility 0s 0s;
    }

    .nav-items {
        opacity: 0; /* 视觉上隐藏菜单 */
        visibility: hidden; /* 交互上隐藏菜单 */
        pointer-events: none; /* 隐藏时禁止点击 */
        background: var(--background);
        transition: background-color 1.5s, color 0.5s, opacity 0.5s, visibility 0s 0.5s, border-bottom 1.5s;
    }

    /* 仅点击交互时触发菜单动画，页面收窄时不触发 */
    .nav-items.is-animated {
        display: flex;
        
        /* 定位展开后的响应式菜单 */
        position: absolute;
        top: 100%; /* 从 .nav-container 顶部开始，向下移动一个完整 .nav-container 高度。使菜单正好贴在 navbar 下方 */
        left: 0;
        right: 0;
        
        /* 将导航项目变为竖向 */
        flex-direction: column;
        gap: 1rem;

        padding: 2rem 3rem;

        border-bottom: 0.1rem solid var(--border);

        transition: background-color 1.5s, color 0.5s, border-bottom 1.5s, opacity 0.5s, visibility 0s 0.5s; /*  visibility 相当于总开关， opacity 相当一个ND Filter */
    }

    .nav-items.is-animated.is-open {
        transition: background-color 1.5s, color 0.5s, border-bottom 1.5s, opacity 0.5s, visibility 0s 0s;
    }

    .nav-items.is-animated a { /* 只滑动文字，防止背景遮挡其他内容 */
        opacity: 0;
        transform: translateY(-3rem); /* 菜单向上移动，打开时向下移动 */
        transition: color 0.5s;
    }

    .nav-items.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* 导航项目依次收起 */
    .nav-items.is-animated.is-closing {
        pointer-events: none;
        transition: background-color 1.5s, color 0.5s, border-bottom 1.5s, opacity 1.5s 0.5s, visibility 0s 2s;
    }

    .nav-items.is-animated.is-open a {
        animation: nav-item-in 3s both;
    }

    /* 导航项目依次进入 */
    @keyframes nav-item-in {
        from {
            opacity: 0;
            transform: translateY(-3rem); /* 从上方进入 */
        }

        33.333% {
            transform: translateY(0); /* 保留原有 1s transform 时长 */
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-items.is-animated.is-open a:nth-child(1) {
        animation-delay: 0.1s;
    }

    .nav-items.is-animated.is-open a:nth-child(2) {
        animation-delay: 0.2s;
    }

    .nav-items.is-animated.is-open a:nth-child(3) {
        animation-delay: 0.3s;
    }

    .nav-items.is-animated.is-open a:nth-child(4) {
        animation-delay: 0.4s;
    }

    .nav-items.is-animated.is-open a:nth-child(5) {
        animation-delay: 0.5s;
    }

    .nav-items.is-animated.is-closing a {
        animation: nav-item-out 1s both;
    }

    @keyframes nav-item-out {
        from {
            opacity: 1;
            transform: translateY(0);
        }

        to {
            opacity: 0;
            transform: translateY(-3rem); /* 向上收起 */
        }
    }

    .nav-items.is-animated.is-closing a:nth-child(1) {
        animation-delay: 0.5s;
    }

    .nav-items.is-animated.is-closing a:nth-child(2) {
        animation-delay: 0.4s;
    }

    .nav-items.is-animated.is-closing a:nth-child(3) {
        animation-delay: 0.3s;
    }

    .nav-items.is-animated.is-closing a:nth-child(4) {
        animation-delay: 0.2s;
    }

    .nav-items.is-animated.is-closing a:nth-child(5) {
        animation-delay: 0.1s;
    }

}


/*  cards  */
.Education-item,
.Visits-item {
    display: flex; /* 文字块和logo横向左右排列 */
    align-items: flex-start; /* 垂直方向，文字贴顶 */
    justify-content: space-between; /* 水平方向，文字块顶到最左，logo 推到最右 */
    gap: 1rem; /* 文字与logo间距 */

    border: 0.1rem solid var(--border);
    transition: border 1.5s;
    border-radius: 0.75rem;
    padding: 1rem 1rem; /* 四周1rem内边距 */
    margin: 1rem 0rem; /* 上下1rem外边距 */
}

.item-text {
    display: flex;
    flex-direction: column; /* 主轴改为竖直方向 */
    align-items: flex-start; /* 水平方向左对齐 */
    text-align: left; /* 文字左对齐 */
}

.item-text p {
    margin: 0;
}

.item-title p {
    font-size: 1.3rem;
    font-weight: 600;
}

.time {
    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
    opacity: var(--opacity);
    transition: opacity 1.5s;
}

.organization-logo {
    height: 8rem;
    width: auto;
    flex-shrink: 0; /* 禁止被压缩 */
    align-self: center; /* logo在卡片内居中，覆盖父级flex-start */
    opacity: var(--opacity);
    transition: opacity 1.5s;

    user-select: none; /* 禁止选中 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    user-drag: none; /* 禁止拖拽 */
    -webkit-user-drag: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;

    pointer-events: none; /* 禁用鼠标事件（同时禁止了点击事件） */

}