/* =========================================================
   XIANG CHENG Electronic — Base CSS (extra.css)
   Direction B: Unified dark brand, content pages get a
   muted background (not full starfield) for readability
   ========================================================= */

/* ─── CJK font fallback ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');

:root {
  --md-text-font: "Inter", "Noto Sans TC", "Noto Sans JP", "Helvetica Neue",
                  "Microsoft JhengHei", "PingFang TC", "Hiragino Sans", sans-serif;
  --md-code-font: "JetBrains Mono", "Roboto Mono", "Courier New", monospace;

  /* Brand color tokens — defense-tech palette */
  --xc-bg:           #050b14;
  --xc-bg-soft:      #0a1622;
  --xc-bg-card:      rgba(255, 255, 255, 0.025);
  --xc-bg-card-hi:   rgba(74, 158, 255, 0.06);
  --xc-border:       rgba(74, 158, 255, 0.12);
  --xc-border-hi:    rgba(74, 158, 255, 0.32);
  --xc-text:         rgba(255, 255, 255, 0.95);
  --xc-text-soft:    rgba(255, 255, 255, 0.72);
  --xc-text-muted:   rgba(255, 255, 255, 0.5);
  --xc-text-dim:     rgba(255, 255, 255, 0.35);
  --xc-accent:       #4a9eff;
  --xc-accent-hi:    #6db2ff;
  --xc-accent-dim:   #2c5d99;
  --xc-accent-soft:  rgba(74, 158, 255, 0.1);
}

html[lang="ja"] {
  --md-text-font: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI",
                  "Meiryo", sans-serif;
}

body, .md-typeset {
  font-family: var(--md-text-font);
  color: var(--xc-text);
}

/* ─── Override Material defaults for our slate theme ─── */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--xc-bg);
  --md-default-fg-color: var(--xc-text);
  --md-typeset-a-color: var(--xc-accent);
  --md-accent-fg-color: var(--xc-accent);
  --md-primary-fg-color: var(--xc-bg);
}

/* ─── Hide Material's default header & tabs (we use our own navbar) ─── */
.md-header { display: none !important; }
.md-tabs { display: none !important; }

/* Sidebars are controlled per-page via frontmatter `hide: navigation toc`
   On home/about/contact: hidden via frontmatter
   On guide/insights: visible, styled via extra-content.css */

.md-grid { max-width: 1320px; }
.md-main__inner { margin-top: 0; }

/* Style Material's native sidebars for our dark theme */
.md-sidebar { background: transparent; }
.md-nav__title { color: var(--xc-text-muted) !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.7rem; }
.md-nav__link { color: var(--xc-text-soft) !important; }
.md-nav__link:hover, .md-nav__link--active { color: var(--xc-accent) !important; }
.md-nav__item .md-nav__link--active { font-weight: 600; }

/* ─── Background: full star field on home/page, muted on content ─── */

.xc-hero-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--xc-bg) url("../assets/space-bg.png") center/cover no-repeat;
}

/* Content pages: dim the starfield so long reads aren't fatiguing */
body:has(.xc-content) .xc-hero-bg,
body.xc-content-page .xc-hero-bg {
  opacity: 0.12;
}

.md-main { background: transparent !important; }
.md-content {
  background: transparent !important;
  margin-top: 90px;
}

/* ─── NAVBAR ─── */

.xc-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 9999;
  background: rgba(10, 22, 32, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--xc-border);
}

.xc-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  gap: 24px;
}

.xc-logo {
  flex: 0 0 auto;
}

.xc-logo a {
  color: var(--xc-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.xc-nav-logo {
  height: 32px;
  width: auto;
  vertical-align: middle;
}

.xc-nav-brand {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.xc-menu {
  display: flex;
  gap: 28px;
  flex: 1 1 auto;
  justify-content: center;
}

.xc-menu a {
  color: var(--xc-text-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.xc-menu a:hover {
  color: var(--xc-text);
}

.xc-menu a.active {
  color: var(--xc-accent);
  border-bottom-color: var(--xc-accent);
}

/* ─── Language switcher ─── */

.xc-lang {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.xc-lang a {
  color: var(--xc-text-muted);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  font-weight: 500;
}

.xc-lang a:hover {
  color: var(--xc-text);
}

.xc-lang a.active {
  color: var(--xc-accent);
  border-bottom-color: var(--xc-accent);
}

/* ─── Glass card (home/about/contact) ─── */

.xc-glass {
  margin: 5px auto;
  max-width: 760px;
  padding: 48px;
  border-radius: 24px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(10, 25, 40, .55);
  text-align: center;
  border: 1px solid var(--xc-border);
}

.xc-glass ul {
  text-align: left;
  display: inline-block;
  font-size: 0.85rem;
}

.md-content__inner > h1:first-child {
  display: none;
}

.xc-glass table {
  border: none;
  font-size: 0.82rem;
}

.xc-glass table td,
.xc-glass table th {
  border: none;
  padding: 0.3rem 0.8rem;
}

.xc-glass a {
  color: var(--xc-accent);
}

.xc-logo-img {
  display: block;
  margin: 0 auto 1rem;
  height: 64px;
  width: auto;
}

/* ─── Mobile ─── */

@media (max-width: 1024px) {
  .xc-menu { gap: 18px; }
}

@media (max-width: 768px) {
  .xc-navbar {
    height: auto;
    min-height: 64px;
  }

  .xc-nav-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
  }

  .xc-logo {
    width: 100%;
    text-align: center;
  }

  .xc-logo a {
    justify-content: center;
  }

  .xc-nav-logo { height: 24px; }
  .xc-nav-brand { font-size: 0.75rem; }

  .xc-menu {
    width: 100%;
    gap: 14px;
    font-size: 0.78rem;
    flex-wrap: wrap;
  }

  .xc-menu a {
    font-size: 0.8rem;
    padding: 4px 6px;
  }

  .xc-lang {
    width: 100%;
    justify-content: center;
    gap: 16px;
    font-size: 0.72rem;
  }

  .md-content { margin-top: 140px; }
}



/* ===== SparkNavi Blue product page cinematic background ===== */

.xc-prod-hero,
.xc-product-hero,
.md-content:has(.xc-prod-hero) .xc-prod-hero,
.md-content:has(.xc-product-hero) .xc-product-hero {
  position: relative !important;
  background:
    linear-gradient(90deg,
      rgba(2,8,18,.96) 0%,
      rgba(2,8,18,.82) 38%,
      rgba(2,8,18,.40) 68%,
      rgba(2,8,18,.88) 100%),
    linear-gradient(180deg,
      rgba(2,8,18,.20) 0%,
      rgba(2,8,18,.50) 55%,
      rgba(2,8,18,.96) 100%),
    url('../assets/product-blue-uav-mountain-bg.png') center center / cover no-repeat !important;
  overflow: hidden !important;
}

.xc-prod-hero::before,
.xc-product-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 68% 38%, rgba(70,140,255,.15), transparent 32%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.35));
  pointer-events: none;
  z-index: 0;
}

.xc-prod-hero::after,
.xc-product-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(80,150,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,150,255,.06) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: .28;
  pointer-events: none;
  z-index: 1;
}

.xc-prod-hero > *,
.xc-product-hero > * {
  position: relative;
  z-index: 2;
}