/*
 * プロジェクト独自スタイル
 * ------------------------------------------------------------------
 *  1. 固定（sticky）ヘッダー
 *  2. 日本語タイポグラフィの調整
 *  3. 可視化ページ用 iframe 埋め込み（Looker Studio / Power BI: 1280 x 900）
 *  4. 汎用ユーティリティ
 * ------------------------------------------------------------------
 */

/* ============================================================
 * 1. 固定ヘッダー
 * ============================================================ */

:root {
	--project-header-height: 84px;
	--project-header-padding-block: 12px;
	--project-header-offset: 0px;
}

/* テンプレートパート header をページ上部に固定表示 */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > header {
	position: sticky;
	top: var(--project-header-offset);
	z-index: 100;
	background-color: var(--wp--preset--color--base-2, #fff);
	border-bottom: 1px solid var(--wp--preset--color--accent-5, #dde4ec);
	box-shadow: 0 1px 12px rgba(22, 32, 46, 0.06);
	backdrop-filter: saturate(180%) blur(8px);
}

/* 管理バー表示時はその分だけ下げる */
body.admin-bar {
	--project-header-offset: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--project-header-offset: 46px;
	}
}

/*
 * ヘッダーの中身を上下中央に揃える。
 * .site-header__inner 自体は通常のブロック（constrained レイアウト）のまま扱い、
 * 中の行（サイトタイトル｜ナビゲーション）に min-height と align-items を与える。
 * ここを flex にすると、行の left/right auto マージンが効いて
 * 横幅が内容幅に縮み、全体が中央寄せになってしまうため。
 */
.site-header__inner > .wp-block-group {
	min-height: calc(var(--project-header-height) - 2 * var(--project-header-padding-block));
	align-items: center;
}

.site-nav .wp-block-navigation__container,
.site-nav > ul {
	align-items: center;
}

/* ヘッダー内ナビゲーション */

/*
 * メニュー項目は日本語＋英語の2段組み。
 * 英語表記（.nav-label__en）は functions.php の
 * spatial_inequality_nav_bilingual() が出力します。
 */
.wp-block-navigation-item__content {
	text-decoration: none;
}

.wp-block-navigation-item__content:has(.nav-label__en) {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 1px;
}

/* :has() 非対応ブラウザ向けのフォールバック（強制改行） */
.nav-label__en {
	display: block;
}

.site-nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.35;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

/* 2段目の英語表記 */
.nav-label__en {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast-2, #4a5765);
	white-space: nowrap;
	transition: color 0.15s ease;
}

.wp-block-navigation-item__content:hover .nav-label__en,
.wp-block-navigation-item__content:focus .nav-label__en {
	color: inherit;
}

/* 日本語ラベル側 */
.site-nav .wp-block-navigation-item__label {
	line-height: 1.35;
}

.site-nav .wp-block-navigation-item__content:hover,
.site-nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent-2, #3c6e9f);
	border-bottom-color: var(--wp--preset--color--accent-2, #3c6e9f);
}

/* 現在表示中のページを強調 */
.site-nav .current-menu-item > .wp-block-navigation-item__content,
.site-nav .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent, #1b3a5c);
	border-bottom-color: var(--wp--preset--color--accent, #1b3a5c);
}

/* モバイル時のオーバーレイメニュー */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: calc(var(--project-header-offset) + 2rem);
}

.wp-block-navigation__responsive-container.is-menu-open .nav-label__en {
	font-size: 0.8rem;
	color: var(--wp--preset--color--contrast-2, #4a5765);
}

/* 画面が狭いときはメニュー項目の間隔を詰める */
@media (max-width: 1100px) {
	.site-nav {
		--wp--style--block-gap: 1.25rem;
	}

	.site-nav .wp-block-navigation-item__content {
		font-size: 0.85rem;
	}

	.nav-label__en {
		font-size: 0.64rem;
	}
}

/* フッターのナビゲーション（縦並び）の日英併記 */
.wp-block-template-part footer .nav-label__en,
footer .nav-label__en {
	color: rgba(255, 255, 255, 0.72);
}

/* アンカーリンク移動時に固定ヘッダーへ隠れないようにする */
:where(.wp-site-blocks) :where(h1, h2, h3, h4, [id]) {
	scroll-margin-top: calc(var(--project-header-height) + var(--project-header-offset) + 1rem);
}

/* ============================================================
 * 2. 日本語タイポグラフィ
 * ============================================================ */

body {
	font-feature-settings: "palt" 1;
}

.wp-site-blocks p,
.wp-site-blocks li {
	line-height: 1.9;
	letter-spacing: 0.02em;
}

.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4 {
	line-height: 1.5;
	letter-spacing: 0.01em;
}

/* 日本語では単語途中で折り返さない */
.wp-site-blocks p,
.wp-site-blocks li,
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3 {
	word-break: normal;
	overflow-wrap: anywhere;
	line-break: strict;
}

/*
 * トップページのヒーロー見出し。
 * 2行（「人口動態予測に基づく」＋「空間格差の解消に向けたシナリオ」）が
 * それぞれ1行に収まるサイズに抑える。
 */
.hero-title {
	font-size: clamp(1.7rem, 3.5vw, 2.7rem);
	line-height: 1.45;
	letter-spacing: 0.005em;
}

/* ヒーローの画像（正方形） */
.hero-figure img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	border-radius: 6px;
}

/*
 * ヘッダーの英文サイトタイトル。
 * 文が長いため、ヘッダー内では少し小さめにして1行に収める。
 */
.site-header__inner .subtitle-en {
	font-size: 0.8rem;
	letter-spacing: 0.005em;
}

@media (max-width: 1240px) {
	.site-header__inner .subtitle-en {
		font-size: 0.72rem;
	}
}

/* 英文タイトル（サブタイトル）用 */
.subtitle-en {
	font-style: italic;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast-2, #4a5765);
}

/* ============================================================
 * 3. 可視化ページ用 iframe 埋め込み
 *    Looker Studio（Google データポータル）/ Power BI
 *    基準サイズ: 横 1280px × 縦 900px
 * ============================================================ */

.viz-embed {
	--viz-width: 1280;
	--viz-height: 900;

	width: 100%;
	max-width: calc(var(--viz-width) * 1px);
	margin-inline: auto;
	margin-block: var(--wp--preset--spacing--40, 2rem);
}

.viz-embed__frame {
	position: relative;
	width: 100%;
	aspect-ratio: var(--viz-width) / var(--viz-height);
	background-color: var(--wp--preset--color--base, #f7f8fa);
	border: 1px solid var(--wp--preset--color--accent-5, #dde4ec);
	border-radius: 6px;
	overflow: hidden;
}

/* aspect-ratio 非対応ブラウザ向けフォールバック（指定サイズから比率を計算） */
@supports not (aspect-ratio: 1280 / 900) {
	.viz-embed__frame {
		height: 0;
		padding-bottom: calc(var(--viz-height) / var(--viz-width) * 100%);
	}
}

.viz-embed__frame > iframe,
.viz-embed__frame > embed,
.viz-embed__frame > object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.viz-embed__caption {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	color: var(--wp--preset--color--contrast-2, #4a5765);
}

/*
 * 縮小させず 1280 x 900 の実寸で表示したい場合（横スクロール）。
 * 使い方: <div class="viz-embed is-fixed">…</div>
 */
.viz-embed.is-fixed {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.viz-embed.is-fixed .viz-embed__frame {
	width: calc(var(--viz-width) * 1px);
	height: calc(var(--viz-height) * 1px);
	aspect-ratio: auto;
	padding-bottom: 0;
	flex: 0 0 auto;
}

/*
 * サイズのバリエーション。
 * --viz-width / --viz-height を差し替えるだけで、
 * 最大幅・縦横比・原寸表示（is-fixed）がまとめて切り替わる。
 */

/* 本文幅にそろえた 780 x 900 版 */
.viz-embed.is-780 {
	--viz-width: 780;
	--viz-height: 900;
}

/* 本文幅・横長（780 x 540）版 */
.viz-embed.is-780-wide {
	--viz-width: 780;
	--viz-height: 540;
}

/* Power BI は縦長になりがちなので比率だけ差し替えるバリエーション */
.viz-embed.is-powerbi {
	--viz-height: 720;
}

/*
 * ブロックエディタの「カスタム HTML」や「埋め込み」ブロックに直接 iframe を
 * 貼った場合も、可視化ページ内であれば同じサイズ感に揃える。
 */
.page-visualization .wp-block-html > iframe,
.page-visualization .wp-block-embed iframe {
	display: block;
	width: 100%;
	max-width: 1280px;
	height: 900px;
	margin-inline: auto;
	border: 1px solid var(--wp--preset--color--accent-5, #dde4ec);
	border-radius: 6px;
}

@media (max-width: 1320px) {
	.page-visualization .wp-block-html > iframe,
	.page-visualization .wp-block-embed iframe {
		height: 70.3125vw;
		max-height: 900px;
	}
}

/* 可視化ページはフル幅で使うため左右余白を最小限に */
.page-visualization .viz-section {
	padding-inline: var(--wp--preset--spacing--20, 1rem);
}

/* ============================================================
 * 4. ユーティリティ
 * ============================================================ */

/* メンバー一覧などのカード */
.member-card {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--base-2, #fff);
	border: 1px solid var(--wp--preset--color--accent-5, #dde4ec);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--30, 1.5rem);
	height: 100%;
}

.member-card > :last-child {
	margin-bottom: 0;
}

/* 研究体制のカード（枠なしの案内セル） */
.member-card.is-cta {
	justify-content: center;
	background-color: transparent;
	border-color: transparent;
}

/*
 * 研究体制のグリッド。
 * カラムブロックを2行に分けると行ごとに幅が揃わないため、
 * 1つのグリッドにまとめてセル幅と高さを揃えている。
 */
.wp-block-group.team-grid {
	align-items: stretch;
	grid-auto-rows: 1fr;
}

@media (max-width: 1100px) {
	.wp-block-group.team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.wp-block-group.team-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.member-card__role {
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	color: var(--wp--preset--color--contrast-2, #4a5765);
}

/* 論文リスト */
.publication-list li {
	margin-bottom: 1.2em;
	padding-left: 0.2em;
}

.publication-list a {
	word-break: break-all;
}

/* 印刷時は固定ヘッダーを解除 */
@media print {
	.wp-site-blocks > header.wp-block-template-part,
	.wp-site-blocks > header {
		position: static;
		box-shadow: none;
	}
}

/* ============================================================
 * 5. 可視化トップ：サムネイル付きタイル一覧
 * ============================================================ */

/* グリッドの各セル（li）を等高にする */
.wp-block-post-template.viz-tiles {
	list-style: none;
	padding-left: 0;
}

.wp-block-post-template.viz-tiles > li {
	display: flex;
	margin: 0;
}

/* タイル本体 */
.viz-tile {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--base-2, #fff);
	border: 1px solid var(--wp--preset--color--accent-5, #dde4ec);
	border-radius: 8px;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.viz-tile:hover,
.viz-tile:focus-within {
	border-color: var(--wp--preset--color--accent-2, #3c6e9f);
	box-shadow: 0 8px 24px rgba(22, 32, 46, 0.12);
	transform: translateY(-2px);
}

/* サムネイル */
.viz-tile .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--accent-5, #dde4ec);
}

.viz-tile .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.viz-tile:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/*
 * アイキャッチ画像が未設定の場合のプレースホルダー。
 * post-featured-image ブロックは画像が無いと何も出力しないため、
 * :has() で判定してタイル上部にグラデーションを描画する。
 */
.viz-tile:not(:has(.wp-block-post-featured-image img))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
	background-image: linear-gradient(135deg, var(--wp--preset--color--accent, #1b3a5c) 0%, var(--wp--preset--color--accent-2, #3c6e9f) 100%);
}

/* :has() 非対応ブラウザでは、画像の枠だけ確保する */
@supports not selector(:has(*)) {
	.viz-tile .wp-block-post-featured-image {
		min-height: 1px;
	}
}

/* タイルの本文側 */
.viz-tile__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1rem 1.15rem 1.25rem;
}

.viz-tile__date {
	margin: 0;
}

.viz-tile__title {
	margin: 0;
}

.viz-tile__title a {
	text-decoration: none;
}

.viz-tile__title a:hover,
.viz-tile__title a:focus {
	text-decoration: underline;
}

/* タイル全体をクリック可能に見せる（リンク自体はタイトル・画像） */
.viz-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-post-template.viz-tiles > li {
	position: relative;
}

.viz-tile__excerpt {
	margin: 0;
	color: var(--wp--preset--color--contrast-2, #4a5765);
}

.viz-tile__excerpt p {
	margin: 0;
	line-height: 1.8;
}

/* 「ダッシュボードを開く」 */
.viz-tile__more {
	margin: auto 0 0;
	padding-top: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-2, #3c6e9f);
}

.viz-tile__more::after {
	content: "\2192";
	padding-inline-start: 0.35em;
	display: inline-block;
	transition: transform 0.2s ease;
}

.viz-tile:hover .viz-tile__more::after {
	transform: translateX(3px);
}

/* 一覧へ戻るリンク（個別の可視化ページ） */
.viz-backlink {
	margin-bottom: var(--wp--preset--spacing--30, 1.5rem);
	font-size: var(--wp--preset--font-size--small, 0.9rem);
}

.viz-backlink a {
	text-decoration: none;
	color: var(--wp--preset--color--accent-2, #3c6e9f);
}

.viz-backlink a:hover {
	text-decoration: underline;
}

/* 狭い画面では 2 列 → 1 列 */
@media (max-width: 781px) {
	.wp-block-post-template.viz-tiles.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * 6. 本文の日英併記
 *
 *   ブロックエディタの「スタイル」から選べます。
 *     ・段落 → 「英語（見出しの下）」  .is-style-en-under-heading
 *     ・段落 / リスト → 「英語（本文）」 .is-style-en-body
 *   文中の一部だけ英語にしたいときは、追加CSSクラスに .lang-en を指定します。
 *
 *   :where() で指定した宣言は詳細度 0 なので、
 *   エディタでフォントサイズや色を指定すればそちらが優先されます。
 * ============================================================ */

/* --- 見出しの直下に置く英語行 --- */

:where(.is-style-en-under-heading) {
	font-size: 1rem;
}

.is-style-en-under-heading {
	font-style: italic;
	letter-spacing: 0.01em;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2, #4a5765);
}

/* 見出しの直後に置かれたときは、見出しとの間隔を詰める */
:is(h1, h2, h3, h4, h5, h6) + .is-style-en-under-heading,
:is(.wp-block-heading, .wp-block-post-title) + .is-style-en-under-heading {
	margin-top: 0.35rem;
	margin-bottom: var(--wp--preset--spacing--20, 1rem);
}

/* --- 本文の英訳ブロック --- */

:where(.is-style-en-body) {
	font-size: 0.95rem;
}

.is-style-en-body {
	padding-inline-start: 0.9rem;
	border-inline-start: 2px solid var(--wp--preset--color--accent-5, #dde4ec);
	color: var(--wp--preset--color--contrast-2, #4a5765);
	line-height: 1.8;
	letter-spacing: 0.01em;
}

:is(ul, ol).is-style-en-body {
	padding-inline-start: 2.4rem;
}

.is-style-en-body li {
	line-height: 1.8;
	margin-bottom: 0.3em;
}

/* 日本語の段落 → 英訳 と続くときは間隔を少し詰める */
p:not(.is-style-en-body) + .is-style-en-body,
ul:not(.is-style-en-body) + .is-style-en-body,
ol:not(.is-style-en-body) + .is-style-en-body {
	margin-top: 0.75rem;
}

/* --- 文中の一部だけ英語にする --- */

.lang-en {
	font-style: italic;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast-2, #4a5765);
}

/*
 * 2カラム併記の英文は分量が多く、イタリックだと読みにくいため通常字形にする。
 * （短いラベルはイタリック、長文は通常字形、という使い分け）
 */
.bilingual-columns .lang-en {
	font-style: normal;
}

/* 見出しそのものに .lang-en を付けた場合（2カラム併記など） */
:is(h1, h2, h3, h4, h5, h6).lang-en {
	font-style: normal;
	color: inherit;
	opacity: 1;
}

/* 見出しの中で使う場合は色を継承する（イタリックのみ） */
:is(h1, h2, h3, h4, h5, h6) .lang-en {
	color: inherit;
	opacity: 0.72;
	font-size: 0.7em;
	font-weight: 400;
}

/* 図表キャプションの英語 */
.wp-element-caption .lang-en,
figcaption .lang-en {
	display: block;
	font-size: 0.95em;
}

/* --- 2カラム併記（左：日本語／右：英語） --- */

.bilingual-columns .wp-block-column:last-child {
	color: var(--wp--preset--color--contrast-2, #4a5765);
	font-size: 0.95rem;
	border-inline-start: 1px solid var(--wp--preset--color--accent-5, #dde4ec);
	padding-inline-start: var(--wp--preset--spacing--30, 1.5rem);
}

.bilingual-columns .wp-block-column:last-child :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--contrast-2, #4a5765);
}

/* 狭い画面では区切り線を上側に移す */
@media (max-width: 781px) {
	.bilingual-columns .wp-block-column:last-child {
		border-inline-start: 0;
		border-top: 1px solid var(--wp--preset--color--accent-5, #dde4ec);
		padding-inline-start: 0;
		padding-top: var(--wp--preset--spacing--20, 1rem);
	}
}

/* ============================================================
 * 7. 図版（図1：問題意識と研究目的）
 * ============================================================ */

/* 図は本文と同じ幅に揃える */
.figure-concept {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size, 780px);
}

.figure-concept img {
	width: 100%;
	height: auto;
	display: block;
}

.figure-concept .wp-element-caption {
	margin-top: 0.9rem;
	text-align: center;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	color: var(--wp--preset--color--contrast-2, #4a5765);
}

/* 狭い画面では図が小さくなりすぎるため、横スクロールで原寸を保つ */
@media (max-width: 680px) {
	.figure-concept {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.figure-concept img {
		width: 680px;
		max-width: none;
	}
}