/* ============================================================================
 * base.css —— 元素级默认值。只写标签选择器，不写任何类。
 *
 * ## 加载顺序与迁移策略
 *
 * 四个模板里这份文件排在 `/style.css` **之后**。等权重后来者胜，所以
 * base.css 能接管 style.css 里不带 `!important` 的元素样式；带
 * `!important` 的（body 的背景与文字色）仍由 style.css 说了算。
 *
 * 这不是妥协，是迁移路径：base.css 里的值和 style.css 当前生效的值**逐字相同**。
 * 于是 Task 28 删掉 style.css 的那些块时，页面不会变——因为真相已经在这里
 * 声明过一遍了。先让两处一致，再删其中一处，比直接删安全得多。
 *
 * ## 不放什么进来
 *
 * 组件（按钮、卡片、导航）在 components.css。工具类也不在这。
 * 这份文件回答的是「没写任何 class 的一段 HTML 长什么样」。
 * ========================================================================== */

/* ── 重置 ──────────────────────────────────────────────────────────────────
 * `border-box` 让 padding 不再撑破宽度。style.css 第 24 行有同样一条，
 * 值一致，重复无害；Task 28 删那条时这里接住。
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    /* 移动端横屏旋转后 iOS 会自动放大字号，锁住它，否则同一页面在竖屏和
     * 横屏下字号不同——这类「有些手机看着不对」的报告通常源于此。 */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);

    /* 三层径向渐变是整站的暖色底。`fixed` 让它在滚动时不跟着走——
     * 跟着走的话长列表滚到底会看到渐变重复接缝。 */
    background-image:
        radial-gradient(at 0% 0%, hsla(38, 100%, 93%, 0.6) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(20, 100%, 94%, 0.4) 0px, transparent 50%),
        radial-gradient(at 50% 100%, hsla(14, 100%, 96%, 0.4) 0px, transparent 50%);
    background-attachment: fixed;

    /* 暖底上的深棕文字用默认渲染会偏粗糊，抗锯齿调细一档。 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* 移动端长按选中会弹出系统菜单，遮挡界面；正文仍可选，这里只关掉
     * 高亮闪烁。完全禁止选中会妨碍用户复制联系方式，不做。 */
    -webkit-tap-highlight-color: transparent;
}

/* ── 媒体 ──────────────────────────────────────────────────────────────────
 * `max-width: 100%` 是移动端最常见的横向滚动条来源的解药：一张宽图撑开
 * body，整页就能左右拖动，底部导航也跟着偏移出屏幕外。
 */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* ── 排版 ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    /* 中文长标题没有空格可断行，不给 word-break 就会整行溢出容器。 */
    overflow-wrap: break-word;
}

h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }
h4, h5, h6 { font-size: var(--font-size-sm); }

p {
    overflow-wrap: break-word;
}

a {
    color: var(--color-brand);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-brand-strong);
}

/* 列表默认去点：站内几乎所有 ul 都是布局容器（导航、卡片列表），
 * 需要项目符号的地方极少，让那几处自己加回来更省事。 */
ul,
ol {
    list-style: none;
}

hr {
    border: none;
    border-top: 1px solid var(--color-border);
}

/* ── 表单 ──────────────────────────────────────────────────────────────────
 * 表单控件不继承 body 字体，是浏览器的历史遗留。不显式继承的话，
 * 输入框里的中文会用另一套字体渲染，和旁边的标签对不齐。
 */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

textarea {
    /* 只允许纵向拉伸。横向拉伸会撑破卡片布局。 */
    resize: vertical;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

/* iOS Safari 会把 16px 以下的输入框在聚焦时自动放大整个页面，
 * 放大后用户得手动缩回去，且底部导航被推出视口——诉求 #4 报告的
 * 「有些手机看不到底部按钮」有一部分就是这么来的。 */
input,
textarea,
select {
    font-size: max(16px, var(--font-size-md));
}

/* ── 焦点 ──────────────────────────────────────────────────────────────────
 * style.css 里有 11 处 `outline: none`、0 处 `focus-visible`：键盘用户
 * 现在完全看不到焦点在哪，Tab 一路按下去像在盲操作。
 *
 * `:focus-visible` 只在浏览器判断「用户在用键盘」时生效，所以鼠标点击
 * 不会留下轮廓——那正是当初有人写 `outline: none` 的原因。
 */
:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── 动效降级 ──────────────────────────────────────────────────────────────
 * 系统开了「减少动态效果」就别再动。前庭功能障碍者会因视差和大位移动画
 * 产生眩晕，这不是偏好设置，是无障碍要求。
 *
 * 这里必须用 !important：要压过的是散落在 style.css 各处、本身就带
 * !important 的 transition/animation 声明，没有别的办法。
 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /* allow-important: 压过 style.css 中自带 !important 的动画声明 */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important; /* allow-important: 同上 */
        animation-iteration-count: 1 !important; /* allow-important: 同上 */
        transition-duration: 0.01ms !important; /* allow-important: 同上 */
        scroll-behavior: auto !important; /* allow-important: 同上 */
    }
}