/* ===== 2026-05 UI fixes ===== */

/* Product image path resilience: if browser blocks relative image in nested routes,
   keep hero image sizing consistent after HTML path fix. */
.xc-hero-product img,
.xc-prod-hero img,
.xc-product-hero img {
  max-width: min(520px, 42vw);
  height: auto;
}

/* Header brand language:
   Hide Latin wordmark on zh/ja pages and show localized name by URL path.
   The original small logo remains visible. */
html[lang="zh"] .xc-nav-brand,
html[lang="zh-Hant"] .xc-nav-brand,
body:has(a[href$="/zh/"].active) .xc-nav-brand,
body:has(.xc-lang a.active[href*="/zh"]) .xc-nav-brand {
  font-size: 0 !important;
}
html[lang="zh"] .xc-nav-brand::after,
html[lang="zh-Hant"] .xc-nav-brand::after,
body:has(a[href$="/zh/"].active) .xc-nav-brand::after,
body:has(.xc-lang a.active[href*="/zh"]) .xc-nav-brand::after {
  content: "向成電子";
  font-size: 1.05rem;
  letter-spacing: .12em;
  color: #fff;
  font-weight: 800;
}

html[lang="ja"] .xc-nav-brand,
body:has(a[href$="/ja/"].active) .xc-nav-brand,
body:has(.xc-lang a.active[href*="/ja"]) .xc-nav-brand {
  font-size: 0 !important;
}
html[lang="ja"] .xc-nav-brand::after,
body:has(a[href$="/ja/"].active) .xc-nav-brand::after,
body:has(.xc-lang a.active[href*="/ja"]) .xc-nav-brand::after {
  content: "向成電子";
  font-size: 1.05rem;
  letter-spacing: .12em;
  color: #fff;
  font-weight: 800;
}

/* Fallback for MkDocs localized URL paths */
html:has(link[href*="/zh/"]) .xc-nav-brand {
  font-size: 0 !important;
}

/* Guide/tutorial readability:
   Replace the awkward alternating card timeline with clean technical content cards. */
.xc-guide-grid,
.xc-tutorial-grid,
.xc-doc-grid,
.xc-guide-steps,
.xc-setup-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  max-width: 920px !important;
  margin: 0 auto !important;
}

.xc-guide-card,
.xc-tutorial-card,
.xc-doc-card,
.xc-step-card,
.xc-guide-item {
  width: 100% !important;
  min-height: auto !important;
  padding: 28px 32px !important;
  background: rgba(7, 16, 31, .88) !important;
  border: 1px solid rgba(76, 158, 255, .18) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

.xc-guide-card h2,
.xc-tutorial-card h2,
.xc-doc-card h2,
.xc-step-card h2,
.xc-guide-item h2,
.xc-guide-card h3,
.xc-tutorial-card h3,
.xc-doc-card h3,
.xc-step-card h3,
.xc-guide-item h3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-size: 1.35rem !important;
  line-height: 1.35 !important;
  letter-spacing: .02em !important;
  color: #f6fbff !important;
}

.xc-guide-card p,
.xc-tutorial-card p,
.xc-doc-card p,
.xc-step-card p,
.xc-guide-item p,
.xc-guide-card li,
.xc-tutorial-card li,
.xc-doc-card li,
.xc-step-card li,
.xc-guide-item li {
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: rgba(232,241,255,.82) !important;
}

/* Generic article cards in guide pages that were too empty/narrow */
.md-typeset .grid.cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  gap: 22px !important;
}
.md-typeset .grid.cards > * {
  padding: 24px 28px !important;
  min-height: auto !important;
}

/* Tables and content width in guide pages */
.md-content__inner {
  line-height: 1.78;
}
.md-typeset table {
  font-size: .95rem;
}

/* Guide page: remove large empty vertical spacing around cards */
.md-typeset .grid,
.md-typeset .cards {
  margin-top: 1.2rem !important;
  margin-bottom: 1.2rem !important;
}

/* Responsive */
@media (max-width: 900px) {
  .md-typeset .grid.cards {
    grid-template-columns: 1fr !important;
  }
}