@charset "utf-8";

/* ==========================================================================
   1. スムーススクロール & ナビゲーション連動設定
   ========================================================================== */

/* ページ内リンク（#about など）クリック時に滑らかにスクロール移動させる */
html {
  scroll-behavior: smooth;
}

/* 固定ナビゲーションバー（約3.25rem）で移動先の見出しが隠れないよう着地位置を上へずらす */
section[id] {
  scroll-margin-top: 3.5rem;
}

/* ナビゲーションバー固定時のボディ上部余白 */
body {
  padding-top: 3.25rem;
}


/* ==========================================================================
   2. 立教カラー（濃紫）ナビゲーションバー設定
   ========================================================================== */

/* 立教パープルメイン（深みのある紫） */
.navbar.is-rikkyo {
  background-color: #2E124D !important;
  color: #ffffff !important;
}

.navbar.is-rikkyo .navbar-item {
  color: #e2d9ee !important;
  transition: background-color 0.2s, color 0.2s;
}

/* マウスホバー時・アクティブ時の装飾 */
.navbar.is-rikkyo .navbar-item:hover,
.navbar.is-rikkyo .navbar-item.is-active {
  background-color: #451B72 !important;
  color: #ffffff !important;
}

/* スマホ用ハンバーガーアイコン（白文字化） */
.navbar.is-rikkyo .navbar-burger {
  color: #ffffff !important;
}

/* スマホ閲覧時のドロップダウンメニュー背景 */
@media screen and (max-width: 1023px) {
  .navbar.is-rikkyo .navbar-menu.is-active {
    background-color: #2E124D !important;
  }
}


/* ==========================================================================
   3. デザイン・パーツ微調整
   ========================================================================== */

/* Hero セクション（明るく鮮やかな元の青色を保持） */
.hero.is-link {
  background-color: #209cee !important;
}

/* メッセージコンポーネント（News等）の見出し文字を太字に */
.message-header p {
  font-weight: bold;
}

/* スマホ閲覧時などにテーブルがはみ出さないよう横スクロール可能にする */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* モーダル画像内の見栄え微調整 */
.modal-content .box iframe {
  border-radius: 6px;
}


/* ==========================================================================
   4. ダークモード（prefers-color-scheme: dark）自動切り替え対応
   ========================================================================== */
@media (prefers-color-scheme: dark) {

  /* 全体背景と文字色の調整 */
  body {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
  }

  /* ナビゲーションバー（ダークモード時は少しトーンを落とした落ち着いた紫） */
  .navbar.is-rikkyo {
    background-color: #210C38 !important;
  }

  /* is-light や has-background-light の暗転化 */
  .has-background-light {
    background-color: #1a1a1a !important;
  }

  /* カードやボックス（.box）の背景・文字色調整 */
  .box {
    background-color: #242424 !important;
    color: #e0e0e0 !important;
  }
  
  .box .title,
  .box .subtitle,
  .box strong {
    color: #ffffff !important;
  }

  /* テーブル（Members部分）のダークモード表示 */
  .table {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }

  .table th {
    color: #ffffff !important;
    border-color: #3f3f3f !important;
  }

  .table td {
    border-color: #2f2f2f !important;
  }

  .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: #1e1e1e !important;
  }

  .table.is-hoverable tbody tr:not(.is-selected):hover {
    background-color: #2c2c2c !important;
  }

  /* リンク色調整 */
  a {
    color: #9d80d8;
  }
  a:hover {
    color: #bfa8ed;
  }

  /* モーダルの背景 */
  .modal-content .box {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
  }

  /* 画像下キャプション（タグ）のダークモード表示 */
  .tag.is-light {
    background-color: #333333 !important;
    color: #b5b5b5 !important;
  }
}