/* ==========================================================================
   wa-press / base.css — 和文組版の基礎
   --------------------------------------------------------------------------
   色・書体・寸法は theme.json のトークン（--wp--preset--* / --wp--custom--*）
   から取る。このファイルは「日本語をきれいに組むために CSS でやること」だけ。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 地の設定
   -------------------------------------------------------------------------- */

body {
	/* 縦書きページで横スクロールが出たときに、縦方向のはみ出しを防ぐ */
	overflow-wrap: break-word;
}

/*
   和紙の地合い。

   512px のシームレスなタイル（tools/texture/washi.php が生成）を 256px で敷く。
   地色を持たないアルファ画像なので、白地の「墨と和紙」でも黒地の「漆黒と金」でも
   同じ1枚が使える。

   position: fixed にしているのは、スクロールしても紙が動かないようにするためと、
   合成レイヤを1枚に固定して再描画を起こさないため。旧サイトのように
   グラデーション26層 + ブレンドモードを本文領域に敷くと、
   スクロールのたびに大面積の再合成が走る。
*/
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	background-image: url("../img/washi.webp");
	background-repeat: repeat;
	background-size: 256px 256px;

	opacity: var(--wp--custom--washi--strength, 1);
}

/* 本文は紙より前に出す */
.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   2. 約物と字送り
   --------------------------------------------------------------------------
   palt  … 横書きのプロポーショナルメトリクス（約物のアキを詰める）
   kern  … 欧文カーニング
   縦書き用の vpal / vkrn は tategaki.css 側で当てる。
   -------------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6),
.wa-palt {
	font-feature-settings: "palt" 1, "kern" 1;
}

/* --------------------------------------------------------------------------
   2.5 太字を使わない
   --------------------------------------------------------------------------
   和文の明朝で太字を使うのは元来の作法ではない。強調は傍点で行う。

   実利もある。自己ホストの明朝は 400 の 1 枚だけを配っており
   （2ウェイトにすると倍の重さになる）、太いウェイトが無い。
   放っておくとブラウザが偽の太字を合成し、和文では線が潰れて汚くなるので、
   合成そのものを禁じ、強調は傍点に置き換える。
   -------------------------------------------------------------------------- */

:where(body) {
	font-synthesis-weight: none;
	-webkit-font-synthesis: none;
}

:where(.wp-block-post-content, .entry-content, main) :where(strong, b) {
	font-weight: inherit;
	text-emphasis: filled sesame currentColor;
	-webkit-text-emphasis: filled sesame currentColor;
	text-emphasis-position: over right;
	-webkit-text-emphasis-position: over right;
}

/*
   text-spacing-trim — 行頭・行末や連続する括弧のアキを自動で詰める。
   InDesign の「約物半角」に相当する挙動を、対応ブラウザでだけ有効にする。
   未対応ブラウザは単に何も起きない（見た目が破綻することはない）。
*/
@supports (text-spacing-trim: trim-start) {
	:where(body) {
		text-spacing-trim: trim-start;
	}
}

/* --------------------------------------------------------------------------
   3. 禁則処理と折り返し
   -------------------------------------------------------------------------- */

:where(p, li, dd, dt, figcaption, blockquote, h1, h2, h3, h4, h5, h6) {
	/* 小書き仮名・長音符を行頭に送らない（strict = JIS の厳格禁則に近い） */
	line-break: strict;

	/* 日本語の途中で不用意に切らない。英単語もむやみに割らない */
	word-break: normal;
	overflow-wrap: normal;
}

/* URL やコードなど、切らないと溢れるものだけ例外にする */
:where(pre, code, kbd, samp, .wa-break-anywhere) {
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   4. 見出し
   -------------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6) {
	/* 和文の見出しは字間を開けたほうが締まる。theme.json の letterSpacing を受ける */
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   5. リンク
   --------------------------------------------------------------------------
   和文で下線をベースラインに密着させると、ひらがなの下端とぶつかって汚い。
   オフセットを取り、線は細くする。
   -------------------------------------------------------------------------- */

:where(.wp-block-post-content, .entry-content, main) a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	text-decoration-skip-ink: auto;
}

/* --------------------------------------------------------------------------
   6. ルビ
   --------------------------------------------------------------------------
   横書きでは親文字の上、縦書きでは右に出る（over が書字方向に追従する）。
   -------------------------------------------------------------------------- */

ruby {
	ruby-position: over;
	ruby-align: space-around;
}

rt {
	font-size: 0.5em;
	letter-spacing: 0;
	font-weight: inherit;
	/* ルビが親文字より目立たないように */
	color: color-mix(in srgb, currentColor 80%, transparent);
}

/* ルビ非対応ブラウザ向けの括弧は出さない */
rp {
	display: none;
}

/* --------------------------------------------------------------------------
   7. 引用・区切り
   -------------------------------------------------------------------------- */

/* 子持ち罫（太い線と細い線の対）。和文組版の伝統的な区切り */
.wp-block-separator.is-style-komochi {
	border: 0;
	block-size: 4px;
	background: none;
	border-block-start: 2px solid var(--wp--preset--color--contrast);
	border-block-end: 1px solid var(--wp--preset--color--contrast);
	padding-block-start: 2px;
	opacity: 1;
	max-inline-size: 8rem;
}

/* --------------------------------------------------------------------------
   8. 罫囲み（旧サイトの is-style-cross-line を引き継ぐ）
   --------------------------------------------------------------------------
   Cocoon 時代の記事本文に 11 箇所入っている。テーマを載せ替えても
   崩れないよう、同じクラス名で受ける。見た目はこのテーマの語彙で作り直す。
   -------------------------------------------------------------------------- */

.is-style-cross-line {
	position: relative;
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--dai);
	line-height: 2;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast);
	border-block: 2px solid var(--wp--preset--color--contrast);
}

/* 左右の留め。角を閉じずに「はさむ」のが和の罫の作法 */
.is-style-cross-line::before,
.is-style-cross-line::after {
	content: "";
	position: absolute;
	inset-block: -2px;
	inline-size: 0;
	border-inline-start: 2px solid var(--wp--preset--color--contrast);
}

.is-style-cross-line::before {
	inset-inline-start: 0.75rem;
}

.is-style-cross-line::after {
	inset-inline-end: 0.75rem;
}

/* --------------------------------------------------------------------------
   9. 選択・フォーカス
   -------------------------------------------------------------------------- */

::selection {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
	color: var(--wp--preset--color--contrast);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 1px;
}

/* --------------------------------------------------------------------------
   10. 画像
   -------------------------------------------------------------------------- */

img,
video {
	max-inline-size: 100%;
	block-size: auto;
}

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

/* --------------------------------------------------------------------------
   11. 動きの抑制
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   12. 印刷
   --------------------------------------------------------------------------
   縦書きのまま印刷すると用紙に収まらないので、印刷時は横組みに戻す。
   -------------------------------------------------------------------------- */

@media print {
	.is-style-tategaki,
	.is-style-tategaki-flow,
	.wa-tate,
	.wa-tate-flow {
		writing-mode: horizontal-tb !important;
		block-size: auto !important;
		inline-size: auto !important;
		overflow: visible !important;
	}

	body {
		background-image: none;
	}
}