/* ==========================================================================
   wa-press / rail.css — 左端の柱（ナビゲーション）
   --------------------------------------------------------------------------
   ナビゲーションを縦書きにして左端に立てる。

   なぜ左か
     真の版面では見出しの柱を「右端」に立てている（.wa-archive__head /
     .wa-page__head）。ナビを右に置くと柱と競合する。左に置けば

         ［ナビ］      本文      ［見出しの柱］

     という左右の枠ができ、中央の本文が締まる。
     縦組みは右から左へ読み進むので、読み終えた先にナビがある配置でもある。

   なぜ上辺の帯をやめたか
     横書きのヘッダーは実測で 142〜173px あり、全画面写真の標題（88svh）と
     合わせると最初の画面の2割弱を占めていた。さらに横向きのスマートフォンでは
     項目が折り返して 161px まで伸び、高さ 375px の画面では本文の場所が無くなる。
     柱にすれば縦の場所を一切取らない。

   表装の見立て
     柱は写真の上に浮かせず、紙の色を敷いて細い罫で本文と分ける。
     掛け軸の一文字と同じ考え方で、額縁ではなく「余白の続き」として見せる。
   ========================================================================== */

:root {
	--wa-rail: clamp(3.25rem, 5.5vw, 4.5rem);
}

/* --------------------------------------------------------------------------
   1. 柱
   -------------------------------------------------------------------------- */

.wa-rail {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: var(--wa-rail);
	z-index: 20;

	background-color: var(--wp--preset--color--base);
	border-inline-end: 1px solid
		color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);

	padding-block: clamp(1.25rem, 3.5vh, 2.5rem);
	padding-inline: 0;
	box-sizing: border-box;

	/* iPhone の横向きでノッチ側に食い込まないように */
	padding-inline-start: env(safe-area-inset-left);

	overflow: hidden;
}

/*
   柱の中は縦組み。
   vertical-rl では flex の row が「上から下」に流れるので、
   社名 → ナビの順に積める。
*/
.wa-rail__inner {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-feature-settings: "vpal" 1, "vkrn" 1, "vert" 1;

	block-size: 100%;
	inline-size: 100%;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: calc(clamp(1.5rem, 4vh, 3rem) * var(--wa-rail-scale, 1));
}

/*
   WordPress が flow レイアウトの子に差し込む既定の間隔
   （:root :where(.is-layout-flow) > * { margin-block: 1.5rem 0 }）を打ち消す。

   柱の中は縦組みで block 方向が「右」を向くため、この 1.5rem は
   上下の間隔ではなく右側の重りになる。align-items: center は
   マージン込みの箱を中央に置くので、:first-child で無事な社名に対し、
   2番目のナビだけが半分の 12px ぶん左へ押し出されてしまう。
   間隔は gap で持っているので、マージンは柱の中では常に不要。
   （上辺の帯でも margin-top として効くので、メディアクエリの外に置く）
*/
.wa-rail .wa-rail__inner > * {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   2. 印章と社名
   -------------------------------------------------------------------------- */

/*
   印章ロゴ（白文印）。柱の頭に置く。
   幅 52〜72px の柱では文字を大きくするのに限界があるため、
   小さくても目に留まる「印」をブランドの目印にする（#12）。
   画像は site_logo（DB）。低い画面では他の要素と同じ倍率で縮む。
*/
.wa-rail__mark {
	flex: 0 0 auto;
	line-height: 0;
}

/*
   コアが .is-default-size で width: 120px を入れてくるため、
   物理プロパティの width で明示的に上書きする。
   （縦組みの中では inline-size が縦方向を指すので使えない）
*/
.wa-rail .wa-rail__mark img {
	width: calc(clamp(2.4rem, 4.5vh, 2.75rem) * var(--wa-rail-scale, 1));
	height: auto;
	border-radius: 18%;
}

.wa-rail__title {
	margin: 0;
	/* 印が目印を担うぶん、社名は「読ませる」大きさへ一回り上げる（#12） */
	font-size: calc(clamp(1.0625rem, 2vh, 1.3125rem) * var(--wa-rail-scale, 1));
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1;
	flex: 0 0 auto;
}

.wa-rail__title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}


/* --------------------------------------------------------------------------
   3. ナビ
   -------------------------------------------------------------------------- */

.wa-rail__nav {
	/*
	   縮ませない。
	   flex は既定で主軸方向に項目を縮める。縦組みの柱では主軸が「縦」なので、
	   縮むと各項目の行長が詰まり、文字が折り返してしまう。
	   （そして折り返した結果ぴったり収まるため、溢れとして検知できない）
	   縮小を禁じて溢れさせ、font-size 側で合わせる。
	*/
	flex: 0 0 auto;
	min-block-size: 0;
	font-size: calc(clamp(0.75rem, 1.45vh, 0.875rem) * var(--wa-rail-scale, 1));
	letter-spacing: 0.12em;
	line-height: 1;
}

/*
   柱の項目は折り返させない。

   「日本文化を楽しもう」は9字あり、柱の高さが足りないと2列に割れる。
   縦組みの見出しと同じで、折るくらいなら縮める。
   ただし項目ごとに大きさが変わるとナビとして落ち着かないので、
   一番長い項目に合わせて柱全体を一律に縮める（--wa-rail-scale）。
   実測と代入は tategaki.js が行う。
*/
.wa-rail__nav .wp-block-navigation-item__content,
.wa-rail__title,
.wa-rail__title a {
	white-space: nowrap;
}

.wa-rail__nav .wp-block-navigation__container {
	flex-direction: row !important;   /* 縦組みの中では上から下に流れる */
	align-items: center;
	gap: calc(clamp(1.1rem, 3vh, 2rem) * var(--wa-rail-scale, 1)) !important;
	block-size: auto;
	flex-wrap: nowrap;
}

.wa-rail__nav .wp-block-navigation-item,
.wa-rail__nav .wp-block-pages-list__item {
	flex: 0 0 auto;
}

.wa-rail__nav .wp-block-navigation-item__content {
	text-decoration: none;
	color: var(--wp--preset--color--contrast-2);
	transition: color 0.2s ease;

	/* 縦のリンクは幅が細くなる。指で触れる大きさを確保する */
	padding-block: 0.55rem;
	margin-block: -0.55rem;
}

.wa-rail__nav .wp-block-navigation-item__content:hover,
.wa-rail__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--contrast);
}

/*
   現在地。
   縦組みで下線を引くと字の左に出て読みにくいので、
   朱の短い罫を字の右（block-start 側）に添える。
   会社概要・一枚ページの標題と同じ約束。
*/
.wa-rail__nav .current-menu-item > .wp-block-navigation-item__content,
.wa-rail__nav .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	position: relative;
}

.wa-rail__nav .current-menu-item > .wp-block-navigation-item__content::before,
.wa-rail__nav .current_page_item > .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	inset-block-start: -0.5em;
	inset-inline: 0.55rem;
	block-size: 0;
	border-block-start: 2px solid var(--wp--preset--color--accent);
}

/* サブメニューは縦組みだと破綻しやすいので横組みに戻す */
.wa-rail__nav .wp-block-navigation__submenu-container {
	writing-mode: horizontal-tb;
}

/* --------------------------------------------------------------------------
   3+. 題簽 ── 右上に下がる社名の札
   --------------------------------------------------------------------------
   和本の表紙に貼る題名の札（題簽）を、画面の右上に貼る。
   スクロール中は不透明で社名を訴求し、止まる（読み始める）と薄く退いて
   下の文字が透けて読める。状態クラスは fuda.js が付け外しする。
   ホバーでも薄くなる（札の下を確かめる操作）。
   真ページの右端の見出し柱と重なる位置なので、この「退く」挙動が実用でもある。
   -------------------------------------------------------------------------- */

.wa-fuda {
	position: fixed;
	top: 0;
	right: clamp(1.25rem, 3vw, 2.75rem);
	z-index: 15;                     /* 柱（20）より下、本文より上 */

	margin: 0;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-feature-settings: "vpal" 1, "vkrn" 1, "vert" 1;

	font-size: clamp(0.9375rem, 1.6vh, 1.0625rem);
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1;
	white-space: nowrap;

	padding: 1.2rem 0.55rem 0.9rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	border-top: 0;                   /* 上辺から下がっている札に、上の縁は無い */
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 10px rgba(20, 17, 13, 0.12);

	transition: opacity 0.6s ease;
}

.wa-fuda a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.wa-fuda.is-resting,
.wa-fuda:hover {
	opacity: 0.15;
}

@media (prefers-reduced-motion: reduce) {
	.wa-fuda {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   4. 本文を柱のぶんだけ右へ寄せる
   --------------------------------------------------------------------------
   padding ではなく margin にする。
   padding にすると、alignfull が root padding を打ち消す負のマージンで
   柱の下に潜り込んでしまう。
   -------------------------------------------------------------------------- */

.wp-site-blocks {
	margin-inline-start: var(--wa-rail);
}

/* 和紙の地は柱の下にも敷く（柱だけ紙が途切れないように） */
body::before {
	inset-inline-start: 0;
}

/* --------------------------------------------------------------------------
   5. 狭い画面・低い画面では上辺の帯に落とす
   --------------------------------------------------------------------------
   幅 782px 未満では柱を置く余地が無い。
   高さ 30rem 未満では縦のナビが収まらない。
   どちらも上辺の細い帯＋ハンバーガーにする。
   -------------------------------------------------------------------------- */

@media (max-width: 782px), (max-height: 30rem) {
	:root {
		--wa-rail: 0px;
	}

	.wa-rail {
		position: sticky;
		inset-block-start: 0;
		inset-inline: 0;
		inline-size: auto;
		block-size: auto;

		border-inline-end: 0;
		border-block-end: 1px solid
			color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);

		padding-block: clamp(0.5rem, 1.5vh, 0.9rem);
		padding-inline: var(--wp--preset--spacing--30);
		padding-inline-start: max(var(--wp--preset--spacing--30), env(safe-area-inset-left));

		/* 帯は紙の色。スクロールしても文字が透けないように */
		background-color: var(--wp--preset--color--base);
	}

	.wa-rail__inner {
		writing-mode: horizontal-tb;
		block-size: auto;
		flex-direction: row;
		align-items: center;
		/* 印章＋社名を左に寄せ、ナビだけを右端へ */
		justify-content: flex-start;
		gap: 0.75rem;
	}

	.wa-rail__nav {
		margin-inline-start: auto;
	}

	.wa-rail .wa-rail__mark img {
		width: 1.75rem;
	}

	.wa-rail__title {
		font-size: 1rem;
		letter-spacing: 0.12em;
	}

	.wa-rail__nav {
		font-size: 0.8125rem;
	}

	/* 幅があってもハンバーガーに畳む（高さが無い横向き端末のため） */
	.wa-rail__nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.wa-rail__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.wa-rail__nav .wp-block-navigation__responsive-container.is-menu-open,
	.wa-rail__nav .wp-block-navigation__responsive-container.is-menu-open a {
		writing-mode: horizontal-tb;
		color: var(--wp--preset--color--contrast);
	}

	.wp-site-blocks {
		margin-inline-start: 0;
	}

	/* 帯に社名があるので、題簽は出さない */
	.wa-fuda {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   6. 印刷
   -------------------------------------------------------------------------- */

@media print {
	.wa-rail,
	.wa-fuda {
		display: none;
	}

	.wp-site-blocks {
		margin-inline-start: 0;
	}
}