/* ==========================================================================
   wa-press / tategaki.css — 縦書きエンジン
   --------------------------------------------------------------------------
   前提となる座標の話（ここを間違えると全部ずれる）

     writing-mode: vertical-rl のとき
       inline 軸 = 縦（上→下）… 一行が伸びる向き
       block  軸 = 横（右→左）… 行が積まれる向き

     したがって
       inline-size → 物理的な height（＝ 行長。一行に何字入るか）
       block-size  → 物理的な width （＝ 何行ぶん並ぶか）

   このファイルでは物理プロパティ（width / height / margin-left …）を
   一切使わない。すべて論理プロパティで書くことで、同じ指定が
   横組みでも縦組みでも意図どおりに効く。
   ========================================================================== */

:root {
	--wa-tate-measure: var(--wp--custom--tategaki--measure, clamp(17rem, 64vh, 34rem));
	--wa-tate-gap: var(--wp--custom--tategaki--column-gap, 2.6em);
	--wa-tate-leading: var(--wp--custom--tategaki--line-height, 2.05);
	--wa-tate-tracking: var(--wp--custom--tategaki--letter-spacing, 0.06em);
}

/* ==========================================================================
   1. 縦書きの基本形
   --------------------------------------------------------------------------
   見出し・キャッチコピー・ラベルなど「効かせどころ」に使う。
   ブロックスタイル「縦書き」（is-style-tategaki）と同じ実体。
   ========================================================================== */

.wa-tate,
.is-style-tategaki {
	writing-mode: vertical-rl;

	/* mixed = 和文は正立、欧文と数字は寝る（縦組みの標準的な組み方）。
	   全部立てたい場合は .wa-tate-upright を併用する。 */
	text-orientation: mixed;

	/* 縦組み用のプロポーショナルメトリクスとカーニング。
	   横書きの palt / kern ではなく、縦書き専用の vpal / vkrn を使う。
	   ここを palt のままにしているサイトが大半で、句読点のアキが揃わない。 */
	font-feature-settings: "vpal" 1, "vkrn" 1, "vert" 1;

	/* 縦組みは字面が詰まって見えるので、横組みより行間と字間を開ける */
	line-height: var(--wa-tate-leading);
	letter-spacing: var(--wa-tate-tracking);

	line-break: strict;
	word-break: normal;
	overflow-wrap: normal;

	/* 縦組みでは下線が字の左に出て読みにくい。傍点（後述）に寄せる */
	text-decoration-skip-ink: auto;
}

/* 英数字も一文字ずつ正立させる（社名・年号を和文的に見せたいとき） */
.wa-tate-upright,
.wa-tate.wa-tate-upright,
.is-style-tategaki.wa-tate-upright {
	text-orientation: upright;
	/* upright では字間が空きすぎるので詰め直す */
	letter-spacing: 0.02em;
}

/*
   行長の制御。
   縦組みでは inline-size が「一行の長さ」になる。和文の読みやすい行長は
   縦組みで 20〜40 字。1 字 ≒ 1em なので、フォントサイズ基準で上限を置く。
*/
.wa-tate:where(p, li, blockquote),
.is-style-tategaki:where(p, li, blockquote) {
	max-inline-size: var(--wa-tate-measure);
}

/* 見出しは字間を開けて掛け軸の気配を出す */
.is-style-tategaki:where(h1, h2, h3, h4, h5, h6) {
	letter-spacing: 0.16em;
	line-height: 1.35;
}

/* ==========================================================================
   1.5 見出しを折り返させない（自動縮め）
   --------------------------------------------------------------------------
   縦組みの見出しが器に収まらず2段に割れると、版面として最もみっともない。
   「日本文 / 化を、楽 / しもう。」のように語の途中で折れるためで、
   横組みの折り返しとは受ける印象がまったく違う。

   対策は「折り返さない」と決めてしまうこと。
   縦組みは全角1字がほぼ 1em なので、一行の長さは

       字数 × (1 + 字間) em

   で決まる。器の長さが足りないなら、折るのではなく font-size を縮めればよい。
   実際の縮小は tategaki.js が実測して行う。ここでは器の長さだけを決める。

   --wa-fit-space … 一行に使ってよい長さ（＝縦組みでは物理的な高さ）
   セクションごとに上書きしてよい。ヒーローはヘッダーのぶん短くする、など。
   ========================================================================== */

.wa-tate-fit,
.is-style-tategaki:where(h1, h2, h3, h4, h5, h6),
.wp-block-post-title.is-style-tategaki {
	max-inline-size: var(--wa-fit-space, min(70svh, 44rem));
}

/*
   nowrap は JavaScript が寸法を合わせ終えてから付ける。
   先に付けてしまうと、JS が無効な環境で器からはみ出して読めなくなる。
   その場合は今までどおり折り返す ── 見た目は劣るが、壊れはしない。
*/
.wa-tate-fit.is-fitted,
.is-style-tategaki.is-fitted:where(h1, h2, h3, h4, h5, h6),
.wp-block-post-title.is-style-tategaki.is-fitted {
	white-space: nowrap;
}

/* ==========================================================================
   2. 全面縦組み（読み物テンプレート）
   --------------------------------------------------------------------------
   本文まで縦組みにして、ページを右から左へ横スクロールさせる。
   このテーマの技術証明にあたる部分。
   ========================================================================== */

.wa-tate-flow,
.is-style-tategaki-flow {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-feature-settings: "vpal" 1, "vkrn" 1, "vert" 1;
	line-height: var(--wa-tate-leading);
	letter-spacing: var(--wa-tate-tracking);
	line-break: strict;
	word-break: normal;

	/* 一行の長さ（＝ 物理的な高さ）を決め打つ。ここが読み心地を左右する */
	inline-size: var(--wa-tate-measure);
	max-inline-size: none;

	/*
	   ここが縦組みで最も間違えやすい点。

	   横組みのブロック要素は width が親いっぱいに広がり、height が内容依存で伸びる。
	   縦組みではこれが入れ替わり、block-size（＝物理的な width）が内容依存で伸びる。
	   つまり何も指定しないと、コンテナは本文の全長ぶん横に伸び続け、
	   overflow-x: auto を書いても永久に溢れない ＝ スクロール領域にならない。
	   その結果、本文の先頭（右端）は画面のはるか右外に置き去りになる。

	   max-block-size で横幅の上限を親に合わせて初めて、
	   「右端から始まり、左へ読み進める横スクロール」が成立する。
	*/
	block-size: auto;
	max-block-size: 100%;

	overflow-x: auto;
	overflow-y: hidden;

	/*
	   横方向のオーバースクロールはブラウザの「戻る」ジェスチャを誘発する。
	   contain にして、縦組み本文の端まで来ても履歴が戻らないようにする。
	   縦組みサイトの最頻出の事故がこれ。
	*/
	overscroll-behavior-inline: contain;
	overscroll-behavior-x: contain;

	/* 行の間隔。段組の「段間」にあたる */
	column-gap: var(--wa-tate-gap);

	/* 中の見出しは、本文と同じ行長に収める */
	--wa-fit-space: var(--wa-tate-measure);

	padding-block: var(--wp--preset--spacing--30);

	/*
	   行末（＝物理的な下端）とスクロールバーの間の隙間。
	   これが無いと、横スクロールバーが最後の文字に重なって読めなくなり、
	   バーをつまむ操作も文字の真上で行うことになる。
	   ゆったり取って、読む場所と操作する場所を分ける。
	*/
	padding-inline-end: 2.75rem;

	/* スクロールバーを細く。macOS では既定で隠れる */
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--contrast-3) transparent;
}

/* 段落間のアキ。縦組みでは margin-block が「行方向の間」になる */
.wa-tate-flow > * + *,
.is-style-tategaki-flow > * + * {
	margin-block-start: var(--wa-tate-gap);
}

/*
   post-content は本文を .wp-block-post-content で一段包む。
   そのままだと「包みが一つの行の塊」になってしまい、中の段落が
   縦組みの流れに乗らない。display: contents で包みを透過させ、
   段落が直接この縦組みコンテナの子になるようにする。
*/
.wa-tate-flow > :where(.wp-block-post-content, .entry-content),
.is-style-tategaki-flow > :where(.wp-block-post-content, .entry-content) {
	display: contents;
}

/* 縦組みの舞台。行長ぶんの高さを確保して、その中で横スクロールさせる */
.wa-tate-stage {
	padding-inline: var(--wp--preset--spacing--30);
}

/*
   全面縦組みの画面は「一幅の巻物」として見せる。
   フッタを持たず（page-tategaki.html）、上下は中央に据えて、
   縦のスクロールを起こさない。横に読み進める画面で縦にも動けると、
   操作が迷子になるため。印は functions.php が body に付ける。

   帯（狭い画面のヘッダー）は sticky で流れの中にいるので、
   flex 縦積みにすれば main は自然に「残りの高さ」になる。
   柱と題簽は fixed で高さを持たない。
*/
.wa-tategaki-page .wp-site-blocks {
	min-block-size: 100svh;
	display: flex;
	flex-direction: column;
}

.wa-tategaki-page .wa-tate-stage {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 読み進める向きの案内。縦組みに不慣れな来訪者向け */
.wa-tate-hint {
	letter-spacing: 0.12em;
	opacity: 0.75;
}

/*
   縦組みの中の画像。
   base.css の img { max-inline-size: 100%; block-size: auto } が
   論理プロパティなので、縦組みでは自動的に
   「高さは行長まで／幅は成り行き」として解決される。ここでは上限だけ足す。
*/
.wa-tate-flow :where(img, figure),
.is-style-tategaki-flow :where(img, figure) {
	max-inline-size: 100%;
	max-block-size: 60vw;
}

/*
   写真そのものにも、同じ上限を実寸で当てる。

   上の 60vw は figure には効くが、中の img には届かない。
   ブロックライブラリの .wp-block-image img { max-width: 100% } のほうが
   特異度で勝つためで、しかもこれが縦組みでは効かない指定になる。

   縦組みでは max-width が block 軸（＝行の積まれる向き）の上限になり、
   その割合は「親の block サイズ」を基準に解決される。figure の block サイズは
   内容依存で不定なので、割合は none として捨てられる。
   結果、写真は max-height（＝行長）だけで決まり、幅は縦横比の成り行きになる。

   figure は 60vw で止まり、中の写真だけがそれを越えて左へはみ出す。
   後続の段落は figure の幅ぶんしか送られないため、はみ出した写真の上に
   本文が重なって読めなくなる（画面幅が概ね 1070px を下回ると起きる）。

   割合ではなく vw で与えれば、基準が不定にならず block 軸に素直に効く。
   :where() では特異度が 0 になり負けるので、ここは素の子孫セレクタで書く。
*/
.wa-tate-flow .wp-block-image img,
.is-style-tategaki-flow .wp-block-image img {
	max-block-size: 60vw;
}

/* 縦組み内の見出しは、本文より前に出す（行頭を揃えず、少し上げる） */
.wa-tate-flow :where(h2, h3),
.is-style-tategaki-flow :where(h2, h3) {
	letter-spacing: 0.14em;
	line-height: 1.5;
	margin-block: var(--wa-tate-gap);
}

/* ==========================================================================
   3. 縦中横（たてちゅうよこ）
   --------------------------------------------------------------------------
   縦組みの中で、2 桁までの算用数字を横に寝かせず「一マスに収める」。
   「2026年」の 26 が縦に割れるか、正しく一字分に収まるかで品位が変わる。
   自動付与は assets/js/tategaki.js が行う。
   ========================================================================== */

.wa-tcy {
	-webkit-text-combine: horizontal; /* 旧 Safari */
	text-combine-upright: all;

	/* 縦中横にした部分だけ字間を殺す（詰め物が入って間延びするのを防ぐ） */
	letter-spacing: 0;
	font-feature-settings: normal;
}

/*
   3 桁以上の数字。縦中横にすると潰れるので、一字ずつ正立させて縦に積む。
   「2026年」を「二〇二六年」的な見え方にそろえる扱い。
*/
.wa-upright-digits {
	text-orientation: upright;
	text-combine-upright: none;
	letter-spacing: 0.02em;
	font-feature-settings: normal;
}

/* 横組みの文脈では何もしない（JS が付けた span を無害化する） */
:where(.wa-tate, .is-style-tategaki, .wa-tate-flow, .is-style-tategaki-flow)
	:where(.wa-tcy, .wa-upright-digits) {
	display: inline;
}

/* ==========================================================================
   3.5 右から左へ並べる
   --------------------------------------------------------------------------
   縦組みの版面は右が先。見出しを右、リードを左に置きたいが、
   DOM 順は h1 が先であるべき（読み上げと文書構造のため）。
   flex-direction: row-reverse で、意味の順と見た目の順を両立させる。
   ========================================================================== */

.wa-row-rtl {
	flex-direction: row-reverse;
}

/*
   row-reverse は主軸を反転させるので、エディタが書き出す
   is-content-justification-right（justify-content: flex-end）が
   「物理的な左寄せ」になってしまう。編集画面で「右」を選んだら
   右に寄るように、両者を入れ替えて打ち消す。
*/
.wa-row-rtl.is-content-justification-right {
	justify-content: flex-start;
}

.wa-row-rtl.is-content-justification-left {
	justify-content: flex-end;
}

/* ==========================================================================
   4. 見出し帯（縦の見出しに罫を添える）
   ========================================================================== */

.is-style-obi {
	position: relative;
	padding-inline-start: 1.1em;
}

.is-style-obi::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0.15em;
	inline-size: 0;
	border-inline-start: 3px solid var(--wp--preset--color--accent);
}

/* ==========================================================================
   5. 縦書きナビゲーション
   --------------------------------------------------------------------------
   グローバルメニューを縦組みにする。項目は右から左へ並ぶ。
   ========================================================================== */

.wp-block-navigation.is-style-tategaki {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-feature-settings: "vpal" 1, "vkrn" 1;
	letter-spacing: 0.12em;
}

.wp-block-navigation.is-style-tategaki .wp-block-navigation__container {
	flex-direction: row;
	align-items: flex-start;
	gap: 1.6em;
}

.wp-block-navigation.is-style-tategaki .wp-block-navigation-item__content {
	/* 縦のメニューでは下線が字の左に出るので、既定では消して hover で出す */
	text-decoration: none;
}

.wp-block-navigation.is-style-tategaki .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.4em;
	text-decoration-thickness: 1px;
}

/* サブメニューは縦組みだと開き方が破綻しやすいので横組みに戻す */
.wp-block-navigation.is-style-tategaki .wp-block-navigation__submenu-container {
	writing-mode: horizontal-tb;
}

/* ==========================================================================
   6. 傍点（縦組みの強調）
   --------------------------------------------------------------------------
   縦組みで下線・太字を使うと洋風に転ぶ。和文の強調は伝統的に傍点。
   ========================================================================== */

.wa-boten {
	text-emphasis: filled sesame currentColor;
	-webkit-text-emphasis: filled sesame currentColor;
	text-emphasis-position: over right;
	-webkit-text-emphasis-position: over right;
}

/* 縦組み本文中の strong は傍点に置き換える */
.wa-tate-flow strong,
.is-style-tategaki-flow strong {
	font-weight: inherit;
	text-emphasis: filled sesame currentColor;
	-webkit-text-emphasis: filled sesame currentColor;
}

/* ==========================================================================
   7. 画面が狭いとき
   --------------------------------------------------------------------------
   縦組みはスマートフォンと相性が悪くない（縦長の画面＝長い行長）。
   ただし行長を viewport に合わせて詰め直さないと、行が画面外に出る。
   ========================================================================== */

@media (max-width: 782px) {
	:root {
		/* ヘッダー・フッターぶんを引いた高さを行長にする */
		--wa-tate-measure: min(30rem, calc(100svh - 11rem));
		--wa-tate-gap: 2.1em;
	}

	.wa-tate-flow,
	.is-style-tategaki-flow {
		/* 端末の慣性スクロールに乗せる */
		-webkit-overflow-scrolling: touch;
	}
}

/*
   画面の高さが極端に低い（横向きのスマートフォンなど）ときは、
   行長が取れないので横組みに戻す。読めないものを見せるより素直に降りる。
*/
@media (max-height: 26rem) {
	.wa-tate-flow,
	.is-style-tategaki-flow {
		writing-mode: horizontal-tb;
		inline-size: auto;
		block-size: auto;
		overflow: visible;
	}
}