/* ============================================================
   common.css - 全ページ共通スタイル（ヘッダー / フッター / 共通挙動）
   ============================================================ */

body {
	font-family: var(--font-sans);
	color: var(--body-ink);
	line-height: 1.75;
	background: var(--paper);
	overflow-x: hidden;
}

h2 {
	text-wrap: balance;
	word-break: auto-phrase;
}

/* --- 共通コンテナ --- */
.container {
	max-width: var(--content-width);
	margin: 0 auto;
	padding-left: clamp(18px, 4vw, 40px);
	padding-right: clamp(18px, 4vw, 40px);
}

/* --- ホバー / インタラクション --- */
.lnk {
	transition: color .2s, opacity .2s;
}
.lnk:hover {
	color: var(--link-hover);
}
.cardlift {
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}
/* 岡田屋デザイン（design-file）の影をそのまま採用するため、design-lint の
   shadow alpha 上限(0.08)を意図的に超えている。マサキ承認済みの例外。 */
.cardlift:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px -22px rgba(28, 38, 48, .45);
}
.btnfill {
	transition: background .2s, transform .2s;
}
.btnfill:hover {
	transform: translateY(-2px);
}
.arrowlnk .ar {
	transition: transform .25s;
}
.arrowlnk:hover .ar {
	transform: translateX(5px);
}

/* --- アニメーション --- */
@keyframes pulseDot {
	0% { transform: scale(1); opacity: 1; }
	70% { transform: scale(2.6); opacity: 0; }
	100% { opacity: 0; }
}
@keyframes floatup {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ヘッダー関連（.nav-menu / .mobile-menu / レスポンシブ）は
   assets/css/layout/header.css に集約している。 */

/* --- パンくず（横断コンポーネント） ---
   <main> 直後に全幅の帯として置く。内側 .breadcrumb-inner で
   content-width（1360px）に絞る＝サイトグリッド基準で左寄せになる。
   固定・投稿その他どのテンプレートでも同じ見た目で使えるよう common.css に置く。 */
.breadcrumb {
	background-color: var(--bg-subtle);
}
.breadcrumb-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap-sm);
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--20) clamp(18px, 4vw, 40px);
	box-sizing: border-box;
	font-size: var(--text-xs);
	line-height: 1.6;
}
.breadcrumb-item {
	color: var(--muted);
	font-weight: 500;
}
.breadcrumb-sep {
	color: var(--muted);
	opacity: .6;
}
.breadcrumb-current {
	color: var(--ink);
	font-weight: 500;
}

/* --- ページネーション（横断コンポーネント） ---
   投稿系一覧の the_posts_pagination() と、固定ページに置く商品一覧
   ショートコードの paginate_links() が同じマークアップ
   （.pagination > .nav-links > .page-numbers）で同じ見た目になる。
   blog.css は投稿系一覧でしか読まれないため、パンくずと同じく
   常時読み込みの common.css に置く。 */
.pagination {
	margin-top: clamp(40px, 5vw, 64px);
}
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap-sm);
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-family: var(--font-en);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--muted);
	text-decoration: none;
	transition: color .2s;
}
.pagination a.page-numbers:hover {
	color: var(--brand);
}
.pagination .page-numbers.current {
	color: var(--paper);
	background-color: var(--brand);
	border-radius: 4px;
}
.pagination .page-numbers.dots {
	color: var(--muted);
}

/* --- index.php（汎用フォールバック）用の最小スタイル ---
   専用テンプレート（single/archive/home/page 等）が無いケースの受け皿。
   blog.css は該当ページでしか読まれないため、常時読み込みの common.css に置く。 */
.fallback-main {
	margin: 0 auto;
	padding: var(--wp--preset--spacing--section) clamp(18px, 4vw, 40px);
}
.fallback-article + .fallback-article {
	margin-top: var(--wp--preset--spacing--60);
}
.fallback-title {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	color: var(--ink);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* --- スクリーンリーダー専用テキスト ---
   視覚的に隠すが読み上げには残す。WordPress 標準のクラス名に合わせてあるので、
   the_posts_pagination() の screen_reader_text やコアのブロックもこれに乗る。 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- サイト内検索フォーム（searchform.php） ---
   検索結果ページと 404 の両方で使う横断コンポーネントなので common.css に置く
   （blog.css だと 404 で読まれない）。 */
/* 32px = spacing--50。直値の 2rem ではなく theme.json のプリセットを使う */
.searchform {
	margin-bottom: var(--wp--preset--spacing--50);
}
.searchform-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
}
.searchform-input {
	/* flex-basis を持たせて狭幅では折り返す。min-width:0 が無いと
	   input の既定サイズが効いて親からはみ出す。 */
	flex: 1 1 220px;
	min-width: 0;
	padding: 12px 16px;
	font-family: inherit;
	font-size: var(--text-base);
	color: var(--ink);
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
	transition: border-color .2s;
}
.searchform-input::placeholder {
	color: var(--muted);
}
.searchform-input:focus {
	outline: none;
	border-color: var(--brand);
}
/* .btnfill は transition と hover の浮きだけを持つヘルパーなので、
   色と形はここで指定する。 */
.searchform-btn {
	flex: 0 0 auto;
	padding: 12px 28px;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--paper);
	background-color: var(--brand);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

/* --- 404（template/page/404.php） ---
   一覧でも記事でもないため blog.css を読まない。.site-main 等は使えないので
   ここで完結させる。構造は .postlist-inner と同じ（外側は padding だけ持ち、
   内側の各要素を読み幅で中央寄せ）。 */
.notfound-main {
	background-color: var(--paper);
}
.notfound-inner {
	padding: var(--wp--preset--spacing--section) clamp(18px, 4vw, 40px);
}
.notfound-inner > * {
	max-width: var(--content-narrow);
	margin-inline: auto;
}
.notfound-title {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: 1.4;
	color: var(--ink);
}
.notfound-lead {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--text-base);
	line-height: 1.9;
	color: var(--body-ink);
}
/* 「探し直す手段」を横に並べる。900px は 2 カラム切り替えの共通ブレークポイント。 */
.notfound-actions {
	margin-top: var(--wp--preset--spacing--60);
	display: grid;
	gap: var(--gap-lg);
}
@media (min-width: 900px) {
	.notfound-actions {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}
.notfound-action {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--line);
}
.notfound-action-title {
	font-family: var(--font-serif);
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--ink);
}
.notfound-action-desc {
	margin-top: 8px;
	font-size: var(--text-sm);
	line-height: 1.8;
	color: var(--muted);
}
.notfound-action .searchform,
.notfound-btn {
	margin-top: var(--wp--preset--spacing--30);
}
.notfound-btn {
	display: inline-block;
	padding: 14px 32px;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--paper);
	background-color: var(--brand);
	border-radius: 4px;
}