/* static/website/css/main.css */
/* 网站主样式文件 - 负责布局和基础样式 */

/* ===== 网站色彩变量 ===== */
:root {
    --primary-blue: #1e3a5f;      /* 主蓝色 - 深蓝色调 */
    --secondary-blue: #2c5282;    /* 辅蓝色 - 中等蓝色 */
    --accent-gold: #d4af37;       /* 强调金色 - 品牌金色 */
    --light-gray: #f8f9fa;        /* 浅灰色 - 背景色 */
    --dark-gray: #2d3748;         /* 深灰色 - 文字色 */
    --medium-gray: #718096;       /* 中灰色 - 次要文字 */
}

/* ===== 基础样式 ===== */

/* 工业风格渐变背景 */
.industrial-gradient {
    background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 100%);
}

/* 导航栏基础样式 */
.navbar {
    transition: all 0.3s ease;    /* 平滑过渡效果 */
    padding: 1rem 0;              /* 上下内边距 */
}

/* 导航栏滚动状态样式 */
.navbar-scrolled {
    background: rgba(30, 58, 95, 0.95) !important;  /* 半透明深蓝色背景 */
    backdrop-filter: blur(10px);                     /* 背景模糊效果 */
    padding: 0.5rem 0;                              /* 滚动后减小内边距 */
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);         /* 底部阴影 */
}

/* ===== 布局样式 ===== */

/* 主要内容区域 */
.main-content {
    padding-top: 100px;                            /* 顶部内边距，为固定导航栏留空间 */
    min-height: calc(100vh - 200px);               /* 最小高度，确保页脚在底部 */
}

/* ===== 页脚布局样式 ===== */

/* 右侧联系信息包装器 */
.right-contact-wrapper {
    margin-left: auto;         /* 自动左外边距，推动到右侧 */
    max-width: 280px;          /* 最大宽度限制 */
}

/* 右侧联系信息标题居中 */
.right-contact-wrapper h5 {
    text-align: center !important;  /* 文字居中 */
    width: 100% !important;         /* 宽度100% */
}

/* 右侧联系信息列表左对齐 */
.right-contact-wrapper ul {
    text-align: left !important;    /* 文字左对齐 */
}

/* ===== 页脚基础样式 ===== */

/* 页脚容器样式 */
.industrial-footer {
    border-top: 4px solid var(--accent-gold);  /* 顶部金色边框 */
    /* 🎯 关键：移除背景色设置，完全由 themes.css 控制 */
    /* 背景色通过 themes.css 中的 CSS 变量控制 */
}

/* 页脚链接样式 */
.industrial-footer a {
    color: #ecf0f1;                    /* 浅灰色文字 */
    text-decoration: none;             /* 移除下划线 */
    transition: color 0.3s ease;       /* 颜色过渡效果 */
}

/* 页脚链接悬停效果 */
.industrial-footer a:hover {
    color: var(--accent-gold);         /* 悬停时变为金色 */
}

/* ===== 响应式布局 ===== */

/* 大屏幕样式 (≥992px) */
@media (min-width: 992px) {
    /* 页脚右侧区块在大屏幕上靠右对齐 */
    .industrial-footer .row .col-lg-4:last-child {
        margin-left: auto;             /* 自动左外边距 */
        display: flex;                 /* 弹性布局 */
        justify-content: flex-end;     /* 内容右对齐 */
    }
}

/* 中等及小屏幕样式 (≤768px) */
@media (max-width: 768px) {
    /* 主要内容区域增加顶部内边距 */
    .main-content {
        padding-top: 120px;            /* 增加顶部内边距 */
    }
    
    /* 导航栏品牌文字缩小 */
    .navbar-brand {
        font-size: 1.1rem;             /* 缩小字体大小 */
    }
    
    /* 右侧联系信息包装器适应小屏幕 */
    .right-contact-wrapper {
        margin-left: 0;                /* 移除左外边距 */
        max-width: 100%;               /* 最大宽度100% */
    }
}

/* ===== 按钮样式 ===== */

/* 警告按钮样式 (金色按钮) */
.btn-warning {
    background-color: var(--accent-gold);  /* 金色背景 */
    border-color: var(--accent-gold);      /* 金色边框 */
    color: #000;                           /* 黑色文字 */
    font-weight: 600;                      /* 粗体文字 */
}

/* 警告按钮悬停效果 */
.btn-warning:hover {
    background-color: #c19b2f;             /* 深金色背景 */
    border-color: #c19b2f;                 /* 深金色边框 */
    transform: translateY(-2px);           /* 上浮效果 */
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);  /* 金色阴影 */
}