/* ==========================================================================
   Huatai Theme · Base
   重置、排版、链接、媒体、网格系统（Row/Col）、工具类
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 现代重置
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   2. 根元素 —— 这里是移动端横向滚动条的总开关
   overflow-x: clip 与 hidden 的区别：clip 不会创建滚动容器，
   因此内部的 position: sticky 依然生效；hidden 会把它静默地破坏掉。
   -------------------------------------------------------------------------- */
html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    font-size: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    overflow-x: clip;
    min-height: 100vh;
    font-family: var(--h-font-sans);
    font-size: var(--h-fs-400);
    line-height: var(--h-lh-normal);
    color: var(--h-text-body);
    background-color: var(--h-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
}

/* 只有真正需要滚动条时才出现，避免 macOS/Windows 上布局宽度跳动 */
html {
    scrollbar-gutter: stable;
}

/* --------------------------------------------------------------------------
   3. 排版
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    color: var(--h-text-strong);
    font-weight: var(--h-fw-bold);
    line-height: var(--h-lh-tight);
    letter-spacing: var(--h-tracking-tight);
    text-wrap: balance;
    overflow-wrap: break-word;
}

h1, .h1 { font-size: var(--h-fs-800); }
h2, .h2 { font-size: var(--h-fs-700); }
h3, .h3 { font-size: var(--h-fs-600); }
h4, .h4 { font-size: var(--h-fs-500); }
h5, .h5 { font-size: var(--h-fs-400); }
h6, .h6 { font-size: var(--h-fs-300); }

p {
    overflow-wrap: break-word;
    text-wrap: pretty;
}

/* 标题与后续内容的节奏 */
h1, h2, h3, h4, h5, h6 {
    margin-block: 0 0.6em;
}

h1 + p, h2 + p, h3 + p, h4 + p,
.lh-reset > * + * {
    margin-block-start: 0;
}

p, ul, ol, dl, table, figure, blockquote, pre, address {
    margin-bottom: var(--h-space-sm);
}

p:last-child,
ul:last-child,
ol:last-child,
figure:last-child,
blockquote:last-child,
table:last-child {
    margin-bottom: 0;
}

a {
    color: var(--h-color-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in srgb, var(--h-color-brand) 40%, transparent);
    transition: var(--h-transition);
}

a:hover {
    color: var(--h-color-brand-strong);
    text-decoration-color: currentColor;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--h-color-brand);
    outline-offset: 2px;
    border-radius: var(--h-radius-xs);
}

/* 键盘可达性：焦点永远不要被 overflow 裁掉 */
:focus-visible {
    scroll-margin-block: calc(var(--h-header-total) + 1rem);
}

b, strong { font-weight: var(--h-fw-semibold); color: var(--h-text-strong); }
small { font-size: 0.85em; }

/* --------------------------------------------------------------------------
   4. 列表
   -------------------------------------------------------------------------- */
ul, ol {
    list-style: none;
}

/* 文章内容里的列表恢复项目符号（widget/nav 列表不受影响） */
.entry-content ul,
.content-body ul,
.post-content ul,
.detail-content ul,
.detail-content ol,
.product-description ul,
.project-content ul,
.faq-answer ul,
.faq-answer ol,
.legal-block ul,
.template-fullwidth .fullwidth-content ul {
    list-style: disc;
    padding-inline-start: 1.35em;
}

.entry-content ol,
.content-body ol,
.post-content ol,
.detail-content ol,
.legal-block ol,
.template-fullwidth .fullwidth-content ol {
    list-style: decimal;
    padding-inline-start: 1.5em;
}

li + li:not(.nav-item) { margin-block-start: 0.4em; }

/* --------------------------------------------------------------------------
   5. 媒体 —— 统一防止撑破容器
   -------------------------------------------------------------------------- */
img,
picture,
svg,
video,
canvas,
iframe,
embed,
object {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

img {
    /* 避免未指定尺寸的 <img> 造成 CLS */
    background-color: var(--h-bg-sunken);
}

/* 透明 PNG 徽标（页头 / 页脚 logo）不能垫底色，否则会显示成大方块 */
.brand-logo-img,
.footer-brand .brand-logo-img {
    background-color: transparent;
}

svg {
    fill: currentColor;
}

figure {
    max-width: 100%;
}

iframe {
    border: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    /* 宽表格自己横向滚动，绝不顶破页面 */
    display: block;
    overflow-x: auto;
}

@media (min-width: 48em) {
    table { display: table; }
}

/* --------------------------------------------------------------------------
   6. 行内代码与预格式化文本
   -------------------------------------------------------------------------- */
code, kbd, samp, pre {
    font-family: var(--h-font-mono);
    font-size: 0.9em;
}

code {
    padding: 0.15em 0.4em;
    border-radius: var(--h-radius-xs);
    background: var(--h-bg-sunken);
    overflow-wrap: break-word;
}

pre {
    padding: var(--h-space-sm);
    overflow-x: auto;
    border-radius: var(--h-radius-md);
    background: var(--h-color-navy-deep);
    color: #E7EEF7;
    line-height: 1.55;
}

pre code {
    padding: 0;
    background: none;
    color: inherit;
}

blockquote {
    padding-inline: var(--h-space-md);
    border-inline-start: 3px solid var(--h-color-gold);
    color: var(--h-text-body);
    font-style: italic;
}

hr {
    height: 1px;
    border: 0;
    background: var(--h-border-subtle);
    margin-block: var(--h-space-md);
}

/* --------------------------------------------------------------------------
   7. 表单控件基础
   -------------------------------------------------------------------------- */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

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

button[disabled],
input[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

select {
    /* 保证 select 文本不会溢出容器 */
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   8. 容器
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: calc(var(--h-container-max) + (var(--h-container-pad) * 2));
    margin-inline: auto;
    padding-inline: var(--h-container-pad);
}

.container--narrow { max-width: calc(52rem + (var(--h-container-pad) * 2)); }
.container--wide   { max-width: calc(1600px + (var(--h-container-pad) * 2)); }

/* --------------------------------------------------------------------------
   9. 网格系统 Row / Col
   旧实现用「负 margin + 百分比 padding」拼出来的，只要 .row 出现在
   .container 外面就会左右溢出。这里改成 CSS Grid + gap，
   列宽由 grid 轨道决定，永远不会超宽；minmax(0, 1fr) 防止长内容撑破列。
   -------------------------------------------------------------------------- */
.row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--h-gutter);
    row-gap: var(--h-gutter);
    width: 100%;
    align-items: start;
}

.row > * {
    min-width: 0;   /* Flex/Grid 子项默认 min-width:auto，长内容会把列顶开 */
}

.row--tight    { column-gap: var(--h-space-xs); row-gap: var(--h-space-xs); }
.row--center-y { align-items: center; }
.row--stretch  { align-items: stretch; }
.row--no-gap   { column-gap: 0; row-gap: 0; }

/* 所有 col-* 默认占满一行（mobile-first） */
[class*="col-"] {
    grid-column: 1 / -1;
    min-width: 0;
}

/* ≥ 576px */
@media (min-width: 36em) {
    .col-sm-1  { grid-column: span 1; }
    .col-sm-2  { grid-column: span 2; }
    .col-sm-3  { grid-column: span 3; }
    .col-sm-4  { grid-column: span 4; }
    .col-sm-5  { grid-column: span 5; }
    .col-sm-6  { grid-column: span 6; }
    .col-sm-7  { grid-column: span 7; }
    .col-sm-8  { grid-column: span 8; }
    .col-sm-9  { grid-column: span 9; }
    .col-sm-10 { grid-column: span 10; }
    .col-sm-11 { grid-column: span 11; }
    .col-sm-12 { grid-column: span 12; }
}

/* ≥ 768px */
@media (min-width: 48em) {
    .col-md-1  { grid-column: span 1; }
    .col-md-2  { grid-column: span 2; }
    .col-md-3  { grid-column: span 3; }
    .col-md-4  { grid-column: span 4; }
    .col-md-5  { grid-column: span 5; }
    .col-md-6  { grid-column: span 6; }
    .col-md-7  { grid-column: span 7; }
    .col-md-8  { grid-column: span 8; }
    .col-md-9  { grid-column: span 9; }
    .col-md-10 { grid-column: span 10; }
    .col-md-11 { grid-column: span 11; }
    .col-md-12 { grid-column: span 12; }
}

/* ≥ 992px */
@media (min-width: 62em) {
    .col-lg-1  { grid-column: span 1; }
    .col-lg-2  { grid-column: span 2; }
    .col-lg-3  { grid-column: span 3; }
    .col-lg-4  { grid-column: span 4; }
    .col-lg-5  { grid-column: span 5; }
    .col-lg-6  { grid-column: span 6; }
    .col-lg-7  { grid-column: span 7; }
    .col-lg-8  { grid-column: span 8; }
    .col-lg-9  { grid-column: span 9; }
    .col-lg-10 { grid-column: span 10; }
    .col-lg-11 { grid-column: span 11; }
    .col-lg-12 { grid-column: span 12; }
}

/* ≥ 1200px */
@media (min-width: 75em) {
    .col-xl-1  { grid-column: span 1; }
    .col-xl-2  { grid-column: span 2; }
    .col-xl-3  { grid-column: span 3; }
    .col-xl-4  { grid-column: span 4; }
    .col-xl-5  { grid-column: span 5; }
    .col-xl-6  { grid-column: span 6; }
    .col-xl-7  { grid-column: span 7; }
    .col-xl-8  { grid-column: span 8; }
    .col-xl-9  { grid-column: span 9; }
    .col-xl-10 { grid-column: span 10; }
    .col-xl-11 { grid-column: span 11; }
    .col-xl-12 { grid-column: span 12; }
}

/* --------------------------------------------------------------------------
   10. 自动布局辅助类（旧模板仍在用）
   -------------------------------------------------------------------------- */
.grid-3,
.grid-4 {
    display: grid;
    gap: var(--h-gutter);
}

/* 移动端默认两列，避免大图单列堆叠 */
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 48em) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   11. 工具类
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 获得焦点后显现（跳转到主内容链接） */
.sr-only:focus,
.sr-only:focus-visible {
    position: fixed;
    inset-block-start: var(--h-space-sm);
    inset-inline-start: var(--h-space-sm);
    z-index: var(--h-z-skip);
    width: auto;
    height: auto;
    padding: var(--h-space-xs) var(--h-space-md);
    clip-path: none;
    background: var(--h-color-brand);
    color: var(--h-text-on-brand);
    border-radius: var(--h-radius-sm);
    box-shadow: var(--h-shadow-lg);
    text-decoration: none;
}

.mt-2 { margin-block-start: var(--h-space-2xs) !important; }
.mt-0 { margin-block-start: 0 !important; }

.divider {
    display: inline-block;
    width: 1px;
    height: 1em;
    background: currentColor;
    opacity: 0.35;
    vertical-align: middle;
}

/* WordPress 内建对齐类 + 图片说明 */
.wp-caption,
figure.wp-caption {
    max-width: 100%;
    overflow: hidden;
}

.wp-caption img {
    width: 100%;
    height: auto;
}

.wp-caption-text {
    padding: var(--h-space-2xs) var(--h-space-xs);
    font-size: var(--h-fs-200);
    line-height: var(--h-lh-snug);
    color: var(--h-text-muted);
    text-align: center;
}

.alignleft,
.alignright,
.aligncenter {
    display: block;
    margin-block: var(--h-space-2xs) var(--h-space-sm);
    max-width: 100%;
    height: auto;
}

.aligncenter {
    margin-inline: auto;
}

@media (min-width: 36em) {
    .alignleft  { float: left;  margin-inline-end: var(--h-space-md); }
    .alignright { float: right; margin-inline-start: var(--h-space-md); }
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
 * 内联 SVG 图标（替代 Font Awesome）
 * 具体尺寸 / 颜色由各上下文的 .xxx .icon 规则控制，这里只给最基础的盒子与对齐。
 * -------------------------------------------------------------------------- */
.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	vertical-align: -0.125em;
	color: inherit;
}