/* =========================================================
   The Events Calendar（月表示）グリッドの見た目調整
   ========================================================= */

/* ---- 周囲の背景色（カレンダーの外側）---- */
.tribe-common.tribe-events-view,
.tribe-events-view--month { background-color: #f8f9f2 !important; }

/* ---- テーブルを7等分のtable方式に固定（列を揃える）---- */
.tribe-events-calendar-month {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  background: transparent;
  box-shadow: none;
}
.tribe-events-calendar-month__header        { display: table-header-group !important; }
.tribe-events-calendar-month__header tr     { display: table-row !important; }
.tribe-events-calendar-month__header-column { display: table-cell !important; }
.tribe-events-calendar-month__body          { display: table-row-group !important; }
.tribe-events-calendar-month__week          { display: table-row !important; }
.tribe-events-calendar-month__day           { display: table-cell !important; }

/* ---- 曜日ヘッダー：水色背景・中央揃え・罫線 ---- */
.tribe-events-calendar-month__header-column {
  border: 1px solid #cfd8e3 !important;
  background: #e3f2fc !important;          /* 水色 */
  text-align: center !important;
  vertical-align: middle !important;
  padding: 8px 0 !important;
}
.tribe-common.tribe-events .tribe-events-calendar-month__header-column-title {
  display: block;
  text-align: center !important;
  justify-content: center !important;
  color: #444;
}
/* 文字を少し大きく・太字に（プラグインの tribe-common-b3 に勝つよう子要素すべてに !important）*/
.tribe-common.tribe-events .tribe-events-calendar-month__header-column-title,
.tribe-common.tribe-events .tribe-events-calendar-month__header-column-title * {
  font-size: 16px !important;     /* 少し大きく */
  font-weight: 700 !important;    /* 太字 */
}
.tribe-common.tribe-events .tribe-events-calendar-month__header-column[abbr="日"] .tribe-events-calendar-month__header-column-title { color: #d8413a !important; }
.tribe-common.tribe-events .tribe-events-calendar-month__header-column[abbr="土"] .tribe-events-calendar-month__header-column-title { color: #2b6cb0 !important; }

/* ---- 日セル：白背景・罫線・「幅と同じ高さ」を最低高さに ---- */
.tribe-events-calendar-month__day {
  border: 1px solid #cfd8e3 !important;
  vertical-align: top !important;
  padding: 4px 6px;
  background: #ffffff;                    /* セルは白 */
}
.tribe-events-calendar-month__day--current     { background: #fff7df; } /* 今日 */
.tribe-events-calendar-month__day--other-month { background: #f4f4f4; } /* 当月外 */

/* イベントが無くても 幅と同じ高さ（正方形）を確保。イベントがあれば伸びる。
   ※高さを抑えたい場合は aspect-ratio を「1 / 0.7」等に変更 */
.tribe-events-calendar-month__day-cell--desktop {
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  min-height: 96px;            /* aspect-ratio 非対応ブラウザ用の保険 */
}

/* ---- 日付番号 ---- */
.tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day-date-daynum,
.tribe-events-calendar-month__day-date-link {
  font-weight: 700;
  color: #333;
  text-decoration: none;
}
.tribe-events-calendar-month__body tr td:first-child .tribe-events-calendar-month__day-date-daynum,
.tribe-events-calendar-month__body tr td:first-child .tribe-events-calendar-month__day-date-link { color: #d8413a; }
.tribe-events-calendar-month__body tr td:last-child  .tribe-events-calendar-month__day-date-daynum,
.tribe-events-calendar-month__body tr td:last-child  .tribe-events-calendar-month__day-date-link { color: #2b6cb0; }
.tribe-events-calendar-month__body td.tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date-daynum,
.tribe-events-calendar-month__body td.tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date-link { color: #c4c4c4; }

/* ---- 祝日（JSで .is-holiday を付与）＝赤 ---- */
.tribe-events-calendar-month__day.is-holiday .tribe-events-calendar-month__day-date-daynum,
.tribe-events-calendar-month__day.is-holiday .tribe-events-calendar-month__day-date-link { color: #d8413a !important; }
.soco-holiday-name {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
  color: #d8413a;
}

/* ---- セル内イベント文字を控えめに ---- */
.tribe-events-calendar-month__calendar-event-title-link,
.tribe-events-calendar-month__calendar-event-datetime { font-size: 12px; }
.tribe-events-calendar-month__multiday-event-bar-title { font-size: 11px; }

/* =========================================================
   上部ナビ：< 年月 > を中央にまとめる（margin:auto で確実に中央寄せ）
   ========================================================= */
.tribe-common.tribe-events .tribe-events-c-top-bar {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
/* nav / ul / li を display:contents にして、< > を top-bar の直接の子に */
.tribe-common.tribe-events .tribe-events-c-top-bar .tribe-events-c-top-bar__nav,
.tribe-common.tribe-events .tribe-events-c-top-bar .tribe-events-c-top-bar__nav-list,
.tribe-common.tribe-events .tribe-events-c-top-bar .tribe-events-c-top-bar__nav-list-item {
  display: contents !important;
}
/* 並び順：< → 年月 → >。両端に margin:auto を入れて 3つをまとめて中央へ */
.tribe-common.tribe-events .tribe-events-c-top-bar__nav-link--prev {
  order: 1 !important;
  margin: 0 0 0 auto !important;   /* 左の余白を吸収 */
}
.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker {
  order: 2 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;        /* ← flex:auto を打ち消す（777pxに広がるのを防ぐ）*/
  width: auto !important;
  max-width: max-content !important;
}
.tribe-common.tribe-events .tribe-events-c-top-bar__nav-link--next {
  order: 3 !important;
  margin: 0 auto 0 0 !important;   /* 右の余白を吸収 */
}

/* 右にあるビュー切替アイコン(23px)のぶん左にズレて見えるので、
   < 年月 > グループを 11.5px(=23/2) 右へ寄せて視覚的に中央へ */
.tribe-common.tribe-events .tribe-events-c-top-bar__nav-link--prev,
.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker,
.tribe-common.tribe-events .tribe-events-c-top-bar__nav-link--next {
  transform: translateX(18px) !important;
}

/* 中央の年月：プルダウン無効化、テキストのみ */
.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-button {
  pointer-events: none !important;
  cursor: default;
  width: auto !important;
}
.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-button-icon-svg { display: none !important; }
.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-container       { display: none !important; }

/* 「今月」ボタン・空のactions枠は隠す */
.tribe-common.tribe-events .tribe-events-c-top-bar__today-button { display: none !important; }
.tribe-common.tribe-events .tribe-events-c-top-bar__actions       { display: none !important; }

/* =========================================================
   タイトル「そなえ館空満利用状況」まわり
   ・中央揃え、2026年6月との間を20px空ける
   ========================================================= */
.tribe-events-before-html {
  text-align: center !important;
  margin-bottom: 20px !important;   /* ← 年月との間隔 */
}
.tribe-events-before-html p {
  text-align: center !important;
  margin: 0 !important;
}

/* =========================================================
   ビュー切替プルダウンの表示崩れ対策
   （文字が縦に折り返されるのを防ぐ。width:max-content をここだけに限定）
   ※ .tribe-common a 全体に入れると全リンクへ影響するため絞っている
   ========================================================= */
.tribe-events-c-view-selector__content,
.tribe-events-c-view-selector__list {
  width: max-content !important;
}
.tribe-events-c-view-selector__list-item,
.tribe-events-c-view-selector__list-item-link,
.tribe-events-c-view-selector__list-item-text {
  width: max-content !important;
  white-space: nowrap !important;
}