/*
 * layout.css — サイト全体の骨格レイアウト。
 * ヘッダー・フッター・コンテナ・1カラム/2カラム切り替え・カードグリッドを扱う。
 * モバイルファースト（デフォルト=スマホ、min-widthで拡張）で記述する。
 */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

/* ---------- ヘッダー ---------- */

.site-header {
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	background: var(--color-bg);
	z-index: 100;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-3);
}

.site-header__title {
	font-size: var(--font-size-h3);
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.05em;
}

/* モバイル: ナビゲーションはトグルで開閉 */
.site-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
}

.site-nav__toggle-icon,
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--mono-900);
	position: relative;
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
	content: "";
	position: absolute;
}

.site-nav__toggle-icon::before { top: -6px; }
.site-nav__toggle-icon::after { top: 6px; }

.site-nav {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(80vw, 320px);
	background: var(--color-bg);
	transform: translateX(100%);
	/* 閉じている間はvisibility:hiddenにして、画面外のリンクがTabキーで
	   到達できてしまわないようにする（スライドのtransformだけでは
	   要素が引き続きフォーカス可能なまま残ってしまうため）。
	   transition-delayで、閉じるときはスライドが終わってから非表示にし、
	   開くときは即座に表示されるようにしている（アニメーション自体は変更しない）。 */
	visibility: hidden;
	transition: transform 0.2s ease, visibility 0s linear 0.2s;
	padding: var(--space-16) var(--space-6);
	overflow-y: auto;
}

.site-nav.is-open {
	transform: translateX(0);
	visibility: visible;
	transition-delay: 0s;
}

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list li {
	border-bottom: 1px solid var(--color-border);
}

.site-nav__list a {
	display: block;
	padding: var(--space-4) 0;
	text-decoration: none;
}

/* 現在表示中のページはアクセントで状態表示する（アクセントの限定利用例） */
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-footer__nav-list .current-menu-item > a,
.site-footer__nav-list .current_page_item > a {
	color: var(--color-accent);
	font-weight: 700;
}

@media (min-width: 900px) {
	.site-nav__toggle {
		display: none;
	}

	.site-nav {
		position: static;
		width: auto;
		transform: none;
		visibility: visible; /* PC表示ではトグル状態に関わらず常時操作可能にする */
		padding: 0;
		background: transparent;
	}

	.site-nav__list {
		display: flex;
		gap: var(--space-6);
	}

	.site-nav__list li {
		border-bottom: none;
	}

	.site-nav__list a {
		padding: 0;
	}
}

/* ---------- レイアウト（1カラム/2カラム） ---------- */

.layout {
	padding-block: var(--space-8);
	display: block;
}

.layout__content {
	min-width: 0;
}

@media (min-width: 900px) {
	.layout--with-sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--space-12);
		align-items: start;
	}
}

.site-sidebar {
	display: none;
}

@media (min-width: 900px) {
	.site-sidebar {
		display: block;
	}
}

/* ---------- カードグリッド ---------- */

.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 600px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- フッター ---------- */

.site-footer {
	margin-top: var(--space-16);
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-8);
	background: var(--color-surface);
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: center;
	text-align: center;
}

.site-footer__nav-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
}

.site-footer__sns {
	list-style: none;
	display: flex;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
}

.site-footer__copyright {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	margin: 0;
}

/* ---------- 本文コンテンツ幅（用途別コンテナ） ---------- */
/*
 * 意図的にCSS Gridは使わない。.entry-content自体はdisplay指定なし
 * （通常のブロック要素のまま）にして、直下の要素それぞれに
 * max-width + margin-inline:autoで個別に中央寄せする方式にしている。
 *
 * 理由: Gridコンテナの直下に置かれた要素はfloat/clearが効かなくなる
 * というCSS Gridの仕様上の制約があり、画像の左寄せ/右寄せ回り込み
 * （alignleft/alignright、標準Gutenbergブロックが今も使う配置）が
 * 動作しなくなってしまう。max-width方式であれば直下の要素は
 * 通常のブロックボックスのままなので、alignleft/alignrightのfloatは
 * 一切妨げず、通常の段落・見出し・リスト・表・独自ブロックも
 * 素のブロックとして問題なく積み重なる。
 *
 * 結果として、通常のコンテンツ（alignwide/alignfullを持たない要素）は
 * すべて700px幅で中央寄せされ、Grid配置ロジックには一切依存しない。
 * alignwide/alignfullを持つ要素だけ、自分のmax-widthを広げるだけで
 * 十分に「はみ出し」が実現できる。
 */

.entry-content > *:not(.alignleft):not(.alignright) {
	max-width: var(--content-width);
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: var(--wide-width);
}

.entry-content > .alignfull {
	max-width: none;
	margin-inline: 0;
}

.single-article__header,
.single-page__header {
	max-width: var(--content-width);
	margin-inline: auto;
}