/* Event Calendar のイベント一覧を月ごとの枠にまとめる。

   もとは日付とイベント名が別々の行に出る作りだった。
   1件2行 × 19件 = 38行になり、どの月に何があるのかを追えなかった。
   月単位で枠に入れ、日付とイベント名を同じ行に並べることで、
   枠の見出しを目印に月をたどれるようにしている。

   枠は同梱の NES.css の .nes-container.with-title を使う。
   サイト内の他の箇所で既に使っている部品のため見た目がそろう。
   ただし既定の余白（1.5rem 2rem = 24px 32px）はサイドバーの幅に対して
   大きすぎるため、本ファイルで詰めている。

   このファイルは link-menu.css より後に読み込むこと
   （.update2 a の display:block を横並びへ上書きするため）*/

/* 月ごとの枠。
   .update2 の中は div align="center" で中央そろえになっているため、
   枠の中だけ左そろえに戻す。

   margin-left を空けている理由:
   .update2 は padding を持たないため、そのままだと枠の黒線（4px）が
   .update2 の左端に乗る。線のすぐ左はパネルの外側、つまり
   サイドバーの背景色 #263238（ほぼ黒）になり、線が背景に溶けて
   枠で囲われていることが分からなくなる。
   10px 空けて .update2 の ghostwhite を線の左に見せることで、
   黒線が枠の輪郭として読めるようにしている。
   右側はスクロールバーが隣接するため同じ問題は起きない */
.sidebar .sidebar_nav .update2 .evt-month {
  padding: 12px 10px;
  margin: 0 0 20px 10px;
  text-align: left;
  background-color: ghostwhite;
}

/* 見出しの「2026 / 11」。
   NES.css は帯の背景を #fff にしているが、.update2 の背景は ghostwhite のため
   枠線を隠す帯の色が合わずに白い切れ目が出る。背景色をそろえる。

   margin-top は枠線の上に帯を重ねるための持ち上げ量。
   NES.css の既定値 -1.8rem は padding 24px 前提のため、
   padding を 12px に詰めた本枠では下がりすぎる。
   12px（padding）+ 8px（文字の半分）= 20px 持ち上げて線の上に乗せる。

   Press Start 2P は8ドット設計のため、16pxはちょうど2倍で輪郭が鮮明になる */
.sidebar .sidebar_nav .update2 .evt-month > .title {
  margin: -20px 0 10px;
  font-family: "Press Start 2P", cursive;
  font-size: 16px;
  background-color: ghostwhite;
}

/* 1件ぶんの行。日付とイベント名を横に並べる */
.sidebar .sidebar_nav .update2 .evt-row {
  display: flex;
  align-items: baseline;
  margin: 0;
}

/* 日付。Press Start 2P は等幅のため、幅をそろえるとイベント名の先頭が縦にそろう。

   幅を固定値ではなく min-width にしている理由:
   サイドバーは500px固定で、枠の内側は約407pxしかない。
   最長の「11/21~12/6」（10文字＝160px）に合わせるとイベント名が247pxしか残らず、
   折り返しが増えて読みにくくなる。
   大半を占める8文字（10/21~23 等）に合わせて8em＝128pxを下限とし、
   はみ出す1件だけがその行で右へずれる形にしている */
.sidebar .sidebar_nav .update2 .evt-date {
  flex: 0 0 auto;
  min-width: 8em;
  white-space: nowrap;
  font-family: "Press Start 2P", cursive;
  font-size: 16px;
}

/* イベント名。
   link-menu.css で display:block にしているため、横並びにするには
   flex の子として幅を持たせ直す必要がある。
   min-width:0 が無いと、長い名前のときに枠を押し広げて日付がずれる */
.sidebar .sidebar_nav .update2 .evt-row a {
  flex: 1 1 auto;
  min-width: 0;
}

/* 開催の済んだ枠（PAST）は背景をグレーにして、ひと目で過去と分かるようにする。
   クラス名の is- は NES.css の書き方（is-dark / is-rounded 等）に合わせている。

   見出しの帯も同じ色にすること。
   帯は枠線の上に重なって線を隠す役目を持っており、
   色が違うと見出しの後ろに白い切れ目が出てしまう */
.sidebar .sidebar_nav .update2 .evt-month.is-past,
.sidebar .sidebar_nav .update2 .evt-month.is-past > .title {
  background-color: #cfcfcf;
}

/* カレンダーの表示月にイベントが無いときの案内（js/event-filter.js が文言を入れる）。
   「- NO EVENT -」と案内の2行を textContent の改行で分けているため、
   pre-line で改行を活かす */
.sidebar .sidebar_nav .update2 .evt-empty {
  margin: 0 0 20px 10px;
  padding: 14px 10px;
  font-family: "Press Start 2P", cursive;
  font-size: 16px;
  line-height: 2;
  text-align: center;
  white-space: pre-line;
}

/* 絞り込みで隠す指定。
   js 側は hidden 属性を付け外ししているが、ブラウザ既定の [hidden]{display:none} は
   クラス4つで書いた上の .evt-row{display:flex} に負けて効かない。
   打ち消せるようクラス5つ分の詳細度で書いている。
   下のメディアクエリの .evt-row{display:block} もクラス4つのため同じ理由で上回る */
.sidebar .sidebar_nav .update2 .evt-row[hidden],
.sidebar .sidebar_nav .update2 .evt-month[hidden],
.sidebar .sidebar_nav .update2 .evt-empty[hidden] {
  display: none;
}

/* 狭い画面では日付10文字ぶん（160px）を横に取るとイベント名が
   1文字ずつ折り返してしまう。日付を上、名前を下の縦積みに切り替える */
@media screen and (max-width: 1050px) {
  .sidebar .sidebar_nav .update2 .evt-row {
    display: block;
  }

  .sidebar .sidebar_nav .update2 .evt-date {
    display: block;
    width: auto;
  }
}