/* static/css/global.css - 法国国旗经典配色主题 */

/* 基础背景色：为了阅读舒适度，使用带一点灰度的白 */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #F8F9FA; color: #333; margin: 0; padding: 0; }

/* 导航栏：法国蓝底色，底部带一条醒目的法国红线条 */
.navbar { background-color: #0055A4; border-bottom: 4px solid #EF4135; padding: 15px 40px; color: white; display: flex; justify-content: space-between; align-items: center; position: relative; }
.navbar .logo { font-size: 1.5rem; font-weight: bold; letter-spacing: 1px; }
.navbar a { color: #FFFFFF; text-decoration: none; font-weight: bold; margin-left: 20px; transition: color 0.3s; }
.navbar a:hover { color: #EF4135; } /* 鼠标悬停变红 */

/* 内容卡片：纯白底色 */
.container { max-width: 800px; margin: 40px auto; padding: 30px; background: #FFFFFF; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* 标题卡片 */
.header-card { text-align: center; padding-bottom: 20px; border-bottom: 2px solid #EEE; }
.header-card h1 { margin-top: 0; color: #0055A4; } /* 标题使用深蓝色 */

/* IP 徽章：使用法国红，吸引点击 */
.ip-badge { display: inline-block; background: #EF4135; color: #FFF; padding: 10px 25px; border-radius: 6px; font-size: 1.2rem; font-weight: bold; margin: 15px 0; box-shadow: 0 2px 8px rgba(239, 65, 53, 0.4); }

.status-dot { display: inline-block; width: 12px; height: 12px; background-color: #27ae60; border-radius: 50%; margin-right: 8px; }

/* 文章内容区域排版优化 */
.content-area { padding: 30px 0; line-height: 1.8; font-size: 1.05rem; }
.content-area h2 { color: #0055A4; border-left: 4px solid #EF4135; padding-left: 10px; margin-top: 30px; }
.content-area ul { padding-left: 20px; }
.content-area li { margin-bottom: 10px; }

/* 底部区域 */
footer { text-align: center; padding: 25px; background: #0055A4; color: #FFF; margin-top: 40px; font-size: 0.9rem; }

/* ==================================================
   🌟 移动端响应式 (Mobile Responsive UI)
   ================================================== */

/* 默认在电脑端隐藏汉堡按钮 */
.mobile-toggle { display: none; background: none; border: none; color: white; font-size: 28px; cursor: pointer; padding: 0; }

@media (max-width: 850px) {
    .navbar { padding: 15px 20px; }
    .mobile-toggle { display: block; } /* 手机端显示按钮 */
    .links {
        display: none; /* 默认隐藏横向菜单 */
        flex-direction: column;
        position: absolute;
        top: 100%; /* 完美贴合在导航栏下方 */
        left: 0;
        width: 100%;
        background-color: #0055A4;
        border-bottom: 4px solid #EF4135;
        z-index: 1000;
        box-sizing: border-box;
    }
    .links.active {
        display: flex; /* 点击按钮后展开 */
    }
    .links a {
        margin: 0;
        padding: 15px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* 柔和的分割线 */
        width: 100%;
        display: block;
        box-sizing: border-box;
    }
}