/**
 * bcp/clinic-calendar — フロント + エディタ共通スタイル。
 *
 * 色・余白は Ollie / vip2026 theme.json のデザイントークン (var(--wp--preset--*)) を参照し、
 * ハードコードしない。
 *
 * 配色はブロック属性 colorScheme に基づく .is-color-* クラスで切替える(レイアウト style
 * variation の is-style-* とは直交)。各スキームは下記 CSS 変数を上書きするだけで、
 * 共通のセル描画ルールはそのまま使い回す。
 *   --bcp-cal-open-bg / -open-fg : 診療(open)セルの塗り・文字
 *   --bcp-cal-half-bg / -half-fg : 時短(half)セルの塗り・文字
 *   --bcp-cal-half-line          : 時短セルの border(淡色でも視認できるよう必須)
 *   --bcp-cal-closed-fg          : 休診(closed)セルの数字色(薄すぎないコントラスト)
 *   --bcp-cal-line               : グリッド罫線
 *   --bcp-cal-muted              : 曜日ヘッダ・凡例・補助テキスト
 */

.bcp-cal {
	/* 本文色(ink)。テーマにより main / contrast のどちらかが本文色トークンになる。 */
	--bcp-cal-ink: var(--wp--preset--color--main, var(--wp--preset--color--contrast, #262524));

	/* 面(任意)。既定は透明でテーマ背景に馴染ませる。テーマ側で --bcp-cal-surface を
	   指定すればカード化でき、値には単色でもグラデーションでも使える。
	   下記はすべてテーマから上書きできるフック。プラグインは特定テーマのトークン名に
	   依存しない既定値だけを持ち、サイト固有の見た目はテーマ側で与える。 */
	--bcp-cal-radius:    6px;
	--bcp-cal-gap-x:     var(--wp--preset--spacing--medium, 1.25rem);
	/* 実効の表示月数。render.php はインラインで --bcp-cal-per-view-desktop を出し、
	   実効値はここで決める。インラインスタイルはメディアクエリより強いため、
	   直接 --bcp-cal-per-view を出すと狭い幅での上書きが効かなくなる。 */
	--bcp-cal-per-view:  var(--bcp-cal-per-view-desktop, 1);
	--bcp-cal-font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	--bcp-cal-cell-pad:  0.4rem;
	--bcp-cal-head-bg:   color-mix(in srgb, var(--bcp-cal-ink) 5%, transparent);

	/* スキーム非依存の既定。各 .is-color-* で必要な変数を上書きする。 */
	/* NOTE: 補助テキスト/罫線は必ず ink から導出する。テーマの `*-accent` 系トークンは
	   多くのテーマ(Ollie / vip2026 等)で「背景用のトーン」であり文字色ではないため、
	   そこに依存すると背景に溶けて読めなくなる(vip2026: main-accent = #E4E2DD)。 */
	--bcp-cal-line:      rgba(0, 0, 0, 0.12);
	--bcp-cal-line:      color-mix(in srgb, var(--bcp-cal-ink) 18%, transparent);
	--bcp-cal-muted:     #5c5c5c;
	--bcp-cal-muted:     color-mix(in srgb, var(--bcp-cal-ink) 68%, transparent);
	--bcp-cal-gap:       var(--wp--preset--spacing--small, 0.75rem);
	/* フォールバック(クラス未付与の旧コンテンツ用 = warm 相当)。 */
	--bcp-cal-open-bg:   var(--wp--preset--color--primary, #8a6d4b);
	--bcp-cal-open-fg:   var(--wp--preset--color--base, #fff);
	--bcp-cal-half-bg:   var(--wp--preset--color--primary-accent, #e7ddd1);
	--bcp-cal-half-fg:   var(--wp--preset--color--main, #2b2b2b);
	--bcp-cal-half-line: var(--wp--preset--color--primary, #8a6d4b);
	--bcp-cal-closed-fg: #5c5c5c;
	--bcp-cal-closed-fg: color-mix(in srgb, var(--bcp-cal-ink) 62%, transparent);
}

/* ---- color schemes(背景色に依存せず読みやすく) ---- */

/* warm: 診療=primary(ブラウン/JADE) / 時短=primary-accent(淡色)。 */
.bcp-cal.is-color-warm {
	--bcp-cal-open-bg:   var(--wp--preset--color--primary, #8a6d4b);
	--bcp-cal-open-fg:   var(--wp--preset--color--base, #fff);
	--bcp-cal-half-bg:   var(--wp--preset--color--primary-accent, #e7ddd1);
	--bcp-cal-half-fg:   var(--wp--preset--color--main, #2b2b2b);
	--bcp-cal-half-line: var(--wp--preset--color--primary, #8a6d4b);
	--bcp-cal-closed-fg: color-mix(in srgb, var(--bcp-cal-ink) 62%, transparent);
}

/* jade: Ollie / vip2026 のブランドオリジナル配色。
   診療=primary(ブランド主色)/ 時短=secondary 系の淡色、罫線・補助は token で上品に。 */
.bcp-cal.is-color-jade {
	--bcp-cal-open-bg:   var(--wp--preset--color--primary, #2f6f62);
	--bcp-cal-open-fg:   var(--wp--preset--color--base, #fff);
	--bcp-cal-half-bg:   var(--wp--preset--color--secondary-accent, var(--wp--preset--color--tertiary, #e3efe9));
	--bcp-cal-half-fg:   var(--wp--preset--color--secondary, var(--wp--preset--color--contrast, #234a41));
	--bcp-cal-half-line: var(--wp--preset--color--secondary, var(--wp--preset--color--primary, #2f6f62));
	--bcp-cal-closed-fg: color-mix(in srgb, var(--bcp-cal-ink) 62%, transparent);
	--bcp-cal-line:      color-mix(in srgb, var(--bcp-cal-ink) 18%, transparent);
	--bcp-cal-muted:     color-mix(in srgb, var(--bcp-cal-ink) 68%, transparent);
}

/* mono: グレースケール系トークンで構成。白背景でも本文色との対比で読める。 */
.bcp-cal.is-color-mono {
	--bcp-cal-open-bg:   var(--wp--preset--color--main, #2b2b2b);
	--bcp-cal-open-fg:   var(--wp--preset--color--base, #fff);
	--bcp-cal-half-bg:   var(--wp--preset--color--base-accent, #ececec);
	--bcp-cal-half-fg:   var(--wp--preset--color--main, #2b2b2b);
	--bcp-cal-half-line: color-mix(in srgb, var(--bcp-cal-ink) 45%, transparent);
	--bcp-cal-closed-fg: color-mix(in srgb, var(--bcp-cal-ink) 62%, transparent);
	--bcp-cal-line:      color-mix(in srgb, var(--bcp-cal-ink) 22%, transparent);
	--bcp-cal-muted:     var(--wp--preset--color--main, #2b2b2b);
}

/* cool: 寒色トークン(サイトに tertiary が無くてもフォールバックで成立)。 */
.bcp-cal.is-color-cool {
	--bcp-cal-open-bg:   var(--wp--preset--color--tertiary, #3a6ea5);
	--bcp-cal-open-fg:   var(--wp--preset--color--base, #fff);
	--bcp-cal-half-bg:   var(--wp--preset--color--tertiary-accent, #dce8f4);
	--bcp-cal-half-fg:   var(--wp--preset--color--main, #1f3a55);
	--bcp-cal-half-line: var(--wp--preset--color--tertiary, #3a6ea5);
	--bcp-cal-closed-fg: color-mix(in srgb, var(--bcp-cal-ink) 62%, transparent);
}

/* ink: 塗りを抑え、枠線とテキストの高コントラストで白背景でも明瞭。 */
.bcp-cal.is-color-ink {
	--bcp-cal-open-bg:   transparent;
	--bcp-cal-open-fg:   var(--wp--preset--color--main, #1a1a1a);
	--bcp-cal-half-bg:   transparent;
	--bcp-cal-half-fg:   var(--wp--preset--color--main, #1a1a1a);
	--bcp-cal-half-line: var(--wp--preset--color--main, #1a1a1a);
	--bcp-cal-closed-fg: color-mix(in srgb, var(--bcp-cal-ink) 62%, transparent);
	--bcp-cal-line:      var(--wp--preset--color--main, rgba(0, 0, 0, 0.45));
	--bcp-cal-muted:     var(--wp--preset--color--main, #1a1a1a);
}

.bcp-cal__title {
	margin: 0 0 var(--bcp-cal-gap);
	font-size: var(--wp--preset--font-size--medium, 1rem);
}

/* ---- viewport / track ---- */
/* alignwide / alignfull / レイアウト「コンテンツ幅」に追従させるため、幅は固定せず
   ラッパー(.bcp-cal)に乗る align / layout クラスの幅をそのまま使う。viewport / track は
   その幅いっぱい(100%)に広がるだけで、幅を食い止めない。 */
.bcp-cal__viewport {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
}

.bcp-cal__track {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

/* dual(既定 = compact / hours-table 以外): 2 ヶ月を横並び。 */
.bcp-cal.is-style-dual .bcp-cal__track,
.bcp-cal:not(.is-style-compact):not(.is-style-hours-table) .bcp-cal__track {
	display: grid;
	/* 列数は render.php が --bcp-cal-cols(= 表示月数) を出力する。未設定なら従来どおり 2。 */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-columns: repeat(var(--bcp-cal-cols, 2), minmax(0, 1fr));
	gap: var(--bcp-cal-gap-x);
}

/* 月送りナビ(‹ ›)とスライドは compact スタイル専用。
   既定(class なし)や dual では矢印カーソルもスライドも出さない。 */
.bcp-cal__nav {
	display: none;
}

/* compact: 1 ヶ月ずつ。月送りナビ表示、トラックを transform でスライド。 */
/* ナビはトラックの上に重ねる。フレックスの子として幅を食わせると、その分だけ
   カレンダー本体が狭くなるため。bcp/carousel と同じ Apple paddlenav 相当の作り。
   なお送る余地が無い場合 (月数 <= 表示数) は render.php が要素自体を出力しない。 */
.bcp-cal.is-style-compact .bcp-cal__nav {
	display: inline-flex;
	position: absolute;
	top: 50%;
	z-index: 2;
	margin-top: -1.125rem;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease,
		transform 0.18s ease,
		background-color 0.18s ease;
}

.bcp-cal.is-style-compact .bcp-cal__nav--prev { left: 0.25rem; }
.bcp-cal.is-style-compact .bcp-cal__nav--next { right: 0.25rem; }

/* 常時表示はノイズなので、ホバー / キーボードフォーカス時だけ出す。 */
.bcp-cal.is-style-compact:hover .bcp-cal__nav,
.bcp-cal.is-style-compact:focus-within .bcp-cal__nav {
	opacity: 1;
	visibility: visible;
}

/* ホバーできない端末では手がかりが無くなるため常時表示にする (スワイプは可能だが
   矢印が無いと送れることに気づけない)。 */
@media (hover: none) {
	.bcp-cal.is-style-compact .bcp-cal__nav {
		opacity: 1;
		visibility: visible;
	}
}

/* 押せない側は消す (ループ有効時は disabled にならないので両方出る)。 */
.bcp-cal.is-style-compact .bcp-cal__nav:disabled {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.bcp-cal.is-style-compact .bcp-cal__viewport {
	overflow: hidden;
}

.bcp-cal.is-style-compact .bcp-cal__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--bcp-cal-gap-x);
	transition: transform 0.35s ease;
}

/* ループの継ぎ目でだけトランジションを切り、複製と本体を無音で入れ替える。
   (bcp/carousel が使っている Swiper の loop と同じ考え方) */
.bcp-cal.is-style-compact .bcp-cal__track.is-snapping {
	transition: none;
}

/* 1 画面あたり --bcp-cal-per-view ヶ月。gap の分を差し引いて等分する。
   view.js の 1 ステップ (100% + gap) / perView と対になっている。 */
.bcp-cal.is-style-compact .bcp-cal__month {
	flex: 0 0 calc(
		(100% - (var(--bcp-cal-per-view, 1) - 1) * var(--bcp-cal-gap-x))
		/ var(--bcp-cal-per-view, 1)
	);
	min-width: calc(
		(100% - (var(--bcp-cal-per-view, 1) - 1) * var(--bcp-cal-gap-x))
		/ var(--bcp-cal-per-view, 1)
	);
}

/* スワイプ中に日付テキストが選択されるのを防ぐ。 */
.bcp-cal.is-style-compact .bcp-cal__viewport {
	touch-action: pan-y;
	user-select: none;
}

/* prefers-reduced-motion ではスライドのアニメーションを実質無効化する。
   NOTE: transition 自体を none にしてはいけない。ループの継ぎ目の入れ替えを
   transitionend で検知しているため、イベントが発火しなくなり末尾で空白が出る。
   0.01ms なら体感アニメーションはゼロのまま transitionend は発火する。 */
@media (prefers-reduced-motion: reduce) {
	.bcp-cal.is-style-compact .bcp-cal__track {
		transition-duration: 0.01ms;
	}
}

/* ---- nav buttons(可視時のスタイル。display は上の compact 限定ルールで制御) ---- */
.bcp-cal__nav {
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	font-size: 1.125rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.56);
	background: rgba(210, 210, 215, 0.64);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.bcp-cal__nav:hover {
	background: rgba(223, 223, 227, 0.7);
	color: rgba(0, 0, 0, 0.72);
	transform: scale(1.08);
}

.bcp-cal__nav:active {
	background: rgba(193, 193, 198, 0.64);
	transform: scale(0.92);
}

/* ---- month / table ---- */
/* 月パネルは既定では面を持たず、テーマ背景に馴染ませる(従来の見た目)。
   濃色背景など、面が必要なサイトは --bcp-cal-surface を指定すればカード化できる。
   可読性はセルの配色(ink 由来)側で担保しているので、面の有無に依存しない。 */
.bcp-cal__month {
	background: var(--bcp-cal-surface, transparent);
	border-radius: var(--bcp-cal-radius);
	padding-bottom: 0.5rem;
	overflow: hidden;
}

.bcp-cal__month-title {
	margin: 0 0 0.5rem;
	padding: 0.45rem 0.5rem;
	background: var(--bcp-cal-head-bg);
	text-align: center;
	font-weight: 600;
	font-size: var(--bcp-cal-font-size);
}

.bcp-cal__table {
	margin: 0 0.5rem;
}

.bcp-cal__table {
	width: calc(100% - 1rem);
	border-collapse: collapse;
	table-layout: fixed;
}

.bcp-cal__wh {
	padding: var(--bcp-cal-cell-pad);
	background: var(--bcp-cal-head-bg);
	font-size: var(--bcp-cal-font-size);
	font-weight: 500;
	color: var(--bcp-cal-muted);
	text-align: center;
}

.bcp-cal__day {
	padding: var(--bcp-cal-cell-pad);
	text-align: center;
	vertical-align: middle;
	font-size: var(--bcp-cal-font-size);
	border: 1px solid var(--bcp-cal-line);
}

.bcp-cal__day--empty {
	border-color: transparent;
}

.bcp-cal__num {
	display: block;
	line-height: 1.6;
}

.bcp-cal__day.is-open {
	background: var(--bcp-cal-open-bg);
	color: var(--bcp-cal-open-fg);
}

/* 時短セル: 淡色でも border を付けて、白背景でセル境界が消えないようにする。 */
.bcp-cal__day.is-half {
	background: var(--bcp-cal-half-bg);
	color: var(--bcp-cal-half-fg);
	border-color: var(--bcp-cal-half-line);
}

/* 休診セル: 数字は薄すぎない closed-fg で読めるコントラストを確保。 */
.bcp-cal__day.is-closed {
	color: var(--bcp-cal-closed-fg);
}

/* ink スキーム: 塗りが透明なので、診療/時短セルを border 強調で区別する。 */
.bcp-cal.is-color-ink .bcp-cal__day.is-open {
	border-color: var(--bcp-cal-open-fg);
	border-width: 2px;
	font-weight: 700;
}

.bcp-cal.is-color-ink .bcp-cal__day.is-half {
	border-style: dashed;
	border-width: 2px;
	font-weight: 600;
}

.bcp-cal__day.is-today .bcp-cal__num {
	outline: 2px solid currentColor;
	outline-offset: 1px;
	border-radius: 3px;
}

/* ---- legend ---- */
.bcp-cal__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--small, 0.75rem);
	margin-top: var(--bcp-cal-gap);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--bcp-cal-muted);
}

.bcp-cal__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.bcp-cal__swatch {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 3px;
	border: 1px solid var(--bcp-cal-line);
}

.bcp-cal__legend-item.is-open .bcp-cal__swatch {
	background: var(--bcp-cal-open-bg);
}

.bcp-cal__legend-item.is-half .bcp-cal__swatch {
	background: var(--bcp-cal-half-bg);
	border-color: var(--bcp-cal-half-line);
}

.bcp-cal__legend-item.is-closed .bcp-cal__swatch {
	background: transparent;
}

/* ink: 凡例スウォッチも border で区別(塗りが透明なため)。 */
.bcp-cal.is-color-ink .bcp-cal__legend-item.is-open .bcp-cal__swatch {
	border: 2px solid var(--bcp-cal-open-fg);
}

.bcp-cal.is-color-ink .bcp-cal__legend-item.is-half .bcp-cal__swatch {
	border: 2px dashed var(--bcp-cal-half-line);
}

/* ---- hours ---- */
.bcp-cal__hours {
	margin-top: var(--bcp-cal-gap);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--bcp-cal-muted);
}

.bcp-cal__hours p {
	margin: 0 0 0.2rem;
}

/* ---- hours-table style(診療時間表: 時間帯 × 曜日) ---- */
.bcp-hours__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.bcp-hours__corner,
.bcp-hours__wh,
.bcp-hours__label,
.bcp-hours__cell {
	border: 1px solid var(--bcp-cal-line);
	padding: 0.5rem 0.35rem;
	text-align: center;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* ヘッダ行(診療時間 + 曜日)。 */
.bcp-hours__corner,
.bcp-hours__wh {
	font-weight: 600;
	color: var(--bcp-cal-muted);
	background: var(--bcp-cal-half-bg);
}

.bcp-hours__corner {
	text-align: left;
	white-space: nowrap;
}

/* 行見出し(時間帯ラベル)。 */
.bcp-hours__label {
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
	background: var(--bcp-cal-half-bg);
	color: var(--bcp-cal-half-fg);
}

/* セル記号 ●/▲/／。 */
.bcp-hours__mark {
	display: inline-block;
	line-height: 1;
	font-size: var(--wp--preset--font-size--medium, 1.05rem);
}

.bcp-hours__mark.is-open {
	color: var(--bcp-cal-open-bg);
}

.bcp-hours__mark.is-half {
	color: var(--bcp-cal-half-line);
}

.bcp-hours__mark.is-closed {
	color: var(--bcp-cal-closed-fg);
}

.bcp-hours__note {
	margin: var(--bcp-cal-gap) 0 0;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--bcp-cal-muted);
}

/* ---- responsive: dual を 1 列に ---- */
/* 3ヶ月以上でも、幅が足りなければ 2 列 → 1 列と段階的に落とす。
   repeat() のカウントに min() は使えないため、メディアクエリで明示的に上書きする。 */
@media (max-width: 900px) {
	.bcp-cal.is-style-dual .bcp-cal__track,
	.bcp-cal:not(.is-style-compact):not(.is-style-hours-table) .bcp-cal__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* compact も狭い幅では 1 ヶ月ずつに落とす。--bcp-cal-per-view を上書きするだけで
   月パネルの幅もスライド量も自動的に追従する。 */
@media (max-width: 782px) {
	.bcp-cal.is-style-compact {
		--bcp-cal-per-view: 1;
	}
}

/* 2ヶ月並列も狭い幅では 1 列に (dual 用のメディアクエリは下部にあるが、
   compact と同じ閾値で揃えたい場合はテーマ側で --bcp-cal-cols を上書きする) */

@media (max-width: 600px) {
	.bcp-cal.is-style-dual .bcp-cal__track,
	.bcp-cal:not(.is-style-compact):not(.is-style-hours-table) .bcp-cal__track {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--small, 0.75rem);
	}
}