/*
 * Header — thai-massage v2.0（参照準拠 3段ヘッダー + デスクトップ横帯ナビ）
 * Spec: DESIGN.md §4-1（3段構造 + ナビ切替）/ §9（レスポンシブ）
 *
 * 構造（partials/header.html）:
 *   ① .header-tagline   — 中央・小サイズ（{{tagline}}）
 *   ② .header-brand-row — 中央ロゴ + 右 .header-social
 *   ③ .header-nav-row   — .desktop-nav 横帯（≥1024）+ .menu-toggle（<1024）
 *
 * ナビ切替（DESIGN.md §4-1 条件②）:
 *   ≥1024px : .desktop-nav 表示 / .menu-toggle・.site-sidebar 非表示
 *   ≤1023px : .desktop-nav 非表示 / .menu-toggle・.site-sidebar 表示
 *   site-runtime（sidebar-toggle.ts）は無改変。.menu-toggle を ≥1024 で
 *   display:none にすればデスクトップでは事実上 no-op。
 *
 * 振る舞い:
 *   - 初期: 透過（上→下グラデーション暗→透明）+ on-dark テキスト
 *   - スクロール後（.is-scrolled）: cream 背景 + 影 + text 色
 *
 * 色は var(--color-*) 経由のみ（ハードコード禁止 / Palsea --brand-* 不使用）。
 * 3段の高さは DESIGN.md §4 のトークンを参照（variables.css 未定義時は fallback）。
 */

/* ── 共有 SNS リスト（partials/social-links.html）──────
 * header / sidebar drawer / hamburger の 3 文脈で include 共有（DRY）。
 * 既定で横並び・ビュレット無しに統一。文脈別のアイコン寸法/色は
 * 各文脈の CSS（.sidebar-social a / .hamburger-social a / .header-social）が
 * 子孫セレクタで上書きする。
 */
.social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links li {
  flex: 0 0 auto;
}

/* 未入力の SNS（config に URL が無い）は href="" になり、クリックでホームへ
 * 遷移してしまう（C-6）。空 href のリンクは項目ごと非表示にする。
 * テンプレエンジンは条件分岐非対応のため、出し分けは CSS で行う。 */
.social-links li:has(a[href='']),
.social-links li:has(a:not([href])) {
  display: none;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg, var(--color-overlay-header-top) 0%, transparent 100%);
  transition:
    background var(--duration-normal) var(--easing-standard),
    box-shadow var(--duration-normal) var(--easing-standard);
}

.site-header.is-scrolled {
  background: var(--color-surface-translucent);
  box-shadow: 0 2px 8px var(--color-shadow-subtle);
}

/* ── ① タグライン帯 ───────────────────────────────── */
.header-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-tagline-h, 32px);
  padding: 0 var(--header-padding-x);
}

.header-tagline__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-on-dark-sub);
  text-align: center;
  transition: color var(--duration-normal) var(--easing-standard);
}

.site-header.is-scrolled .header-tagline__text {
  color: var(--color-text-secondary);
}

/* タグラインが空（{{tagline}} 未設定）のときは帯を畳む */
.header-tagline__text:empty {
  display: none;
}

/* ── ② 中央ロゴ + 右 SNS ─────────────────────────── */
.header-brand-row {
  min-height: var(--header-brand-h, 72px);
}

.header-brand-row__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-brand-h, 72px);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--header-padding-x);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-on-dark);
  text-decoration: none;
  transition: color var(--duration-normal) var(--easing-standard);
}

.site-header.is-scrolled .site-logo {
  color: var(--color-text);
}

.site-logo__img {
  display: block;
  height: var(--site-logo-h, 96px);
  width: auto;
  object-fit: contain;
}

/* SNS をブランド行の右端へ */
.header-social {
  position: absolute;
  right: var(--header-padding-x);
  top: 50%;
  transform: translateY(-50%);
}

.header-social .social-links a {
  color: var(--color-text-on-dark);
  transition:
    color var(--duration-normal) var(--easing-standard),
    opacity var(--duration-normal) var(--easing-standard);
}

.header-social .social-links a:hover,
.header-social .social-links a:focus-visible {
  opacity: 0.7;
}

.site-header.is-scrolled .header-social .social-links a {
  color: var(--color-text);
}

/* ── ③ 横帯ナビ + ハンバーガー ───────────────────── */
.header-nav-row {
  min-height: var(--header-nav-h, 52px);
  border-top: 1px solid var(--color-overlay-white-subtle);
  transition: border-color var(--duration-normal) var(--easing-standard);
}

.site-header.is-scrolled .header-nav-row {
  border-top-color: var(--color-border-light);
}

.header-nav-row__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-nav-h, 52px);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--header-padding-x);
}

/* デスクトップ横帯ナビ */
.desktop-nav {
  display: flex;
}

.desktop-nav__list {
  display: flex;
  align-items: center;
  gap: var(--gap-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-nav__link {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-on-dark);
  text-decoration: none;
  transition: color var(--duration-normal) var(--easing-standard);
}

.site-header.is-scrolled .desktop-nav__link {
  color: var(--color-text);
}

/* ── MENU ドロップダウン（hover/focus でカテゴリ選択 → /menu/#id へ直接遷移 / 宮田 FB）
   CSS のみ（CSP 準拠・inline script 禁止）。:focus-within でキーボード操作も可。 */
.desktop-nav__item--has-sub {
  position: relative;
}

.desktop-nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  margin: 0;
  padding: var(--gap-xs) 0;
  list-style: none;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px var(--color-shadow-subtle);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-normal) var(--easing-standard),
    transform var(--duration-normal) var(--easing-standard);
  z-index: 10;
}

.desktop-nav__item--has-sub:hover .desktop-nav__sub,
.desktop-nav__item--has-sub:focus-within .desktop-nav__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 空カテゴリ（menuCategories.N 未設定）の項目は非表示 */
.desktop-nav__sub-item:has(.desktop-nav__sublink:empty) {
  display: none;
}

.desktop-nav__sublink {
  display: block;
  padding: var(--gap-xs) var(--gap-md);
  font-family: var(--font-serif-jp);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--duration-normal) var(--easing-standard),
    color var(--duration-normal) var(--easing-standard);
}

.desktop-nav__sublink:hover,
.desktop-nav__sublink:focus-visible {
  background: var(--color-bg-section-alt);
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .desktop-nav__sub {
    transition: opacity var(--duration-normal) var(--easing-standard);
    transform: translateX(-50%);
  }
  .desktop-nav__item--has-sub:hover .desktop-nav__sub,
  .desktop-nav__item--has-sub:focus-within .desktop-nav__sub {
    transform: translateX(-50%);
  }
}

/* ── ハンバーガー（モバイル用・既定は ≥1024 で隠す） ── */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
}

.menu-toggle span {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-text-on-dark);
  transition:
    background var(--duration-normal) var(--easing-standard),
    transform var(--duration-normal) var(--easing-standard);
}

.site-header.is-scrolled .menu-toggle span {
  background: var(--color-text);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── ナビ切替（DESIGN.md §4-1 条件②）──────────────── */
/* 既定（≥1024px）: 横帯ナビ表示・ハンバーガー/ドロワー非表示 */
.site-sidebar {
  display: none;
}

@media (max-width: 1023px) {
  /* 1024 ちょうどは desktop 側に含める */
  .desktop-nav {
    display: none;
  }
  .site-sidebar {
    display: block; /* transform での開閉は sidebar.css / site-runtime 既存どおり */
  }

  /* ハンバーガーをロゴと同じ水平位置（ブランド行）へ上げる（宮田FB）。
     固定ヘッダー（position:fixed = 包含ブロック）基準に絶対配置し、
     タグライン帯の下＝ブランド帯の高さに合わせて中央寄せ・右寄せ。 */
  .menu-toggle {
    display: inline-flex;
    position: absolute;
    top: var(--header-tagline-h, 32px);
    right: var(--container-padding-x-mobile);
    height: var(--header-brand-h, 72px);
    align-items: center;
    z-index: 2;
  }

  /* モバイルではヘッダーに SNS を出さない（フッターに集約・ハンバーガーとの干渉回避） */
  .header-social {
    display: none;
  }

  /* ナビ行は畳む（中身はハンバーガーのみ＝絶対配置済み）。 */
  .header-nav-row {
    min-height: 0;
    border-top: none;
  }
  .header-nav-row__inner {
    min-height: 0;
    padding: 0;
  }
}

/* ── レスポンシブ余白（DESIGN.md §9）──────────────── */
@media (max-width: 768px) {
  .header-tagline,
  .header-brand-row__inner,
  .header-nav-row__inner {
    padding-left: var(--container-padding-x-mobile);
    padding-right: var(--container-padding-x-mobile);
  }
  .header-social {
    right: var(--container-padding-x-mobile);
  }
  .site-logo {
    font-size: var(--fs-heading-lg);
  }
  .site-logo__img {
    height: var(--site-logo-h-mobile, 80px);
  }
}

@media (max-width: 480px) {
  /* SNS は狭幅でロゴと干渉しやすいので隠し、ドロワー内 FOLLOW に集約 */
  .header-social {
    display: none;
  }
}