/*
 * MOVER Corporate — Policy / Corporate Statement pages. v0.8.0
 *
 * 読み込み: inc/policy.php の一覧（privacy-policy / sdgs / my-jinkensengen / food-active / consumer）で、
 *           デフォルトテンプレートの固定ページのときだけ（inc/enqueue.php）。
 * スコープ:  body.mv-policy-page 配下だけ。HOME・下層ページ・投稿には影響しない。
 * 構造:      template-parts/content-policy.php
 *            .mv-policy-hero（Canvas・小さめ）→ .mv-policy-body（White・本文 760px）→ .mv-policy-back（戻り導線）
 *
 * 方針: 方針・宣言ページなので派手にしない。本文の読みやすさ（行長・行間・見出しの階層）を優先。
 *       カード・影・グラデーションなし。値は theme.json 由来の変数のみ。!important なし。
 */

/* ------------------------------------------------------------------
 * 1. 枠
 * ------------------------------------------------------------------ */

/* HERO をヘッダー直下に置くため、通常ページの main の上下余白を外す */
.mv-policy-page .site-main {
	padding-block: 0;
}

.mv-policy-page .entry--policy {
	word-break: auto-phrase;
}

/* ------------------------------------------------------------------
 * 2. HERO（小さめ）
 * ------------------------------------------------------------------ */
.mv-policy-page .mv-policy-hero {
	padding-block: var(--mover-space-2xl) var(--mover-space-xl);
	background-color: var(--mover-canvas);
	border-bottom: 1px solid var(--mover-border);
}

/* ラベル: Signal の小さな四角 + 英字（HOME・下層ページと同じ見た目） */
.mv-policy-page .mv-policy-hero__label {
	display: flex;
	align-items: center;
	gap: var(--mover-space-xs);
	margin: 0 0 var(--mover-space-md);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.1em;
	color: var(--mover-muted);
}

.mv-policy-page .mv-policy-hero__label::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	background-color: var(--mover-signal);
}

.mv-policy-page .mv-policy-hero__title {
	margin: 0;
	font-size: clamp(28px, 7vw, 36px);
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-wrap: pretty;
}

/* ------------------------------------------------------------------
 * 3. 本文（長文の読みやすさ）
 * ------------------------------------------------------------------ */
.mv-policy-page .mv-policy-body {
	padding-block: var(--mover-space-xl) var(--mover-space-2xl);
	background-color: var(--mover-white);
}

.mv-policy-page .entry-content {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.95;
	letter-spacing: 0.02em;
}

.mv-policy-page .entry-content :is(p, li) {
	text-wrap: pretty;
}

.mv-policy-page .entry-content p {
	margin-block: 0 var(--mover-space-lg);
}

/* 各宣言の正式な表題: ページタイトル（h1）の下の副題として控えめに。
   v0.8.1 から本文側は <p class="mv-policy-subtitle">（h1 の重複を解消）。
   貼り直し前の本文（h1 のまま）でも同じ見た目になるよう h1 も残す */
.mv-policy-page .entry-content :is(h1, .mv-policy-subtitle) {
	margin-block: 0 var(--mover-space-lg);
	padding-block-end: var(--mover-space-md);
	border-bottom: 1px solid var(--mover-border);
	color: var(--wp--preset--color--ink);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.5;
	text-wrap: pretty;
}

/* h2: 上に余白 + 細い罫線 + 短い Signal の線で区切る */
.mv-policy-page .entry-content h2 {
	position: relative;
	margin-block: var(--mover-space-2xl) var(--mover-space-md);
	padding-block-start: var(--mover-space-lg);
	border-top: 1px solid var(--mover-border);
	font-size: 1.25rem;
	line-height: 1.45;
	text-wrap: pretty;
}

.mv-policy-page .entry-content h2::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 40px;
	height: 3px;
	background-color: var(--mover-signal);
}

.mv-policy-page .entry-content h3 {
	margin-block: var(--mover-space-xl) var(--mover-space-sm);
	font-size: 1.125rem;
	line-height: 1.5;
	text-wrap: pretty;
}

/* 見出しが続く箇所（本文のない見出し）でも詰まりすぎない */
.mv-policy-page .entry-content :is(h2, h3) + :is(h2, h3) {
	margin-block-start: var(--mover-space-lg);
}

.mv-policy-page .entry-content > :first-child,
.mv-policy-page .entry-content > :first-child > :first-child,
.mv-policy-page .entry-content > :first-child > :first-child > :first-child {
	margin-block-start: 0;
}

/* 箇条書き */
.mv-policy-page .entry-content :is(ul, ol) {
	margin-block: 0 var(--mover-space-lg);
	padding-inline-start: 1.4em;
}

.mv-policy-page .entry-content li + li {
	margin-block-start: var(--mover-space-xs);
}

.mv-policy-page .entry-content ul > li::marker {
	color: var(--mover-signal-dark);
}

/* リンク: 下線で分かるように。長い URL は折り返す */
.mv-policy-page .entry-content a {
	color: var(--mover-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	overflow-wrap: anywhere;
}

.mv-policy-page .entry-content a:hover,
.mv-policy-page .entry-content a:focus-visible {
	color: var(--mover-signal-dark);
}

/* 画像: はみ出さない・中央・小さな角丸 */
.mv-policy-page .entry-content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--mover-radius-sm);
}

.mv-policy-page .entry-content p:has(> img:only-child) {
	margin-block: var(--mover-space-lg);
}

/* 旧テーマの入れ物（SDGs ページの header#postHeader 等）に余計な幅・余白を持たせない */
.mv-policy-page .entry-content :is(#postHeader, #postHeaderInner) {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------
 * 4. 自動目次（Easy Table of Contents）— 本文の先頭に置かれる。デザインだけ揃える
 * ------------------------------------------------------------------ */
.mv-policy-page #ez-toc-container {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 var(--mover-space-2xl);
	padding: var(--mover-space-md) var(--mover-space-lg);
	background: var(--mover-canvas);
	border: 1px solid var(--mover-border);
	border-radius: var(--mover-radius-sm);
	box-shadow: none;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.7;
}

.mv-policy-page #ez-toc-container .ez-toc-title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mover-ink);
}

.mv-policy-page #ez-toc-container ul {
	margin: 0;
}

.mv-policy-page #ez-toc-container nav > ul {
	margin-block-start: var(--mover-space-sm);
	padding-inline-start: 0;
}

.mv-policy-page #ez-toc-container li {
	margin: 0;
}

.mv-policy-page #ez-toc-container a {
	display: inline-block;
	padding-block: 0.3em;
	color: var(--mover-ink);
	text-decoration: none;
}

.mv-policy-page #ez-toc-container a:hover,
.mv-policy-page #ez-toc-container a:focus-visible {
	color: var(--mover-signal-dark);
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * 5. 戻り導線（会社概要 / HOME）
 * ------------------------------------------------------------------ */
.mv-policy-page .mv-policy-back {
	padding-block: var(--mover-space-xl);
	background-color: var(--mover-canvas);
	border-top: 1px solid var(--mover-border);
}

.mv-policy-page .mv-policy-back__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--mover-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mv-policy-page .mv-policy-back__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: var(--mover-tap-size);
	font-weight: 700;
	color: var(--mover-ink);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
}

.mv-policy-page .mv-policy-back__arrow {
	display: inline-block;
	transition: transform var(--mover-duration) var(--mover-easing);
}

.mv-policy-page .mv-policy-back__link:hover,
.mv-policy-page .mv-policy-back__link:focus-visible {
	color: var(--mover-signal-dark);
}

.mv-policy-page .mv-policy-back__link:hover .mv-policy-back__arrow,
.mv-policy-page .mv-policy-back__link:focus-visible .mv-policy-back__arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.mv-policy-page .mv-policy-back__link:hover .mv-policy-back__arrow,
	.mv-policy-page .mv-policy-back__link:focus-visible .mv-policy-back__arrow {
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * 6. Breakpoints
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
	.mv-policy-page .mv-policy-hero {
		padding-block: var(--mover-space-section) var(--mover-space-2xl);
	}

	.mv-policy-page .mv-policy-hero__title {
		font-size: clamp(36px, 4vw, 44px);
	}

	.mv-policy-page .mv-policy-body {
		padding-block: var(--mover-space-2xl) var(--mover-space-section);
	}

	.mv-policy-page .entry-content {
		font-size: 1.125rem;
	}

	.mv-policy-page .entry-content :is(h1, .mv-policy-subtitle) {
		font-size: 1.75rem;
	}

	.mv-policy-page .entry-content h2 {
		font-size: 1.5rem;
	}

	.mv-policy-page .entry-content h3 {
		font-size: 1.25rem;
	}
}