/* ===========================================================
 * Yokohama Law Child — オーバーライドCSS
 * 親テーマ Lightning の上に、配色・タイポ・余白・追従CTAを上書きする。
 * functions.php から style.css とは別に enqueue する。
 *
 * 設計方針（PLAN.md L166「弁護士HPらしい上品さ」L171「追従型CTA」）:
 *   - 配色は CSS カスタムプロパティ（変数）に集約し、後から一括変更可能にする。
 *   - 下記カラーは「弁護士サイト定番のネイビー基調」の【暫定値】。
 *     ★先生・向井さんのデザイン確認後に確定させること（捏造ではなく仮置き）。
 * =========================================================== */

/* -----------------------------------------------------------
 * 1. デザイントークン（暫定 / 要クライアント確認）
 * --------------------------------------------------------- */
:root {
	/* 配色：信頼感を出すネイビー基調 + 上品なゴールド系アクセント（暫定） */
	--yl-color-primary: #1f3a5f;        /* メイン（濃紺）：見出し・ヘッダー・CTA背景 */
	--yl-color-primary-dark: #16293f;   /* メインの濃いめ：hover 等 */
	--yl-color-accent: #b08d57;         /* アクセント（くすみゴールド）：強調・下線 */
	--yl-color-text: #2b2b2b;           /* 本文テキスト */
	--yl-color-muted: #6b7280;          /* 補足テキスト */
	--yl-color-bg-soft: #f5f7fa;        /* セクション交互背景 */
	--yl-color-cta: #c0392b;            /* 電話CTA等の行動喚起（暫定の暖色） */
	--yl-color-cta-dark: #a93226;

	/* タイポグラフィ */
	--yl-font-base: 1rem;               /* 本文基準（16px） */
	--yl-line-height: 1.85;             /* 弁護士HPは可読性重視でやや広め */
	--yl-letter-spacing: 0.02em;

	/* 余白（縦リズム） */
	--yl-space-section: 4rem;           /* セクション間の縦余白（PC） */
	--yl-space-section-sp: 2.5rem;      /* 同（モバイル） */

	/* 追従CTAの高さ（本文の下端がCTAに隠れないよう余白計算に使う） */
	--yl-sticky-cta-height: 60px;
}

/* -----------------------------------------------------------
 * 2. ベースタイポ・余白の上書き
 * --------------------------------------------------------- */
body {
	color: var(--yl-color-text);
	line-height: var(--yl-line-height);
	letter-spacing: var(--yl-letter-spacing);
}

h1, h2, h3, h4 {
	color: var(--yl-color-primary);
	line-height: 1.4;
}

a {
	color: var(--yl-color-primary);
}
a:hover {
	color: var(--yl-color-accent);
}

/* セクションの縦リズムをゆったりさせる（上品さの演出） */
.section,
.entry-content > .wp-block-group {
	padding-top: var(--yl-space-section);
	padding-bottom: var(--yl-space-section);
}

@media (max-width: 768px) {
	.section,
	.entry-content > .wp-block-group {
		padding-top: var(--yl-space-section-sp);
		padding-bottom: var(--yl-space-section-sp);
	}
}

/* -----------------------------------------------------------
 * 3. 追従型CTA（モバイル特化 / PLAN.md L171）
 *    画面下に固定し、電話・フォーム導線を常時表示する。
 *    PC では非表示（PCはヘッダー/サイドのCTAに任せる）。
 * --------------------------------------------------------- */
.yl-sticky-cta {
	display: none; /* 既定は非表示。下のメディアクエリでモバイルのみ表示 */
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	height: var(--yl-sticky-cta-height);
}

.yl-sticky-cta__inner {
	display: flex;
	height: 100%;
}

.yl-sticky-cta__btn {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	height: 100%;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	letter-spacing: 0.02em;
}

.yl-sticky-cta__btn--tel {
	background: var(--yl-color-cta);
}
.yl-sticky-cta__btn--tel:hover {
	background: var(--yl-color-cta-dark);
	color: #fff;
}

.yl-sticky-cta__btn--form {
	background: var(--yl-color-primary);
}
.yl-sticky-cta__btn--form:hover {
	background: var(--yl-color-primary-dark);
	color: #fff;
}

/* モバイルのみ表示し、本文末尾がCTAに隠れないよう body 下部に余白を確保 */
@media (max-width: 768px) {
	.yl-sticky-cta {
		display: block;
	}
	body.has-yl-sticky-cta {
		padding-bottom: var(--yl-sticky-cta-height);
	}
}