/*
Theme Name: HAPO Lumia Hair Salon
Template:   hapo-campus
Description: Hair Salon美容室デザイン統合版。Tailwind CSS使用、完全レスポンシブ対応。
Version:    2.3.0
Author:     HAPO Team
Text Domain: hapo-lumia-hair-salon
*/

/**
 * ==============================================
 * HAPO-LUMIA-HAIR-SALON
 * Hair Salonデザイン + hapo-campus親テーマ
 * Version: 2.3.0 - ギャラリー完全最適化（背景余白・文字サイズ・間隔）
 * ==============================================
 */

/* PC: 固定ヘッダー */
@media (min-width: 1024px) {
  nav {
    position: sticky;
    top: 0;
    z-index: 10000;
  }
}

/* Mobileでもnavをsticky化（メニュー開閉時も位置が安定） */
@media (max-width: 1023.98px) {
  nav {
    position: sticky;
    top: 0;
    z-index: 10000;
  }
}

/* Mobile: フルスクリーンメニュー */
@media (max-width: 767.98px) {
  #mobile-menu {
    position: fixed;
    inset: 0;
    display: none;
    overflow-y: auto;
    background: #fff;
    z-index: 10000;
    padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
  }
  #mobile-menu.show { 
    display: block; 
  }
  body.menu-open { 
    overflow: hidden; 
  }
}

/* 固定ヘッダー分の余白確保 */
[id] { 
  scroll-margin-top: calc(var(--header-h, 72px) + 8px); 
}

/* セクションの背景は常に画面幅いっぱい（フルブリード） */
section { position: relative; width: 100%; }

:root {
  /* ギャラリーのスタイリスト名の文字サイズ（スマホ / PC）を一括管理 */
  --stylist-name-font-size-sp: 0.85rem;  /* スマホ用（デフォルト） */
  --stylist-name-font-size-pc: 1.0rem;   /* PC用（デフォルト） */
}

/* ===== 共通：各セクションの中身を 90% に縮小 ===== */
.scale-90-inner {
  transform: scale(0.9);
  transform-origin: top center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
}

/* ===== ギャラリー写真のみ 70% に縮小（PC表示のみ） ===== */
@media (min-width: 1024px) {
  .gallery-images-grid {
    /* 中身だけ少し小さく見せつつ、高さは自然になるように */
    max-width: 1100px;
    margin-inline: auto;
    gap: 3rem; /* 画像どうしの間隔は今まで通り広め */
  }

  /* スタイリスト名は PC で少し大きめに */
  .gallery-images-grid .stylist-name-overlay {
    font-size: var(--stylist-name-font-size-pc);
    font-weight: 500;
    padding: 0.35rem 0.75rem;
  }
}

/* 横スクロール防止（scale による副作用対策） */
section {
  overflow-x: clip;
}

body {
  overflow-x: hidden;
}

/* === ② Hero full viewport & cover ===== */
:root { --header-offset: 0px; } /* 固定ヘッダーを差し引く場合のみ調整 */

.hero { 
  position: relative; 
  min-height: calc(100dvh - var(--header-offset));
  height: calc(100svh - var(--header-offset));
  overflow: hidden;
}

/* 背景画像は全面を覆う（既存 .hero-slide に補強） */
.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Hero セクションの初回ロード時のテキストジャンプを防ぐため、
   ヒーロー内では 90% 縮小の transform を無効化する */
.hero .scale-90-inner {
  transform: none !important;
}

/* === ③ Menu: 背景＆黒ブラーを強制フルブリード ===== */
#menu { position: relative; }

#menu .menu-bg,
#menu > .bg-salon-black\/70,
#menu > .absolute.inset-0 {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* ======= Front page top-gap killer ======= */
/* ブラウザ既定やどこかの上書きで生じた余白を"総取り"で潰す */
html, body { margin: 0 !important; padding: 0 !important; }

/* メインやラッパーに付いている可能性のある上余白を無効化 */
main, .site-main, .l-main, #primary {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 最初のセクションの上マージン/パディングを強制ゼロ */
main > section:first-of-type,
.site-main > section:first-of-type,
.l-main > section:first-of-type,
#primary > section:first-of-type,
.hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* WP管理バー（ログイン時）のmargin-topを固定化して余白を出さない */
@media (min-width: 782px) {
  html { margin-top: 0 !important; }
  #wpadminbar { position: fixed; top: 0; }
}
/* iOS系でアドレスバーの出入りによる1pxズレを防止（ヒーロー全画面維持） */
.hero {
  min-height: calc(100dvh - var(--header-offset, 0px));
  height: calc(100svh - var(--header-offset, 0px));
  overflow: hidden;
}

/* もしヘッダーに上ボーダー/シャドウがあり1pxスキマに見える場合の保険 */
header, .site-header {
  border-top: none !important;
  box-shadow: none !important;
}

/* === Header fade in/out by hero in-view ================================ */
/* header / nav / .site-header / .global-header のどれでも効くよう網羅 */
header, .site-header, nav, .global-header {
  transition: opacity 260ms ease, transform 260ms ease;
  will-change: opacity, transform;
  opacity: 1;
  transform: translateY(0);
}

/* ヒーローが画面内 → ヘッダーをフェードアウト＆少し上へ */
.is-hero-inview header,
.is-hero-inview .site-header,
.is-hero-inview nav,
.is-hero-inview .global-header {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none; /* 隠れている間の誤クリック防止 */
}

/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce) {
  header, .site-header, nav, .global-header { transition: none; }
}

/* === [GLOBAL] 横スクロールを確実に消す =============================== */
html, body {
  width: 100%;
  overflow-x: hidden;     /* 横スクロールバーの根絶 */
}

/* スクロールバー幅起因の 100vw オーバーフロー対策 */
[class*="wrapper"], [class*="container"], section, header, footer, main {
  max-width: 100%;        /* 100vw を使っている要素のはみ出しを抑止 */
}

img, video, canvas {
  max-width: 100%;
  height: auto;
}

/* 変なはみ出しを起こす子要素の最終防波堤 */
body > * {
  overflow-x: clip;       /* 安全な切り落とし（未対応ブラウザは hidden で十分） */
}

/* === [HERO] クロスフェードの見た目 ===================================== */
.hero {
  position: relative;
  overflow: hidden;       /* はみ出しを許さない */
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1500ms ease; /* 1.5s フェード。速度はJSと一致させる */
  will-change: opacity;
}

.hero__slide img,
.hero__slide picture,
.hero__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 画面にフィットさせる */
}

/* 表示中スライド */
.hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}

/* 直前スライド（積層の安定化用） */
.hero__slide.is-prev {
  opacity: 0;
  z-index: 0;
}

/* 初回のみ"フェードなし"で即表示にするためのクラス */
.hero__slide.is-initial {
  transition: none !important;   /* ページ表示直後はフェードさせない */
}

/* ===== Front page: kill top gap (no visual jump) ===== */
.home html, .home body {
  margin: 0 !important;
  padding: 0 !important;
}

.home #page, .home .site, .home .site-main, .home main, .home .l-main, .home #primary, .home .wp-site-blocks {
  margin-top: 0 !important;
  padding-top: 0 !important;
  scroll-margin-top: 0 !important;
}

/* 最初の要素（ブロック/セクション/グループ）のデフォルト上マージンを無効化 */
.home .site-main > *:first-child, .home main > *:first-child, .home .wp-site-blocks > *:first-child, .home section:first-child, .home .wp-block-group:first-child {
  margin-top: 0 !important;
}

/* ヒーロー自体も念のためゼロに固定 */
.home .hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative;
  overflow: hidden;
}

/* ===== フロントページでヘッダーをヒーローの上に重ねて余白をゼロに ===== */
/* フロントページでヘッダーを fixed positioning に変更 */
body.home header,
body.home .site-header,
body.home nav,
body.home .global-header,
html.home body header,
html.home body .site-header,
html.home body nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10000 !important;
  background: transparent !important;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
  will-change: transform, opacity !important;
}

/* ページ最上部ではヘッダーを非表示（より強力なセレクタ） */
body.home.at-top header,
body.home.at-top .site-header,
body.home.at-top nav,
body.home.at-top .global-header,
html.at-top body.home header,
html.at-top body.home .site-header,
html.at-top body.home nav,
body.at-top.home header,
body.at-top.home nav {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* スクロールダウン時（ページ最上部でない）にヘッダーを表示 */
body.home:not(.at-top) header,
body.home:not(.at-top) .site-header,
body.home:not(.at-top) nav,
body.home:not(.at-top) .global-header,
html body.home:not(.at-top) header,
html body.home:not(.at-top) nav {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  pointer-events: auto !important;
}

/* スクロール時のヘッダーテキスト色を調整（見やすく） */
body.home:not(.at-top) header,
body.home:not(.at-top) .site-header,
body.home:not(.at-top) nav {
  color: #333 !important;
}

body.home:not(.at-top) header a,
body.home:not(.at-top) .site-header a,
body.home:not(.at-top) nav a,
body.home:not(.at-top) header .menu a,
body.home:not(.at-top) nav .menu a {
  color: #333 !important;
}

/* ロゴの色も調整（必要に応じて） */
body.home:not(.at-top) .site-logo,
body.home:not(.at-top) .custom-logo-link {
  filter: none !important;
}

/* ===== デバッグ用：at-top クラスが正しく適用されているか視覚的に確認 ===== */
/* 本番環境では削除してください */
body.home.at-top::before {
  content: 'AT TOP - Header Hidden';
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 99999;
  font-size: 14px;
  font-weight: bold;
  pointer-events: none;
}

body.home:not(.at-top)::before {
  content: 'SCROLLED - Header Visible';
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 255, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 99999;
  font-size: 14px;
  font-weight: bold;
  pointer-events: none;
}

/* デバッグ用のヘッダー枠線（一時的） */
body.home header,
body.home nav {
  outline: 3px solid rgba(255, 0, 255, 0.5) !important;
}

/* フロントページのすべてのラッパー要素の余白を完全に無効化 */
.home body,
.home #page,
.home .site,
.home main,
.home .site-main,
.home .l-main,
.home #primary,
.home .wp-site-blocks,
.home article,
.home .entry-content {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* フロントページでヒーローを viewport 最上部から開始 */
.home .hero {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 100dvh !important;
  height: 100svh !important;
  position: relative !important;
  top: 0 !important;
}

/* ヒーローの前後にある要素の余白も無効化 */
.home .hero + *,
.home .hero ~ * {
  margin-top: 0 !important;
}

/* ヒーローより前の要素を完全に隠す（念のため） */
.home .hero::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 0;
  right: 0;
  height: 200px;
  background: transparent;
  display: block;
}

/* ===== 90% スケーリングの補正と最適化 ===== */

/* スケーリング時のアンチエイリアシング改善 */
section .container {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 画像のシャープネスを維持 */
section .container img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ボタンやリンクのクリッカブルエリアを維持 */
section .container a,
section .container button {
  position: relative;
}

/* Grid や Flex レイアウトの中身も確実に縮小 */
section .container .grid,
section .container .flex,
section .container [class*="grid-"],
section .container [class*="flex-"] {
  width: 100%;
}

/* テキストの可読性を維持 */
section .container {
  text-rendering: optimizeLegibility;
}

/* スマホで窮屈になりすぎる場合の調整（オプション） */
@media (max-width: 640px) {
  /* スマホでは 95% に緩和（必要に応じてコメントアウト解除）
  section .container {
    transform: scale(0.95);
  }
  */
}

/* タブレットでの調整（オプション） */
@media (min-width: 641px) and (max-width: 1023px) {
  /* タブレットでは 92% に緩和（必要に応じてコメントアウト解除）
  section .container {
    transform: scale(0.92);
  }
  */
}

/* ===== Hero crossfade visuals ===== */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1500ms ease; /* 1.5s クロスフェード */
  will-change: opacity;
}
.hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.hero__slide.is-prev {
  opacity: 0;
  z-index: 0;
}
/* ★初回のみノーフェード（リロード時も） */
.hero__slide.is-initial {
  transition: none !important;
}

/* 画像のはみ出し＆横スクロール抑止（念押し） */
.hero__slide img, .hero__slide picture, .hero__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html, body {
  overflow-x: hidden;
}

/* === 各カテゴリの均等上下余白（2行分）=== */
/* 2行分の基準（フォールバック用） */
:root { --base-lh: 1.6rem; }

/* カテゴリ内容の均等上下余白 */
.vpad-block {
  /* まず lh 対応環境なら 2lh、非対応は calc(2 * var(--base-lh)) にフォールバック */
  padding-block: calc(2 * var(--base-lh));
  padding-block: 2lh;
  /* 横スクロール抑止（scale補正で横に溢れるケース対策） */
  overflow-x: clip;
}

/* タイトル上の二重余白防止 */
.vpad-block :is(h1, h2, .section-heading) {
  margin-top: 0;
}

/* ===== Hero 基本（横スライド完全無効化） ===== */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(60svh, 80vh, 100svh); /* iOSアドレスバー対策 */
}
.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  transform: none !important;        /* 横スライドJS無効化 */
  white-space: normal !important;
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
  backface-visibility: hidden;
  animation: heroCrossfade 20s linear infinite;
  left: auto !important;             /* 横スライドJS無効化 */
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 5s; }
.hero-slide:nth-child(3) { animation-delay: 10s; }
.hero-slide:nth-child(4) { animation-delay: 15s; }

/* 2秒フェード / 5秒ごと切替（合計20秒） */
@keyframes heroCrossfade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }   /* 2s IN */
  25%  { opacity: 1; }   /* 3s HOLD（INと合わせて5s/枚） */
  35%  { opacity: 0; }   /* 2s OUT（次と重なる） */
  100% { opacity: 0; }
}

/* ===== テキスト中央揃え＆はみ出し防止 ===== */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;               /* 上下左右ど真ん中 */
  pointer-events: none;              /* 背景クリックはスルー */
  padding: clamp(16px, 4vw, 40px);   /* 端のはみ出し防止余白 */
}
.hero-content {
  pointer-events: auto;              /* ボタン等は操作可 */
  text-align: center;
  width: min(92vw, 1100px);          /* 横はみ出し防止 */
  margin-inline: auto;
  word-break: normal;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-content :is(h1, h2) {
  margin: 0 0 .5em;
  line-height: 1.2;
  width: 100%;
}
.hero-content p {
  margin: .5em 0 0;
  line-height: 1.6;
  width: 100%;
  max-width: 48rem;  /* max-w-2xl 相当 */
}

/* 省エネ：動きを止める（任意） */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide:nth-child(n+2) { display: none; }
}

/* ========================================================================
   === Gallery セクション専用の最適化（背景余白・スタイリスト名・画像間隔） ===
   ======================================================================== */

/* ① Gallery セクションの背景高さ（上下余白）を他セクションより少しだけ詰める */
#gallery {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* vpad-block の上下余白もさらに詰める */
#gallery .vpad-block {
  padding-block: 0.75rem !important;
}

@supports (padding-block: 1lh) {
  #gallery .vpad-block {
    padding-block: 0.6lh !important;
  }
}

/* スマホ〜タブレット共通のスタイリスト名（PCメディアクエリの外側） */
#gallery .stylist-name-overlay {
  font-size: var(--stylist-name-font-size-sp);
}

/* ② PC 表示のギャラリー画像内「スタイリスト名」を大きくする */
@media (min-width: 1024px) {
  #gallery .stylist-name-overlay {
    font-size: var(--stylist-name-font-size-pc) !important;
    font-weight: 500 !important;
    padding: 0.35rem 0.75rem !important;
  }
}

/* ③ ギャラリー画像どうしのスペースを広げる */
#gallery .grid {
  /* row/column の両方を少し広げる。元の gap-8 より一段階広いイメージ */
  row-gap: 2.25rem !important;   /* 約 36px */
  column-gap: 2.25rem !important;
}

@media (min-width: 1024px) {
  /* PC ではもう少しだけゆったりと */
  #gallery .grid {
    row-gap: 2.5rem !important;
    column-gap: 2.5rem !important;
  }
}