/*
 * サイト全体の見た目（ヘッダー、フッター、本文の枠、記事）。方針は docs/design.md（第5版）。
 * ブロックごとの見た目は tpc-core プラグインの assets/css/blocks.css にある。
 *
 * 色・書体・文字の大きさ・余白・幅・角丸・罫線は theme.json のトークンだけを使い、ここで値を決めない。
 *
 * 余白の段階（小さい順）：項目 item < 中身 inner < ブロック block < まとまり group < モジュール module
 * 幅：すべてのページで同じ枠（width--wide）。ヘッダー・見出し・本文の左右の端をそろえる。要素ごとに max-width を付けない
 */
:root {
	--tpc-ink: var(--wp--preset--color--ink);
	--tpc-paper: var(--wp--preset--color--paper);
	--tpc-accent: var(--wp--preset--color--accent);
	--tpc-rule: var(--wp--preset--color--rule);
	--tpc-sub: var(--wp--preset--color--sub);
	--tpc-heading: var(--wp--preset--font-family--heading);
	--tpc-body: var(--wp--preset--font-family--body);
	--tpc-bold: var(--wp--custom--weight--heading);
	--tpc-regular: var(--wp--custom--weight--body);
	--tpc-line: var(--wp--custom--line--width) solid var(--tpc-rule);
	--tpc-line-strong: var(--wp--custom--line--strong) solid var(--tpc-ink);
	--sp-item: var(--wp--custom--space--item);
	--sp-inner: var(--wp--custom--space--inner);
	--sp-block: var(--wp--custom--space--block);
	--sp-group: var(--wp--custom--space--group);
	--sp-module: var(--wp--custom--space--module);
	--fs-small: var(--wp--preset--font-size--small);
	--fs-h3: var(--wp--preset--font-size--large);
	--fs-h2: var(--wp--preset--font-size--x-large);
	--fs-h1: var(--wp--preset--font-size--xx-large);
}

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

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

body {
	margin: 0;
	background: var(--tpc-paper);
	color: var(--tpc-ink);
	font-family: var(--tpc-body);
	font-weight: var(--tpc-regular);
	/* 日本語は文節で改行し、行頭・行末の禁則を厳しくする（対応ブラウザでのみ効く） */
	word-break: auto-phrase;
	line-break: strict;
	overflow-wrap: break-word;
}
/* 太字は見出し・施設名・今日の段階だけ */
b, strong { font-weight: var(--tpc-regular); }
h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-heading { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
time, .tpc-num { font-variant-numeric: tabular-nums; }

/* リンクは紺の下線。朱は使わない（朱は「今日」とツバメだけ） */
a { color: var(--tpc-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--tpc-ink);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--small);
}

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

.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > .site-main { flex: 1 0 auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ヘッダー：題字（ツバメとサイト名）と季節のモチーフ */
.site-header { padding-top: 14px; padding-bottom: 14px; border-bottom: var(--tpc-line); }
.site-header__inner { min-height: 44px; gap: var(--sp-inner); }
.site-brand { gap: var(--sp-item); min-width: 0; }
.site-logo {
	margin: 0;
	font-family: var(--tpc-heading);
	font-weight: var(--tpc-bold);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: .04em;
}
.site-logo a { color: var(--tpc-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.site-logo a::before {
	content: "";
	flex: none;
	width: 44px;
	height: 33px;
	background: url("../img/logo-mark.svg") no-repeat center / contain;
}
.site-nav { font-size: 14px; gap: 20px; }
.site-nav .wp-block-navigation__container { flex-wrap: nowrap; gap: 20px; white-space: nowrap; }
.site-nav a { color: var(--tpc-ink); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ 本文の枠と余白の段階 */
.site-main { padding-top: var(--sp-block); padding-bottom: var(--sp-module); }
.site-main > * { margin-block: 0; }
/*
 * 余白の流れ（.site-main の直下と、固定ページの本文 post-content の直下で同じにする）
 * 頭（広告表記・パンくず・見出し）どうしは近く → 見出しの次は「まとまり」→ モジュールどうしは「モジュール」
 */
:is(.site-main, .site-main > .wp-block-post-content) > * { margin-block: 0; }
:is(.site-main, .site-main > .wp-block-post-content) > * + * { margin-block-start: var(--sp-item); }
:is(.site-main, .site-main > .wp-block-post-content) > :is(h1, .wp-block-post-title, .tpc-heading, .tpc-hero, .entry-meta, .tpc-status) + * { margin-block-start: var(--sp-group); }
.site-main > .wp-block-post-title + .entry-meta { margin-block-start: var(--sp-item); }
:is(.site-main, .site-main > .wp-block-post-content) > * + :is(.tpc-panel, .tpc-layout, .tpc-grid2, .tpc-split, .tpc-ad, .tpc-spot-table) { margin-block-start: var(--sp-group); }
:is(.site-main, .site-main > .wp-block-post-content) > :is(.tpc-panel, .tpc-layout, .tpc-grid2, .tpc-split, .tpc-ad, .tpc-spot-table, .tpc-spot-body, .panel) + * { margin-block-start: var(--sp-module); }

.site-main h1,
.site-main .wp-block-post-title {
	font-family: var(--tpc-heading);
	font-weight: var(--tpc-bold);
	font-size: var(--fs-h1);
	line-height: 1.35;
	letter-spacing: .02em;
}
.lede { color: var(--tpc-sub); font-size: var(--wp--preset--font-size--medium); line-height: 1.8; margin: var(--sp-item) 0 0; }
.lede a { color: var(--tpc-sub); white-space: nowrap; margin-left: .5em; }

/* 記事・固定ページの本文（幅はページの枠で決める。中の要素には幅を付けない） */
.entry-body > :first-child { margin-top: 0; }
.entry-body > :last-child { margin-bottom: 0; }
.entry-body > * + * { margin-block-start: var(--sp-inner); }
.entry-body h2 {
	font-size: var(--fs-h2);
	margin: var(--sp-module) 0 var(--sp-inner);
	padding-top: var(--sp-inner);
	border-top: var(--tpc-line-strong);
}
.entry-body > h2:first-child { margin-top: 0; }
.entry-body h3 { font-size: var(--fs-h3); margin: var(--sp-group) 0 var(--sp-item); }
.entry-body p, .entry-body li { line-height: 1.9; }
.entry-body ul, .entry-body ol { padding-left: 1.4em; }
.entry-body li + li { margin-top: var(--sp-item); }
.entry-body .wp-block-table { margin-inline: 0; }
.entry-body table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.entry-body .wp-block-table th, .entry-body .wp-block-table td { border: 0; border-bottom: var(--tpc-line); padding: 10px 12px; text-align: left; }
.entry-body .wp-block-table thead { border-bottom: 0; }
.entry-body .wp-block-table thead th { font-weight: var(--tpc-regular); color: var(--tpc-sub); font-size: var(--fs-small); border-bottom: var(--tpc-line-strong); }
/* 運営者が書き換える前の案内（運営者情報ページの枠） */
.tpc-fill-in { color: var(--tpc-sub); border-left: var(--tpc-line-strong); border-left-color: var(--tpc-rule); padding-left: var(--sp-inner); }
.entry-meta { color: var(--tpc-sub); font-size: var(--fs-small); gap: var(--sp-inner); }
.panel > .wp-block-heading { font-size: var(--fs-h2); margin: 0 0 var(--sp-inner); padding-top: var(--sp-inner); border-top: var(--tpc-line-strong); }

/* 記事の一覧 */
.post-list .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.post-list .wp-block-post { padding: 14px 0; margin: 0; border-bottom: var(--tpc-line); }
.post-list .wp-block-post-title { font-size: var(--wp--preset--font-size--medium); margin: 0; }
.post-list .wp-block-post-title a { text-decoration: none; }
.post-list .wp-block-post-title a:hover { text-decoration: underline; }
.post-list .wp-block-post-date { color: var(--tpc-sub); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.wp-block-query-pagination { font-size: 14px; gap: var(--sp-item); margin-top: var(--sp-inner); }

/* フッター：紺の面。上辺は直線 */
.site-footer {
	background: var(--tpc-ink);
	color: var(--tpc-paper);
	font-size: var(--fs-small);
	line-height: 1.85;
	padding-top: var(--sp-group);
	padding-bottom: var(--sp-group);
}
.site-footer p { margin: 0 0 var(--sp-item); }
.site-footer a { color: var(--tpc-paper); }
.site-footer__links a { display: inline-block; margin-right: 1.2em; }
.site-footer__name { margin-block: var(--sp-block) 0; font-family: var(--tpc-heading); font-weight: var(--tpc-bold); font-size: var(--fs-h3); color: var(--tpc-paper); letter-spacing: .04em; }
.site-footer__tagline { margin-block: 2px 0 !important; }

@media (max-width: 599px) {
	.site-nav .wp-block-navigation-item.site-nav__today { display: none; }
	.site-logo { font-size: 18px; }
	.site-logo a { gap: 6px; }
	.site-logo a::before { width: 38px; height: 28px; }
	.site-nav { font-size: 13px; }
	.site-main h1,
	.site-main .wp-block-post-title { font-size: var(--fs-h2); }
	.entry-body h2 { font-size: var(--fs-h3); }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}