/* Shared site header cleanup (2026-05-31)
   Keeps the same compact header treatment across static and routed pages. */

.site-header:not(.hm-nav-open):not(.hm-mega-open),
.site-header.is-scrolled:not(.hm-nav-open):not(.hm-mega-open) {
  border-bottom-color: color-mix(in srgb, var(--text, #111) 10%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.04) !important;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), backdrop-filter 0.18s var(--ease) !important;
}

.site-header:not(.is-scrolled):not(.hm-nav-open):not(.hm-mega-open) {
  background: color-mix(in srgb, var(--bg, #fff) 82%, transparent) !important;
}

.site-header.is-scrolled:not(.hm-nav-open):not(.hm-mega-open) {
  background: color-mix(in srgb, var(--bg, #fff) 94%, transparent) !important;
}

html[data-theme="dark"] .site-header:not(.is-scrolled):not(.hm-nav-open):not(.hm-mega-open),
body.dark .site-header:not(.is-scrolled):not(.hm-nav-open):not(.hm-mega-open) {
  background: color-mix(in srgb, var(--bg, #15151a) 82%, transparent) !important;
}

html[data-theme="dark"] .site-header.is-scrolled:not(.hm-nav-open):not(.hm-mega-open),
body.dark .site-header.is-scrolled:not(.hm-nav-open):not(.hm-mega-open) {
  background: color-mix(in srgb, var(--bg, #15151a) 94%, transparent) !important;
}

.site-header .header-inner,
.site-header:not(.is-scrolled):not(.hm-nav-open):not(.hm-mega-open) .header-inner {
  height: 82px !important;
  transition: height 0.18s var(--ease) !important;
}

.site-header.is-scrolled .header-inner {
  height: 72px !important;
  transition: height 0.18s var(--ease) !important;
}

.site-header .logo-mark,
.site-header:not(.is-scrolled):not(.hm-nav-open):not(.hm-mega-open) .logo-mark {
  width: clamp(168px, 14vw, 188px) !important;
  transition: width 0.18s var(--ease), filter 0.18s var(--ease) !important;
}

.site-header.is-scrolled .logo-mark {
  width: 156px !important;
  transition: width 0.18s var(--ease), filter 0.18s var(--ease) !important;
}

.site-header .nav {
  gap: clamp(18px, 2vw, 24px) !important;
}

.site-header .nav-list--tree {
  gap: clamp(22px, 2.35vw, 30px) !important;
}

.site-header .nav-tree__heading {
  color: var(--c-ink, var(--text, #111)) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.075em !important;
}

.site-header .header-actions {
  gap: 8px !important;
}

.site-header .nav-icon {
  width: 36px !important;
  height: 36px !important;
}

@media (min-width: 901px) {
  .site-header .nav-tree__heading {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 48px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .site-header .nav-tree__heading::after {
    display: block !important;
    color: color-mix(in srgb, var(--text, #111) 60%, transparent) !important;
    border: 0 !important;
    font-family: var(--font-body, var(--font-base, sans-serif)) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .site-header .nav-tree__heading[href="/buy-guide/"]::after {
    content: "買い時" !important;
  }

  .site-header .nav-tree__heading[href="/products/"]::after {
    content: "製品データ" !important;
  }

  .site-header .nav-tree__heading[href="/rumors/"]::after {
    content: "噂" !important;
  }

  .site-header .nav-tree__heading[href="/articles"]::after {
    content: "記事" !important;
  }

  .site-header .nav-tree__heading[href="/performance-map/"]::after {
    content: "ツール" !important;
  }

  .site-header .nav-tree__heading[href="/about"]::after {
    content: "その他" !important;
  }

  .site-header.is-scrolled .nav-tree__heading {
    min-height: 38px !important;
  }

  .site-header.is-scrolled .nav-tree__heading::after {
    content: none !important;
    display: none !important;
  }

  .site-header .nav-list--tree .nav-tree__children {
    top: calc(100% + 24px) !important;
  }

  .site-header .nav-list--tree .nav-tree__children::before {
    top: -26px !important;
    height: 26px !important;
  }

  .site-header.is-scrolled .nav-list {
    display: flex !important;
  }

  body.home-page .site-header.is-scrolled .nav-list,
  .site-header.is-scrolled .nav-list.nav-list--tree {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .site-header #nav-toggle.hm-nav-toggle {
    display: none !important;
  }
}

.site-header .hm-header-dashboard,
.site-header.is-scrolled .hm-header-dashboard {
  display: none !important;
}

@media (max-width: 900px) {
  .site-header .header-inner,
  .site-header:not(.is-scrolled):not(.hm-nav-open):not(.hm-mega-open) .header-inner {
    height: 76px !important;
  }

  .site-header.is-scrolled .header-inner {
    height: 68px !important;
  }

  .site-header .logo-mark,
  .site-header:not(.is-scrolled):not(.hm-nav-open):not(.hm-mega-open) .logo-mark {
    width: clamp(132px, 38vw, 158px) !important;
  }

  .site-header.is-scrolled .logo-mark {
    width: clamp(118px, 34vw, 142px) !important;
  }
}