/* ============================================
   XINGJIA DESIGN SYSTEM — UTILITIES
   高频工具类，用于替代内联样式
   ============================================ */

/* ---------- Layout ---------- */
.xj-container {
  width: 100%;
  max-width: var(--xj-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 5vw, 3rem);
  padding-right: clamp(1rem, 5vw, 3rem);
}

.xj-flex   { display: flex; }
.xj-iflex  { display: inline-flex; }
.xj-grid   { display: grid; }
.xj-block  { display: block; }
.xj-iblock { display: inline-block; }
.xj-hidden { display: none; }

.xj-items-center   { align-items: center; }
.xj-items-start    { align-items: flex-start; }
.xj-items-end      { align-items: flex-end; }
.xj-justify-center { justify-content: center; }
.xj-justify-between { justify-content: space-between; }
.xj-justify-end    { justify-content: flex-end; }

.xj-flex-col { flex-direction: column; }
.xj-flex-wrap { flex-wrap: wrap; }
.xj-flex-1 { flex: 1 1 0%; }
.xj-shrink-0 { flex-shrink: 0; }

.xj-gap-1 { gap: var(--xj-space-1); }
.xj-gap-2 { gap: var(--xj-space-2); }
.xj-gap-3 { gap: var(--xj-space-3); }
.xj-gap-4 { gap: var(--xj-space-4); }
.xj-gap-5 { gap: var(--xj-space-5); }
.xj-gap-6 { gap: var(--xj-space-6); }
.xj-gap-8 { gap: var(--xj-space-8); }

/* ---------- Spacing ---------- */
.xj-m-0  { margin: 0; }
.xj-mt-0 { margin-top: 0; }
.xj-mb-0 { margin-bottom: 0; }
.xj-mt-2 { margin-top: var(--xj-space-2); }
.xj-mb-2 { margin-bottom: var(--xj-space-2); }
.xj-mt-3 { margin-top: var(--xj-space-3); }
.xj-mb-3 { margin-bottom: var(--xj-space-3); }
.xj-mt-4 { margin-top: var(--xj-space-4); }
.xj-mt-5 { margin-top: var(--xj-space-5); }
.xj-mb-4 { margin-bottom: var(--xj-space-4); }
.xj-mt-6 { margin-top: var(--xj-space-6); }
.xj-mb-6 { margin-bottom: var(--xj-space-6); }
.xj-mt-8 { margin-top: var(--xj-space-8); }
.xj-mb-8 { margin-bottom: var(--xj-space-8); }

.xj-p-0  { padding: 0; }
.xj-px-4 { padding-left: var(--xj-space-4); padding-right: var(--xj-space-4); }
.xj-py-4 { padding-top: var(--xj-space-4); padding-bottom: var(--xj-space-4); }

/* ---------- Typography ---------- */
.xj-text-xs  { font-size: var(--xj-text-xs); }
.xj-text-sm  { font-size: var(--xj-text-sm); }
.xj-text-base { font-size: var(--xj-text-base); }
.xj-text-lg  { font-size: var(--xj-text-lg); }
.xj-text-xl  { font-size: var(--xj-text-xl); }
.xj-text-2xl { font-size: var(--xj-text-2xl); }

.xj-font-normal   { font-weight: var(--xj-font-normal); }
.xj-font-medium   { font-weight: var(--xj-font-medium); }
.xj-font-semibold { font-weight: var(--xj-font-semibold); }
.xj-font-bold     { font-weight: var(--xj-font-bold); }

.xj-text-center  { text-align: center; }
.xj-text-left    { text-align: left; }
.xj-text-right   { text-align: right; }

.xj-text-primary   { color: var(--xj-text); }
.xj-text-secondary { color: var(--xj-text-secondary); }
.xj-text-muted     { color: var(--xj-text-muted); }
.xj-text-accent    { color: var(--xj-accent); }
.xj-text-gold      { color: var(--xj-gold); }
.xj-text-inverse   { color: var(--xj-text-inverse); }

.xj-leading-tight   { line-height: var(--xj-leading-tight); }
.xj-leading-normal  { line-height: var(--xj-leading-normal); }
.xj-leading-relaxed { line-height: var(--xj-leading-relaxed); }

/* ---------- Visual ---------- */
.xj-rounded-sm  { border-radius: var(--xj-radius-sm); }
.xj-rounded-md  { border-radius: var(--xj-radius-md); }
.xj-rounded-lg  { border-radius: var(--xj-radius-lg); }
.xj-rounded-xl  { border-radius: var(--xj-radius-xl); }
.xj-rounded-full { border-radius: var(--xj-radius-full); }

.xj-shadow-sm { box-shadow: var(--xj-shadow-sm); }
.xj-shadow-md { box-shadow: var(--xj-shadow-md); }
.xj-shadow-lg { box-shadow: var(--xj-shadow-lg); }

.xj-border      { border: 1px solid var(--xj-border); }
.xj-border-subtle { border: 1px solid var(--xj-border-subtle); }

.xj-bg-surface { background-color: var(--xj-surface); }
.xj-bg-raised  { background-color: var(--xj-surface-raised); }

.xj-w-full  { width: 100%; }
.xj-h-full  { height: 100%; }
.xj-overflow-hidden { overflow: hidden; }

/* ---------- Responsive helpers ---------- */
@media (max-width: 768px) {
  .xj-hide-sm { display: none !important; }
  .xj-text-center-sm { text-align: center; }
}

@media (min-width: 769px) {
  .xj-hide-md-up { display: none !important; }
}

/* ============================================
   ADDITIONAL UTILITIES — 模板使用但原 utilities.css 缺失的类
   ============================================ */

/* ---------- Additional Spacing ---------- */
.xj-ml-4 { margin-left: var(--xj-space-4); }

/* ---------- Responsive Grid ---------- */
@media (max-width: 768px) {
  .xj-nav-menu { display: none; }
}

/* ============================================
   SYSTEM OVERRIDES — 从旧 overrides.css 迁移的有用样式
   ============================================ */

/* ---------- Logo 图片 ---------- */
.nav-logo-img {
  height: 36px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

/* ---------- Mobile Drawer ---------- */
.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--glass-border);
}
.nav-drawer-brand {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.nav-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  transition: all var(--xj-duration-fast) var(--xj-ease-out);
}
.nav-drawer-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}
.nav-drawer-close svg {
  width: 20px;
  height: 20px;
}
[data-theme="light"] .nav-drawer-close {
  color: var(--xj-text-secondary);
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .nav-drawer-close:hover {
  color: var(--xj-text-primary);
  background: rgba(0, 0, 0, 0.08);
}

/* ---------- Image fallback ---------- */
.xj-img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: var(--xj-surface);
  color: var(--xj-text-muted);
}
.xj-img-fallback svg {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

/* ---------- Focus visible for nav ---------- */
.nav-link:focus-visible,
.nav-dropdown a:focus-visible,
.nav-drawer a:focus-visible {
  outline: 2px solid var(--xj-accent);
  outline-offset: 2px;
}

/* ---------- Home page helpers ---------- */
.hero-btn-arrow { font-size: 0.82em; opacity: 0.8; }
.stat-unit { font-size: 1.2rem; font-weight: 700; margin-left: 0.1rem; }

/* ---------- Nav dropdown decorations ---------- */
.dd-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform .2s, opacity .2s;
  vertical-align: middle;
}
.nav-dropdown a:hover .dd-arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* ---------- Theme toggle ---------- */
.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.theme-toggle:hover svg {
  transform: rotate(15deg) scale(1.1);
}
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="light"] .theme-icon-moon { display: block; }
[data-theme="light"] .theme-icon-sun { display: none; }

/* ---------- Card backgrounds fix (legacy compat) ---------- */
.product-card,
.scenario-card,
.service-card,
.cert-item,
.timeline-card,
.stat-card,
.filter-btn,
.product-list-card,
.related-card,
.faq-cat-btn,
.faq-item,
.contact-info-card,
.contact-form,
.info-block-card,
.tech-detail-card,
.vi-color-info {
  background: var(--card-bg) !important;
}