/**
 * リセット + 全体骨格（1カラム / ヘッダー / フッター）。
 * 値はすべて tokens.css のカスタムプロパティ経由で参照する。
 *
 * @package goonies
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/* ページ表示のフェードイン（design-policy.md 9章）。全ページ共通。JSに依存せずCSSアニメーション
   のみで実現する。初期状態をopacity:0にせず fromのみ0にすることで、アニメーション未対応環境でも
   bodyは最初から通常表示のまま（no-JS環境と同じ挙動） */
@keyframes goonies-page-fade-in {
	from {
		opacity: 0;
	}
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--c-page);
	color: var(--c-ink);
	font-family: var(--f-body);
	font-weight: var(--fw-body-regular);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-variant-numeric: tabular-nums;
	animation: goonies-page-fade-in var(--duration-page-fade-in) var(--ease-standard);
}

img,
picture,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--c-ink);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--c-ink);
	color: var(--c-paper);
	padding: 8px 16px;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

/* 全ページ共通のセクションラベル（design-policy.md 4章: 2026 SEASON / LEADERS / BATTING など） */
.section-label {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-section-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-gray-50);
	margin: 0 0 16px;
}

/* セクション見出しの英語+日本語2段構成（design-policy.md 4章）。
   ヘッダーのブランド表記（.site-header__logo-en/-ja）、ページタイトル
   （.entry-title__en/__ja）と同じ「英語が主、日本語を淡く添える」文法。
   現時点ではトップページのみ（inc/section-heading.php）。他ページの
   .section-label は移行方針が未確定のため現状維持（docs/session-restart.md） */
.section-heading {
	display: flex;
	align-items: baseline;
	column-gap: 8px;
	margin: 0 0 16px;
}

.section-heading__en {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-section-heading-en);
	letter-spacing: var(--ls-section-heading);
	text-transform: uppercase;
	color: var(--c-ink);
}

.section-heading__ja {
	font-family: var(--f-body);
	font-weight: var(--fw-body-regular);
	font-size: var(--fs-section-heading-ja);
	color: var(--c-gray-50);
}

/* セクション内の写真（design-policy.md 8章「セクション内の写真」）。HEROは100vw+負のマージンで
   全幅ブリードするが、こちらはコンテンツ幅600pxに収めたまま。役割の違いを保つため
   全幅化はしない。全ページ共通で使えるよう汎用クラスにしている。
   直前は.section-labelを想定し、そちら側の余白（margin-bottom: 16px）に任せて
   上マージンは持たない（他セクションのラベル直下と同じ間隔にするため）。
   直後の要素との間（セクション内のまとまり間）は24pxを確保する */
.section-photo {
	margin-bottom: var(--space-tier-2);
}

.section-photo__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-none);
}

/* 1カラム骨格。本体は全幅の紙(--c-paper)、中身はヘッダー・フッターと同じ最大幅600pxのコンテナに収める */
.site-main {
	flex: 1 0 auto;
	/* flexアイテムの既定値 min-width: auto は「中身の最小内容幅より縮めない」ため、
	   横スクロールテーブル（width: max-content）が中に入るとページ全体が
	   その幅まで押し広げられ、body ごと横スクロールしてしまう。
	   min-width: 0 でその自動最小幅を無効化し、.stats-table-scroll 側の
	   overflow-x で局所的に収める（flexboxの既知の挙動） */
	min-width: 0;
	background: var(--c-paper);
}

.site-main__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: var(--space-section) var(--space-side-mobile);
}

@media (min-width: 601px) {
	.site-main__inner {
		padding-left: var(--space-side-pc);
		padding-right: var(--space-side-pc);
	}
}

/* ヘッダー：黒帯は全幅、中身は本文と同じ最大幅600pxのコンテナに収めて左右位置を揃える。
   position: sticky で常時画面上部に固定し、スクロール80px超での高さ縮小
   （design-policy.md 9章）が実際に視認できるようにする。境界線は引かない */
.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--c-ink);
	color: var(--c-paper);
}

.site-header__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	height: var(--header-height);
	padding: 0 var(--space-side-mobile);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	transition: height var(--duration-standard) var(--ease-standard);
}

.site-header.is-scrolled .site-header__inner {
	height: var(--header-height-scrolled);
}

/* サイトヘッダーが今どれだけの高さを画面上部に占有しているか（管理バーぶんを含む）を
   1箇所にまとめたカスタムプロパティ。成績テーブルのsticky theadなど、他の要素が
   ヘッダーの下に隠れないようにするための天井位置として、他のCSSファイルから参照する
   （assets/css/stats.css の thead sticky）。#wpadminbar は782px以下では
   position: absolute になりスクロールで流れるため、783px以上のときだけ加味する */
:root {
	--header-sticky-offset: var(--header-height);
}

.site-header.is-scrolled ~ .site-main {
	--header-sticky-offset: var(--header-height-scrolled);
}

@media (min-width: 783px) {
	body.admin-bar .site-header {
		top: 32px;
	}

	body.admin-bar {
		--header-sticky-offset: calc(32px + var(--header-height));
	}

	body.admin-bar .site-header.is-scrolled ~ .site-main {
		--header-sticky-offset: calc(32px + var(--header-height-scrolled));
	}
}

@media (min-width: 601px) {
	.site-header__inner {
		padding-left: var(--space-side-pc);
		padding-right: var(--space-side-pc);
	}
}

.site-header__brand {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	text-decoration: none;
	color: var(--c-paper);
}

.site-header__logo-en {
	font-family: var(--f-display);
	font-weight: var(--fw-display-medium);
	font-size: var(--logo-size);
	letter-spacing: var(--ls-logo);
}

.site-header__logo-ja {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-logo-ja);
	color: var(--c-gray-50);
}

/* モバイルはハンバーガー経由の全画面オーバーレイに置き換える（design-policy.md 6章） */
.site-header__nav {
	display: none;
	align-items: center;
	gap: 16px;
}

.site-header__toggle {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: var(--tap-min);
	height: var(--tap-min);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.site-header__toggle-bar {
	display: block;
	width: 20px;
	height: 1px;
	background: var(--c-paper);
}

@media (min-width: 601px) {
	.site-header__nav {
		display: flex;
	}

	.site-header__toggle {
		display: none;
	}
}

.site-header__menu {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__menu a {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-list-heading);
	text-decoration: none;
	color: var(--c-paper);
}

.site-header__join {
	font-family: var(--f-display);
	font-weight: var(--fw-display-medium);
	font-size: var(--fs-annotation);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-paper);
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	padding: 8px 0;
}

/**
 * モバイルナビの全画面オーバーレイ（design-policy.md 6章）。黒面（--c-ink）、フェードのみ。
 * 閉じている間は visibility:hidden にして、非表示中はTab移動でフォーカスが入らないようにする
 * （opacityだけだとaria-hidden="true"の中にフォーカス可能要素が残ってしまうため）。
 */
.site-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow-y: auto;
	background: var(--c-ink);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--duration-standard) var(--ease-standard),
		visibility var(--duration-standard) var(--ease-standard);
}

.site-nav-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* 全体共通のフォーカスリングは--c-inkだが、この面自体が--c-inkのため見えなくなる。
   黒面（フッターの考え方と同じ）では--c-paperに差し替える */
.site-nav-overlay :focus-visible {
	outline-color: var(--c-paper);
}

.site-nav-overlay__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	margin: 8px 0 0 auto;
	border: 0;
	background: none;
	color: var(--c-paper);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.site-nav-overlay__nav {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 0 var(--space-side-mobile) var(--space-section);
}

.site-nav-overlay__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ヘアラインのみで区切る。カードにしない（design-policy.md 1章）。
   c-gray-15は明面向けのため、暗面（--c-ink）ではc-gray-70で同程度の淡さにする */
.site-nav-overlay__list li {
	border-bottom: 0.5px solid var(--c-gray-70);
}

.site-nav-overlay__list li > a {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	font-family: var(--f-body);
	font-weight: var(--fw-body-medium);
	font-size: var(--fs-article-h2);
	color: var(--c-paper);
	text-decoration: none;
}

/* オーバーレイ表示中は背面のスクロールを止める */
.has-nav-overlay-open {
	overflow: hidden;
}

/* フッター：黒面。コンテンツと同じ1カラム幅に収める */
.site-footer {
	background: var(--c-plane);
	color: var(--c-paper);
}

.site-footer__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: var(--space-section) var(--space-side-mobile);
}

@media (min-width: 601px) {
	.site-footer__inner {
		padding-left: var(--space-side-pc);
		padding-right: var(--space-side-pc);
	}
}

.site-footer__label {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-section-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-gray-50);
	margin: 0 0 16px;
}

.site-footer__text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-paper);
	margin: 0 0 16px;
}

.site-footer__links a {
	color: var(--c-paper);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__copyright {
	font-family: var(--f-display);
	font-size: var(--fs-annotation);
	color: var(--c-gray-35);
	margin: 24px 0 0;
}

/* .post-list はブログ一覧の本実装として assets/css/blog.css に移した */

.empty-state {
	color: var(--c-gray-70);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	margin: 0;
}

/* 固定ページ・個別記事のタイトルと本文。本文幅はコンテンツ最大幅600pxで統一する */
.entry-title {
	font-family: var(--f-body);
	font-weight: var(--fw-body-medium);
	font-size: var(--fs-hero);
	line-height: var(--lh-hero);
	letter-spacing: var(--ls-hero);
	color: var(--c-ink);
	margin: 0 0 24px;
}

/* 英語+日本語の2段構成（design-policy.md 4章）。ヘッダーのブランド表記
   （.site-header__logo-en / -ja）と同じ考え方。.entry-title__en/__ja が入っている場合、
   親.entry-titleのfont-family等は使わず、各spanが自身のスタイルを持つ */
.entry-title__en {
	display: block;
	font-family: var(--f-display);
	font-weight: var(--fw-display-medium);
	font-size: var(--fs-hero);
	line-height: var(--lh-hero);
	letter-spacing: var(--ls-hero);
	text-transform: uppercase;
	color: var(--c-ink);
}

.entry-title__ja {
	display: block;
	margin-top: 4px;
	font-family: var(--f-body);
	font-weight: var(--fw-body-regular);
	font-size: var(--fs-body);
	color: var(--c-gray-50);
}

.entry-content {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink);
}

/* スクロールリビール（design-policy.md 9章）。.js-reveal-init はJSが対応ブラウザでのみ
   付与するため、JS無効・IntersectionObserver非対応の環境では常に表示のまま
   （assets/js/scroll-reveal.js）。1回表示されたら .is-visible が付いたままになる。
   動くのはセクション見出し（.reveal__heading）のみ。本文・リスト・数値は動かさない */
.reveal.js-reveal-init .reveal__heading {
	opacity: 0;
	transform: translateX(-24px);
	transition:
		opacity var(--duration-reveal) var(--ease-standard),
		transform var(--duration-reveal) var(--ease-standard);
}

/* transform: translateX(0) ではなく none にする。値としては同じ見た目だが、
   none以外のtransformを持つ要素は子孫の position: sticky/fixed の基準
   （containing block）をviewportから自分自身にすり替えてしまうため
   （成績テーブルのsticky theadが沈み込む原因になっていた。2026-08-11）。
   遷移前後どちらもtranslateX(-24px)→noneで補間されるため見た目は変わらない */
.reveal.js-reveal-init.is-visible .reveal__heading {
	opacity: 1;
	transform: none;
}