/* ==========================================================================
   DAY OUT WITH THOMAS / schedule
   カレンダー＋ポップアップ CSS  v3（Copilot版を引き継ぎ・実機検証済み）

   貼り付け先：カスタマイズ ▸ 追加CSS の末尾
   ※ セットのJS（thomas-calendar-popup-v2.js）と併用してください
      ─ 「7. 重ね順」の body.popup-open がJS由来のため

   Copilot版から引き継いだもの：
     UDカラー5色 / 下線5px・6px刻み（percy 0 → bulgy 24px）/ 下線は左右いっぱい /
     :active のタップフィードバック / 閉じるボタンの position:sticky / 凡例の作り

   修正した4点（いずれも実機で不具合を再現・確認済み）：
     ① td の padding-bottom:10px → 33px（下線が日付の数字を横切っていた）
     ② タップ領域 height:100% → 負マージン方式（実測 46% → 97% に）
     ③ セレクタをカレンダー表に限定（ポップアップ内の時刻表54個に波及していた）
     ④ SWELL固定ヘッダーとの重なり対策を追加（z-index:99999 でも効かない）
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. UDカラー・寸法（変更はここだけでOK）
   東京都カラーユニバーサルデザインガイドライン準拠
   -------------------------------------------------------------------------- */
:root{
  --ud-thomas:#0072B2; /* きかんしゃトーマス号     ─ UDブルー   */
  --ud-percy :#009E73; /* きかんしゃパーシー号     ─ UDグリーン */
  --ud-toby  :#A6761D; /* きかんしゃトビー号       ─ UDブラウン */
  --ud-bertie:#D55E00; /* バスのバーティー         ─ UDレッド   */
  --ud-bulgy :#CC79A7; /* 2かいだてバスのバルジー  ─ UDパープル */

  --cal-line-h:5px;      /* 下線の太さ */
  --cal-line-pitch:6px;  /* 積み重ね間隔（5px＋余白1px） */
  --cal-line-area:33px;  /* 下線5本分の確保領域（6px×5＋余白3px）★10pxでは数字と重なります */
  --cal-pad-y:8px;       /* 日付上下の余白 */
}


/* --------------------------------------------------------------------------
   2. カレンダーのセル
   ★スコープ限定：このページには has-fixed-layout のテーブルが60個あり、
     うち54個はポップアップ内の時刻表です。Copilot版の
     「.wp-block-table table.has-fixed-layout td」だと時刻表54個にも
     padding-bottom:10px / vertical-align:top が当たってしまいます。

   推奨：各月のテーブルブロックの「高度な設定 ▸ 追加CSSクラス」に
        calendar-table を入れると、下の長いセレクタは不要になります。
        （GAS生成時も figure に calendar-table を付けてください）
   -------------------------------------------------------------------------- */
.calendar-table td,
.post_content figure.wp-block-table.is-all-centered:not(.table-time):not(.table-price) > table.has-fixed-layout td{
  position:relative;              /* 下線の absolute 基準 */
  vertical-align:top;
  padding:var(--cal-pad-y) 2px var(--cal-line-area);
}

/* 運転日セルの淡い下地（クリックできる日であることを色相に頼らず示す） */
td[class*="run-"]{ background:#fffdf5; }


/* --------------------------------------------------------------------------
   3. 日付リンク／運休日：セル全体をタップ領域にする
      Copilot版の height:100% は表セル内では確実に効かず、実測でセル面積の
      46% しか反応しませんでした。負マージンで padding 分まで押し広げます。
   -------------------------------------------------------------------------- */
.day-link,.off-day{
  display:flex; align-items:center; justify-content:center;
  margin:calc(var(--cal-pad-y) * -1) -2px calc(var(--cal-line-area) * -1);
  padding:var(--cal-pad-y) 2px var(--cal-line-area);
  box-sizing:border-box;
  white-space:nowrap;            /* 数字の改行防止 */
  line-height:1.2;
  position:relative; z-index:2;  /* 下線より前面 */
}

/* 日付の文字色
   Copilot版の #0073aa はトーマスの下線 #0072B2 とほぼ同色のため、
   「青い数字＝トーマス」と誤読されうるので黒系にしています。
   リンク色に戻す場合は下の2行を color:#0073aa!important; に置き換えてください。 */
.day-link{
  color:#1a1a1a!important; font-weight:700;
  text-decoration:none!important; border-bottom:none!important;
  -webkit-tap-highlight-color:rgba(0,114,178,.15);
}
.day-link:hover{ color:var(--ud-thomas)!important; }
.day-link:focus-visible{ outline:2px solid var(--ud-thomas); outline-offset:-2px; }
.day-link:active,.off-day:active{ background:rgba(0,0,0,.08); }

.off-day{ color:#999; }


/* --------------------------------------------------------------------------
   4. キャラクター下線（キャラ固定スロットに積む）
      HTMLの出力順に依存せず、常に同じ高さに同じキャラが並びます
   -------------------------------------------------------------------------- */
.line{
  position:absolute; left:0; right:0;
  height:var(--cal-line-h);
  pointer-events:none;           /* リンクのタップを妨げない */
  z-index:1;
}
.line.percy { bottom:0; }
.line.thomas{ bottom:calc(var(--cal-line-pitch) * 1); } /*  6px */
.line.toby  { bottom:calc(var(--cal-line-pitch) * 2); } /* 12px */
.line.bertie{ bottom:calc(var(--cal-line-pitch) * 3); } /* 18px */
.line.bulgy { bottom:calc(var(--cal-line-pitch) * 4); } /* 24px */

/* 色は凡例と共通定義 */
.line.thomas,.legend-line.thomas{ background:var(--ud-thomas); }
.line.percy ,.legend-line.percy { background:var(--ud-percy);  }
.line.toby  ,.legend-line.toby  { background:var(--ud-toby);   }
.line.bertie,.legend-line.bertie{ background:var(--ud-bertie); }
.line.bulgy ,.legend-line.bulgy { background:var(--ud-bulgy);  }


/* --------------------------------------------------------------------------
   5. 凡例（legend）
   -------------------------------------------------------------------------- */
.calendar-legend{
  display:flex; flex-wrap:wrap; justify-content:center;  /* 月見出しが中央のため中央寄せ */
  gap:8px 20px; margin:10px 0 14px; font-size:14px;
}
.calendar-legend .legend-item{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.calendar-legend .legend-line{
  flex:none; display:inline-block;
  width:24px; height:var(--cal-line-h); border-radius:2px;
}


/* --------------------------------------------------------------------------
   6. ポップアップ（.custom-popup 統合方式）
      ・100vh は iOS Safari でURLバー分はみ出すため 100dvh を併記
      ・Copilot版の transform:translate(-50%,90px) ＋ max-height:80vh は、
        ビューポート高が450px未満（横向きスマホ等）で下端がはみ出し、
        親が overflow:hidden のため読めなくなります → 中央寄せ＋calc に変更
   -------------------------------------------------------------------------- */
.custom-popup{
  display:none;                       /* 既定は非表示。JSが block / none を切替 */
  position:fixed; inset:0; z-index:99999;
  width:100%;
  height:100vh; height:100dvh;
  background:rgba(0,0,0,.6);
  overflow:hidden;
}
.custom-popup-content{
  position:relative; width:90%; max-width:760px; margin:0 auto;
  top:50%; transform:translateY(-50%);
  max-height:calc(100dvh - 80px);
  padding:20px;
  background:#fff; border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.admin-bar .custom-popup-content{ max-height:calc(100dvh - 112px); } /* ログイン中の管理バー分 */

/* 閉じるボタン：スクロールしても追従（Copilot版のsticky方式を採用）
   タップしやすいよう44×44pxを確保し、本文に重なっても読めるよう白地に */
.custom-popup-close{
  position:sticky; top:0; float:right; z-index:5;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:-8px -8px 0 0;
  font-size:28px; line-height:1; color:#555; cursor:pointer;
  background:#fff; border-radius:50%;
}
.custom-popup-close:hover{ background:#f0f0f0; color:#000; }

/* 背面スクロール固定 */
html.popup-open,body.popup-open{ overflow:hidden; }


/* --------------------------------------------------------------------------
   7. ★重要★ SWELL固定ヘッダーとの重なり対策
      SWELL は #body_wrap / #content に position:relative; z-index:1 を付けており、
      固定ヘッダー #fix_header は z-index:101。
      ポップアップは #content の内側にあるため、z-index:99999 を指定しても
      #content の z-index:1 に閉じ込められ、固定ヘッダーの下に隠れます。
      → ポップアップが開いている間だけ #content を持ち上げます。
   -------------------------------------------------------------------------- */
body.popup-open #content{ z-index:9990; }

/* JS差し替え前でも効く保険（:has() 対応ブラウザのみ） */
#content:has(.custom-popup[style*="block"]){ z-index:9990; }


/* --------------------------------------------------------------------------
   8. スマホ最適化
   -------------------------------------------------------------------------- */
@media (max-width:600px){
  :root{ --cal-pad-y:10px; }                      /* 押しやすさ優先で上下paddingを増やす */
  .calendar-legend{ gap:6px 14px; font-size:12px; }
  .custom-popup-content{ width:94%; padding:16px 12px; max-height:calc(100dvh - 40px); }
}


/* ==========================================================================
   9. キャラクター別カレンダー
      [dowt_character_calendar character="thomas" from="2026-07" to="2026-12"]
      1キャラクターぶんなので下線は1本。その分セルを詰めています。
      ========================================================================== */

.dowt-charcal{ margin:0 0 28px; }

.dowt-charcal__grid{
  display:grid; gap:20px 22px;
  grid-template-columns:repeat(var(--dowt-cols,2),minmax(0,1fr));
}
@media (max-width:600px){
  .dowt-charcal__grid{ grid-template-columns:1fr; gap:18px; }
}

.dowt-charcal__month{
  margin:0 0 8px; font-size:16px; line-height:1.4;
}

/* 表：下線1本ぶんだけ確保する（運行日カレンダーの33pxは使わない） */
.dowt-charcal .calendar-table td{
  padding:6px 2px 12px;
}
.dowt-charcal .calendar-table th{
  font-size:12px; padding:5px 2px;
}
.dowt-charcal .calendar-table .line{
  bottom:0; left:4px; right:4px;   /* 連続する運転日が1本の帯に見えないよう少し内側に */
}

.dowt-charcal .day-num{
  display:block; font-weight:700; font-size:14px; line-height:1.2;
}
.dowt-charcal .pat-label{
  display:block; margin-top:1px;
  font-size:11px; font-weight:700; line-height:1.2;
  color:var(--dowt-c,#333);
}
.dowt-charcal .off-day{
  display:block; font-size:14px; line-height:1.2; color:#bbb;
}

/* 運転日の下地はキャラクターの色を薄く敷く */
.dowt-charcal td[class*="run-"]{
  background:var(--dowt-c-bg,rgba(0,0,0,.06));
}

/* クリックできる形で出したとき（link="1"） */
.dowt-charcal .day-link{
  display:block; padding:0; margin:0;
  font-size:14px; line-height:1.2;
}

/* ラベルの凡例 —「A＝1〜4号　B＝101〜104号」 */
.dowt-charcal__key{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
  margin:12px 0 0; font-size:13px; line-height:1.6;
}
.dowt-charcal__key .legend-line{
  display:inline-block; width:24px; height:5px; border-radius:2px; flex:none;
}
.dowt-charcal__keyitem b{
  display:inline-block; min-width:1.4em; text-align:center;
  color:var(--dowt-c,#333);
}


/* ==========================================================================
   10. ポップアップ上部のキャラクターアイコン
       2キャラ以上の日はアイコンがリンクになり、タップでそのキャラの
       運転時刻セクションまでスクロールします（front.js が処理）。
       ========================================================================== */

.dowt-iconrow .wp-block-column{ min-width:0; }

.custom-popup .dowt-jump{
  display:block;
  text-decoration:none!important;
  border-bottom:none!important;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(0,114,178,.15);
}
.custom-popup .dowt-jump figure{ margin:0; }
.custom-popup .dowt-jump img{
  transition:transform .15s ease, box-shadow .15s ease;
}
.custom-popup .dowt-jump:hover img{
  transform:scale(1.04);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.custom-popup .dowt-jump:focus-visible{
  outline:3px solid var(--ud-thomas);
  outline-offset:3px;
  border-radius:50%;
}

/* ジャンプ先の見出し。tabindex="-1" のフォーカス枠は出さない */
.dowt-char-heading{ scroll-margin-top:8px; }
.dowt-char-heading:focus{ outline:none; }

/* キャラクター名は既定では画面に出さず、読み上げ・検索用にだけ持たせています。
   アイコンの下に名前を表示したい場合は、この .dowt-icon-name のブロックを
   次の3行に置き換えてください。
     .dowt-icon-name{ display:block; margin-top:6px;
       font-size:12px; font-weight:700; text-align:center; line-height:1.4; } */
.dowt-icon-name{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}