/**
 * SP fixed consultation bar (電話する / LINEで相談 / お問い合わせ).
 * Figma node 57:119 "Contact Bar (SP sticky)", description:
 * "SP用の固定相談バー（画面下に常時表示）。position: fixed; bottom: 0;
 * 下余白に env(safe-area-inset-bottom) を加算。本文最下部に同じ高さの
 * 余白を確保し、フッターが隠れないようにする。"
 *
 * The brief does not give an exact PC hide-threshold for this component;
 * it is hidden here at the same 960px point the header switches out of its
 * SP/hamburger state (header's own Narnarrow upper bound). Revisit if the
 * Figma component's own variant condition turns out to differ.
 */

:root {
	--consultation-bar-height: 73px;
}

.consultation-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	gap: 8px;
	padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
	background-color: var(--color-bg-base);
	border-top: 1px solid var(--color-border-base);
	box-shadow: 0 -4px 8px rgba(26, 31, 51, 0.08);
}

.consultation-bar__item {
	flex: 1 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 52px;
	border-radius: var(--radius-md);
	text-decoration: none;
}

.consultation-bar__item svg,
.consultation-bar__item img {
	width: 20px;
	height: 20px;
}

.consultation-bar__label {
	display: flex;
	align-items: center;
	gap: 3px;
	font: 700 12px/1.3 var(--font-sans);
}

.consultation-bar__label .icon--external {
	width: 12px;
	height: 12px;
}

.consultation-bar__item--tel,
.consultation-bar__item--line {
	background-color: var(--color-bg-base);
	border: 1.5px solid var(--color-brand-primary);
	color: var(--color-text-accent);
}

.consultation-bar__item--contact {
	background-color: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

/* Reserve space at the bottom of the page so the bar never covers the footer */
.site-main {
	padding-bottom: calc(var(--consultation-bar-height) + env(safe-area-inset-bottom));
}

@container site (min-width: 960px) {
	.consultation-bar {
		display: none;
	}

	.site-main {
		padding-bottom: 0;
	}
}