/*
 * リンクボタン（picico-core / modules/buttons）
 *
 * `[picico_btn]` が出す `.pc-linkbtn-wrap` / `.pc-linkbtn` / `.pc-linkbtn__note` だけ。
 * 値は picico-theme の tokens.css（--picico-*）から取り、テーマが picico-theme で
 * ないときのために var() の第 2 引数へ同じ値をフォールバックで置く。
 * !important は使わない（CLAUDE.md）。specificity は :where() で低く保つ。
 *
 * class 名に `cta` を入れていないのは意図的。入れると cta モジュールの
 * 「手貼り CTA 検出」に当たり、本文下の自動 CTA が消える（D-005 / D-094）。
 *
 * コントラスト（実測）:
 *   地 #0d6d80 × 文字 #fff … 5.97:1
 *   hover / focus の地 #0a5666 × 文字 #fff … 8.28:1
 *   補足 #4f5d61 × 白地 … 6.84:1
 */

:where(.pc-linkbtn-wrap) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--picico-space-xs, 0.5rem);
	margin-block: var(--picico-space-md, 1.5rem);
	text-align: center;
}

/*
 * ボタン本体だけは :where() を外して class 1 つ（0,1,0）にする。テーマの
 * `:where(.entry-content) a { text-decoration: underline }`（0,0,1）と
 * `:where(a) { color }`（0,0,0）に負けて、塗りボタンに下線が出てしまうため。
 * テーマ側の `.pc-btn` も同じ 0,1,0。!important も ID も使っていない。
 */
.pc-linkbtn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* 320px でも横に溢れない。長い文字は折り返す。 */
	width: 100%;
	max-width: 100%;
	min-height: var(--picico-tap-size, 2.75rem); /* 44px。指で押せる大きさ（WCAG 2.5.8） */
	padding: 0.75rem var(--picico-space-md, 1.5rem);
	border-radius: var(--picico-radius-pill, 999px);
	background-color: var(--picico-color-primary, #0d6d80);
	color: var(--picico-color-on-primary, #fff);
	font-family: var(--picico-font-heading, inherit);
	font-size: var(--picico-font-size-md, 1rem);
	font-weight: var(--picico-font-weight-bold, 700);
	line-height: var(--picico-line-height-heading, 1.3);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: background-color var(--picico-duration-fast, 120ms) var(--picico-easing, ease);
}

/* 480px から、文字幅 + 余白の幅にして中央に置く */
@media (min-width: 30rem) {
	.pc-linkbtn {
		width: auto;
	}
}

.pc-linkbtn:hover,
.pc-linkbtn:focus-visible {
	background-color: var(--picico-color-primary-dark, #0a5666);
	color: var(--picico-color-on-primary, #fff);
	text-decoration: none;
}

/*
 * フォーカスリング。picico-theme が base.css で同じ指定を持っているので、
 * ここはテーマが無いときの保険。同じトークン・同じ値なので衝突しても結果は変わらない。
 */
.pc-linkbtn:focus-visible {
	outline: 2px solid var(--picico-color-focus, #a8450f);
	outline-offset: 2px;
}

:where(.pc-linkbtn__note) {
	color: var(--picico-color-text-muted, #4f5d61);
	font-size: var(--picico-font-size-xs, 0.8125rem);
	line-height: var(--picico-line-height-body, 1.8);
}

@media (prefers-reduced-motion: reduce) {
	.pc-linkbtn {
		transition: none;
	}
}