/*
Theme Name: 中村農園 Child
Theme URI:
Template: lightning
Author: 中村農園制作チーム
Description: 中村農園 公式サイト用 Lightning 子テーマ。既存の「Lightning Child」（Version 0.6.0、有効化中）とは別フォルダで共存させる専用の子テーマ。docs/04-homepage-wireframe.md / docs/03-design-guide.md の設計に基づく。
Version: 1.2.0
Text Domain: lightning-child-nakamura
*/

/* NOTE: Template の値は親テーマ（Lightning）のディレクトリ名と一致させる必要がある。
   wp-content/themes/ にインストールした実際のフォルダ名が "lightning" と異なる場合は要修正。
   （WordPress環境が無いため実機確認は未実施。要確認） */
/* NOTE: フォルダ名は "lightning-child-nakamura"。既存の "lightning-child"（公式開発用Childテーマ、
   Version 0.6.0、現在有効化中）とは別フォルダのため、アップロードしても既存テーマには影響しない。 */

/* ==========================================================================
   トークン定義（docs/03-design-guide.md 14章に準拠）
   カラーコードは仮。正式カラーコードは同ガイド確定後に差し替える。
   ========================================================================== */
:root {
	--color-primary: #2f4a3c;      /* 深い緑（仮） */
	--color-primary-rgb: 47, 74, 60; /* 深い緑のRGB値（仮・--color-primaryと手動で一致させること。ヒーロー画像オーバーレイのrgba()用） */
	--color-bg: #f7f3ea;           /* 生成り（仮） */
	--color-accent: #6b4226;       /* 濃い茶色（仮） */
	--color-sweet-potato: #7a3b5e; /* さつまいも色（仮・現在ボタンでは未使用。将来の用途に残置） */
	--color-yakiimo: #9c5518;      /* 焼き芋色（仮）: CTAボタン用。白文字とのコントラスト比 約5.6:1（手動計算・要ツール確認） */
	--color-yakiimo-hover: #7f4513; /* 焼き芋色のホバー時（仮・--color-yakiimoよりやや暗め） */
	--color-text: #2e2a24;
	--color-text-light: #6f6a61;
	--color-white: #ffffff;
	--color-border: #e2dccc;

	/* フォント: OS標準フォントのみ（外部Webフォントは読み込まない） */
	--font-base: -apple-system, BlinkMacSystemFont,
		"Hiragino Kaku Gothic ProN", "Hiragino Sans",
		"Yu Gothic", "Meiryo", sans-serif;

	/* 文字サイズ: 本文・ボタンは --font-size-base（16px）以上を原則とする。
	   --font-size-sm（14px）は日付・注釈・補助情報にのみ使用する。 */
	--font-size-xs: 0.8rem;   /* 13px（最小限の注釈のみ） */
	--font-size-sm: 0.9rem;   /* 14px・日付/注釈専用 */
	--font-size-base: 1rem;   /* 16px・本文/ボタンの標準 */
	--font-size-md: 1.1rem;   /* 17.6px・リード文 */
	--font-size-lg: 1.3rem;   /* 20.8px・h3 */
	--font-size-xl: 1.6rem;   /* 25.6px・h2 */
	--font-size-xxl: 1.8rem;  /* 28.8px・h1 */

	--space-s: 16px;
	--space-m: 32px;
	--space-l: 64px;
	--space-xl: 96px;

	--radius-s: 4px;

	--btn-radius: 8px; /* カード等の --radius-s（4px）とは独立させ、ボタンにやや大きめの角丸で高級感を出す */
	--btn-padding-block: 14px;
	--btn-padding-inline: 28px;
	--btn-font-size: var(--font-size-base);

	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;

	--content-max-width: 1200px;
}

/* ==========================================================================
   ベース
   本スタイルシートはこのテーマが持つ全カスタムテンプレート
   （front-page.php・page.php・page-varieties.php・page-news.php・page-blog.php・
   page-contact.php・page-templates/variety.php）で共通して使用する。
   親テーマ（Lightning）の他ページへ影響しないよう、いずれのテンプレートも
   <main class="site-main front-page ..."> のように .front-page クラスを付与してスコープする。
   （クラス名は命名時の名残りで "front-page" のままだが、実質的には
   「本テーマ独自デザインのスコープ」を表す共通クラスとして使用している。要検討: 将来的なリネーム）
   ========================================================================== */
.front-page,
.front-page *,
.front-page *::before,
.front-page *::after {
	box-sizing: border-box;
}

.front-page {
	font-family: var(--font-base);
	font-size: var(--font-size-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	/* 横スクロール防止（子要素の想定外オーバーフロー対策） */
	overflow-x: hidden;
}

.front-page img,
.front-page .photo-placeholder {
	max-width: 100%;
	display: block;
}

/* インラインstyle属性を使わず、共通ユーティリティクラスでスタイルを一元管理する */
.front-page .u-text-center {
	text-align: center;
}

.front-page .btn {
	display: inline-block;
	padding: var(--btn-padding-block) var(--btn-padding-inline);
	border-radius: var(--btn-radius);
	font-size: var(--btn-font-size);
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	transition: background-color var(--transition-fast), color var(--transition-fast),
		box-shadow var(--transition-fast), transform var(--transition-fast);
}

.front-page .btn--primary {
	background-color: var(--color-yakiimo);
	color: var(--color-white);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.front-page .btn--primary:hover {
	background-color: var(--color-yakiimo-hover);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.front-page .btn--secondary {
	background-color: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}

.front-page .btn--secondary:hover {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.front-page .btn--large {
	display: block;
	width: 100%;
	font-size: var(--font-size-md);
}

/* 写真未準備時の仮プレースホルダー（wireframe 4-2 / design-guide 8章 参照） */
.front-page .photo-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: var(--color-border);
	color: var(--color-text-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-sm);
	text-align: center;
	padding: var(--space-s);
}

/* ==========================================================================
   セクション共通
   ========================================================================== */
.front-page .section {
	padding: var(--space-l) var(--space-s);
}

.front-page .section__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
}

.front-page .section-heading {
	font-size: var(--font-size-xl);
	text-align: center;
	color: var(--color-primary);
	margin-bottom: var(--space-m);
}

.front-page .section--bg-white {
	background-color: var(--color-white);
}

.front-page .section--bg-primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.front-page .section--bg-primary .section-heading {
	color: var(--color-white);
}

/* ==========================================================================
   メインビジュアル
   ========================================================================== */
.front-page .hero {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-white);
	text-align: center;
	padding: var(--space-l) var(--space-s);
	overflow: hidden;
}

/* ヒーロー画像設定時のみ半透明オーバーレイを重ね、画像上の文字の可読性を確保する。
   画像未設定時は background-color（深い緑）がそのままフォールバック表示される。 */
.front-page .hero--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(var(--color-primary-rgb), 0.55);
}

.front-page .hero__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.front-page .hero__catch {
	font-size: var(--font-size-xxl);
	line-height: 1.5;
	margin-bottom: var(--space-m);
}

.front-page .hero__lead {
	font-size: var(--font-size-md);
	line-height: 1.8;
	margin-bottom: var(--space-l);
}

.front-page .hero__cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

.front-page .hero__cta .btn {
	width: 100%;
}

/* ==========================================================================
   中村農園について／米ぬか栽培
   ========================================================================== */
.front-page .split {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}

.front-page .split__text {
	font-size: var(--font-size-base);
	line-height: 1.9;
	margin-bottom: var(--space-s);
}

.front-page .cultivation-photos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
	margin-bottom: var(--space-m);
}

/* アップロード画像の縦横比がまちまちでもレイアウトが崩れないよう統一する */
.front-page .split__photo img,
.front-page .cultivation-photos img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-s);
}

/* ==========================================================================
   品種紹介
   ========================================================================== */
.front-page .variety-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
}

.front-page .variety-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-s);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.front-page .variety-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.front-page .variety-card__body {
	padding: var(--space-s);
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.front-page .variety-card__name {
	font-size: var(--font-size-lg);
	margin-bottom: var(--space-s);
	color: var(--color-primary);
}

/* 甘さ・食感・用途は購入判断に関わる主要情報のため --font-size-base（16px）を使用する
   （design-guide.md 4章・7章: 14pxは日付・注釈・補助情報専用） */
.front-page .variety-card__meta {
	list-style: none;
	margin: 0 0 var(--space-s);
	padding: 0;
	font-size: var(--font-size-base);
	color: var(--color-text-light);
}

.front-page .variety-card__meta li {
	margin-bottom: 4px;
}

.front-page .variety-card .btn {
	margin-top: auto;
}

/* ==========================================================================
   年間スケジュール（縦型タイムライン／モバイル基準）
   ========================================================================== */
.front-page .timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--color-accent);
}

.front-page .timeline__item {
	position: relative;
	padding: 0 0 var(--space-m) var(--space-m);
}

.front-page .timeline__item::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--color-accent);
}

.front-page .timeline__photo {
	margin-bottom: var(--space-s);
	border-radius: var(--radius-s);
	overflow: hidden;
}

.front-page .timeline__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.front-page .timeline__title {
	font-size: var(--font-size-lg);
	color: var(--color-primary);
	margin-bottom: 4px;
}

/* 時期は注釈情報のため --font-size-sm（14px）を使用する */
.front-page .timeline__period {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
}

/* ==========================================================================
   Instagram（仮枠）
   ========================================================================== */
.front-page .insta-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-s);
	margin-bottom: var(--space-m);
}

/* ==========================================================================
   お知らせ
   ========================================================================== */
.front-page .news-list {
	list-style: none;
	margin: 0 0 var(--space-m);
	padding: 0;
}

.front-page .news-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--space-s) 0;
	border-bottom: 1px solid var(--color-border);
}

/* 日付は注釈情報のため --font-size-sm（14px）を使用する */
.front-page .news-item__date {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
}

.front-page .news-item__title {
	font-size: var(--font-size-base);
}

.front-page .news-item__title a {
	color: var(--color-text);
	text-decoration: none;
}

.front-page .news-empty {
	font-size: var(--font-size-base);
	color: var(--color-text-light);
	margin-bottom: var(--space-m);
}

/* ==========================================================================
   お問い合わせ・LINE
   ========================================================================== */
.front-page .contact-primary {
	max-width: 480px;
	margin: 0 auto var(--space-m);
}

.front-page .contact-secondary {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	text-align: center;
	font-size: var(--font-size-base);
}

.front-page .contact-secondary a {
	color: var(--color-white);
	text-decoration: underline;
}

/* ==========================================================================
   固定ページ共通（page.php / page-varieties.php / page-news.php / page-blog.php /
   page-contact.php / page-templates/variety.php で使用）
   ========================================================================== */
.front-page .page-header {
	padding: var(--space-l) var(--space-s) var(--space-m);
	text-align: center;
	background-color: var(--color-primary);
	color: var(--color-white);
}

.front-page .page-header__title {
	font-size: var(--font-size-xxl);
	margin-bottom: var(--space-s);
}

.front-page .page-header__lead {
	font-size: var(--font-size-md);
	max-width: 640px;
	margin: 0 auto;
}

.front-page .static-page__thumbnail {
	max-width: 960px;
	margin: 0 auto;
}

/* the_content() が出力する見出し・段落・リストの体裁を、本ガイドラインのトークンに合わせる */
.front-page .static-page__content {
	max-width: 760px;
	margin: 0 auto;
	font-size: var(--font-size-base);
	line-height: 1.9;
}

.front-page .static-page__content--inline {
	max-width: none;
	margin: 0;
}

.front-page .static-page__content h2 {
	font-size: var(--font-size-xl);
	color: var(--color-primary);
	margin: var(--space-l) 0 var(--space-s);
}

.front-page .static-page__content h3 {
	font-size: var(--font-size-lg);
	color: var(--color-primary);
	margin: var(--space-m) 0 var(--space-s);
}

.front-page .static-page__content p {
	margin-bottom: var(--space-s);
}

.front-page .static-page__content ul,
.front-page .static-page__content ol {
	margin: 0 0 var(--space-s);
	padding-left: 1.5em;
}

/* ==========================================================================
   タブレット（768px〜）
   ========================================================================== */
@media (min-width: 768px) {
	.front-page .hero__cta {
		flex-direction: row;
		justify-content: center;
	}

	.front-page .hero__cta .btn {
		width: auto;
		min-width: 220px;
	}

	.front-page .split {
		flex-direction: row;
		align-items: center;
	}

	.front-page .split__photo,
	.front-page .split__text {
		flex: 1;
	}

	.front-page .cultivation-photos {
		grid-template-columns: repeat(3, 1fr);
	}

	.front-page .variety-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.front-page .insta-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.front-page .contact-secondary {
		flex-direction: row;
		justify-content: center;
		gap: var(--space-l);
	}
}

/* ==========================================================================
   PC（1024px〜）
   ========================================================================== */
@media (min-width: 1024px) {
	.front-page .hero {
		min-height: 560px;
		padding: var(--space-xl) var(--space-m);
	}

	/* design-guide.md 4章の --font-size-xxl 範囲上限（35.2px）まで拡大し、PCでの訴求力を高める */
	.front-page .hero__catch {
		font-size: 2.2rem;
	}

	.front-page .variety-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.front-page .insta-grid {
		grid-template-columns: repeat(6, 1fr);
	}

	/* PC は横型タイムラインに変更 */
	.front-page .timeline {
		display: flex;
		border-left: none;
		border-top: 2px solid var(--color-accent);
		gap: var(--space-s);
	}

	.front-page .timeline__item {
		flex: 1;
		padding: var(--space-m) 0 0;
	}

	.front-page .timeline__item::before {
		left: 4px;
		top: -7px;
	}
}

/* ==========================================================================
   アニメーション低減設定（design-guide.md 12章）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.front-page *,
	.front-page *::before,
	.front-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}