/* base.css - 全局基础样式 */

/* 定义全局CSS自定义属性（变量）*/
:root {
    --navbar-height: 60px;
    /* 导航栏计算总高度。请根据实际测量值调整此数字 */
}

/* 1. 设置全局星空背景 */
body {
    background: url('../src/base/background.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #ffffff;
}

/* 2. 为固定导航栏设置样式 */
.navbar {
    background-color: rgba(5, 15, 30, 0.85);
    height: var(--navbar-height);
    /* 使导航栏自身高度与补偿值统一 */
    box-sizing: border-box;
    /* 确保内边距和边框包含在高度内，使计算更可控 */
    transition: transform 0.4s ease-in-out;
    will-change: transform;
    /* 为导航栏添加平滑的滑入滑出过渡效果 */
}

/* 导航栏的隐藏状态：向上平移至视口外 */
.navbar.navbar-hidden {
    transform: translateY(-100%);
}

.navbar-brand,
.navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-nav .nav-link.active {
    color: #66b3ff !important;
}

.navbar-nav .nav-link:hover {
    color: #a6d2ff !important;
}

/* 汉堡菜单按钮样式 */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.15rem rgba(42, 159, 214, 0.5);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 移动端：右侧下拉式菜单 */
@media (max-width: 991.98px) {
    .navbar .container {
        position: relative;
    }

    .navbar-collapse {
        position: absolute;
        right: 0.75rem;
        top: 100%;
        width: auto;
        min-width: 180px;
        background-color: rgba(5, 15, 30, 0.95);
        border-radius: 0.5rem;
        padding: 0.25rem 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .navbar-collapse .navbar-nav {
        flex-direction: column;
    }

    .navbar-collapse .nav-link {
        padding: 0.5rem 1.25rem;
        white-space: nowrap;
    }

    .navbar-collapse .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }
}

/* 3. 为主内容区设置精确的预补偿 */
.page-main {
    padding-top: var(--navbar-height);
    /* 初始加载时即预留出导航栏高度的空间 */
}

/* 4. 按钮蓝色 */
.btn-primary {
    background-color: #2a9fd6;
    border-color: #2a9fd6;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #1c8bc6;
    border-color: #1c8bc6;
    color: #ffffff;
}

/* 5. 页脚样式 - 文字改为白色 */
.footer {
    background-color: rgba(5, 15, 30, 0.9);
    color: #ffffff;
}

.footer a {
    color: #cccccc;
}

.footer a:hover {
    color: #ffffff;
}

/* 6. 全局链接颜色 - 保留蓝色 */
a {
    color: #66b3ff;
    text-decoration: none;
}

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

/* === 全局段落文本排版优化 === */
p {
    /* 优化中文换行：尽量保持词汇完整 */
    word-break: keep-all;
    /* 优化英文换行：在连字符或单词内合适位置断开，防止溢出 */
    overflow-wrap: break-word;
    /* 可选：改善长段落阅读，增加可读性 */
    text-wrap: pretty;
    /* 较新的属性，浏览器兼容性请确认 */
}