/* ==========================================================
   敦煌 共通UIシステム

   色の役割
   - 臙脂: クリックできる要素、選択中、重要な案内
   - 金: 細線、区切り、装飾、大きな見出しのアクセント
   - 濃茶: 本文・見出し、暗色背景

   操作の役割
   - .c-ui-button: 面を持つ主要操作
   - .c-ui-arrow-link: ページ遷移する矢印付きリンク
   - .c-ui-text-link: 本文中のリンク
   - .c-ui-card-link: 写真を含むカード全体のリンク
   - .c-ui-tab / .c-ui-disclosure: 状態を切り替えるボタン
   ========================================================== */

:root {
	--ui-action: var(--color-primary);
	--ui-action-hover: var(--color-primary-hover);
	--ui-action-text: var(--color-text-inverse);
	--ui-decorative: var(--color-main);
	--ui-surface: var(--color-page-bg);
	--ui-surface-subtle: var(--color-bg);
	--ui-line: var(--color-border);
	--ui-focus: var(--color-primary);
	--ui-motion-fast: var(--duration-fast);
	--ui-motion-base: var(--duration-base);
}

/* site.css の旧仕様を上書きし、PCでも電話リンクを操作可能にする。 */
a[href^="tel:"] {
	cursor: pointer;
	pointer-events: auto;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--ui-focus);
	outline-offset: 2px;
}

/* 固定ヘッダー・SP予約バーの内側にキーボードの移動先を保つ。 */
:where(a, button, input, select, textarea, summary, [tabindex]) {
	scroll-margin-top: calc(var(--space-11) + var(--space-2));
	scroll-margin-bottom: calc(var(--space-10) + var(--space-2));
}

@media (min-width: 768px) {
	:where(a, button, input, select, textarea, summary, [tabindex]) {
		scroll-margin-bottom: 0;
	}
}

/* 見出しは文節（意味のまとまり）で折り返す。
   「笑顔が生ま／れ、」のような語中改行と、最後の一文字だけが次行へ落ちる状態を防ぐ。
   auto-phrase 未対応のブラウザでは従来どおりの改行になるだけで、表示は壊れない。 */
:where(h1, h2, h3, h4) {
	word-break: auto-phrase;
}

:where(.c-ui-button, .c-ui-arrow-link, .c-ui-text-link, .c-ui-card-link, .c-ui-tab, .c-ui-disclosure) {
	transition-duration: var(--ui-motion-base);
	transition-property: color, background-color, border-color, opacity, transform;
	transition-timing-function: ease;
}

.c-ui-button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 24px;
	border: 1px solid var(--ui-action);
	border-radius: var(--radius-sm);
	background: var(--ui-action);
	color: var(--ui-action-text);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	text-align: center;
}

.c-ui-button--outline {
	background: transparent;
	color: var(--ui-action);
}

.c-ui-arrow-link {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 12px;
	color: var(--ui-action);
	font-weight: var(--fw-medium);
}

.c-ui-arrow-link::after {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	content: "";
	transform: rotate(45deg);
	transition: transform var(--ui-motion-base) ease;
}

.c-ui-arrow-link--back::after {
	order: -1;
	transform: rotate(225deg);
}

.c-ui-text-link {
	color: var(--ui-action);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.c-ui-card-link {
	display: flex;
	height: 100%;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.c-ui-card-link img {
	transition: transform var(--ui-motion-base) ease;
}

.c-ui-tab,
.c-ui-disclosure {
	color: var(--color-text);
}

.c-ui-tab[aria-selected="true"],
.c-ui-disclosure[aria-expanded="true"] {
	color: var(--ui-action);
}

/* 既存テンプレートの主要ボタンも、共通コンポーネントと同じ反応へ寄せる。
   面を持つボタンのhoverは「色が変わるだけ」に統一し、浮き上がりや位置ずれは使わない。 */
.c-btn,
.c-btn::after,
.l-header__contact-btn,
.contact-form__submit,
.contact-form__review-send {
	transition-duration: var(--ui-motion-base);
	transition-property: color, background-color, border-color;
	transition-timing-function: ease;
}

/* 一覧・案内ページで使う既存の矢印リンク。形は各ページのまま、色と動きを統一する。 */
:where(
	.blog-intro__link,
	.blog-latest__more,
	.blog-list__more,
	.blog-related__link,
	.newsp-related__link,
	.events-notice__link,
	.events-upcoming__link,
	.events-past__link
) {
	color: var(--ui-action);
	transition: color var(--ui-motion-base) ease;
}

:where(
	.blog-intro__link,
	.blog-latest__more,
	.blog-list__more,
	.blog-related__link,
	.newsp-related__link,
	.events-notice__link,
	.events-upcoming__link,
	.events-past__link
)::after {
	transition: transform var(--ui-motion-base) ease;
}

@media (any-hover: hover) {
	.c-ui-button:hover {
		border-color: var(--ui-action-hover);
		background: var(--ui-action-hover);
		color: var(--ui-action-text);
	}

	.c-ui-button--outline:hover {
		background: var(--ui-action);
		color: var(--ui-action-text);
	}

	.c-ui-arrow-link:hover,
	.c-ui-text-link:hover {
		color: var(--ui-action-hover);
	}

	.c-ui-arrow-link:hover::after {
		transform: translateX(4px) rotate(45deg);
	}

	.c-ui-arrow-link--back:hover::after {
		transform: translateX(-4px) rotate(225deg);
	}

	.c-ui-card-link:hover img {
		transform: scale(1.035);
	}

	/* TOPの「お知らせ一覧」などの主要ボタンは、共通CTAのWebボタンと同じ色変化にする。 */
	.c-btn:not(.c-btn-white):hover {
		border-color: var(--color-sub);
		background-color: var(--color-sub);
		color: var(--color-text-inverse);
	}

	/* 淡い面のボタンは臙脂の面へ反転させる（.c-ui-button--outline と同じ考え方）。 */
	.c-btn-white:hover {
		border-color: var(--ui-action);
		background-color: var(--ui-action);
		color: var(--color-text-inverse);
	}

	/* 矢印が右上へ斜めにずれる動きは使わない。位置は固定したままにする。 */
	.c-btn:hover::after {
		transform: rotate(45deg);
	}

	:where(
		.blog-intro__link,
		.blog-latest__more,
		.blog-list__more,
		.blog-related__link,
		.newsp-related__link,
		.events-notice__link,
		.events-upcoming__link,
		.events-past__link
	):hover {
		color: var(--ui-action-hover);
	}

	:where(
		.blog-intro__link,
		.blog-latest__more,
		.blog-list__more,
		.blog-related__link,
		.newsp-related__link,
		.events-notice__link,
		.events-upcoming__link,
		.events-past__link
	):hover::after {
		transform: translateX(4px) rotate(45deg);
	}
}

/* ==========================================================
   詳細ページの前後リンク
   イベント詳細・お知らせ詳細・薬膳ブログ詳細で同じ見た目と操作にする。
   前の記事は左、次の記事は右。
   ========================================================== */

.event-detail__pagination,
.entry-detail__pagination {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-8);
	padding-block: var(--space-4);
	border-block: 1px solid var(--color-border);
}

.event-detail__pager-item,
.entry-detail__pager-item {
	min-width: 0;
}

.event-detail__pager-item--next,
.entry-detail__pager-item--next {
	text-align: right;
}

.event-detail__pager-item a,
.entry-detail__pager-item a {
	display: grid;
	min-height: 44px;
	align-content: center;
	gap: var(--space-1);
	color: var(--ui-action);
	transition: color var(--ui-motion-base) ease;
}

.event-detail__pager-direction,
.entry-detail__pager-direction {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

.event-detail__pager-item--next .event-detail__pager-direction,
.entry-detail__pager-item--next .entry-detail__pager-direction {
	justify-content: flex-end;
}

.event-detail__pager-item--previous .event-detail__pager-direction::before,
.event-detail__pager-item--next .event-detail__pager-direction::after,
.entry-detail__pager-item--previous .entry-detail__pager-direction::before,
.entry-detail__pager-item--next .entry-detail__pager-direction::after {
	width: var(--space-2);
	height: var(--space-2);
	border-bottom: 1px solid currentColor;
	content: "";
}

.event-detail__pager-item--previous .event-detail__pager-direction::before,
.entry-detail__pager-item--previous .entry-detail__pager-direction::before {
	border-left: 1px solid currentColor;
	transform: rotate(45deg);
}

.event-detail__pager-item--next .event-detail__pager-direction::after,
.entry-detail__pager-item--next .entry-detail__pager-direction::after {
	border-right: 1px solid currentColor;
	transform: rotate(-45deg);
}

/* 記事名はSPでは隠し、「前へ」「次へ」だけで方向が分かるようにする。 */
.event-detail__pager-title,
.entry-detail__pager-title {
	display: none;
	overflow: hidden;
	color: var(--color-text-muted);
	font-size: var(--fs-body-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.event-detail__page-count,
.entry-detail__page-count {
	justify-self: center;
	color: var(--color-text-muted);
	font-size: var(--fs-body-sm);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (any-hover: hover) {
	.event-detail__pager-item a:hover,
	.entry-detail__pager-item a:hover {
		color: var(--ui-action-hover);
	}
}

@media (min-width: 768px) {
	.event-detail__pagination,
	.entry-detail__pagination {
		gap: var(--space-6);
		margin-top: var(--space-9);
		padding-block: var(--space-5);
	}

	.event-detail__pager-title,
	.entry-detail__pager-title {
		display: block;
	}
}

/* ==========================================================
   共通ページネーション
   イベント・お知らせ・薬膳ブログで同じ見た目と操作にする。
   ========================================================== */

.c-ui-pagination {
	/* 数字を常に中央に置き、前へ/次へは両側の固定枠に入れる。
	   端のページで無効になっても、数字の位置がずれない。 */
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"numbers numbers"
		"prev    next";
	align-items: center;
	gap: var(--space-4) var(--space-2);
	margin-top: var(--space-8);
}

.c-ui-pagination__numbers {
	grid-area: numbers;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-ui-pagination__control--prev {
	grid-area: prev;
	justify-self: start;
}

.c-ui-pagination__control--next {
	grid-area: next;
	justify-self: end;
}

.c-ui-pagination__control,
.c-ui-pagination__number,
.c-ui-pagination__dots {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding-inline: var(--space-2);
	color: var(--color-text);
	font-size: var(--fs-body-pc);
	line-height: var(--lh-tight);
	transition: color var(--ui-motion-base) ease, background-color var(--ui-motion-base) ease,
		border-color var(--ui-motion-base) ease;
}

.c-ui-pagination__control {
	gap: var(--space-2);
	padding-inline: var(--space-4);
	border: 1px solid var(--ui-line);
	color: var(--ui-action);
}

/* 端のページでは押せないことを色で示す。位置は保ったままにする。 */
.c-ui-pagination__control[aria-disabled="true"] {
	border-color: var(--color-border-soft);
	color: var(--color-text-muted);
	pointer-events: none;
}

.c-ui-pagination__number {
	border: 1px solid transparent;
	color: var(--ui-action);
}

/* 選択中は臙脂の面。色だけに頼らないよう aria-current も併用する。 */
.c-ui-pagination__number--current {
	border-color: var(--ui-action);
	background: var(--ui-action);
	color: var(--ui-action-text);
}

.c-ui-pagination__dots {
	min-width: var(--space-6);
	padding-inline: 0;
	color: var(--color-text-muted);
}

@media (min-width: 768px) {
	.c-ui-pagination {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "prev numbers next";
		gap: var(--space-4);
	}

	.c-ui-pagination__control--prev {
		justify-self: end;
	}

	.c-ui-pagination__control--next {
		justify-self: start;
	}
}

@media (any-hover: hover) {
	.c-ui-pagination__control:not([aria-disabled="true"]):hover,
	a.c-ui-pagination__number:hover {
		border-color: var(--ui-action);
		color: var(--ui-action-hover);
	}
}

/* TOPお知らせのカテゴリーバッジ。768〜1023pxで固定幅に収まらず2行へ折れるのを防ぐ。
   site.css はビルド済みのため、幅の下限だけをここで契約として持つ。 */
.p-news__cat {
	width: auto;
	min-width: 6rem;
	white-space: nowrap;
}

@media screen and (max-width: 767px) {
	.p-news__cat {
		min-width: 5.25rem;
	}
}

/* TOP「ご案内」: 写真・本文・詳しく見るを一つの操作領域にする。 */
.p-guide__card {
	display: flex;
	height: 100%;
	flex-direction: column;
}

.p-guide__card .p-guide__img img {
	scale: 1;
	transform: none;
	transition: scale var(--duration-base) ease;
}

.p-guide__card .p-guide__title {
	color: var(--color-sub);
}

.p-guide__card .p-guide__link {
	color: var(--ui-action);
}

.p-guide__card .p-guide__link::after {
	transition: translate var(--duration-fast) ease;
}

.p-guide__card:focus-visible {
	outline-offset: -2px;
}

.p-guide__item:has(.p-guide__link:hover) .p-guide__img img {
	scale: 1.025;
}

.p-guide__card:focus-visible .p-guide__link::after,
.p-event__link:focus-visible .p-event__arrow {
	transform: translateX(3px);
}

@media (any-hover: hover) {
	.p-guide__card:hover .p-guide__img img {
		scale: 1.025;
	}

	.p-guide__card:hover .p-guide__link::after {
		translate: var(--space-1) 0;
	}

	.p-event__link:hover .p-event__arrow {
		transform: translateX(3px);
	}
}

.p-event__arrow {
	transition: background-color var(--ui-motion-base) ease, transform var(--ui-motion-base) ease;
}

/* 共通CTAの二つの導線は役割を保ちつつ、速度とフィードバックを揃える。
   ここも色の変化だけで反応させる。 */
.cta-band__button {
	transition-duration: var(--ui-motion-base);
	transition-property: color, background-color, border-color;
	transition-timing-function: ease;
}

/* 共通CTAはページ固有CSSより強い2pxのフォーカス表示へ揃える。 */
.cta-band .cta-band__button:focus-visible,
.fixed-bar .fixed-bar__button:focus-visible {
	outline: 2px solid var(--ui-focus);
	outline-offset: -3px;
}

.cta-band .cta-band__button:focus-visible {
	outline-offset: 2px;
}

.fixed-bar .fixed-bar__button--web:focus-visible {
	outline-color: var(--color-text-inverse);
}

/* 下層の本文リンク。金色は線・装飾に留め、通常サイズの操作文字は臙脂にする。 */
:where(.entry-content, .event-detail__content) a {
	color: var(--ui-action);
	text-decoration-color: currentColor;
}

@media (any-hover: hover) {
	:where(.entry-content, .event-detail__content) a:hover {
		color: var(--ui-action-hover);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 359px) {
	.cta-band__button--tel .cta-band__icon,
	.cta-band__button--tel .cta-band__button-copy {
		transform: none;
	}

	.cta-band__button-number {
		font-size: 19px;
		letter-spacing: 0;
	}
}

/* 公開前レビュー: キーボード操作の見える輪郭と、状態変更の即時反映。 */
.l-header a {
	transition-property: color, background-color, border-color, opacity, transform;
}

.site-footer a:focus-visible {
	outline-color: var(--color-text-inverse);
}

.kodawari-scenes__item:has(.kodawari-scenes__link:focus-visible) {
	outline: 2px solid var(--ui-focus);
	outline-offset: 2px;
}

.banquet-capacity__tab:focus-visible {
	outline-width: 2px;
	outline-offset: -2px;
}

.kodawari-reasons__grid:focus-visible,
.kodawari-reasons__pagination button:focus-visible {
	outline: 2px solid var(--ui-focus);
	outline-offset: -2px;
}

/* 長いCMS記事名だけ、列を押し広げる文節の折り返しを許す。 */
.blog-list__post-title,
.entry-archive__link h2 {
	overflow-wrap: anywhere;
}

/* 行頭の小書き文字・長音を防ぐ。本文全体の分節方針は変えない。 */
.kodawari-scenes__item-title,
.kodawari-features__body,
.menu-page .menu-drinks__name,
.newsp-list__heading,
.home .p-news__text {
	line-break: strict;
}

/* 完了パネルがあるフォームだけ、CF7の視覚的な重複通知を省く。
   読み上げ用live regionと、失敗時の通知には影響させない。 */
.contact-form .wpcf7 form.sent:has([data-contact-complete]:not([hidden])) .wpcf7-response-output {
	display: none;
}

@media (max-width: 767px) {
	/* 承認済みのPC原稿の中間句をSPでも読み取れるようにする。 */
	.p-guide__text .u-pc {
		display: inline !important;
	}
}

/* 閉じる途中のサブメニューへ逆Tabが入る隙間を作らない。 */
.l-header__submenu {
	transition-property: opacity, transform;
}

.access-route__credit a:focus-visible {
	outline-color: var(--color-text-inverse);
}

/* 画面右端の開閉ボタンも輪郭を画面内に収める。 */
.l-header .js-hamburger:focus-visible {
	outline-offset: -2px;
}

/* イベント詳細の関連記事。ポスターは切り抜かず、画像がなければ本文だけにする。 */
.event-related-card.event-related-card {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
}

.event-related-card.event-related-card--image {
	grid-template-columns: var(--space-12) minmax(0, 1fr) auto;
}

.event-related-card.event-related-card > .event-related-card__image,
.event-related-card.event-related-card > .event-related-card__copy {
	grid-column: auto;
	grid-row: 1;
	min-width: 0;
}

.event-related-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	background: var(--color-page-bg);
}

.event-related-card__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.event-related-card__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	overflow-wrap: anywhere;
}

.event-related-card > .entry-related__arrow,
.event-related-card.event-related-card::after {
	grid-column: -2;
	grid-row: 1;
}

@media (min-width: 768px) {
	.event-related-card.event-related-card--image {
		grid-template-columns: var(--space-13) minmax(0, 1fr) auto;
	}
}