/**
 * ドキュメントナビゲーション CSS (D-01 / T139 FIX v2 / 2026-05-25 顧客修正反映 / T379 / T421)
 *
 * T421 (2026-08-25 顧客決定): 大滝様のナレッジ詳細デザイン案のうち、親子タブの意匠が
 *   採用になった。**変えたのは装飾だけ＝枠と格子を外し、下線で現在地を示す**。
 *   罫線はタブ列の下に 1 本（--border-color / 2px）、現在地だけ主役色の下線
 *   （--ui-accent / 4px）。太さ・色はデザイン案（`docs/intake/再デザインPJ/
 *   esriジャパンさま親子タブ.png`）を 1:1 で実測した値。
 *   **5 列均等の骨格（旧サポートサイト `v2-tabMenu` 由来）は据え置き**。デザイン案も
 *   5 等分で、内容幅ではない（罫線の全幅 860px ÷ 5 = タブ 1 枚 172px。各タブの
 *   文字中心が 5 等分の中心と一致する）。一度 flex の内容幅で実装して差し戻した。
 *
 * T379 (MT05 / 4-6): 親タブに付けていた ↑ アイコン・地色・太字を撤去し、**全タブを並列**にした。
 *   現在地だけが 太字 ＋ 下線で分かる形にする。
 *   親であることは階層の情報であって現在位置の情報ではなく、両方を強調すると
 *   かえって現在地が読み取りにくい（松尾様・2026-08-12）。
 *
 * T379 (追加開発 #19): 下へスクロールしてもタブが画面上部に残る。
 *   追従位置 --esrij-sticky-top は子テーマ support.js が実測して配信する
 *   （親テーマの固定ヘッダー＋追従グローバルナビ＋WP管理バーの実際の下端）。
 *   タブが増えると縦を食うため、2 列まで落ちるスマホ幅では追従させない。
 *
 * @package Esrij_Support_Core
 */

.doc-nav {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 0 0 24px;
	background: #fff;
	border-bottom: 2px solid var(--border-color, #dee2e6);
	font-size: var(--fs-14, 13px);
	line-height: 1.5;
}

/* T379 (#19): 追従。ヘッダー等の実測下端に貼り付く。
 * T391: 実測下端にぴったり貼ると詰まって見えるため、--esrij-sticky-gap 分だけ
 *   下げる。値はサイドバーの目次（D58①）と同じ出どころ（子テーマ style.css）。
 *   ページ内リンクの着地オフセットも support.js が同じ変数を読んで追随する。
 *
 *   隙間を空けるだけでは、そこを本文が流れて**行の切れ端が覗く**（実測: 追従中は
 *   常に本文の <p> が隙間の裏に来る）。隙間は記事本文と同じ地色で塞ぐ。
 *   ::before は使えない——.doc-nav は display:grid なので擬似要素がグリッド項目に
 *   なり 5 列レイアウトが崩れる。box-shadow ならレイアウトに影響せず帯だけ描ける。
 *   T421 でタブの枠を外したため、.doc-nav 自身の白背景が「本文が透けない」唯一の担保に
 *   なった。background: #fff を外さないこと。 */
@media (min-width: 601px) {
	.doc-nav {
		position: sticky;
		top: calc(var(--esrij-sticky-top, 100px) + var(--esrij-sticky-gap, 10px));
		box-shadow: 0 calc(var(--esrij-sticky-gap, 10px) * -1) 0 #fff;
		z-index: 2;
		/* T422: ここにあった transition: top 0.3s ease は外した。
		 * 「親テーマ側 0.3s と歩調を合わせる」意図で入れていたが、実際は
		 * support.js が配信する --esrij-sticky-top（＝ナビの実測下端）そのものが
		 * 0.3s かけて動くため、その上にさらに 0.3s の遷移が乗って**二重**になり、
		 * 追いつく前に値が変わり続ける → スクロールを止めたあとに残りが動く、
		 * という二段階のずれになっていた（顧客ご指摘 2026-08-25 / T422）。
		 * 変数を素直に反映すれば、タブはナビと 1:1 の同じ動きを一度だけする。
		 * 経緯と実測は support.js の T422 コメントに書いてある。 */
	}
}

/* セパレータは不要（罫線で兼ねる） */
.doc-nav__sep {
	display: none;
}

/* タブセル共通（T379/MT05: 親も兄弟も同じ見た目＝並列）
 * T421: セルの罫線・外枠だけを撤去し、下線で現在地を示す形にした。
 *   **5 列均等の骨格は変えていない**（デザイン案の実測＝罫線の全幅 860px に対し
 *   タブ 1 枚 172px ＝ 860÷5。各タブの文字中心が 5 等分の中心と一致する）。 */
.doc-nav__sibling {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 8px;
	min-height: 40px;
	/* 地色は .doc-nav 側が持つ。タブ自身が塗ると、下へはみ出させた透明ボーダーの
	   内側まで塗られ、タブ列の下の罫線がタブの下だけ消える。 */
	background: transparent;
	color: #333;
	text-decoration: none;
	text-align: center;
	/* 下線ぶんの高さを常に確保し、現在地に切り替わっても行の高さが動かないようにする。
	   親の 2px 罫線に重ねるため 2px 引き上げる（デザイン案は罫線 2px の上に
	   4px の下線が乗り、下端が揃う）。 */
	border-bottom: 4px solid transparent;
	margin-bottom: -2px;
}

.doc-nav__sibling:hover,
.doc-nav__sibling:focus-visible {
	color: var(--ui-accent-hover, #034B77);
	border-bottom-color: var(--ui-accent-tint, #DFF3FF);
}

.doc-nav__sibling:focus-visible {
	outline: 2px solid var(--ui-accent, #00619B);
	outline-offset: 2px;
}

/* T308 (#133): タブ名ラベル（ACF doc_nav_label）。手動 <br> での改行を許容する */
.doc-nav__label {
	display: block;
	width: 100%;
	text-align: center;
	overflow-wrap: anywhere;
}

/* 現在地: 太字 ＋ 下線（T379 / 4-6 で確定した唯一の強調。T421 で色を主役色へ）
 * 帯は ::after ではなく border-bottom で描く。非現在地も同じ太さの透明な
 * border を持たせてあるため、現在地が切り替わっても行の高さが動かない。 */
.doc-nav__sibling.is-current {
	color: #333;
	font-weight: 700;
	border-bottom-color: var(--ui-accent, #00619B);
}

/* タブレット: 3 列 */
@media (max-width: 1024px) {
	.doc-nav {
		grid-template-columns: repeat(3, 1fr);
		font-size: var(--fs-12, 12px);
	}
}

/* スマホ: 2 列（行数が増えるため追従しない。追従の指定は上の 601px 以上） */
@media (max-width: 600px) {
	.doc-nav {
		grid-template-columns: repeat(2, 1fr);
	}
	.doc-nav__sibling {
		padding: 8px 6px;
		min-height: 36px;
		font-size: var(--fs-12, 12px);
	}
}