/* common/css/global.css */

/* ---------------------------------
   1) CSSカスタムプロパティ（テーマ／ナビ変数集約）
   - ブランド系: 既存 --piscare-* を継続利用
   - ナビ系    : --nav-* に統一し、JS/CSSの単一参照点に
--------------------------------- */
:root {
  /* ブランドカラー */
  --piscare-blue: #3b82f6;
  --piscare-light-blue: #93c5fd;
  --piscare-dark-blue: #2563eb;

  /* 共通色/背景 */
  --text-color: #333333;
  --background-color: #ffffff;

  /* アンカー用の固定ヘッダーオフセット（デスクトップ想定の最小値） */
  --header-height: 45px;

  /* ====== ナビゲーション（モバイルメニュー）用変数 ====== */
  /* ヘッダーの概算高さ（CSS初期描画のフォールバック）。JSが実測で上書き補正 */
  --nav-header-height: 64px;

  /* ヘッダー下からメニュー開始までの安全余白（JSの補正にも利用） */
  --nav-top-gap: 0px;

  /* メニュー内パディング・間隔・リンクの左右余白 */
  --nav-list-padding-y: 3vh;
  --nav-item-gap: 2vh;
  --nav-link-padding-x: 0.9rem;

  /* フォーカス可視化の微調整 */
  --nav-focus-outline-offset: 6px;
  --nav-focus-radius: 10px;

  /* トランジション標準時間（ナビ系） */
  --nav-transition-duration: 0.3s;
}

/* ---------------------------------
   2) 文書全体の基礎設定
--------------------------------- */
/* アンカーリンクで飛んだ時にヘッダーで隠れないようオフセットを確保 */
html {
  scroll-padding-top: var(--header-height);
  scroll-behavior: smooth; /* スムースが不要なら削除可 */
}

/* セクションIDに個別のマージン（保険） */
[id] {
  scroll-margin-top: var(--header-height);
}

body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  color: var(--text-color);
  background-color: var(--background-color);
  line-height: 1.6;
}

/* ---------------------------------
   3) レイアウト: 固定ヘッダー
--------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--background-color);
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ---------------------------------
   4) ナビゲーション（共通）
--------------------------------- */
.nav-link {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--text-color);
  background-color: transparent; /* Hover時の背景を無効化 */
  text-decoration: underline;     /* 下線で可視性を担保 */
}

/* CTA（お問い合わせ） */
.contact-button {
  background-color: var(--piscare-blue);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.contact-button:hover,
.contact-button:focus {
  background-color: var(--piscare-dark-blue);
  color: #fff;
}

/* デスクトップでのみハンバーガー非表示（HTMLの md:hidden と二重保険） */
@media (min-width: 768px) {
  .mobile-menu-button {
    display: none;
  }
}

/* ---------------------------------
   5) ユーティリティ（Tailwind簡易再定義）
--------------------------------- */
.bg-piscare-light-blue { background-color: var(--piscare-light-blue); }
.bg-piscare-blue { background-color: var(--piscare-blue); }
.text-white { color: #fff; }
.text-piscare-blue { color: var(--piscare-blue); }
.rounded-full { border-radius: 9999px; }

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 { transition-duration: 300ms; }

.hover\:bg-piscare-dark-blue:hover { background-color: var(--piscare-dark-blue); }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }

/* ---------------------------------
   6) ヒーロー/画像コンポーネント
--------------------------------- */
.hero-section-top {
  min-height: 600px; /* PCの見え方を担保 */
}

.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* 背景写真の可読性確保用オーバーレイ */
  z-index: 1;
}

.hero-section > .container {
  position: relative;
  z-index: 2; /* オーバーレイ上にテキストを載せる */
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-image {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  max-height: 400px;
  object-fit: cover;
}

.service-image:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------
   7) レスポンシブ最適化
   - ブレークポイントは 767px をモバイル上限に統一
--------------------------------- */
@media (max-width: 767px) {
  .hero-section {
    min-height: 400px; /* モバイルでのヒーロー最小高さ */
  }

  .service-image {
    max-height: 300px; /* モバイル画像の高さ調整 */
  }

  .site-slogan {
    display: none !important; /* モバイルでは非表示 */
  }
}

/* ---------------------------------
   8) アクセシビリティ（キーボード操作の可視化）
   - :focus-visible は主要ブラウザ対応。未対応環境は :focus にフォールバック
--------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--piscare-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
/* フォールバック（必要なら有効化）
a:focus,
button:focus,
[role="button"]:focus { outline: 2px solid var(--piscare-blue); outline-offset: 2px; }
*/

/* ---------------------------------
   9) 動きの軽減（prefers-reduced-motion）
   - アニメ/トランジション全般を抑制
--------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------
   10) モバイルメニュー開時のスクロール抑止
   - CSS :has と JS の body.menu-open の両輪で実装
--------------------------------- */
html:has(#mobile-menu-toggle:checked) {
  overflow: hidden;
}
body.menu-open {
  overflow: hidden;
}