/* ═══════════════════════════════════════════
   浩联科技外贸主题 — main.css v1.0.0
   全局基础样式，CSS变量由 PHP 内联输出
   ═══════════════════════════════════════════ */

/* ── 补充变量（PHP未覆盖时的备用值）─────── */
:root {
  --hl-radius:     8px;
  --hl-radius-lg:  14px;
  --hl-shadow:     0 2px 12px rgba(0,0,0,0.07);
  --hl-shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --hl-trans:      all 0.22s ease;
}

/* ── 基础重置 ──────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-height:100vh; overflow-x:hidden; }
img,video { max-width:100%; height:auto; display:block; }
a { color:var(--hl-accent); text-decoration:none; transition:var(--hl-trans); }
a:hover { opacity:.85; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
ul,ol { list-style:none; }
input,textarea,select { font-family:inherit; }

/* ── 布局容器 ──────────────────────────── */
.haolian-container { max-width:var(--hl-max-w); margin:0 auto; padding:0 20px; }
.haolian-site { display:flex; flex-direction:column; min-height:100vh; }
.haolian-site-content { flex:1; }
.haolian-content-wrap { display:grid; gap:40px; }
.haolian-content-wrap.haolian-has-sidebar { grid-template-columns:1fr 300px; max-width:var(--hl-max-w); margin:0 auto; padding:48px 20px; }
.haolian-content-wrap.haolian-full-width { grid-template-columns:1fr; }
.haolian-main { min-width:0; }

/* ── 通用按钮 ──────────────────────────── */
.haolian-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 26px; border-radius:var(--hl-radius); font-size:14px; font-weight:600;
  font-family:var(--hl-font-body); text-decoration:none; cursor:pointer;
  border:2px solid transparent; transition:var(--hl-trans); white-space:nowrap;
}
.haolian-btn-primary { background:var(--hl-primary); color:#fff; border-color:var(--hl-primary); }
.haolian-btn-primary:hover { background:var(--hl-accent); border-color:var(--hl-accent); color:#fff; transform:translateY(-1px); opacity:1; }
.haolian-btn-accent  { background:var(--hl-accent); color:#fff; }
.haolian-btn-accent:hover { filter:brightness(1.1); color:#fff; transform:translateY(-1px); opacity:1; }
.haolian-btn-outline { background:transparent; color:var(--hl-primary); border-color:var(--hl-primary); }
.haolian-btn-outline:hover { background:var(--hl-primary); color:#fff; opacity:1; }
.haolian-btn-lg { padding:14px 36px; font-size:16px; }

/* ── 排版 ──────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family:var(--hl-font-head); font-weight:700; line-height:1.25; color:var(--hl-primary); }
h1 { font-size:clamp(28px,5vw,48px); }
h2 { font-size:clamp(22px,3.5vw,36px); }
h3 { font-size:clamp(18px,2.5vw,26px); }
h4 { font-size:18px; }
p  { line-height:1.75; color:var(--hl-text); margin-bottom:1em; }
p:last-child { margin-bottom:0; }

/* ── 面包屑 ────────────────────────────── */
.haolian-breadcrumb { padding:12px 0; }
.haolian-breadcrumb-list { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:13px; color:var(--hl-muted); }
.haolian-breadcrumb-list a { color:var(--hl-accent); }
.haolian-breadcrumb-sep { color:var(--hl-border); }

/* ── Gutenberg alignwide / alignfull ───── */
.alignwide  { max-width:calc(var(--hl-max-w) + 120px); margin-left:auto; margin-right:auto; }
.alignfull  { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
figure.wp-block-image.alignfull img { width:100%; }

/* ── 无障碍：跳转链接 ─────────────────── */
.skip-link { position:absolute; top:-100px; left:0; z-index:9999; background:var(--hl-primary); color:#fff; padding:8px 16px; border-radius:0 0 8px 0; }
.skip-link:focus { top:0; }

/* ── 工具类 ────────────────────────────── */
.haolian-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.haolian-text-center { text-align:center; }
.haolian-mt-0 { margin-top:0!important; }

/* ── 侧边栏 ────────────────────────────── */
.haolian-sidebar { background:var(--hl-card-bg); border-radius:var(--hl-radius-lg); padding:24px; border:1px solid var(--hl-border); }
.haolian-widget-title { font-size:15px; font-weight:700; color:var(--hl-primary); margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--hl-accent); }

/* ── 响应式 ────────────────────────────── */
@media(max-width:900px) {
  .haolian-content-wrap.haolian-has-sidebar { grid-template-columns:1fr; padding:32px 16px; }
}
@media(max-width:640px) {
  .haolian-container { padding:0 14px; }
  h1 { font-size:26px; }
  h2 { font-size:22px; }
}