/*
 * 漫トロピーWeb 独自スタイル
 * 方針: Bootstrap 5.3 をベースにし、ここでは色調整など最小限のみを書く。
 */

/* ブランドカラー(漫トロピーのピンク系) */
:root {
  --mantropy-pink: #ff1493; /* deeppink */
  --bs-link-color: #c2185b;
  --bs-link-hover-color: #8c1145;
  --bs-link-color-rgb: 194, 24, 91;
  --bs-link-hover-color-rgb: 140, 17, 69;
}

/* Rails の form エラー表示を Bootstrap の is-invalid 相当に */
.field_with_errors {
  display: inline;
}

.field_with_errors input,
.field_with_errors textarea,
.field_with_errors select {
  border-color: var(--bs-danger);
}

.field_with_errors label {
  color: var(--bs-danger);
}

/* ============================================================
 * トップページの意図的なカオス演出
 * 旧サイト(黒背景テーブル / marquee / logo.gif 5連発 / 隠し文字)の
 * 雰囲気を、Bootstrap のレスポンシブ構造を壊さずに再現するためのもの。
 * ここのスタイルは app/views/homes/index.html.haml 専用。
 * ============================================================ */

#home-chaos {
  background-color: #000;
  color: #fff;
}

#home-chaos a {
  color: cyan;
}

#home-chaos a:hover,
#home-chaos a:focus {
  color: #7fffff;
}

/* 旧 <marquee scrollamount="3" scrolldelay="48"> 相当(およそ 62px/秒)の横スクロール */
.chaos-marquee {
  overflow: hidden;
}

.chaos-marquee__text {
  display: inline-block;
  white-space: nowrap;
  color: skyblue;
  padding-left: 100%; /* 右端の外から流し始める */
  animation: chaos-marquee-scroll 42s linear infinite;
}

@keyframes chaos-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* 動きが苦手な利用者にはスクロールを止めて全文を折り返し表示する */
@media (prefers-reduced-motion: reduce) {
  .chaos-marquee__text {
    animation: none;
    padding-left: 0;
    white-space: normal;
  }
}

/* 黒背景に黒文字。反転選択すると読める隠し叫び */
.chaos-hidden-scream {
  color: #000;
  font-weight: bold;
}

/* ============================================================
 * Wiki 本文(HikiDoc レンダリング結果)のデザイン
 * mediment の docs ページのスタイルを、色だけブランドカラーに
 * 置き換えて移植したもの。app/views/wikis/_show.html.haml 専用。
 * ============================================================ */

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.markdown-body th,
.markdown-body td {
  border: 1px solid #ccc;
  padding: 6px 12px;
}

.markdown-body th {
  background-color: #fce4ec;
}

.markdown-body h1 {
  font-size: 24px;
  border-left: 8px solid #c2185b;
  border-bottom: 2px solid #ccc;
  padding-left: 12px;
  padding-bottom: 8px;
  margin-top: 40px;
  margin-bottom: 24px;
}

.markdown-body h2 {
  font-size: 20px;
  border-left: 6px solid #c2185b;
  border-bottom: 2px solid #ccc;
  padding-left: 12px;
  padding-bottom: 8px;
  margin-top: 40px;
  margin-bottom: 24px;
}

.markdown-body h3 {
  font-size: 16px;
  border-left: 4px solid #c2185b;
  padding-left: 12px;
  margin-top: 32px;
  margin-bottom: 20px;
}

.markdown-body h4,
.markdown-body h5 {
  font-size: 14px;
  border-left: 3px solid #ccc;
  padding-left: 8px;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* まんとろちゃん: 背景画像をタイル状に繰り返し、中身は下寄せ */
.mantro-chan-bg {
  background-repeat: repeat;
  min-height: 302px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

/* キャプションも原作どおり黒文字で背景に溶ける */
.mantro-chan-bg__caption {
  color: #000;
}

/* 年度別ランキング・旧メンバー一覧の折りたたみトグル: Wikipedia 風に +/- を切り替える */
.year-toggle .bi-dash-lg,
.old-users-toggle .bi-dash-lg {
  display: none;
}

.year-toggle[aria-expanded="true"] .bi-plus-lg,
.old-users-toggle[aria-expanded="true"] .bi-plus-lg {
  display: none;
}

.year-toggle[aria-expanded="true"] .bi-dash-lg,
.old-users-toggle[aria-expanded="true"] .bi-dash-lg {
  display: inline-block;
}