/*
 * components.css — 使い回す小さな部品（Phase 2 ブリーフ §4）。
 *
 * 所有: Worker A。ここに書いたクラスを Worker B が記事・一覧側で使う。
 * 同じセレクタを article.css / archive.css 側で二重に定義しないこと。
 * 追加の装飾が要るときは、ここのクラスに **修飾子を足す** か、
 * 文脈側（.pc-entry ... .pc-card など）で上書きする。
 *
 * クラス名は `pc-` プレフィックス + BEM 風。1コンポーネント1ブロックで入れ子を深くしない。
 * 値は必ず tokens.css の --picico-* から取る。!important は使わない。
 */

/* ==========================================================================
 * 1. アクセシビリティの基礎部品
 * ========================================================================== */

/* 視覚的にだけ隠す。読み上げとキーボードには残す。 */
.pc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * 本文へスキップ。base.css にも同名の定義があるが、読み込み順が
 * base → components なのでこちらが最終値になる。
 */
.pc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--picico-z-skiplink);
	padding: var(--picico-space-xs) var(--picico-space-sm);
	border-radius: 0 0 var(--picico-radius-sm) 0;
	color: var(--picico-color-on-primary);
	background-color: var(--picico-color-primary);
	font-weight: var(--picico-font-weight-bold);
	text-decoration: none;
}

.pc-skip-link:focus {
	left: 0;
}

/* ==========================================================================
 * 2. アイコン（assets/svg/ のインライン SVG）
 * ========================================================================== */

.pc-icon {
	display: inline-block;
	width: var(--picico-icon-size);
	height: var(--picico-icon-size);
	flex: 0 0 auto;
	vertical-align: middle;
	/* 線は currentColor。色は親から継承させる。 */
	color: inherit;
}

.pc-icon--sm {
	--picico-icon-size: 1.125rem;
}

.pc-icon--lg {
	--picico-icon-size: 2rem;
}

/* 文字と並べるとき、行の高さに合わせる。 */
.pc-icon--inline {
	--picico-icon-size: 1.15em;
}

/* ==========================================================================
 * 3. ボタン
 * ========================================================================== */

.pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--picico-space-xs);
	min-height: var(--picico-tap-size);
	padding: 0.7em 1.5em;
	border: var(--picico-border-width) solid transparent;
	border-radius: var(--picico-radius-sm);
	color: var(--picico-color-text);
	font-weight: var(--picico-font-weight-bold);
	font-size: var(--picico-font-size-md);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--picico-duration-base) var(--picico-easing),
		border-color var(--picico-duration-base) var(--picico-easing),
		color var(--picico-duration-base) var(--picico-easing);
}

.pc-btn--primary {
	color: var(--picico-color-on-primary);
	background-color: var(--picico-color-primary);
	border-color: var(--picico-color-primary);
	box-shadow: var(--picico-shadow-sm);
}

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

/*
 * 白文字を載せるので、塗りはブランド橙ではなく --picico-color-accent-fill
 * （= accent-strong #bd5117、白との比 4.82:1）を使う。
 * ブランド橙 #e8703a + 白は 3.08:1 で WCAG AA に届かない（Phase 4）。
 */
.pc-btn--accent {
	color: var(--picico-color-on-accent);
	background-color: var(--picico-color-accent-fill);
	border-color: var(--picico-color-accent-fill);
	box-shadow: var(--picico-shadow-sm);
}

.pc-btn--accent:hover {
	color: var(--picico-color-on-accent);
	background-color: var(--picico-color-accent-dark);
	border-color: var(--picico-color-accent-dark);
}

.pc-btn--outline {
	color: var(--picico-color-primary);
	background-color: var(--picico-color-surface);
	border-color: var(--picico-color-primary);
}

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

.pc-btn--sm {
	min-height: 2.25rem;
	padding: 0.4em 1em;
	font-size: var(--picico-font-size-sm);
}

.pc-btn--block {
	display: flex;
	width: 100%;
}

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

/* ==========================================================================
 * 4. チップ（カテゴリー）とバッジ
 * ========================================================================== */

/*
 * .pc-cat-label は Phase 1 からテンプレートが使っている名前。
 * 見た目は同じなのでセレクタをまとめる。
 */
.pc-chip,
.pc-cat-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	min-height: var(--picico-tap-size-inline);
	padding: 0.15em 0.8em;
	border: var(--picico-border-width) solid var(--picico-color-primary-light);
	border-radius: var(--picico-radius-pill);
	color: var(--picico-color-primary-dark);
	background-color: var(--picico-color-primary-pale);
	font-size: var(--picico-font-size-xs);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.6;
	letter-spacing: 0;
	text-decoration: none;
}

.pc-chip:hover,
.pc-cat-label:hover {
	color: var(--picico-color-on-primary);
	background-color: var(--picico-color-primary);
	border-color: var(--picico-color-primary);
}

.pc-chip--plain {
	color: var(--picico-color-text-muted);
	background-color: var(--picico-color-surface-alt);
	border-color: var(--picico-color-border);
}

.pc-badge {
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: var(--picico-radius-sm);
	font-size: var(--picico-font-size-xs);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.6;
	letter-spacing: 0;
}

/* バッジも白文字なので accent-fill（Phase 4）。 */
.pc-badge--new {
	color: var(--picico-color-on-accent);
	background-color: var(--picico-color-accent-fill);
}

/* ==========================================================================
 * 5. セクション（TOP・404・記事下で使う見出し付きのかたまり）
 * ========================================================================== */

.pc-section + .pc-section {
	margin-block-start: var(--picico-space-xxl);
}

.pc-section__title {
	margin-block-end: var(--picico-space-md);
	font-family: var(--picico-font-display);
	font-size: var(--picico-font-size-xl);
	font-weight: var(--picico-font-weight-bold);
	line-height: var(--picico-line-height-heading);
}

/*
 * 見出しの下に短い線を引く。英字の飾り見出しは使わない（design_guide）。
 * 濃いシアン → 明るいシアンのグラデーションにして、平坦さを避ける。
 */
.pc-section__title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 4px;
	margin-block-start: var(--picico-space-xs);
	border-radius: var(--picico-radius-pill);
	background-image: linear-gradient(
		90deg,
		var(--picico-color-primary) 0%,
		var(--picico-color-primary-light) 100%
	);
}

.pc-section__title--center {
	text-align: center;
}

.pc-section__title--center::after {
	margin-inline: auto;
}

.pc-section__lead {
	margin-block-end: var(--picico-space-md);
	color: var(--picico-color-text-muted);
	/* 短い案内文なので文節で折る（Phase 4）。 */
	word-break: auto-phrase;
}

.pc-section__more {
	margin-block-start: var(--picico-space-lg);
	text-align: center;
}

/* Phase 1 からの旧クラス。見た目を揃えるだけの互換。 */
.pc-section-title {
	margin-block-end: var(--picico-space-md);
	font-family: var(--picico-font-display);
	font-size: var(--picico-font-size-xl);
	line-height: var(--picico-line-height-heading);
}

/* ==========================================================================
 * 6. カード
 * ==========================================================================
 *
 * 記事カード（.pc-card / --row / --stack / __media / __body / __title /
 * __excerpt / __meta）の実装は Worker B の assets/css/archive.css にある。
 * マークアップ（template-parts/card/post-card.php）と一体で調整が要るため、
 * ここでは定義しない。二重定義になって specificity 争いになるのを避ける。
 *
 * カードを出す画面では archive.css を enqueue すること（inc/assets.php）。
 * 現在の対象: TOP / 一覧 / 検索 / 404。
 */

/* ==========================================================================
 * 7. パンくず・ページ送り
 * ========================================================================== */

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

.pc-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--picico-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 押せる高さを確保する（Phase 4。文字は 13px のままで当たり判定だけ広げる）。 */
.pc-breadcrumb__item {
	display: inline-flex;
	align-items: center;
}

.pc-breadcrumb__item a {
	display: inline-flex;
	align-items: center;
	min-height: var(--picico-tap-size-inline);
}

.pc-breadcrumb__item + .pc-breadcrumb__item::before {
	content: "›";
	margin-inline-end: var(--picico-space-xs);
	color: var(--picico-color-text-muted);
}

.pc-pagination {
	margin-block: var(--picico-space-xl);
}

.pc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--picico-space-xs);
	justify-content: center;
}

.pc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--picico-tap-size);
	min-height: var(--picico-tap-size);
	padding-inline: var(--picico-space-xs);
	border: var(--picico-border-width) solid var(--picico-color-border);
	border-radius: var(--picico-radius-sm);
	font-size: var(--picico-font-size-sm);
	text-decoration: none;
}

.pc-pagination .page-numbers:hover {
	border-color: var(--picico-color-primary);
}

.pc-pagination .page-numbers.current {
	color: var(--picico-color-on-primary);
	background-color: var(--picico-color-primary);
	border-color: var(--picico-color-primary);
}

.pc-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ==========================================================================
 * 8. 記事まわりの器（中身は Worker B が article.css で肉付けする）
 * ========================================================================== */

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

.pc-share__item .pc-btn {
	min-height: 2.5rem;
}

/* 補助色（深いティール）を差して、白い面が続くのを断ち切る。 */
.pc-author {
	display: flex;
	gap: var(--picico-space-sm);
	padding: var(--picico-space-md);
	border: var(--picico-border-width) solid var(--picico-color-border);
	border-left: var(--picico-border-width-accent) solid var(--picico-color-support);
	border-radius: var(--picico-radius-md);
	background-color: var(--picico-color-surface-warm);
}

.pc-prevnext {
	display: grid;
	gap: var(--picico-space-sm);
}

@media (min-width: 48rem) {
	.pc-prevnext {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
 * 9. 店舗情報の定義リスト（フッター・404・CTA で共用）
 * ========================================================================== */

.pc-store-lines {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--picico-space-xs) var(--picico-space-sm);
	margin: 0;
	font-size: var(--picico-font-size-sm);
	line-height: 1.7;
}

.pc-store-lines dt {
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-xs);
	white-space: nowrap;
}

.pc-store-lines dd {
	margin: 0;
}

/*
 * 電話・LINE・予約は押される前提のリンクなので高さを確保する（Phase 4）。
 * 検査で高さ 16px しかなかった。
 */
.pc-store-lines dd a {
	display: inline-flex;
	align-items: center;
	min-height: var(--picico-tap-size);
}

/* ==========================================================================
 * 10. 検索フォーム（コアの get_search_form() 出力）
 * ========================================================================== */

.search-form {
	display: flex;
	gap: var(--picico-space-xs);
}

.search-form label {
	flex: 1 1 auto;
	min-width: 0;
}

.search-form .search-field {
	width: 100%;
	min-height: var(--picico-tap-size);
	padding: 0.5em 0.8em;
	border: var(--picico-border-width) solid var(--picico-color-border);
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-color-surface);
}

.search-form .search-submit {
	min-height: var(--picico-tap-size);
	padding: 0.5em 1.2em;
	border: var(--picico-border-width) solid var(--picico-color-primary);
	border-radius: var(--picico-radius-sm);
	color: var(--picico-color-on-primary);
	background-color: var(--picico-color-primary);
	font-weight: var(--picico-font-weight-bold);
	white-space: nowrap;
}

.search-form .search-submit:hover {
	background-color: var(--picico-color-primary-dark);
	border-color: var(--picico-color-primary-dark);
}

/* ==========================================================================
 * 11. 空表示
 * ========================================================================== */

.pc-empty {
	padding: var(--picico-space-lg);
	border: var(--picico-border-width) dashed var(--picico-color-border);
	border-radius: var(--picico-radius-md);
	color: var(--picico-color-text-muted);
	text-align: center;
}