/* ============================================================
 * HIN-102: トップページのヒーロー 1 画面化 + ヘッダー透過オーバーレイ
 *
 * - body.home-hero-active のときだけ適用される（functions.php の body_class フィルタ）
 * - ヒーロー上ではヘッダー背景を透過し、ロゴ・ナビ・バーガーアイコンを白系に
 * - ヘッダーが LINE ボタン (.header-cta) は元々白文字のため変更しない（LINE 緑をそのまま維持）
 * - スクロール後（`header.is-scrolled`）は元の白背景＋濃色文字に戻す
 *   切替は assets/js/header-observer.js が .hero-end-sentinel の交差状態で制御する
 * - レイアウト: ヘッダーを position: fixed にしてヒーロー写真をヘッダー裏まで広げる
 *   ヒーロー高は 100vh（モバイル Safari URL バー対策で 100svh も併記）
 *
 * 注意:
 *   元の .site-header は layout.css で position: sticky なので、home-hero-active 時だけ
 *   fixed に切り替える。ほかのページ（下層ページ）は影響しない。
 * ============================================================ */

/* ---------- ヘッダー: home-hero-active ベース（透過状態） ---------- */
body.home-hero-active .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition:
    background-color 0.3s ease,
    border-bottom-color 0.3s ease,
    -webkit-backdrop-filter 0.3s ease,
    backdrop-filter 0.3s ease;
}

/* ロゴ・サブロゴ・ナビ・バーガーは白系に */
body.home-hero-active .site-header .logo,
body.home-hero-active .site-header .logo-sub,
body.home-hero-active .site-header .nav a {
  color: #fff;
  transition: color 0.3s ease;
}
/* ロゴはヒーロー暗背景でも視認性を確保するため軽くシャドウを乗せる */
body.home-hero-active .site-header .logo {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
body.home-hero-active .site-header .nav a {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body.home-hero-active .site-header .nav-toggle span {
  background: #fff;
  transition: background-color 0.3s ease;
}

/* ---------- ヘッダー: スクロール後（is-scrolled）は元の見た目に戻す ---------- */
body.home-hero-active .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(31, 77, 67, 0.08);
}
body.home-hero-active .site-header.is-scrolled .logo {
  color: var(--color-main);
  text-shadow: none;
}
body.home-hero-active .site-header.is-scrolled .logo-sub {
  color: var(--color-muted);
}
body.home-hero-active .site-header.is-scrolled .nav a {
  color: var(--color-main-dark);
  text-shadow: none;
}
body.home-hero-active .site-header.is-scrolled .nav-toggle span {
  background: var(--color-main-dark);
}

/* SP モバイルナビが開いた時は、透過状態でも視認性のため白背景を強制 */
body.home-hero-active .site-header .nav.is-open {
  /* layout.css の @media(max-width:960px) 内 .nav の絶対配置をそのまま使う */
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.home-hero-active .site-header .nav.is-open a {
  color: var(--color-main-dark);
  text-shadow: none;
}

/* ---------- ヒーロー: 1 画面サイズに固定 ---------- */
/* front-page.css の .hero-v2 { min-height: clamp(560px, 80vh, 760px); } を override */
body.home-hero-active .hero-v2 {
  min-height: 100vh;
  /* モバイル Safari の URL バー分を引いた small viewport height を優先 */
  min-height: 100svh;
}

/* sentinel: ヒーロー末尾に置く 1px 要素。IntersectionObserver が観測する */
.hero-end-sentinel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  /* 視覚的には完全不可視 */
  opacity: 0;
}

/* ---------- レスポンシブ調整 ---------- */
/* タブレット以下: ヒーローの上下パディングを抑え、1 画面に収めやすく */
@media (max-width: 1024px) {
  body.home-hero-active .hero-grid {
    padding-top: clamp(80px, 12vw, 112px);
    padding-bottom: clamp(48px, 8vw, 80px);
  }
}

/* SP: 縦パディングをさらに抑え、price-card と CTA まで 1 画面に収める */
@media (max-width: 640px) {
  body.home-hero-active .hero-grid {
    padding: 88px 20px 40px 24px;
    gap: 24px;
  }
  /* SP では h1 のシャドウを軽く（パフォーマンス配慮） */
  body.home-hero-active .hero-copy .hero-text {
    margin-top: 20px;
    line-height: 1.8;
  }
  body.home-hero-active .hero-copy .hero-price {
    margin-top: 24px;
  }
  body.home-hero-active .hero-copy .btn-wrap {
    margin-top: 24px;
  }
}

/* 縦が極端に小さい viewport（横向きスマホ等）はオーバーフローを許容
 * → min-height は 100svh のままだがコンテンツが収まらない場合スクロールできる */
@media (max-height: 600px) {
  body.home-hero-active .hero-v2 {
    min-height: 600px;
  }
}

/* prefers-reduced-motion: トランジションを無効化 */
@media (prefers-reduced-motion: reduce) {
  body.home-hero-active .site-header,
  body.home-hero-active .site-header .logo,
  body.home-hero-active .site-header .logo-sub,
  body.home-hero-active .site-header .nav a,
  body.home-hero-active .site-header .nav-toggle span {
    transition: none;
  }
}