/* --------------------------------------------------------------
   UBM Calendar ― 月表示カレンダー

   現行（XO Event Calendar）の見た目に寄せた指定：
     ・白背景 / 細いグレーの枠線
     ・曜日ヘッダーは日〜土、日曜=赤・土曜=青
     ・前後月の日付はグレー
     ・イベントは角丸なしのベタ塗り、白文字
     ・全行が同じ高さ（イベント件数で伸び縮みしない）
     ・スマホでも7列のマス目を維持（横スクロールさせない）

   【高さの決め方】
   td の height はテーブルレイアウトでは「最小高さ」としてしか効かず、
   中身が増えると勝手に伸びる。そのため高さは .ubmcal-cell__inner が持ち、
   td 側は padding 0 で追随するだけにしてある。
   1マスの高さ ＝ 日付行 + 枠数 × (イベント高 + 隙間) + 上下余白。
   枠数（--ubmcal-slots）はテンプレートから流し込まれる（既定3）。
   -------------------------------------------------------------- */

.ubmcal {
	--ubmcal-border: #d8d8d8;
	--ubmcal-sunday: #cc2222;
	--ubmcal-saturday: #2255cc;
	--ubmcal-outside: #b5b5b5;
	--ubmcal-text: #333;

	/* 高さの内訳。テンプレート側で --ubmcal-slots を上書きする。
	   枠数はその月の最繁日に合わせて自動で決まる（省略せず全件出すため）。
	   文字を大きくしたぶん、イベント1件の高さも 19px → 23px に上げてある。 */
	--ubmcal-slots: 3;
	--ubmcal-date-h: 20px;
	--ubmcal-event-h: 23px;
	--ubmcal-event-gap: 2px;
	--ubmcal-pad-y: 5px;

	/* 横の余白は0にしてイベント名の幅を最優先する。
	   文字を大きくしたぶんを、余白を削って取り戻す狙い。
	   日付の数字は .ubmcal-date 側で自前の padding-left を持っている。 */
	--ubmcal-pad-x: 0px;

	background: #fff;
	color: var(--ubmcal-text);
	margin: 0 0 1.5em;
	/* テーマ側の line-height に引きずられないようにする */
	line-height: 1.4;
}

.ubmcal * {
	box-sizing: border-box;
}

/* ---- 前月次月ナビ ---- */

.ubmcal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2em;
	padding: 0.6em 0 0.8em;
}

.ubmcal-nav__title {
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	min-width: 8em;
}

.ubmcal-nav__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	font-size: 1.2em;
	line-height: 1;
	text-decoration: none;
	color: var(--ubmcal-text);
	border: 1px solid var(--ubmcal-border);
	background: #fff;
}

.ubmcal-nav__arrow:hover,
.ubmcal-nav__arrow:focus {
	background: #f2f2f2;
	color: var(--ubmcal-text);
}

/* ---- グリッド ---- */

.ubmcal-table {
	width: 100%;
	table-layout: fixed;   /* 7列を常に均等割りにする。これがスマホでも崩れない要 */
	border-collapse: collapse;
	background: #fff;
	margin: 0;
}

.ubmcal-table th,
.ubmcal-table td {
	border: 1px solid var(--ubmcal-border);
	padding: 0;
	background: #fff;
}

.ubmcal-dow {
	padding: 0.4em 0;
	font-size: 0.85em;
	font-weight: 700;
	text-align: center;
	background: #fafafa;
}

.ubmcal-dow--0 {
	color: var(--ubmcal-sunday);
}

.ubmcal-dow--6 {
	color: var(--ubmcal-saturday);
}

/* ---- セル ---- */

.ubmcal-cell {
	vertical-align: top;
	padding: 0;
}

.ubmcal-cell__inner {
	/* ここで高さを確定させる。件数が少ない日も同じ高さを保つ */
	height: calc(
		var(--ubmcal-date-h)
		+ var(--ubmcal-slots) * (var(--ubmcal-event-h) + var(--ubmcal-event-gap))
		+ var(--ubmcal-pad-y) * 2
	);
	overflow: hidden;      /* 枠数を超えた分の保険。通常はPHP側で収めている */
	padding: var(--ubmcal-pad-y) var(--ubmcal-pad-x);
}

.ubmcal-cell--outside .ubmcal-date {
	color: var(--ubmcal-outside);
}

.ubmcal-cell--today .ubmcal-date {
	font-weight: 700;
	text-decoration: underline;
}

.ubmcal-date {
	height: var(--ubmcal-date-h);
	line-height: var(--ubmcal-date-h);
	font-size: 0.8em;
	/* セル側の横余白を0にしたので、日付だけ自前で左に逃がす。
	   ここは幅を取り合っていないので少し広めでよい。 */
	padding-left: 0.35em;
}

.ubmcal-cell--dow0 .ubmcal-date {
	color: var(--ubmcal-sunday);
}

.ubmcal-cell--dow6 .ubmcal-date {
	color: var(--ubmcal-saturday);
}

.ubmcal-cell--outside.ubmcal-cell--dow0 .ubmcal-date,
.ubmcal-cell--outside.ubmcal-cell--dow6 .ubmcal-date {
	color: var(--ubmcal-outside);
}

/* ---- イベント ---- */

.ubmcal-events {
	display: flex;
	flex-direction: column;
	gap: var(--ubmcal-event-gap);
}

/* イベント1件。
   従来はカテゴリー色のベタ塗り＋白文字だったが、白抜きは薄い色の上で読みにくく、
   6色中3色が WCAG の 4.5:1 を満たせていなかった。
   薄く伸ばした背景・左端にカテゴリー色の帯・十分に暗くした同系色の文字に変更している。
   3色（bg / text / border）はカテゴリー色から計算し、インラインの変数で渡ってくる。 */

.ubmcal-event {
	display: block;
	height: var(--ubmcal-event-h);
	line-height: var(--ubmcal-event-h);
	flex: 0 0 var(--ubmcal-event-h);   /* flex で潰れないよう固定 */
	/* 左余白は0。文字は帯にそのまま接する。
	   カテゴリー色の帯を残したまま、イベント名の幅を最大限に取るため。 */
	padding: 0 2px 0 0;
	border-radius: 0;                  /* 角丸なし */
	border-left: 2px solid var(--ubmcal-e-border, #8a8a8a);
	background-color: var(--ubmcal-e-bg, #f0f0f0);
	color: var(--ubmcal-e-text, #1a1a1a) !important; /* テーマのリンク色に負けないようにする */
	font-size: 0.9em;
	font-weight: 500;
	letter-spacing: -0.05em;           /* 字間を詰めて1文字ぶん稼ぐ */
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ubmcal-event:hover,
.ubmcal-event:focus {
	color: var(--ubmcal-e-text, #1a1a1a) !important;
	text-decoration: underline;
	filter: brightness(0.96);
}

/* 「ほかN件」も1枠ぶんの高さを使う */
.ubmcal-more {
	display: block;
	height: var(--ubmcal-event-h);
	line-height: var(--ubmcal-event-h);
	flex: 0 0 var(--ubmcal-event-h);
	padding: 0 2px;
	font-size: 0.68em;
	color: #666;
	overflow: hidden;
	white-space: nowrap;
}

.ubmcal-group .ubmcal + .ubmcal {
	margin-top: 1.5em;
}

/* ---- Ajax差し替え中 ---- */
/* mount の高さはJS側で固定するので、ここでは色を薄くするだけ。
   レイアウトに影響する指定は入れない（下の要素を動かさないため）。 */

.ubmcal-mount {
	position: relative;
}

.ubmcal-mount.is-loading .ubmcal {
	opacity: 0.55;
	transition: opacity 0.12s linear;
}

.ubmcal-mount.is-loading .ubmcal-nav__arrow {
	pointer-events: none;
}

/* ---- スマホ ---- */
/* マス目のまま維持する。列を減らしたり縦一列にしたりはしない。
   高さの内訳だけ縮めるので、行が揃ったまま小さくなる。 */

@media screen and (max-width: 782px) {
	.ubmcal {
		--ubmcal-date-h: 17px;
		--ubmcal-event-h: 21px;
		--ubmcal-pad-y: 4px;
		--ubmcal-pad-x: 0px;
	}

	.ubmcal-date {
		font-size: 0.72em;
	}

	.ubmcal-event {
		font-size: 0.8em;
		padding: 0 2px 0 0;
		border-left-width: 2px;
	}

	.ubmcal-more {
		font-size: 0.72em;
		padding: 0 2px;
	}

	.ubmcal-nav__title {
		font-size: 1em;
	}
}

@media screen and (max-width: 480px) {
	.ubmcal {
		--ubmcal-date-h: 15px;
		--ubmcal-event-h: 19px;
		--ubmcal-event-gap: 1px;
	}

	.ubmcal-dow {
		font-size: 0.72em;
	}

	.ubmcal-date {
		font-size: 0.66em;
		padding-left: 0.1em;
	}

	.ubmcal-event {
		font-size: 0.72em;
		letter-spacing: -0.05em;
		border-left-width: 2px;
	}

	.ubmcal-more {
		font-size: 0.66em;
	}
}

/* スクリーンリーダー用（テーマに定義が無い場合の保険） */
.ubmcal .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}