/**
 * 骨組みの CSS（l- で始まるクラス）
 *
 * ページの「枠」を決める: ヘッダー・フッター・内容の幅・セクションの余白・段組み。
 * 中に何を入れるか（ボタンやカードなど）は components.css の役目。
 *
 * ── クラス名の付け方（このテーマ全体のルール）──
 *   l-〇〇  … 骨組み（layout）。ページに 1 つ、または大きな枠
 *   c-〇〇  … 部品（component）。どこに置いても同じ見た目になるもの
 *   u-〇〇  … 補助（utility）。1 つのことだけをする小さなクラス
 *
 *   部品の中の要素は「__」、種類違いは「--」でつなぐ（BEM という書き方）。
 *     .c-plan            … 料金プランのカード
 *     .c-plan__price     … その中の「価格」
 *     .c-plan--recommended … 「おすすめ」の種類違い
 *
 * ── 画面幅の切り替え ──
 *   スマホの見た目を基本に書き、画面が広いときの違いを @media (min-width: …) で足していく。
 *     768px 以上  … タブレット・小さめの PC
 *     1024px 以上 … PC
 */

/* ── 内容の幅 ───────────────────────────── */

/* 内容を中央に寄せ、最大幅と左右の余白をそろえる箱。セクションの中で必ず 1 回使う */
.l-container {
	width: 100%;
	max-width: calc(var(--locus-container-width) + var(--locus-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--locus-gutter);
}

/* 読む文章用の狭い幅 */
.l-container--narrow {
	max-width: calc(var(--locus-container-narrow) + var(--locus-gutter) * 2);
}

/* ── セクション（ページを横に区切るまとまり）── */

.l-section {
	padding-block: var(--locus-section-padding);
}

/* 背景を薄い色にする（白いセクションと交互に並べて区切りを分かりやすくする） */
.l-section--alt {
	background-color: var(--locus-color-bg-alt);
}

/* 背景を薄いメインカラーにする */
.l-section--tint {
	background-color: var(--locus-color-primary-light);
}

/*
 * 背景をメインカラーのグラデーションにする（明るい飾りの色 → メインカラー）。
 * 明るい色の上の文字は読みにくいので、文は中に置いた白い囲み（c-box--white）に書く。
 */
.l-section--brand {
	color: var(--locus-color-on-primary);
	background: linear-gradient(135deg, var(--locus-color-primary-vivid) 0%, var(--locus-color-primary) 100%);
}

/* 上下の余白を小さくする */
.l-section--tight {
	padding-block: calc(var(--locus-section-padding) * 0.6);
}

/* セクションの中で、要素どうしの縦の間隔をそろえる（見出し → 本文 → ボタン など） */
.l-section > .l-container > * + * {
	margin-top: var(--locus-space-xl);
}

/* ── 段組み（カードを横に並べるなど）── */

/* スマホでは 1 列。--2 / --3 / --4 を付けると、広い画面で列が増える */
.l-grid {
	display: grid;
	gap: var(--locus-space-md);
}

@media (min-width: 768px) {
	.l-grid--2,
	.l-grid--3,
	.l-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.l-grid {
		gap: var(--locus-space-lg);
	}

	.l-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.l-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ── ヘッダー ───────────────────────────── */

.l-header {
	/* スクロールしても画面の上に残る */
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: color-mix(in srgb, var(--locus-color-bg) 94%, transparent);
	border-bottom: 1px solid var(--locus-color-border);
	/* 少し透ける背景の後ろをぼかす（読みやすさのため） */
	backdrop-filter: blur(8px);
}

/*
 * ログイン中は画面の上に管理バーが出るので、ヘッダーをその下に固定する。
 * 管理バーの高さは、PC で 32px、782px 以下で 46px。600px 以下では管理バーが固定されなくなるので 0 に戻す。
 */
.admin-bar .l-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .l-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .l-header {
		top: 0;
	}
}

.l-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--locus-space-md);
	max-width: calc(var(--locus-container-width) + var(--locus-gutter) * 2);
	min-height: var(--locus-header-height);
	margin-inline: auto;
	padding-inline: var(--locus-gutter);
}

.l-header__site-name {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--locus-color-text);
	text-decoration: none;
}

/* the_custom_logo() が出すロゴ画像。高さをそろえ、横幅は縦横比なりにする */
.l-header__brand .custom-logo {
	display: block;
	width: auto;
	max-height: var(--locus-logo-height);
}

/* スマホ用のメニュー開閉ボタン */
.l-header__toggle {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: var(--locus-space-xs);
	background: none;
	border: 0;
	font-size: 0.625rem;
	font-weight: 700;
	cursor: pointer;
}

/* 三本線のアイコン。真ん中の線を本体、上下の線を ::before と ::after で描く */
.l-header__toggle-icon,
.l-header__toggle-icon::before,
.l-header__toggle-icon::after {
	display: block;
	width: 24px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform var(--locus-transition), background-color var(--locus-transition);
}

.l-header__toggle-icon {
	position: relative;
	margin-block: 7px 0;
}

.l-header__toggle-icon::before,
.l-header__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.l-header__toggle-icon::before {
	top: -7px;
}

.l-header__toggle-icon::after {
	top: 7px;
}

/* 開いているときは「×」の形にする */
.l-header.is-open .l-header__toggle-icon {
	background-color: transparent;
}

.l-header.is-open .l-header__toggle-icon::before {
	transform: translateY(7px) rotate(45deg);
}

.l-header.is-open .l-header__toggle-icon::after {
	transform: translateY(-7px) rotate(-45deg);
}

/*
 * スマホでは、メニューはボタンで開くまで隠しておく。
 * JavaScript が動かない環境ではメニューが開けないが、同じリンクをフッターメニューにも置いて補う。
 */
.l-header__nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--locus-header-height));
	overflow-y: auto;
	padding: var(--locus-space-sm) var(--locus-gutter) var(--locus-space-lg);
	background-color: var(--locus-color-bg);
	border-bottom: 1px solid var(--locus-color-border);
	box-shadow: var(--locus-shadow-lg);
}

.l-header.is-open .l-header__nav {
	display: block;
}

.l-header__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.l-header__menu a {
	display: block;
	padding: var(--locus-space-sm) 0;
	color: var(--locus-color-text);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--locus-color-border);
}

.l-header__menu a:hover,
.l-header__menu .current-menu-item > a {
	color: var(--locus-color-primary);
}

/*
 * メニューの項目をボタンの形にする。
 * 「外観 > メニュー」で項目を開き、「CSS クラス」に is-cta と入れると、この見た目になる。
 * （CSS クラスの欄が見えないときは、メニュー画面右上の「表示オプション」でチェックを入れる）
 */
.l-header__menu .is-cta > a {
	margin-top: var(--locus-space-md);
	padding: var(--locus-space-sm) var(--locus-space-md);
	text-align: center;
	color: var(--locus-color-on-accent);
	background-color: var(--locus-color-accent);
	border-bottom: 0;
	border-radius: var(--locus-radius-pill);
	box-shadow: 0 var(--locus-button-depth) 0 var(--locus-color-accent-dark);
}

/* ボタンの形の項目には、丸の中の矢印を付ける（c-button--arrow と同じ形） */
.l-header__menu .is-cta > a::after {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-left: 0.4em;
	vertical-align: -0.25em;
	background-color: currentColor;
	-webkit-mask: var(--locus-icon-arrow) center / contain no-repeat;
	mask: var(--locus-icon-arrow) center / contain no-repeat;
}

/*
 * メニューのボタンにも光を走らせる（c-button--shine と同じ動き）。
 * 「外観 > メニュー」で、その項目の「CSS クラス」に is-cta と並べて is-shine と入れると動く（例: is-cta is-shine）。
 */
.l-header__menu .is-shine > a {
	position: relative;
	overflow: hidden;
}

.l-header__menu .is-shine > a::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	background: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / 0.55) 50%, transparent 100%);
	transform: translateX(-150%) skewX(-20deg);
	animation: locus-shine 3.2s ease-in-out infinite;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.l-header__menu .is-shine > a::before {
		display: none;
	}
}

.l-header__menu .is-cta > a:hover {
	color: var(--locus-color-on-accent);
	background-color: var(--locus-color-accent-dark);
}

/* PC: メニューを横に並べて常に表示し、開閉ボタンは隠す */
@media (min-width: 1024px) {
	.l-header__toggle {
		display: none;
	}

	.l-header__nav {
		display: block;
		position: static;
		max-height: none;
		overflow: visible;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.l-header__menu {
		display: flex;
		align-items: center;
		gap: var(--locus-space-lg);
	}

	.l-header__menu a {
		padding: var(--locus-space-xs) 0;
		font-size: 0.9375rem;
		border-bottom: 0;
	}

	.l-header__menu .is-cta > a {
		margin-top: 0;
		padding: 0.625rem 1.5rem;
	}
}

/* ── 画面の下に固定する申し込みのバナー（スマホだけ）── */
/*
 * 中身は子テーマの template-parts/floating-cta.php。出し入れは assets/js/floating-cta.js が is-visible を付け外しする。
 * 隠しているときは画面の下の外に置き、visibility: hidden で Tab キーでも選べないようにする
 * （見えないボタンにキーボードの操作が移ると、どこにいるか分からなくなるため）。
 * env(safe-area-inset-bottom) は、iPhone の画面の下の丸い角やホームバーの分の余白。
 */
.l-floating-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	padding: var(--locus-space-xs) var(--locus-gutter) calc(var(--locus-space-xs) + env(safe-area-inset-bottom));
	background-color: color-mix(in srgb, var(--locus-color-bg) 92%, transparent);
	box-shadow: 0 -6px 20px rgb(15 23 42 / 0.1);
	backdrop-filter: blur(8px);
	visibility: hidden;
	transform: translateY(110%);
	transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.l-floating-cta.is-visible {
	visibility: visible;
	transform: none;
	transition: transform 0.3s ease;
}

@media (min-width: 768px) {
	.l-floating-cta {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.l-floating-cta {
		transition: none;
	}
}

/* ── 本文の領域 ──────────────────────────── */

.l-main {
	display: block;
}

/* 見出し帯の下の本文（通常の固定ページ・ブログ一覧など）の上下の余白 */
.l-page-body {
	padding-block: var(--locus-space-xl) var(--locus-section-padding);
}

/* ── フッター ───────────────────────────── */

.l-footer {
	padding-block: var(--locus-space-xl);
	color: var(--locus-color-footer-text);
	background-color: var(--locus-color-footer-bg);
}

.l-footer__inner {
	display: grid;
	gap: var(--locus-space-md);
	max-width: calc(var(--locus-container-width) + var(--locus-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--locus-gutter);
}

/* フッターのロゴ。高さはヘッダーのロゴと同じ（--locus-logo-height） */
.l-footer__brand {
	display: inline-block;
	justify-self: start;
}

.l-footer__brand img {
	display: block;
	width: auto;
	max-height: var(--locus-logo-height);
}

.l-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--locus-space-xs) var(--locus-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.l-footer__menu a {
	color: inherit;
	font-size: var(--locus-font-size-sm);
	text-decoration: none;
}

.l-footer__menu a:hover {
	color: inherit;
	text-decoration: underline;
}

/* 利用規約などへのリンク（template-parts/footer-legal.php）。メニューより一段小さく、控えめに並べる */
.l-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--locus-space-2xs) var(--locus-space-md);
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
	list-style: none;
}

.l-footer__legal a {
	color: inherit;
}

.l-footer__legal a:hover {
	color: inherit;
	text-decoration: none;
}

.l-footer__copyright {
	color: color-mix(in srgb, var(--locus-color-footer-text) 70%, transparent);
}