/*
 * footer.css — サイトフッター（ブリーフ §3.7）とページトップボタン。
 * 住所・電話番号などの値は picico-core の店舗情報から来る（D-006）。CSS 側は器だけ。
 */

.pc-footer {
	margin-block-start: var(--picico-space-xxl);
	border-top: 3px solid var(--picico-color-primary);
	background-color: var(--picico-color-surface-warm);
	font-size: var(--picico-font-size-sm);
}

.pc-footer__widgets {
	border-bottom: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-footer__widgets-inner {
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding: var(--picico-space-lg) var(--picico-gutter);
}

.pc-footer__inner {
	display: grid;
	gap: var(--picico-space-xl);
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding: var(--picico-space-xl) var(--picico-gutter);
}

.pc-footer__title {
	margin-block-end: var(--picico-space-sm);
	color: var(--picico-color-support-dark);
	font-family: var(--picico-font-display);
	font-size: var(--picico-font-size-md);
	font-weight: var(--picico-font-weight-bold);
	line-height: var(--picico-line-height-heading);
}

.pc-footer__subtitle {
	margin-block: var(--picico-space-md) var(--picico-space-xs);
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
	font-weight: var(--picico-font-weight-bold);
	letter-spacing: 0;
}

.pc-footer__tel a {
	font-size: var(--picico-font-size-lg);
	font-weight: var(--picico-font-weight-bold);
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/* ---- サイトマップ ---- */

.pc-footer__nav-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--picico-space-xs) var(--picico-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-footer__nav-list a {
	display: inline-flex;
	align-items: center;
	/* フッターのサイトマップも押される導線なので 44px 確保する（Phase 4）。 */
	min-height: var(--picico-tap-size);
	padding-block: 0.2em;
	color: var(--picico-color-text);
	font-size: var(--picico-font-size-sm);
	letter-spacing: 0;
	text-decoration: none;
}

.pc-footer__nav-list a:hover {
	color: var(--picico-color-primary-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- 相談・予約 / SNS ---- */

.pc-footer__actions {
	display: grid;
	gap: var(--picico-space-xs);
}

.pc-footer__sns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--picico-space-xs) var(--picico-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-footer__sns a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	/* 名前が「X」のように短いと幅 32px しかなかった（Phase 4）。 */
	min-width: var(--picico-tap-size);
	min-height: var(--picico-tap-size);
	color: var(--picico-color-text);
	font-size: var(--picico-font-size-sm);
	letter-spacing: 0;
	text-decoration: none;
}

.pc-footer__sns a:hover {
	color: var(--picico-color-primary-dark);
	text-decoration: underline;
}

/* ---- 最下段 ---- */

.pc-footer__bottom {
	border-top: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-footer__copyright {
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding: var(--picico-space-sm) var(--picico-gutter);
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
	letter-spacing: 0;
	text-align: center;
}

/* ---- ページトップへ戻る ---- */

.pc-totop {
	position: fixed;
	inset-inline-end: var(--picico-space-sm);
	inset-block-end: var(--picico-space-sm);
	z-index: var(--picico-z-totop);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--picico-tap-size);
	height: var(--picico-tap-size);
	border: var(--picico-border-width) solid var(--picico-color-border);
	border-radius: var(--picico-radius-pill);
	color: var(--picico-color-primary-dark);
	background-color: var(--picico-color-surface);
	box-shadow: var(--picico-shadow-md);
	text-decoration: none;
}

.pc-totop:hover {
	color: var(--picico-color-on-primary);
	background-color: var(--picico-color-primary);
	border-color: var(--picico-color-primary);
}

/* ---- タブレット以上: 3 カラム ---- */

@media (min-width: 48rem) {
	.pc-footer__inner {
		grid-template-columns: 1.2fr 1fr 1fr;
		gap: var(--picico-space-xl);
	}

	.pc-footer__nav-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.pc-footer__copyright {
		text-align: start;
	}
}

@media (min-width: 64rem) {
	.pc-totop {
		inset-inline-end: var(--picico-space-md);
		inset-block-end: var(--picico-space-md);
	}
}

/* ---- LP 用の最小フッター ---- */

.pc-footer--minimal .pc-footer__copyright {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--picico-space-xs) var(--picico-space-md);
	padding-block: var(--picico-space-md);
}

.pc-footer__min-name {
	color: var(--picico-color-text);
	font-size: var(--picico-font-size-sm);
	font-weight: var(--picico-font-weight-bold);
}

/* D-012: 電話・LINE・予約の 3 導線。SP は縦積み、768px 以上で横並び。 */
.pc-footer__min-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--picico-space-sm);
	max-width: var(--picico-content-width);
	margin-inline: auto;
	padding-block: var(--picico-space-lg);
	padding-inline: var(--picico-space-md);
}

@media (min-width: 48rem) {
	.pc-footer__min-actions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--picico-space-md);
	}
}

/* ---- スマートフォン用の固定 CTA フッター（D-019） ---- */

/*
 * template-parts/footer/mobile-cta.php。電話・LINE 相談・オンライン予約の 3 ボタン。
 * LP テンプレートでは PHP 側で出力しない（D-012 の最小フッターと二重になるため）。
 * PC（64rem 以上）とパネル表示中は、ここの CSS で隠す。
 */

.pc-mobile-cta {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--picico-z-nav);
	border-block-start: var(--picico-border-width) solid var(--picico-color-border);
	background-color: var(--picico-color-surface);
	box-shadow: var(--picico-shadow-lg);
	/* iOS のホームバー分。対応していないブラウザでは 0。 */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pc-mobile-cta__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-mobile-cta__item {
	min-width: 0;
}

.pc-mobile-cta__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	/* 上の境界線を含めた合計が --picico-mobile-cta-height（= body の下余白）になるように。 */
	min-height: calc(var(--picico-mobile-cta-height) - var(--picico-border-width));
	padding: var(--picico-space-xs) 0.25rem;
	color: var(--picico-color-primary-dark);
	background-color: var(--picico-color-surface);
	font-size: var(--picico-font-size-xs);
	font-weight: var(--picico-font-weight-bold);
	line-height: var(--picico-line-height-tight);
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
}

.pc-mobile-cta__icon {
	--picico-icon-size: 1.25rem;
}

.pc-mobile-cta__label {
	display: block;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.pc-mobile-cta__btn--line {
	color: var(--picico-color-on-primary);
	background-color: var(--picico-color-primary);
}

.pc-mobile-cta__btn--reserve {
	color: var(--picico-color-on-accent);
	background-color: var(--picico-color-accent-fill);
}

/* 固定要素の縁でフォーカスリングが切れないよう、内側に出す。 */
.pc-mobile-cta__btn:focus-visible {
	outline-offset: -4px;
}

.pc-mobile-cta__btn:hover {
	color: var(--picico-color-on-primary);
	background-color: var(--picico-color-primary-dark);
}

/*
 * 出現は下からの短いスライド。動きを減らす設定では最初から定位置に置く。
 */
@media (prefers-reduced-motion: no-preference) {
	.pc-mobile-cta {
		animation: pc-mobile-cta-in var(--picico-duration-base) var(--picico-easing) both;
	}
}

@keyframes pc-mobile-cta-in {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

/*
 * 本文の最後が固定フッターに隠れないよう、body に高さ分の下余白を足す。
 * 固定フッターを出しているページ（= .pc-mobile-cta がある）だけに付ける。
 */
body:has(.pc-mobile-cta) {
	padding-block-end: calc(var(--picico-mobile-cta-height) + env(safe-area-inset-bottom, 0px));
}

/* ページトップへ戻るボタンと重ねない。 */
body:has(.pc-mobile-cta) .pc-totop {
	inset-block-end: calc(var(--picico-space-sm) + var(--picico-mobile-cta-height) + env(safe-area-inset-bottom, 0px));
}

/*
 * ドロワー・検索パネルを開いている間は隠す（二重表示と誤タップの防止）。
 * ドロワーはモーダルなので nav.js が html に .pc-is-locked を付ける。
 * 検索パネルはモーダルではないので、開いているパネルの有無を :has() で見る。
 */
.pc-is-locked .pc-mobile-cta,
body:has([data-picico-panel]:not([hidden])) .pc-mobile-cta {
	visibility: hidden;
}

/* ---- PC（1024px 以上）では出さない ---- */

@media (min-width: 64rem) {
	.pc-mobile-cta {
		display: none;
	}

	body:has(.pc-mobile-cta) {
		padding-block-end: 0;
	}

	body:has(.pc-mobile-cta) .pc-totop {
		inset-block-end: var(--picico-space-md);
	}
}