/**
 * 静的診療カレンダー（テーマ専用・XO Event Calendar 不要）。
 * 凡例4種の色は画像デザインに合わせた CSS 変数で統一。
 *
 * @package dental-kids
 */

.c-clinic-calendar,
#theme-clinic-calendar.c-clinic-calendar {
	--c-cal-line: #e8e8e8;
	/* 日付セルの縦方向（高さ・上下余白・曜日行）。基準比 1.2 に対しさらに +20% → 1.44 */
	--c-cal-cell-v-scale: 1.44;
	/* 休診：当月＝濃いピンク／他月＝薄いピンク */
	--cal-closed: #fadce4;
	--cal-closed-out: #fceaee;
	/* 午後休：当月＝濃い（凡例・セル共通）／他月＝薄い */
	--cal-pm-off: #f5e0a0;
	/* 午前休：当月＝濃い #e2daec／他月＝薄い #ede9f4 */
	--cal-am-off: #e5ddff;
	--cal-am-off-out: #ede9f4;
	/* 17:30受付：当月＝濃い #c7e8f7／他月＝同トーンで明るく */
	--cal-reception-1730: #c7e8f7;
	--cal-reception-out: #e8f4fc;
	/* 他月に入る日（前後月のはみ出し）：当月より薄い地色 */
	--cal-pm-off-out: #fcf5da;
	/* 曜日ヘッダー帯 */
	--c-cal-header-bg: #78c679;
	/* 当日ハイライト（JS が .today を付与） */
	--c-cal-today: #1565c0;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}

.c-clinic-calendar table.c-cal-month {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.c-clinic-calendar table.c-cal-month,
.c-clinic-calendar table.c-cal-month th,
.c-clinic-calendar table.c-cal-month td {
	border: 1px solid var(--c-cal-line);
}

.c-clinic-calendar table.c-cal-month > thead th {
	padding: calc(10px * var(--c-cal-cell-v-scale)) 0;
	font-size: 16px;
	background: var(--c-cal-header-bg);
	color: #fff;
	border-color: var(--c-cal-line);
}

/* 曜日ラベル：日曜＝赤字太字、土曜＝青字太字（月〜金は白） */
.c-clinic-calendar table.c-cal-month > thead th:first-child {
	color: #c62828;
	font-weight: 700;
}

.c-clinic-calendar table.c-cal-month > thead th:last-child {
	color: #1565c0;
	font-weight: 700;
}

.c-clinic-calendar table.c-cal-month th,
.c-clinic-calendar table.c-cal-month td {
	font-size: 20px;
	text-align: center;
	vertical-align: top;
}

/* base.css の th,td{padding:.5em} を打ち消し、地色 div が枠線まで届くようにする */
.c-clinic-calendar table.c-cal-month td {
	padding: 0 !important;
}

.c-clinic-calendar table.c-cal-month td > div {
	width: 100%;
	min-height: calc(2.25em * var(--c-cal-cell-v-scale));
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: calc(6px * var(--c-cal-cell-v-scale)) 8px calc(4px * var(--c-cal-cell-v-scale));
	/* 当月の通常日はやや濃い黒 */
	color: #141414;
}

.c-clinic-calendar table.c-cal-month td > div.other-month {
	opacity: 1;
	/* 他月の数字は薄いグレー */
	color: #c4c4c4 !important;
}

.c-clinic-calendar table.c-cal-month td > div.today {
	box-shadow: inset 0 0 0 2px var(--c-cal-today);
	font-weight: bold;
	color: var(--c-cal-today) !important;
}

/* セル種別（凡例と対応）— 当月は濃い地色、他月は薄い地色 */
.c-clinic-calendar table.c-cal-month td > div.cal-closed {
	background-color: var(--cal-closed);
}

.c-clinic-calendar table.c-cal-month td > div.cal-closed.other-month {
	background-color: var(--cal-closed-out);
}

.c-clinic-calendar table.c-cal-month td > div.cal-pm-off {
	background-color: var(--cal-pm-off);
}

.c-clinic-calendar table.c-cal-month td > div.cal-pm-off.other-month {
	background-color: var(--cal-pm-off-out);
}

.c-clinic-calendar table.c-cal-month td > div.cal-am-off {
	background-color: var(--cal-am-off);
}

.c-clinic-calendar table.c-cal-month td > div.cal-am-off.other-month {
	background-color: var(--cal-am-off-out);
}

.c-clinic-calendar table.c-cal-month td > div.cal-reception-1730 {
	background-color: var(--cal-reception-1730);
}

.c-clinic-calendar table.c-cal-month td > div.cal-reception-1730.other-month {
	background-color: var(--cal-reception-out);
}

/* 土曜列は営業日のため地色なし（詳細はファイル末尾の #theme-clinic-calendar ブロックで !important 固定） */
/* 日付の色：当月は濃く、他月は同系で薄く */
.c-clinic-calendar table.c-cal-month td > div.cal-closed.is-sun:not(.other-month),
.c-clinic-calendar table.c-cal-month td > div.cal-closed.is-holiday:not(.other-month):not(.cal-holiday-num-blue) {
	color: #b71c1c;
}

.c-clinic-calendar table.c-cal-month td > div.cal-closed.is-sun.other-month,
.c-clinic-calendar table.c-cal-month td > div.cal-closed.is-holiday.other-month:not(.cal-holiday-num-blue) {
	color: #e0a0a0 !important;
}

.c-clinic-calendar table.c-cal-month td > div.cal-closed.is-holiday.cal-holiday-num-blue:not(.other-month) {
	color: #0d47a1 !important;
	font-weight: bold;
}

.c-clinic-calendar table.c-cal-month td > div.cal-closed.is-holiday.cal-holiday-num-blue.other-month {
	color: #90caf9 !important;
	font-weight: bold;
}

.c-clinic-calendar table.c-cal-month td > div.cal-closed.is-thu:not(.other-month) {
	color: #141414;
}

.c-clinic-calendar table.c-cal-month td > div.cal-closed.is-thu.other-month {
	color: #c4c4c4 !important;
}

.c-clinic-calendar table.c-cal-month td > div.cal-reception-1730.is-sat:not(.other-month) {
	color: #0d47a1;
}

.c-clinic-calendar table.c-cal-month td > div.cal-reception-1730.is-sat.other-month,
.c-clinic-calendar table.c-cal-month td > div.cal-reception-1730.other-month {
	color: #90caf9 !important;
}

.c-clinic-calendar table.c-cal-month td:nth-child(1) > div.cal-closed:not(.other-month):not(.is-holiday):not(.is-sun) {
	color: #b71c1c;
}

.c-clinic-calendar table.c-cal-month td:nth-child(1) > div.cal-closed.other-month:not(.is-holiday):not(.is-sun) {
	color: #e0a0a0 !important;
}

.c-clinic-calendar table.c-cal-month td:nth-child(5) > div.cal-closed:not(.other-month) {
	color: #141414;
}

.c-clinic-calendar table.c-cal-month td:nth-child(5) > div.cal-closed.other-month {
	color: #c4c4c4 !important;
}

.c-clinic-calendar table.c-cal-month td:nth-child(7) > div.cal-reception-1730:not(.other-month) {
	color: #0d47a1;
}

.c-clinic-calendar table.c-cal-month td:nth-child(7) > div.cal-reception-1730.other-month {
	color: #90caf9 !important;
}

.c-clinic-calendar table.c-cal-month .month-header > span.calendar-caption {
	font-size: 260%;
	font-weight: bold;
}

/* tfoot スペーサ行は表示しない（最終行の不要な余白を除く） */
.c-clinic-calendar table.c-cal-month > tfoot {
	display: none;
}

.c-clinic-calendar table.c-cal-month button > span {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-cal-header-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.c-clinic-calendar table.c-cal-month button {
	width: 48px;
	height: 48px;
	min-width: 48px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	line-height: 1;
}

.c-clinic-calendar table.c-cal-month button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.c-clinic-calendar table.c-cal-month button .dashicons {
	color: #fff;
	font-size: 26px;
	width: 26px;
	height: 26px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* styles.css 全体の dashicons 位置指定を打ち消し、〇内で中央に */
.c-clinic-calendar .dashicons-arrow-left-alt2:before,
.c-clinic-calendar .dashicons-arrow-right-alt2:before {
	top: 0 !important;
	position: relative;
	line-height: 1;
	vertical-align: middle;
}

.c-clinic-calendar .month-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
}

/* 共通ナビ（caption 内の二重ボタンは JS で付与する c-cal-use-external-nav 時に非表示） */
#theme-clinic-calendar.c-cal-use-external-nav table.c-cal-month > caption {
	display: none;
}

.c-clinic-calendar .c-cal-nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 10px;
}

.c-clinic-calendar .c-cal-nav-bar .c-cal-nav-caption {
	font-size: 260%;
	font-weight: bold;
	text-align: center;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.2;
}

.c-clinic-calendar .c-cal-nav-bar button > span {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-cal-header-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.c-clinic-calendar .c-cal-nav-bar button {
	width: 48px;
	height: 48px;
	min-width: 48px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	line-height: 1;
	flex-shrink: 0;
}

.c-clinic-calendar .c-cal-nav-bar button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.c-clinic-calendar .c-cal-nav-bar button .dashicons {
	color: #fff;
	font-size: 26px;
	width: 26px;
	height: 26px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.c-clinic-calendar .c-cal-nav-bar .dashicons-arrow-left-alt2:before,
.c-clinic-calendar .c-cal-nav-bar .dashicons-arrow-right-alt2:before {
	top: 0 !important;
	position: relative;
	line-height: 1;
	vertical-align: middle;
}

/* 凡例：カレンダー下・横並び（テーブルとの区切り線は付けない） */
.c-clinic-calendar .c-cal-legend.holiday-titles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 12px 28px;
	margin: 16px 0 0;
	padding-top: 0;
	border-top: none;
}

.c-clinic-calendar .c-cal-legend p.holiday-title {
	margin: 0;
	font-size: calc(125% + 1pt);
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
}

.c-clinic-calendar .c-cal-legend-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	min-width: 22px;
	min-height: 22px;
	aspect-ratio: 1;
	border-radius: 3px;
	border: 1px solid var(--c-cal-line);
	flex-shrink: 0;
	box-sizing: border-box;
	vertical-align: middle;
}

/* 凡例スウォッチ＝各区分の「濃い」（当月セルと同一。薄い *-out は使わない） */
#theme-clinic-calendar .c-cal-legend .c-cal-legend-swatch--closed {
	background-color: var(--cal-closed) !important;
}

#theme-clinic-calendar .c-cal-legend .c-cal-legend-swatch--pm {
	background-color: var(--cal-pm-off) !important;
}

#theme-clinic-calendar .c-cal-legend .c-cal-legend-swatch--am {
	background-color: var(--cal-am-off) !important;
}

#theme-clinic-calendar .c-cal-legend .c-cal-legend-swatch--rec {
	background-color: var(--cal-reception-1730) !important;
}

.c-clinic-calendar .c-cal-month-wrap {
	display: none;
}

.c-clinic-calendar .c-cal-month-wrap.is-cal-visible {
	display: block;
}

@media screen and (max-width: 768px) {
	.c-clinic-calendar table.c-cal-month .month-header > span.calendar-caption {
		font-size: 200%;
		margin-top: 4px;
	}

	.c-clinic-calendar .c-cal-nav-bar .c-cal-nav-caption {
		font-size: 200%;
		margin-top: 4px;
	}

	.c-clinic-calendar table.c-cal-month th,
	.c-clinic-calendar table.c-cal-month td,
	.c-clinic-calendar table.c-cal-month > thead th,
	.c-clinic-calendar .c-cal-legend p.holiday-title {
		font-size: 14px;
	}

	.c-clinic-calendar .c-cal-legend.holiday-titles {
		gap: 10px 16px;
	}

	.c-clinic-calendar .c-cal-legend p.holiday-title {
		font-size: calc(110% + 1pt);
	}
}

@media screen and (max-width: 560px) {
	/* 凡例：1列4行 → 2列2行 */
	.c-clinic-calendar .c-cal-legend.holiday-titles {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: auto;
		gap: 10px 14px;
		align-items: center;
		justify-items: start;
	}

	.c-clinic-calendar .c-cal-legend p.holiday-title {
		width: auto;
		max-width: 100%;
		font-size: calc(100% + 1pt);
	}

	.c-clinic-calendar table.c-cal-month th,
	.c-clinic-calendar table.c-cal-month td,
	.c-clinic-calendar table.c-cal-month > thead th {
		font-size: 13px;
	}
}

/*
 * セル地色の最終指定（WP 共通スタイル・他プラグイン・読み込み順で上書きされても効く）
 * XO Event Calendar 削除後も、本文に旧ショートコードが残っていても #theme-clinic-calendar 内だけが対象。
 */
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td > div.cal-closed {
	background-color: var(--cal-closed, #fadce4) !important;
}
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td > div.cal-closed.other-month {
	background-color: var(--cal-closed-out, #fceaee) !important;
}
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td > div.cal-pm-off {
	background-color: var(--cal-pm-off, #f5e0a0) !important;
}
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td > div.cal-pm-off.other-month {
	background-color: var(--cal-pm-off-out, #fcf5da) !important;
}
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td > div.cal-am-off {
	background-color: var(--cal-am-off, #e5ddff) !important;
}
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td > div.cal-am-off.other-month {
	background-color: var(--cal-am-off-out, #ede9f4) !important;
}
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td > div.cal-reception-1730 {
	background-color: var(--cal-reception-1730, #c7e8f7) !important;
}
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td > div.cal-reception-1730.other-month {
	background-color: var(--cal-reception-out, #e8f4fc) !important;
}
/* 土曜列：区分付きセルも含め全面透明（上記より詳細度が高いセレクタで上書き） */
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td:nth-child(7) > div.cal-closed,
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td:nth-child(7) > div.cal-pm-off,
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td:nth-child(7) > div.cal-am-off,
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td:nth-child(7) > div.cal-reception-1730 {
	background-color: transparent !important;
}
/* 土曜の通常セル（区分クラスなし）も透明 */
#theme-clinic-calendar.c-clinic-calendar table.c-cal-month td:nth-child(7) > div {
	background-color: transparent !important;
}