/**
 * 診療カレンダー（フロント表示）
 *
 * 開院状況の色は管理画面で変わるので、ここには書かない。
 * セルは --cc-cell-bg / --cc-cell-fg を参照するだけで、値は
 * Aijoh_Calendar_Renderer::build_inline_style() が流し込む。
 *
 * 寸法はテーマごとに違うので、ここでは em 基準の素直な値だけを持つ。
 * サイト固有の実寸はテーマ側で上書きする前提。
 */

.cc-calendar {
	--cc-border: #d6dde3;
	--cc-head-bg: #f4f7f9;
	--cc-text: #333;
	--cc-sun: #d8453a;
	--cc-sat: #2f6fb0;
	--cc-today: #f6c343;
	--cc-today-width: 2px;
	--cc-holiday: #d8453a;
	--cc-holiday-name: #d8453a;
	--cc-head-sun: #d8453a;
	--cc-head-sat: #2f6fb0;


	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2.5em;
	color: var(--cc-text);
}

/* 左＝年月と凡例、右＝表 */

.cc-calendar__side {
	flex: 0 0 auto;
}

.cc-calendar__body {
	flex: 1 1 auto;
	/* flex アイテムは既定で内容幅より縮まないので、表が溢れないように */
	min-width: 0;
}

/* ── 年月と月送り ───────────────────────────── */

.cc-calendar__header {
	text-align: center;
}

.cc-calendar__year {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.cc-calendar__nav-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	margin-top: 0.3em;
}

.cc-calendar__month {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
}

/* 1桁の月（8月）と2桁の月（11月）で幅が変わると、両脇の矢印が動いて
   月送りのたびに位置がずれる。常に2桁分を確保して動かないようにする */
.cc-calendar__month-num {
	display: inline-block;
	/* min-width だと中身の実測幅で端数が出て、1桁の月がサブピクセル分ずれる。
	   幅そのものを2桁分に固定する */
	width: 2ch;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.cc-calendar__nav {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.4em 0.9em;
	border: 1px solid var(--cc-border);
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font-size: 0.85rem;
	line-height: 1;
	text-decoration: none;
}

.cc-calendar__nav:hover,
.cc-calendar__nav:focus-visible {
	background: var(--cc-head-bg);
}

.cc-calendar__nav::before {
	font-weight: 700;
}

.cc-calendar__nav--prev::before {
	content: "\25C0";
}

.cc-calendar__nav--next {
	flex-direction: row-reverse;
}

.cc-calendar__nav--next::before {
	content: "\25B6";
}

/* 通信中は押せなくし、差し替わる範囲を薄くして待ちだと分かるようにする */
.cc-calendar.is-loading .cc-calendar__nav {
	pointer-events: none;
	opacity: 0.5;
}

.cc-calendar.is-loading .cc-calendar__body {
	opacity: 0.5;
}

/* ── カレンダー本体 ───────────────────────────── */

.cc-calendar__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.cc-calendar__caption {
	/* 画面には出さないが、読み上げと検索エンジンには何月のカレンダーか伝える */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * 見出しの背景は設定（--cc-wday-head-bg）があればそれを使い、無ければ既定の地色。
 * 変数のフォールバックで決めるので、設定を空へ戻せば宣言ごと消えて元に戻る
 */
.cc-calendar__wday {
	padding: 0.5em 0;
	border: 1px solid var(--cc-border);
	background: var(--cc-wday-head-bg, var(--cc-head-bg));
	font-size: 0.85rem;
	font-weight: 700;
	text-align: center;
}

/*
 * 平日の見出しと日付には color 宣言を置かない。
 * 置くとテーマ側の指定を上書きするし、日付は開院状況の文字色を継承しなくなる。
 * 設定画面で色を保存したときだけ、プラグインが宣言ごと足す
 */
.cc-calendar__wday--sun {
	color: var(--cc-head-sun);
}

.cc-calendar__wday--sat {
	color: var(--cc-head-sat);
}

/* td の height は最小値として働く。日別のテキスト欄を入れた日は伸びる */
.cc-calendar__cell {
	height: 5.5em;
	padding: 0.4em 0.3em;
	border: 1px solid var(--cc-border);
	/*
	 * 開院状況が設定されている日は、状況の背景色（--cc-cell-bg）が勝つ。
	 * --cc-cell-bg は状況のあるセルにしか出ないので、設定されていない日だけ
	 * 曜日の背景色（--cc-wday-bg）が効く。**詳細度では争わせない**
	 * （同じ詳細度のセレクタを並べると、書いた順で勝敗が変わって壊れる）
	 */
	background: var(--cc-cell-bg, var(--cc-wday-bg, #fff));
	color: var(--cc-cell-fg, inherit);
	font-size: 0.85rem;
	text-align: center;
	vertical-align: top;
}

.cc-calendar__cell--blank {
	background: var(--cc-head-bg);
}

/* 内枠なので、太くしても開院状況の背景色を潰さない。0px なら枠は出ない */
.cc-calendar__cell--today {
	box-shadow: inset 0 0 0 var(--cc-today-width) var(--cc-today);
}

/* 過ぎた日は中身だけ薄くする。地色は開院状況を示しているので残す */
.cc-calendar__cell--past > * {
	opacity: 0.45;
}

.cc-calendar__date {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

.cc-calendar__cell--sun .cc-calendar__date {
	color: var(--cc-sun);
}

.cc-calendar__cell--sat .cc-calendar__date {
	color: var(--cc-sat);
}

/*
 * 祝日は土日と重なっても祝日の色を使う。同じ詳細度なので、
 * **土日より後に書くこと**（前に書くと土曜の祝日が土曜色になる）
 */
.cc-calendar__cell--holiday .cc-calendar__date {
	color: var(--cc-holiday);
}

.cc-calendar__holiday,
.cc-calendar__status,
.cc-calendar__field {
	display: block;
	font-size: 0.75rem;
	line-height: 1.35;
	word-break: break-word;
}

/* 祝日名は赤字。開院状況とテキスト欄は種別の文字色に従う */
.cc-calendar__holiday {
	color: var(--cc-holiday-name);
	font-weight: 700;
}

/* 重要事項の色はここで固定しない。設定画面（テキスト欄の色）の値を
   build_inline_style() がインラインで当てる。色を空にしたときは
   指定そのものが出ず、開院状況の文字色を継承する */
.cc-calendar__field--important {
	font-weight: 700;
}

/* ── 凡例 ───────────────────────────────── */

/* 年月の下（左カラム）に置くので縦並び */
.cc-calendar__legend {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	margin: 1.2em 0 0;
	padding: 0;
	list-style: none;
}

.cc-calendar__legend-item {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.85rem;
	white-space: nowrap;
}

.cc-calendar__legend-swatch {
	flex-shrink: 0;
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	border: 1px solid var(--cc-border);
	background: var(--cc-cell-bg, #fff);
}

/* ── スマートフォン ─────────────────────────── */

@media screen and (max-width: 600px) {
	/* 左右に並べる幅が無いので縦積みにし、凡例は横並びに畳む */
	.cc-calendar {
		flex-direction: column;
		align-items: center;
		gap: 0.8em;
	}

	.cc-calendar__side,
	.cc-calendar__body {
		width: 100%;
	}

	.cc-calendar__month {
		font-size: 1.75rem;
	}

	.cc-calendar__nav {
		padding: 0.4em 0.6em;
	}

	/* 幅が足りないので矢印だけ出す */
	.cc-calendar__nav-label {
		display: none;
	}

	.cc-calendar__legend {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5em 1.2em;
		margin-top: 0.8em;
	}

	.cc-calendar__cell {
		height: auto;
		min-height: 4.2em;
		padding: 0.3em 0.15em;
	}

	.cc-calendar__date {
		font-size: 0.9rem;
	}

	.cc-calendar__wday,
	.cc-calendar__holiday,
	.cc-calendar__status,
	.cc-calendar__field {
		font-size: 0.65rem;
	}
}