/* ============================================================
   @kit-component header-nav (styles)
   @status     stable
   @since      0.1.0
   @source     大地アート / 髙笠 の固定ヘッダー＋ドロワーを汎用化
   @requires   tokens/tokens.css（--color-* / --spacing-* / --transition-*）

   固定ヘッダー＋右スライドドロワーの最小スタイル。
   見た目の微調整（影の強さ・ロゴサイズ等）は各サイト側CSSで上書き前提。
   ============================================================ */

/* --- ヘッダー本体 ------------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-xl);
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-line);
  transition: background var(--transition-slow), padding var(--transition-slow), box-shadow var(--transition-slow);
}
/* home-page の hero 上では透過（JSが .transparent を付与） */
.header.transparent {
  background: transparent;
  border-bottom-color: transparent;
}
.header.scrolled {
  background: var(--color-bg-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header__logo {
  font-weight: 700;
  color: var(--color-text-dark);
  text-decoration: none;
  font-size: var(--font-size-h3);
}

/* --- ナビ（PC） -------------------------------------------------- */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}
.nav-link {
  color: var(--color-text-dark);
  text-decoration: none;
  font-size: var(--font-size-small);
  letter-spacing: 0.04em;
  transition: color var(--transition-base);
}
.nav-link:hover { color: var(--color-accent); }

.nav-cta {
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-bg-white);
  border-radius: 4px;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-base);
}
.nav-cta:hover { background: var(--color-accent); transform: translateY(-2px); }

/* --- ハンバーガー（モバイルのみ表示） ---------------------------- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  background: none; border: none;
  cursor: pointer;
  z-index: 1100;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--color-text-dark);
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- ドロワー＋オーバーレイ ------------------------------------- */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  z-index: 1050;
}
.mobile-overlay.active { opacity: 1; visibility: visible; }

/* --- レスポンシブ：1024px以下でドロワー化 ----------------------- */
@media (max-width: 1024px) {
  .hamburger { display: flex; }

  .header-nav {
    position: fixed;
    top: 0; right: -300px;
    width: 300px; height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-4xl) var(--spacing-xl);
    background: var(--color-bg-white);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transition: right var(--transition-slow);
    z-index: 1080;
  }
  .header-nav.mobile-open { right: 0; }
}