/* ============================================================
   qltrq-base.css  --  邛崃天然气 ltkcCMS qltrq 主题基础样式
   设计令牌: 天然气蓝 #1565a0 / 青蓝 #1a9fd6 / 深蓝 #06345f
   创建: 2026-08-03
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  --qt-blue: #1565a0;
  --qt-deep: #06345f;
  --qt-cyan: #1a9fd6;
  --qt-warm: #d26f20;
  --qt-ink: #183047;
  --qt-mist: #f3f8fa;
  --qt-line: #dce8ec;
  --qt-white: #ffffff;
  --qt-gray: #6b7c8a;
  --qt-gray-light: #a8b5c0;
  --qt-success: #2e8b57;
  --qt-danger: #c0392b;
  --qt-radius: 6px;
  --qt-radius-lg: 10px;
  --qt-shadow: 0 2px 12px rgba(6,52,95,0.08);
  --qt-shadow-hover: 0 4px 20px rgba(6,52,95,0.15);
  --qt-transition: 0.3s ease;
  --qt-container: 1200px;
  --qt-nav-h: 52px;
  --qt-topbar-h: 80px;
}

/* ---------- 重置 ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body { overflow-x:hidden; font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif; color:var(--qt-ink); background:var(--qt-white); line-height:1.7; }
a { color:var(--qt-blue); text-decoration:none; transition:color var(--qt-transition); }
a:hover { color:var(--qt-cyan); }
img { max-width:100%; height:auto; display:block; }
ul,ol { list-style:none; }
input,button,textarea { font-family:inherit; font-size:inherit; outline:none; border:none; }
.clearfix::after { content:""; display:block; clear:both; }

/* ---------- 容器 ---------- */
.qt-container { max-width:var(--qt-container); margin:0 auto; padding:0 20px; }

/* ---------- 顶栏 ---------- */
.qt-topbar {
  background:linear-gradient(135deg,var(--qt-deep),var(--qt-blue));
  height:var(--qt-topbar-h);
  display:flex;
  align-items:center;
  color:var(--qt-white);
}
.qt-topbar__inner { display:flex; align-items:center; justify-content:space-between; width:100%; }
.qt-brand {
  display:flex; align-items:center; gap:12px;
  padding:6px 14px 6px 8px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 12px rgba(3,31,61,.16);
  transition:background var(--qt-transition), border-color var(--qt-transition);
}
.qt-brand:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.42); }
.qt-brand img { height:50px; width:auto; }
.qt-topbar__side { display:flex; align-items:center; gap:24px; }
.qt-date { font-size:13px; color:rgba(255,255,255,0.85); display:flex; align-items:center; gap:6px; }
.qt-date i { color:var(--qt-cyan); }
.qt-topsearch { display:flex; align-items:center; background:rgba(255,255,255,0.15); border-radius:var(--qt-radius); overflow:hidden; }
.qt-topsearch input { background:transparent; color:var(--qt-white); padding:7px 12px; width:200px; }
.qt-topsearch input::placeholder { color:rgba(255,255,255,0.6); }
.qt-topsearch button { background:var(--qt-cyan); color:var(--qt-white); padding:7px 14px; cursor:pointer; display:flex; align-items:center; }
.qt-topsearch button:hover { background:var(--qt-blue); }

/* ---------- 主导航 ---------- */
.qt-mainnav {
  background:var(--qt-white);
  height:var(--qt-nav-h);
  box-shadow:0 2px 8px rgba(6,52,95,0.06);
  position:relative;
  z-index:100;
}
.qt-mainnav.is-sticky { position:fixed; top:0; left:0; right:0; box-shadow:0 2px 16px rgba(6,52,95,0.12); }
.qt-nav { display:flex; align-items:center; justify-content:center; height:var(--qt-nav-h); }
.qt-nav__item { position:relative; height:100%; display:flex; align-items:center; }
.qt-nav__item > a { display:flex; align-items:center; gap:4px; padding:0 18px; height:100%; color:var(--qt-ink); font-size:15px; font-weight:600; border-bottom:3px solid transparent; transition:all var(--qt-transition); }
.qt-nav__item > a i { font-size:12px; }
.qt-nav__item:hover > a,
.qt-nav__item.is-active > a { color:var(--qt-blue); border-bottom-color:var(--qt-blue); }
.qt-dropdown {
  position:absolute;
  top:100%;
  left:0;
  min-width:180px;
  background:var(--qt-white);
  box-shadow:var(--qt-shadow-hover);
  border-radius:0 0 var(--qt-radius) var(--qt-radius);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:all var(--qt-transition);
  z-index:200;
}
.qt-nav__item:hover .qt-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.qt-dropdown a { display:block; padding:10px 18px; color:var(--qt-ink); font-size:14px; border-bottom:1px solid var(--qt-line); }
.qt-dropdown a:last-child { border-bottom:none; }
.qt-dropdown a:hover { background:var(--qt-mist); color:var(--qt-blue); padding-left:24px; }

/* ---------- 页脚 ---------- */
.qt-footer { background:var(--qt-deep); color:rgba(255,255,255,0.8); padding:40px 0 0; }
.qt-footer-grid { display:grid; grid-template-columns:2fr 1fr 1.2fr 1fr; gap:40px; padding-bottom:30px; }
.qt-footer-about p { font-size:13px; line-height:1.8; margin-top:10px; color:rgba(255,255,255,0.65); }
.qt-footer-logo { height:40px; margin-bottom:8px; filter:brightness(0) invert(1); }
.qt-footer-slogan { color:var(--qt-cyan); font-size:13px; margin-top:6px; }
.qt-footer-title { display:block; font-size:15px; font-weight:600; color:var(--qt-white); margin-bottom:14px; }
.qt-footer-links li { margin-bottom:8px; }
.qt-footer-links a { color:rgba(255,255,255,0.65); font-size:13px; }
.qt-footer-links a:hover { color:var(--qt-cyan); }
.qt-footer-contact li { display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:10px; color:rgba(255,255,255,0.65); }
.qt-footer-contact li i { color:var(--qt-cyan); width:16px; text-align:center; }
.qt-footer-contact li b { color:var(--qt-white); font-size:16px; letter-spacing:1px; }
.qt-footer-qr img { width:110px; height:110px; border-radius:var(--qt-radius); }
.qt-footer-qr p { text-align:center; font-size:12px; margin-top:6px; color:rgba(255,255,255,0.55); }
.qt-footer-flinks { border-top:1px solid rgba(255,255,255,0.1); padding:14px 0; font-size:13px; }
.qt-footer-flinks span { color:rgba(255,255,255,0.5); }
.qt-footer-flinks a { color:rgba(255,255,255,0.6); margin-right:12px; }
.qt-footer-flinks a:hover { color:var(--qt-cyan); }
.qt-footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding:14px 0; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,0.5); }
.qt-footer-bottom a { color:rgba(255,255,255,0.5); }
.qt-footer-bottom a:hover { color:var(--qt-cyan); }
.qt-beian-ico { width:16px; height:16px; vertical-align:middle; display:inline; }

/* ---------- 返回顶部 ---------- */
.qt-backtop {
  position:fixed;
  right:24px;
  bottom:80px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--qt-blue);
  color:var(--qt-white);
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all var(--qt-transition);
  z-index:300;
  box-shadow:0 4px 12px rgba(6,52,95,0.3);
}
.qt-backtop.is-show { opacity:1; visibility:visible; }
.qt-backtop:hover { background:var(--qt-cyan); transform:translateY(-4px); }

/* ---------- 通用组件 ---------- */
.qt-section { padding:40px 0; }
.qt-section--mist { background:var(--qt-mist); }
.qt-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.qt-section-title { display:flex; align-items:baseline; gap:10px; }
.qt-section-title h2 { font-size:24px; color:var(--qt-ink); font-weight:700; }
.qt-section-title span { font-size:13px; color:var(--qt-gray-light); text-transform:uppercase; letter-spacing:1px; }
.qt-section-more { font-size:14px; color:var(--qt-blue); display:flex; align-items:center; gap:4px; }
.qt-section-more:hover { color:var(--qt-cyan); }
.qt-section-more i { font-size:12px; }

/* 按钮 */
.qt-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:var(--qt-radius); font-size:14px; font-weight:500; cursor:pointer; transition:all var(--qt-transition); }
.qt-btn--primary { background:var(--qt-blue); color:var(--qt-white); }
.qt-btn--primary:hover { background:var(--qt-deep); color:var(--qt-white); }
.qt-btn--outline { border:1px solid var(--qt-blue); color:var(--qt-blue); background:transparent; }
.qt-btn--outline:hover { background:var(--qt-blue); color:var(--qt-white); }

/* 卡片 */
.qt-card { background:var(--qt-white); border-radius:var(--qt-radius-lg); box-shadow:var(--qt-shadow); overflow:hidden; transition:box-shadow var(--qt-transition),transform var(--qt-transition); }
.qt-card:hover { box-shadow:var(--qt-shadow-hover); transform:translateY(-4px); }

/* 标签 */
.qt-badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:500; }
.qt-badge--blue { background:rgba(21,101,160,0.1); color:var(--qt-blue); }
.qt-badge--warm { background:rgba(210,111,32,0.1); color:var(--qt-warm); }
.qt-badge--cyan { background:rgba(26,159,214,0.1); color:var(--qt-cyan); }

/* ---------- 移动端通用 ---------- */
.qt-mobile-only { display:none; }
.qt-desktop-only { display:block; }

/* ---------- 响应式 ---------- */
@media (max-width:991px) {
  .qt-topbar { height:auto; padding:10px 0; }
  .qt-topbar__inner { flex-direction:column; gap:10px; }
  .qt-topbar__side { width:100%; justify-content:center; }
  .qt-topsearch input { width:140px; }
  .qt-footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .qt-mobile-only { display:block; }
  .qt-desktop-only { display:none; }
}
@media (max-width:575px) {
  .qt-footer-grid { grid-template-columns:1fr; gap:20px; text-align:center; }
  .qt-footer-contact li { justify-content:center; }
  .qt-footer-qr img { margin:0 auto; }
  .qt-topsearch { width:100%; }
  .qt-topsearch input { width:100%; flex:1; }
  .qt-backtop { right:14px; bottom:60px; }
}
/* ============================================================
   桥接层（2026-08-03 接管合并）：令牌别名 + 区块/按钮扩展 + 移动端抽屉
   ============================================================ */
:root {
  --qt-primary: var(--qt-blue);
  --qt-primary-deep: var(--qt-deep);
  --qt-primary-dark: #052a4e;
  --qt-accent: #f0582b;
  --qt-accent-soft: #fff1ea;
  --qt-ink-2: var(--qt-gray);
  --qt-ink-3: var(--qt-gray-light);
  --qt-bg: #f4f6f9;
  --qt-card: #ffffff;
  --qt-tr: all var(--qt-transition);
}

/* ---------- 区块标题（qt-sec 系列，首页/内页共用） ---------- */
.qt-sec { padding:48px 0; }
.qt-sec--mist { background:linear-gradient(180deg,#eef3f9 0%,#f7fafd 100%); }
.qt-sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.qt-sec-head h2 { position:relative; font-size:26px; color:var(--qt-deep); padding-left:14px; }
.qt-sec-head h2::before { content:""; position:absolute; left:0; top:5px; bottom:5px; width:5px; border-radius:3px; background:linear-gradient(180deg,var(--qt-blue),var(--qt-accent)); }
.qt-sec-head .qt-sec-sub { margin:6px 0 0; padding-left:19px; color:var(--qt-gray); font-size:14px; width:100%; }
.qt-sec-head--in { margin-bottom:18px; }
.qt-sec-head--in h2 { font-size:20px; }
.qt-more { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--qt-gray); border:1px solid var(--qt-line); border-radius:999px; padding:6px 16px; background:#fff; transition:var(--qt-tr); }
.qt-more:hover { color:#fff; background:var(--qt-blue); border-color:var(--qt-blue); }

/* ---------- 按钮扩展 ---------- */
.qt-btn { color:var(--qt-white); background:var(--qt-blue); }
.qt-btn:hover { background:var(--qt-deep); color:var(--qt-white); }
.qt-btn--accent { background:linear-gradient(135deg,#f0582b,#e8431b); box-shadow:0 4px 14px rgba(240,88,43,.35); }
.qt-btn--accent:hover { background:linear-gradient(135deg,#e8431b,#d6370f); color:var(--qt-white); }
.qt-btn--ghost { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.55); color:var(--qt-white); }
.qt-btn--ghost:hover { background:rgba(255,255,255,.28); color:var(--qt-white); }

/* ---------- 移动端头部与抽屉（桌面隐藏） ---------- */
.qt-mobile-header, .qt-mobile-overlay, .qt-mobile-menu { display:none; }
@media (max-width:991px) {
  .qt-topbar, .qt-mainnav { display:none; }
  .qt-mobile-header {
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:950;
    padding:10px 16px; background:linear-gradient(90deg,var(--qt-deep),var(--qt-blue));
    box-shadow:0 2px 10px rgba(6,52,95,.25);
  }
  .qt-mobile-header img { height:36px; width:auto; background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.38); border-radius:6px; padding:3px 8px; box-shadow:0 2px 8px rgba(3,31,61,.18); }
  .qt-mobile-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:9px; border-radius:8px; background:rgba(255,255,255,.14); cursor:pointer; }
  .qt-mobile-toggle span { display:block; height:2px; border-radius:2px; background:#fff; }
  .qt-mobile-overlay { position:fixed; inset:0; z-index:960; background:rgba(6,38,74,.5); opacity:0; visibility:hidden; transition:var(--qt-tr); }
  .qt-mobile-overlay.is-open { display:block; opacity:1; visibility:visible; }
  .qt-mobile-menu {
    display:block; position:fixed; top:0; right:0; bottom:0; z-index:970;
    width:min(78vw,320px); background:linear-gradient(180deg,var(--qt-deep),#0a2a4d);
    padding:18px 20px; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s ease;
  }
  .qt-mobile-menu.is-open { transform:translateX(0); }
  .qt-mobile-close { display:flex; justify-content:flex-end; color:#fff; font-size:22px; cursor:pointer; padding:4px; }
  .qt-mobile-nav > li > a {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 4px; font-size:16px; color:#fff;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .qt-mobile-sub { display:none; padding:4px 0 8px 14px; }
  .qt-mobile-sub.is-open { display:block; }
  .qt-mobile-sub a { display:block; padding:10px 4px; font-size:14.5px; color:rgba(255,255,255,.8); }
  .qt-mobile-sub a:active { color:var(--qt-accent); }
}