/**
 * @file
 * Chibanippo Weather module styles.
 *
 * Drupal 10 / Bootstrap 5 対応版
 * - モバイルファースト
 * - Flexbox ベースレイアウト（float 廃止 ※weather__box は既存HTML互換のため維持）
 * - CSS カスタムプロパティによるテーマ管理
 *
 * 対応コントローラー:
 *   Weather_TopController, Weather_Get_West/East/NorthController,
 *   Weather_WeekController, Weather_PointController, Weather_PinpointController,
 *   Weather_PinpointareaController, Weather_JishinController,
 *   Weather_CautionController, Weather_TyphoonController,
 *   Weather_RadarController, Weather_Radar_jpnController,
 *   Weather_UvController, Weather_WashController, Weather_KafunController,
 *   Weather_TideController, Weather_TideareaController
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  --weather-color-max: #d32f2f;
  --weather-color-min: #1565c0;
  --weather-color-border: #dee2e6;
  --weather-color-bar-bg: #ffebee;
  --weather-color-cell-bg: #e3f2fd;
  --weather-color-day-bg: #eceff1;
  --weather-color-heading-bg: #f1f1f1;
  --weather-color-image-bg: #fff;
  --weather-color-muted: #666;
  --weather-font-size-base: 1rem;
  --weather-font-size-sm: 0.875rem;
  --weather-font-size-lg: 1.2rem;
  --weather-spacing-xs: 0.25rem;
  --weather-spacing-sm: 0.5rem;
  --weather-spacing-md: 0.625rem;
  --weather-spacing-lg: 1rem;
  --weather-border-radius: 4px;
  --weather-nav-bg: #fff;
  --weather-nav-inactive-bg: #f0f0f0;
  --weather-nav-border: #dee2e6;
  --weather-nav-link-color: #333;
}

/* ==========================================================================
   Base / Container
   ========================================================================== */

#weather {
  margin-top: 2rem;
}

.weather-page__content.jishin #weather h2,
.weather-page__content.caution #weather h2,
.weather-page__content.radar #weather h2,.weather-page__content.tide #weather h2,
.weather-page__content.radar-jpn #weather h2,.weather-page__content.wash #weather h2,
.weather-page__content.typhoon #weather h2 {
  display: none;
}

#weather .ichiran, .weather-page__content.wash .ichiran, .weather-page__content.kafun .ichiran, .weather-page__content.uv .ichiran  {
  text-align: right;
  font-size: var(--weather-font-size-sm);
  color: var(--weather-color-muted);
}

.weather-page__content h2 {
  font-size: 1.125rem;
  font-weight: bold;
}

/* clearfix: コントローラーが float ベースの HTML を出力するため必須 */
.weather-page::after {
  content: "";
  display: table;
  clear: both;
}

.weather-page__content.tidearea {
  display: grid;
}
.tide-slider {
  margin-bottom: var(--weather-spacing-lg);
  overflow: hidden;    /* ← これを追加 */
  max-width: 100%;     /* ← これも追加 */
}

.tide_other {
  text-align: center;
  overflow: hidden;
}
/* ==========================================================================
   Weather Box （今日・明日の天気カード）
   TopController, West/East/NorthController で使用
   ========================================================================== */

.weather__box {
  width: 100%;
  padding: 0;
  margin-bottom: var(--weather-spacing-md);
}

.weather__box .weather__day {
  font-size: var(--weather-font-size-lg);
  padding: var(--weather-spacing-md);
  background: var(--weather-color-day-bg);
}

.weather__box .weather__image {
  text-align: center;
}

.weather__box .weather__image .weather__image__area {
  text-align: center;
  background-color: var(--weather-color-image-bg);
  padding: var(--weather-spacing-md);
  border-radius: var(--weather-border-radius);
}

.weather__box .weather__image img {
  vertical-align: middle;
}

.weather__box .weather_max {
  text-align: center;
}

.weather__box .weather_max_hot {
  display: inline-block;
  color: var(--weather-color-max);
  padding: 1.5rem var(--weather-spacing-md);
  font-size: var(--weather-font-size-base);
  font-weight: 700;
}

.weather__box .weather_max_min {
  display: inline-block;
  color: var(--weather-color-min);
  padding: 1.5rem var(--weather-spacing-md);
  font-size: var(--weather-font-size-base);
  font-weight: 700;
}

.weather__box .weather__wind,
.weather__box .weather__wave {
  padding: 0 var(--weather-spacing-md) var(--weather-spacing-md);
  font-size: var(--weather-font-size-sm);
}

/* --- 時間帯テーブル（降水確率） --- */

.weather__box table.weather__time {
  width: 100%;
  margin: var(--weather-spacing-md) 0;
  text-align: center;
  border-collapse: collapse;
}

.weather__box table.weather__time tr {
  border-bottom: 1px solid var(--weather-color-border);
}

.weather__box table.weather__time td.bar,
.weather__box table.weather__time th {
  background: var(--weather-color-bar-bg);
  text-align: center;
  padding: var(--weather-spacing-md);
}

.weather__box table.weather__time td {
  background: var(--weather-color-cell-bg);
  border-bottom: 1px solid var(--weather-color-border);
  padding: var(--weather-spacing-md);
}

/* --- Boxタイトル （地域名見出し） --- */

.weather__box__title {
  clear: both;
}

.weather__box__title::after {
  content: "";
  display: table;
  clear: both;
}

/*.weather__box__title h2 {*/
/*  background: var(--weather-color-heading-bg);*/
/*  padding: var(--weather-spacing-sm) var(--weather-spacing-md);*/
/*}*/

/* ==========================================================================
   週間予報テーブル (weather_week)
   Weather_WeekController で使用
   ========================================================================== */

table.weather_week {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

table.weather_week tbody tr {
  border-bottom: 1px solid var(--weather-color-border);
}

table.weather_week tbody tr th,
table.weather_week tbody tr td,
table.weather_week tbody tr td.bar1 {
  text-align: center;
  padding: var(--weather-spacing-sm);
}

table.weather_week tbody tr td.max {
  color: var(--weather-color-max);
  font-weight: 700;
}

table.weather_week tbody tr td.min {
  color: var(--weather-color-min);
  font-weight: 700;
}

table.weather_week img {
  vertical-align: middle;
}

/* ==========================================================================
   ポイント予報テーブル (weather_point)
   Weather_PointController, PinpointController, PinpointareaController で使用
   ========================================================================== */

table.weather_point {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

table.weather_point tbody tr {
  border-bottom: 1px solid var(--weather-color-border);
}

table.weather_point tbody tr th,
table.weather_point tbody tr td,
table.weather_point tbody tr td.bar1 {
  text-align: center;
  padding: var(--weather-spacing-sm);
}

table.weather_point tbody tr td.max {
  color: var(--weather-color-max);
  font-weight: 700;
}

table.weather_point tbody tr td.min {
  color: var(--weather-color-min);
  font-weight: 700;
}

table.weather_point .bar,
table.weather_point th.bar {
  /*background: var(--weather-color-bar-bg);*/
}

table.weather_point .nuki {
  /* 天気列のヘッダー（余白保持） */
}

table.weather_point img {
  vertical-align: middle;
}

/* ==========================================================================
   潮汐 (tide)
   Weather_TideController, Weather_TideareaController で使用
   ========================================================================== */

/* --- エリアセレクト --- */

.tide-area-select {
  margin-bottom: var(--weather-spacing-lg);
}

.tide-area-select__dropdown {
  width: 100%;
  max-width: 300px;
  padding: 0.5rem 0.75rem;
  font-size: var(--weather-font-size-base);
  border: 1px solid var(--weather-color-border);
  border-radius: var(--weather-border-radius);
  background: #fff;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

/* --- Slickカルーセル --- */

.tide-slider {
  margin-bottom: var(--weather-spacing-lg);
}

.tide-slider__item {
  text-align: center;
}

.tide-slider__item img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.tide-slider .slick-prev,
.tide-slider .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
}

.tide-slider .slick-prev { left: 8px; }
.tide-slider .slick-next { right: 8px; }

.tide-slider .slick-prev:hover,
.tide-slider .slick-next:hover {
  background: rgba(0, 0, 0, 0.6);
}

.tide-slider .slick-dots {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0.5rem 0 0;
  margin: 0;
}

.tide-slider .slick-dots li button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #999;
  background: #ddd;
  font-size: 0;
  padding: 0;
  cursor: pointer;
}

.tide-slider .slick-dots li.slick-active button {
  background: #666;
}

.slick-prev:before, .slick-next:before {
  content: unset;
}

/* --- 潮汐一覧ページ（イメージマップ） --- */

.tide__area__photo {
  text-align: center;
  margin-bottom: var(--weather-spacing-lg);
}

.tide__area__photo img {
  width: 100%;
  height: auto;
  max-width: 650px;
}

.tide__area__photo map area:active {
  outline: none;
}

.tide_other {
  text-align: center;
}

.tide_other ul {
  padding: 0;
  list-style: none;
}

table.weather_tide {
  width: 100%;
  margin-top: var(--weather-spacing-sm);
  border-collapse: collapse;
  font-size: var(--weather-font-size-sm);
}

table.weather_tide tr {
  border-bottom: 1px solid var(--weather-color-border);
}

table.weather_tide tr th,
table.weather_tide tr td {
  text-align: center;
  padding: var(--weather-spacing-sm);
}

/* 潮汐テーブルのヘッダー行 */
table.weather_tide th.bar {
  /*background: var(--weather-color-bar-bg);*/
  font-weight: 700;
}

/* 潮汐テーブルの場所名セル (bar1 クラス) */
table.weather_tide th.bar1 {
  /*background: var(--weather-color-heading-bg);*/
  font-weight: 600;
}

/* ==========================================================================
   注意報・警報 (caution)
   Weather_CautionController, Weather_JishinController で使用
   ========================================================================== */

.weather__caution ul {
  padding: 0 var(--weather-spacing-md);
  list-style: none;
  margin: 0;
}

.weather__caution ul li {
  padding: var(--weather-spacing-xs) 0;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.6;
}

.weather__caution ul li:last-child {
  border-bottom: none;
}

/* ==========================================================================
   ピンポイント予報エリア (pinpoint_area)
   West/East/NorthController, PinpointController, PinpointareaController で使用
   ========================================================================== */

.pinpoint_area ul {
  margin: var(--weather-spacing-sm) 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.pinpoint_area ul li {
  width: 50%;
  padding: 5px 0 5px 10px;
  box-sizing: border-box;
}

.pinpoint_area ul li a {
  text-decoration: none;
  color: inherit;
}

.pinpoint_area ul li a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   洗濯指数・紫外線・花粉 テーブル共通 (weather__wash)
   Weather_WashController, Weather_UvController, Weather_KafunController で使用
   ========================================================================== */

table.weather__wash {
  width: 100%;
  text-align: center;
  margin: var(--weather-spacing-sm) 0;
  border-collapse: collapse;
}

table.weather__wash th,
table.weather__wash td {
  text-align: center;
  padding: var(--weather-spacing-md);
  border-bottom: 1px solid var(--weather-color-border);
}

table.weather__wash th.bar,
table.weather__wash td.bar {
  /*background: var(--weather-color-bar-bg);*/
}

table.weather__wash th.max {
  color: var(--weather-color-max);
  font-weight: 700;
}

/* ==========================================================================
   レーダー / 台風 / 地震 画像セクション
   Weather_RadarController, Weather_Radar_jpnController,
   Weather_TyphoonController, Weather_JishinController で使用
   ========================================================================== */

/* コントローラーが <div align="center"> を出力（非推奨HTML属性）
   CSS側でもセンタリングを保証し、レスポンシブ対応 */
div[align="center"] {
  text-align: center;
}

div[align="center"] img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   補助テキスト
   ========================================================================== */

.weather_text_l {
  margin-top: var(--weather-spacing-md);
  padding-left: var(--weather-spacing-md);
  font-size: var(--weather-font-size-sm);
  color: var(--weather-color-muted);
}

/* ==========================================================================
   Slick carousel 用（潮汐エリアのグラフスライダー等）
   ========================================================================== */

.slick-slide.slick-current.slick-active img {
  text-align: center;
  margin: 0 auto;
  display: block;
}

/* ==========================================================================
   区切り線 (hr)
   紫外線・花粉・洗濯コントローラーが各地域テーブル間にhrを出力
   ========================================================================== */

table.weather__wash + hr {
  border: none;
  border-top: 1px solid var(--weather-color-border);
  margin: var(--weather-spacing-lg) 0;
}

/* ==========================================================================
   Desktop (768px〜)
   ========================================================================== */

@media (min-width: 768px) {

  /* --- 天気ボックスを横並び --- */
  /* コントローラーが .weather__box を直に並べるため float で対応 */
  .weather__box {
    width: 49%;
    padding: var(--weather-spacing-md);
    float: left;
    margin-bottom: var(--weather-spacing-md);
  }

  .weather__box:nth-child(odd) {
    margin-right: 2%;
  }

  /* 将来 Twig テンプレート化してラッパーを追加する場合の Flexbox 定義 */
  .weather__box-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--weather-spacing-md);
  }

  .weather__box-container .weather__box {
    float: none;
    width: calc(50% - var(--weather-spacing-md));
  }

  /* --- 週間予報: 横並びレイアウト --- */
  table.weather_week {
    margin: var(--weather-spacing-lg) 0;
  }

  table.weather_week tr {
    float: left;
    width: 14.28%;
  }

  table.weather_week tbody tr th,
  table.weather_week tbody tr td,
  table.weather_week tbody tr td.bar1 {
    display: block;
    border-bottom: 1px solid var(--weather-color-border);
  }

  table.weather_week tr:nth-child(n) td:nth-child(2),
  table.weather_week tr:nth-child(1) th:nth-child(2) {
    height: 70px;
    white-space: nowrap;
  }

  table.weather_week::after {
    content: "";
    display: table;
    clear: both;
  }

  /* --- ポイント予報: 横並びレイアウト --- */
  table.weather_point {
    margin: var(--weather-spacing-lg) 0;
  }

  table.weather_point tr {
    float: left;
    width: 11%;
  }

  table.weather_point tbody tr th,
  table.weather_point tbody tr td,
  table.weather_point tbody tr td.bar1 {
    display: block;
    border-bottom: 1px solid var(--weather-color-border);
  }

  table.weather_point tr:nth-child(n) td:nth-child(2),
  table.weather_point tr:nth-child(1) th:nth-child(2) {
    height: 70px;
    white-space: nowrap;
  }

  table.weather_point::after {
    content: "";
    display: table;
    clear: both;
  }

  /* --- ピンポイント予報: 4列 --- */
  .pinpoint_area ul li {
    width: 25%;
  }

  /* --- 潮汐 --- */
  #tide {
    width: 90%;
    margin: 0 auto;
  }

  /* 潮汐テーブルが10列あるためフォントサイズ調整 */
  table.weather_tide {
    font-size: var(--weather-font-size-sm);
  }
}

/* ==========================================================================
   Large Desktop (992px〜)
   ========================================================================== */

@media (min-width: 992px) {
  table.weather_tide {
    font-size: var(--weather-font-size-base);
  }

  table.weather_tide tr th,
  table.weather_tide tr td {
    padding: var(--weather-spacing-sm) var(--weather-spacing-md);
  }
}