/* =========================================================
   文件：assets/css/common.css
   作用：
   1. 提供全站统一的基础样式与设计变量
   2. 重置浏览器默认样式差异
   3. 定义页面容器、标题、段落、图片、链接等基础规则
   4. 为 components.css 和 pages.css 提供稳定的样式底座

   说明：
   - 当前站点为公安备案专用极简官网，整体风格以简洁、清晰、
     稳定为优先，不追求复杂视觉效果
   - 本文件只放“全站通用基础规则”，不写具体业务组件样式
   ========================================================= */


/* =========================================================
   一、CSS 自定义变量（Design Tokens）
   作用：
   - 统一颜色、圆角、阴影、宽度、间距等基础设计参数
   - 后续如需整体调色或调整页面风格，只需集中修改这里
   ========================================================= */
:root {
    /* ---------- 颜色系统 ---------- */
    --color-bg: #f6f8fb;
    --color-surface: #ffffff;
    --color-surface-secondary: #f1f4f8;
    --color-text: #1f2937;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;
    --color-primary: #1d4ed8;
    --color-primary-hover: #1e40af;
    --color-link: #1d4ed8;
    --color-link-hover: #1e3a8a;
    --color-success: #047857;
    --color-warning: #b45309;
    --color-danger: #b91c1c;

    /* ---------- 阴影系统 ---------- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);

    /* ---------- 圆角系统 ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* ---------- 布局宽度 ---------- */
    --container-width: 1200px;
    --container-padding-x: 20px;

    /* ---------- 间距系统 ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---------- 字体系统 ---------- */
    --font-family-base:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Hiragino Sans GB",
        "Microsoft YaHei",
        "Noto Sans SC",
        sans-serif;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;

    /* ---------- 行高系统 ---------- */
    --line-height-tight: 1.3;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.8;

    /* ---------- 动画系统 ---------- */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
}


/* =========================================================
   二、全局重置（Reset）
   作用：
   - 尽量消除不同浏览器默认样式差异
   - 统一盒模型计算方式
   ========================================================= */

/* 所有元素及其伪元素统一使用 border-box，避免宽高计算混乱 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 让滚动行为更平滑，提升页面跳转体验 */
html {
    scroll-behavior: smooth;
}

/* 去除 body 默认 margin，设置全站基础背景和字体 */
body {
    margin: 0;
    min-width: 320px;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   三、基础文本元素
   作用：
   - 统一标题、段落、列表等默认排版表现
   - 保持官网整体阅读感清晰、简洁
   ========================================================= */

/* 标题默认不留过大外边距，方便后续组件统一控制 */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    color: var(--color-text);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

/* 各级标题的基础字号 */
h1 {
    font-size: var(--font-size-3xl);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

h5,
h6 {
    font-size: var(--font-size-base);
}

/* 段落默认下边距，便于阅读 */
p {
    margin-top: 0;
    margin-bottom: var(--space-4);
    color: var(--color-text-secondary);
}

/* 强调文本 */
strong {
    color: var(--color-text);
    font-weight: 700;
}

/* 辅助说明文本 */
small {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}


/* =========================================================
   四、链接样式
   作用：
   - 统一站内链接颜色与 hover 表现
   - 保持清晰可点击，同时不过于花哨
   ========================================================= */
a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

a:focus-visible {
    outline: 2px solid rgba(29, 78, 216, 0.35);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* =========================================================
   五、列表基础样式
   作用：
   - 去除默认缩进和项目符号，便于组件统一接管
   - 需要原生列表样式时，可在具体组件中单独覆盖
   ========================================================= */
ul,
ol {
    margin-top: 0;
    margin-bottom: var(--space-4);
    padding-left: 0;
}

li {
    list-style: none;
}


/* =========================================================
   六、媒体元素样式
   作用：
   - 统一图片、视频等媒体在响应式布局中的表现
   - 避免图片撑破容器
   ========================================================= */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 图片默认自适应，避免拉伸变形 */
img {
    height: auto;
    border: 0;
}


/* =========================================================
   七、表单元素基础样式
   作用：
   - 当前备案官网交互较少，但仍建议预留统一样式基础
   - 为未来搜索框、订阅框、联系表单扩展做准备
   ========================================================= */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* 按钮默认使用 pointer，提升交互明确性 */
button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

/* 禁用状态统一表现 */
button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


/* =========================================================
   八、全局容器与区块布局
   作用：
   - 控制页面内容最大宽度
   - 提供统一的左右留白和上下节奏
   ========================================================= */

/* 通用内容容器
   用于顶部导航、首页主内容、地区页、关于页等主内容区 */
.container {
    width: 100%;
    max-width: calc(var(--container-width) + var(--container-padding-x) * 2);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
}

/* 通用区块垂直间距
   适合首页每个模块、关于页各个内容段 */
.section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

/* 更紧凑的区块版本，适合次要内容区 */
.section-sm {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

/* 更宽松的区块版本，适合首屏或大 Banner 后内容 */
.section-lg {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}


/* =========================================================
   九、通用标题区块
   作用：
   - 用于首页“热门地区”“精选图片”等模块标题
   - 后续页面各 section 标题可直接复用
   ========================================================= */
.section-header {
    margin-bottom: var(--space-8);
}

.section-title {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-2xl);
    color: var(--color-text);
}

.section-subtitle {
    margin: 0;
    max-width: 760px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}


/* =========================================================
   十、通用卡片外观基础
   作用：
   - 提供统一的白底、圆角、边框、阴影风格
   - 具体卡片布局在 components.css 中实现
   ========================================================= */
.surface-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* 鼠标悬停时略微增强层次，适合可点击卡片 */
.surface-card-hover {
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.surface-card-hover:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   十一、通用网格布局工具类
   作用：
   - 后续地区卡片、图片卡片都可以快速复用
   - 保持页面布局代码简洁
   ========================================================= */
.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =========================================================
   十二、通用 Flex 工具类
   作用：
   - 处理导航栏、标题行、标签组等常见横向布局
   ========================================================= */
.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-6 {
    gap: var(--space-6);
}


/* =========================================================
   十三、文字辅助工具类
   作用：
   - 简化一些常见文本控制场景
   ========================================================= */
.text-center {
    text-align: center;
}

.text-muted {
    color: var(--color-text-muted);
}

.text-secondary {
    color: var(--color-text-secondary);
}


/* =========================================================
   十四、可访问性辅助
   作用：
   - 提供仅屏幕阅读器可见的文本类
   - 便于后续增强无障碍表现
   ========================================================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}


/* =========================================================
   十五、页面基础结构建议
   作用：
   - 为 sticky footer 提供基础支持
   - 保证内容较少时页脚不会漂浮到页面中部
   ========================================================= */
.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
}


/* =========================================================
   十六、选择文本颜色
   作用：
   - 提升品牌统一性和阅读体验
   ========================================================= */
::selection {
    background: rgba(29, 78, 216, 0.16);
    color: var(--color-text);
}


/* =========================================================
   十七、响应式断点
   作用：
   - 当前官网主要面向桌面端审核，但仍需保证平板与手机端
     不会明显错乱
   ========================================================= */

/* 中等屏幕：平板或较窄桌面 */
@media (max-width: 1024px) {
    :root {
        --container-padding-x: 18px;
        --font-size-2xl: 28px;
        --font-size-3xl: 34px;
    }

    .grid-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .section {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }

    .section-lg {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }
}

/* 小屏幕：大多数手机或窄窗口 */
@media (max-width: 768px) {
    :root {
        --container-padding-x: 16px;
        --font-size-xl: 22px;
        --font-size-2xl: 26px;
        --font-size-3xl: 30px;
    }

    h1 {
        font-size: var(--font-size-2xl);
    }

    h2 {
        font-size: var(--font-size-xl);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .section {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }

    .section-sm {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }

    .section-lg {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }

    .section-header {
        margin-bottom: var(--space-6);
    }
}

/* 超小屏幕：进一步压缩标题和留白 */
@media (max-width: 480px) {
    :root {
        --container-padding-x: 14px;
        --font-size-2xl: 24px;
        --font-size-3xl: 28px;
    }

    body {
        font-size: var(--font-size-sm);
    }
}