/* common/css/mobile.css
   目的: モバイル時のヘッダー/ハンバーガー/メニュー表示制御と見た目
   方針: JS の .open クラス と CSS :has() の双方で開閉を担保
         変数は global.css の --nav-* を参照（ここで再定義しない）
         Tailwind CDN 使用のため @apply は使わずバニラCSSで指定
*/

/* ===== ベース: モバイルメニューボタンはデフォルト非表示（モバイルで表示） ===== */
.mobile-menu-button {
  display: none;
}

/* ===== モバイル表示用 ===== */
@media only screen and (max-width: 767px) {
  /* ヘッダーは固定（冪等） */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 他の要素より前面に表示 */
  }

  /* 入力チェックボックスは視覚非表示（HTMLでは hidden クラスだが保険で指定） */
  #mobile-menu-toggle {
    display: none;
  }

  /* ハンバーガーボタン（タップ目標44px以上） */
  .mobile-menu-button {
    display: flex;
    flex-direction: column;   /* 列方向 */
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* ヘッダーより前面に表示 */
    -webkit-tap-highlight-color: transparent;
  }

  /* ボタン内の3本線（sr-only は除外） */
  .mobile-menu-button span[aria-hidden="true"] {
    display: block;
    width: 24px;
    height: 2px;
    background: #000;
    border-radius: 9999px;
    transition:
      transform var(--nav-transition-duration) ease,
      opacity var(--nav-transition-duration) ease,
      background-color var(--nav-transition-duration) ease;
  }
  .mobile-menu-button span[aria-hidden="true"] + span[aria-hidden="true"] {
    margin-top: 6px;
  }

  /* 開状態のアイコン変形（input の直後に label がある前提） */
  #mobile-menu-toggle:checked + label.mobile-menu-button span[aria-hidden="true"]:nth-of-type(2) {
    /* 最上段 */
    transform: translateY(calc(6px + 2px)) rotate(45deg);
  }
  #mobile-menu-toggle:checked + label.mobile-menu-button span[aria-hidden="true"]:nth-of-type(3) {
    /* 中央線を消す */
    opacity: 0;
  }
  #mobile-menu-toggle:checked + label.mobile-menu-button span[aria-hidden="true"]:nth-of-type(4) {
    /* 最下段 */
    transform: translateY(calc(-1 * (6px + 2px))) rotate(-45deg);
  }

  /* 視覚的に隠す（HTMLの .sr-only と同等 定義） */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* デスクトップナビを保険的に隠す（HTML側 md:block と併用） */
  .desktop-nav {
    display: none;
  }

  /* ===== モバイルメニュー本体（初期は非表示） =====
     - 初期描画では CSS 変数ベースで top/height を算出
     - 開状態では JS が実測で top/height を補正し、レイアウトのズレを解消
  */
  .mobile-menu {
    position: fixed;
    top: var(--nav-header-height);
    left: 0;
    width: 100%;
    /* 互換: まず 100vh、対応環境では 100dvh が後勝ちで使用される */
    height: calc(100vh - var(--nav-header-height));
    height: calc(100dvh - var(--nav-header-height));
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 999;              /* header(1000) の下に配置してヘッダーを残す */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nav-transition-duration) ease, visibility 0s linear var(--nav-transition-duration);
    pointer-events: none;
    overflow-y: auto;
  }

  .mobile-menu ul {
    list-style: none;
    margin: 0;
    padding-top: var(--nav-list-padding-y);
    padding-bottom: var(--nav-list-padding-y);
    padding-left: var(--nav-link-padding-x);
    padding-right: var(--nav-link-padding-x);
    height: 100%;
    display: flex;
    flex-direction: column;      /* 列方向 */
    justify-content: flex-start; /* 上から並べる */
    align-items: stretch;
    transform: none;             /* JSが開時にも強制的に none を維持 */
    transition: none;
  }

  .mobile-menu li {
    margin: var(--nav-item-gap) 0;
    width: 100%;
  }

  .mobile-menu .nav-link {
    box-sizing: border-box;
    font-size: 1.5rem;
    color: #ffffff;
    display: block;
    text-align: left;
    padding: 12px 0;
    text-decoration: none;
    border-radius: var(--nav-focus-radius); /* ヒットエリアも同じ角丸に */
  }

  /* フォーカス時の青枠（少し外側へ・角丸も揃える） */
  #mobile-menu a:not([aria-current="page"]):focus-visible {
    outline-width: 2px;
    outline-offset: var(--nav-focus-outline-offset);
    border-radius: var(--nav-focus-radius);
  }

  .mobile-menu .nav-link:hover,
  .mobile-menu .nav-link:focus {
    text-decoration: underline;
  }

  .mobile-menu .contact-button {
    padding-left: var(--nav-link-padding-x);
  }

  /* ===== 表示制御: JS(.open) でも CSS :has() でも表示される ===== */
  .mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--nav-transition-duration) ease, visibility 0s linear 0s;
  }

  .site-header:has(#mobile-menu-toggle:checked) .mobile-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--nav-transition-duration) ease, visibility 0s linear 0s;
  }

  /* 現在ページの強調（行全体の背景＋左インジケータ） */
  #mobile-menu a[aria-current="page"] {
    position: relative;
    background: rgba(255, 255, 255, 0.2);
    font-weight: 700;
    border-radius: var(--nav-focus-radius);  /* 角丸が常に有効 */
    outline: none;                            /* 競合防止 */
    padding-inline: var(--nav-link-padding-x);
  }
  #mobile-menu a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1.6em;
    width: 4px;
    background: var(--piscare-blue);
    border-radius: 9999px;
  }

  /* ===== メニュー開時のボディスクロール抑止（JS用の保険） ===== */
  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }
}

/* ===== デスクトップ表示用 ===== */
@media only screen and (min-width: 768px) {
  /* デスクトップ表示時はモバイルメニューを非表示に */
  .mobile-menu {
    display: none;
  }
}

/* ===== タッチデバイス最適化 ===== */
@media only screen and (hover: none) and (pointer: coarse) {
  .mobile-menu .nav-link:hover,
  .mobile-menu .contact-button:hover {
    color: #ffffff;
    background-color: var(--piscare-blue);
  }
}

/* ===== モバイル端末の横向き表示調整 ===== */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .mobile-menu ul {
    flex-direction: column;   /* 列方向 */
    flex-wrap: nowrap;        /* 折り返し禁止 */
    align-content: center;
  }
  .mobile-menu li {
    margin: 0.5rem;
  }
}

/* ===== 動きの軽減 ===== */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu ul,
  .mobile-menu-button span[aria-hidden="true"] {
    transition: none !important;
  }
}