/*
Theme Name: 代々木上原ローカルノート（若葉とたまご）
Template: twentytwentyfive
Description: 代々木上原ローカルノートの専用子テーマ。Twenty Twenty-Fiveを土台に、若葉とたまごの配色・書体・レイアウトを最初から持たせています。追加CSSでの上書き合戦を避けるための構成です。
Author: 見た人
Version: 1.0.5
*/

/*
  ここには基本的に何も書きません。
  見た目の指定はすべて theme.json（色・文字・余白のプリセット）で行い、
  個別の細かい調整だけを、必要になった箇所にここで足していきます。

  ルール：
  - !important は使わない（使いたくなったら、それはtheme.json側の設計ミスのサイン）
  - セレクタは「.single」「.archive」「.home」など、ページ種別を明示してから書く
    （トップページ用の指定が記事詳細に漏れる、を防ぐため）
*/

/* =====================================================================
   新しく作り直したクエリループ（タクソノミー設定が壊れなかった方）用の
   カードスタイル。ブロックの中身が素の状態（グループでの装飾なし）の
   ため、投稿テンプレートに record-cards というクラスを付けてもらい、
   ここでカードの見た目（白背景・角丸・写真・文字色）を再現している。
   ===================================================================== */
.record-cards .wp-block-post {
	background-color: var(--wp--preset--color--card, #ffffff);
	border-radius: 14px;
	margin-top: 16px;
	overflow: hidden;
	padding: 0;
	list-style: none;
}

.record-cards .wp-block-post-featured-image {
	margin: 0;
}
.record-cards .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	display: block;
}

.record-cards .wp-block-post-terms {
	font-size: 0.71875rem;
	font-weight: 700;
	margin: 14px 0 0 18px;
	display: inline-block;
}

.record-cards .wp-block-post-date {
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-weak, #6e6e68);
	margin: 14px 0 0 8px;
	display: inline-block;
}

.record-cards .wp-block-post-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	margin: 6px 18px 0;
}
.record-cards .wp-block-post-title a {
	color: var(--wp--preset--color--ink, #2c2c2a);
	text-decoration: none;
}

.record-cards .wp-block-post-excerpt {
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-weak, #6e6e68);
	margin: 6px 18px 16px;
}

/* =====================================================================
   PCで幅いっぱいに崩れるのを防ぐ保険（過去、theme.jsonの自動設定だけでは
   効かないことがあったため、念のため明示的にCSSでも幅を絞っておく）

   考え方：
   - 背景色（ヘッダー・ヒーロー・フッターなど）は画面幅いっぱいのまま
   - 中の文章・写真・カードだけを680pxに収めて中央寄せにする
   - 「幅広で見せたい」ブロック（.alignwide）と「本当に全幅」ブロック
     （.alignfull）だけは対象から除外する
   ===================================================================== */
.wp-site-blocks > *:not(.alignfull):not(.alignwide):not(.wp-block-template-part) {
	max-width: var(--wp--style--global--content-size, 680px);
	margin-left: auto;
	margin-right: auto;
}

/* ヘッダー・フッターの本体(.wp-block-template-part)は上のルールの対象外にしたので、
   これで背景ごと全幅になる。内側のグループ(.wp-block-group)側の調整は不要になったが、
   保険として角丸だけはリセットしておく。 */
.wp-site-blocks header.wp-block-group,
.wp-site-blocks footer.wp-block-group {
	border-radius: 0;
}

/* =====================================================================
   カテゴリタブ（ナビゲーションブロック）のピル型スタイル

   ナビゲーションブロックには「角丸」の設定項目がブロックエディター上に
   出てこないため、CSSで対応しています。影響範囲は前で付けた
   .category-tabs クラスの中だけに絞ってあるので、フッターのナビ
   （縦並び・白文字のリンク一覧）には影響しません。
   ===================================================================== */
.category-tabs .wp-block-navigation-item > a,
.category-tabs .wp-block-navigation-item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--card, #ffffff);
	color: var(--wp--preset--color--green, #3a6b61);
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
}

.category-tabs .wp-block-navigation-item > a:hover,
.category-tabs .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--green, #3a6b61);
	color: #ffffff;
}

/* 今見ているカテゴリのタブだけ、最初から緑背景にしたい場合は、
   WordPressが自動で付ける .current-menu-item クラスを使う */
.category-tabs .current-menu-item > a {
	background-color: var(--wp--preset--color--green, #3a6b61);
	color: #ffffff;
}