/*
Theme Name: nekonote_wp
Theme URI:
Author: under the tree
Description: 自社標準の薄いベースブロックテーマ
Version: 0.16.5
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: nekonote_wp
*/

/* =========================================================
   0. コア CSS の補正（薄いテーマでも毎案件必要になる最小限）
   出典: DF-05 addSound ドッグフーディングレポート（2026-08-19 / 09-02）
   - CSS を変えたら上の Version を上げる（enqueue の ver ＝ キャッシュバスター。
     上げないとブラウザキャッシュで「効かない」誤認が起きる）
   ========================================================= */

/* ルート直下の blockGap 打ち消し。
   コアの `:where(.wp-site-blocks) > *` が header / main / footer の間に 24px を入れ、
   フッター手前などに白帯が出る。theme.json の styles.spacing.blockGap: 0 は全体に
   波及するため使わず、対象を絞った CSS で打ち消す（`:where()` は詳細度 0 なので
   単純セレクタで勝てる） */
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* エディタ操作で本文末尾に紛れ込む空段落（<p></p>）の防御。
   ブロック間マージン分の白帯を作るので非表示にする */
.entry-content > p:empty {
	display: none;
}

/* ナビリンクの hover / focus-visible。
   コアのナビ CSS がリンク色をクラス2重指定の `inherit` で固定しているため
   theme.json では上書きできない。同等以上の詳細度でここに書く。
   :focus-visible はキーボード操作の可視化のため必ず併記する */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* 固定ヘッダーにする場合（案件ごとにコメントを外す・既定は非固定。0.15.0 で sticky＋縮小の雛形に更新）。
   - sticky / fixed はテンプレートパーツの「ラッパー」（.wp-site-blocks 直下）に掛ける。
     エディタ UI の「位置 > 上部に固定」で内側グループに掛けても、パーツ自身の
     高さ内でしか粘着せず実質効かない
   - 縮小と影は CSS の scroll-driven animation（animation-timeline: scroll(root)）で JS なし。
     未対応ブラウザは追従だけ。scroll() でなく scroll(root) を明示する（nekonote-nav の閉じるボタンは
     オーバーレイの中にあり、最寄りのスクロール容器がオーバーレイになるため）
   - セットで scroll-padding-top（アンカー着地）と admin-bar 分のオフセットを入れる
   - nekonote-nav の固定配置ボタン（.nk-burger--open / .is-menu-open .nk-burger--close）も同じ range で top を動かし、
     縮んだヘッダーと位置を揃える */
/*
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
}
body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}
html {
	scroll-padding-top: 5rem;
}
@supports (animation-timeline: scroll()) {
	.wp-site-blocks > header.wp-block-template-part {
		animation: nk-header-shrink linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}
	@keyframes nk-header-shrink {
		to { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
	}
	.wp-site-blocks > header .nk-header {
		animation: nk-header-pad linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}
	@keyframes nk-header-pad {
		to { padding-top: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--20); }
	}
	.wp-block-navigation .nk-burger--open,
	.wp-block-navigation__responsive-container.is-menu-open .nk-burger--close {
		animation: nk-burger-top linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}
	@keyframes nk-burger-top {
		to { top: calc(var(--nk-burger-top) - var(--wp--preset--spacing--30) + var(--wp--preset--spacing--20)); }
	}
}
*/

/* =========================================================
   1. nk- コンポーネントクラス（house CSS レイヤー）
   - 効果・部品のみ。余白・整列・色など theme.json でできることは作らない。
   - 中身は必ず theme.json の CSS 変数で書く → 案件ごとのシステムに自動追従。
   - CSS のみ（JS は使わない）。「高度な設定 > 追加 CSS クラス」欄で適用する。
   ※ 以下は叩き台。実案件で「毎回使う」ものを足していく。
   ========================================================= */

/* 質感の変数（角丸・影・罫線色）。トークン（色・書体・余白）は theme.json、質感はここ。
   案件では :root のこの 4 行を書き換えるだけで nk- 部品の質感が揃う（DF-06 レポート §2.1）。
   --nk-line はパレットの contrast を薄めた色＝地色に自動追従 */
:root {
	--nk-radius: 12px;
	--nk-radius-sm: 8px;
	--nk-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
	--nk-line: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

/* 視覚的に隠す（支援技術には読ませる）。
   タイトルをロゴ画像で見せたいページの h1 などに使い、a11y を保つ。
   ロゴ画像側は装飾扱い（alt=""）にする */
.nk-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.nk-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--nk-radius);
	box-shadow: var(--nk-shadow);
	padding: var(--wp--preset--spacing--40);
}

.nk-hover-lift {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nk-hover-lift:hover {
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.nk-hover-lift {
		transition: none;
	}
	.nk-hover-lift:hover {
		transform: none;
	}
}

/* =========================================================
   2. 固定ページのヒーロー（templates/page.html の cover ブロック・アイキャッチ画像＋題名）
   - ページの「アイキャッチ画像」＝ヒーロー画像。アイキャッチが無いページは淡い帯に濃色の題名（フォールバック）
   - 画像に題名が焼き込まれているページはページ設定「題名を重ねない」で隠す（body.nk-hero-title-hidden）
   - オーバーレイの色・濃さはページ設定 → functions.php の nekonote_wp_page_hero_overlay がインラインで出す
     （CSS で .wp-block-cover__background の opacity を書いてもコアの .has-background-dim-NN に負ける）
   出自: DF-06 三友製作所（2026-09-06）
   ========================================================= */

.nk-page-hero.wp-block-cover {
	min-height: clamp(240px, 28vw, 420px);
	margin-block-end: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50);
}

.nk-page-hero .wp-block-cover__image-background {
	object-position: center;
}

.nk-page-hero .wp-block-post-title {
	color: var(--wp--preset--color--surface);
	margin: 0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

/* アイキャッチ無し: 淡い帯＋濃色の題名（画像がある時だけ写真ヒーロー） */
.nk-page-hero.wp-block-cover:not(:has(.wp-block-cover__image-background)) {
	min-height: 0 !important; /* テンプレートのインライン min-height（画像あり用）を打ち消す */
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.nk-page-hero.wp-block-cover:not(:has(.wp-block-cover__image-background)) .wp-block-cover__background {
	background: var(--wp--preset--color--muted) !important;
	opacity: 1;
}

.nk-page-hero.wp-block-cover:not(:has(.wp-block-cover__image-background)) .wp-block-post-title {
	color: var(--wp--preset--color--contrast);
	text-shadow: none;
}

/* 題名が画像に焼き込まれているページ: 題名を視覚的に隠す（読み上げは残す）。画像は実比率で全体を見せる */
body.nk-hero-title-hidden .nk-page-hero .wp-block-post-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

body.nk-hero-title-hidden .nk-page-hero.wp-block-cover {
	min-height: 0 !important;
	padding: 0;
}

body.nk-hero-title-hidden .nk-page-hero .wp-block-cover__image-background {
	position: static;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	margin: 0;
	inset: auto;
}

/* 題名を隠すとき、題名の入れ物（flex の子）が幅を取って画像を左へ押すのを防ぐ（DF-06 で 32px ずれた） */
body.nk-hero-title-hidden .nk-page-hero .wp-block-cover__inner-container {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	padding: 0;
}

/* =========================================================
   3. エディタ補正（ブロックエディタ／サイトエディタでフロントと同じ見え方にする）
   - style.css は add_editor_style で iframe エディタにも読み込まれる。theme.json と nk- クラスは
     そのまま効くが、フロント専用のラッパー（.entry-content / .wp-site-blocks / body.admin-bar）は
     エディタに存在しない。ここでエディタ側の同等セレクタに同じ規則を掛ける。
   - 投稿エディタの本文ルート＝ .editor-styles-wrapper .is-root-container、
     サイトエディタの本文＝ .editor-styles-wrapper .wp-block-post-content
   - 案件で `.entry-content > X` の規則を足したら、同じ規則をこの 2 セレクタにも写す（DF-06 レポート §2.5）
   出自: DF-06 三友製作所（2026-09-06）
   ========================================================= */

/* エディタで隠し h1（ヒーロー内の a11y 用）を編集できるように、薄く見せる（フロントは非表示のまま） */
.editor-styles-wrapper .nk-visually-hidden {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0 0 var(--wp--preset--spacing--20);
	clip: auto;
	clip-path: none;
	white-space: normal;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
	background: rgba(255, 255, 255, 0.85);
	padding: 0.4em 0.8em;
	border-radius: var(--nk-radius-sm);
	display: inline-block;
}

.editor-styles-wrapper .nk-visually-hidden::before {
	content: "（画面には出ない見出し・読み上げ用）";
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
}

/* サイトエディタの固定ページテンプレートでは cover にアイキャッチが無く placeholder が出る。
   §2 の「アイキャッチ無し」フォールバック（淡い帯＋濃色の題名）がそのまま効くので、エディタ専用の題名色は書かない
   （白にすると帯の上で読めない・2026-09-06 smoke-env で確認） */

/* エディタの本文末尾の余白（フロントの main padding-block-end 相当） */
.editor-styles-wrapper .is-root-container {
	padding-block-end: var(--wp--preset--spacing--60);
}

/* =========================================================
   4. Fluent Forms をテーマの表現に揃える
   - theme.json のボタン設定はプラグインのフォームには届かない（既定は青）。ボタンは
     `.ff-btn-submit.ff-btn-submit.ff_btn_style` の詳細度で上書きする
   - 入力欄＝カードと同じ角丸・罫線色、フォーカスはプライマリ。色はすべてパレット変数
   - Fluent Forms が無い環境では該当要素が無く副作用なし
   出自: DF-06 三友製作所（2026-09-06）
   ========================================================= */

.fluentform .ff-el-group {
	margin-bottom: var(--wp--preset--spacing--40);
}

.fluentform .ff-el-input--label label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.fluentform .ff-el-is-required.asterisk-right label::after,
.fluentform .ff-el-is-required.asterisk-left label::before {
	color: var(--wp--preset--color--primary);
}

.fluentform .ff-el-form-control {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--nk-line);
	border-radius: var(--nk-radius-sm);
	padding: 0.7em 1em;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
}

.fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--secondary);
	opacity: 0.7;
}

.fluentform .ff-el-form-check {
	margin-bottom: 0.4em;
}

.fluentform .ff-el-form-check-label {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}

.fluentform .ff-el-form-check-input {
	accent-color: var(--wp--preset--color--primary);
}

/* 送信ボタン: テーマのボタンと同じ（角丸は --nk-radius-button で案件調整。ピル型なら 999px） */
.fluentform .ff-btn-submit.ff-btn-submit.ff_btn_style,
.fluentform .ff-btn-submit.ff-btn-submit.ff_btn_style:not(.ff_btn_no_style) {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: var(--nk-radius-button, var(--nk-radius-sm));
	padding: 0.8em 2.2em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	min-width: 12em;
	box-shadow: none;
	text-shadow: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fluentform .ff-btn-submit.ff-btn-submit.ff_btn_style:hover,
.fluentform .ff-btn-submit.ff-btn-submit.ff_btn_style:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	opacity: 1;
}

.fluentform .ff-btn-submit.ff-btn-submit.ff_btn_style:disabled {
	opacity: 0.6;
}

.fluentform .ff-el-group.ff-text-left .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper {
	text-align: center;
}

/* 送信後・エラーのメッセージ */
.fluentform .ff-message-success {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--nk-line);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: var(--nk-radius-sm);
	box-shadow: var(--nk-shadow);
	padding: var(--wp--preset--spacing--40);
}

.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--preset--color--primary);
}

.fluentform .error.text-danger {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
}

/* =========================================================
   構造原型のヘッダー（0.7.0 header-inline ／ 0.15.0 header-cta・header-stacked・header-burger）。
   表現は案件ごとにトークン・部位クラスで調整する。構造は patterns/header-*.php、開閉ボタンの
   見た目・動きはプラグイン nekonote-nav（.nk-burger）、オーバーレイの配色はブロック属性。
   core は内側の ul にも .wp-block-navigation を付けるので、幅の指定は nav 要素に限定する。
   狭幅の判定は core の 600px 固定に合わせる（max-width: 599px）。
   ========================================================= */
.nk-header .nk-header__inner > *,
.nk-header .nk-header__top > *,
.nk-header .nk-header__bottom > *,
.nk-footer--compact p {
	min-width: 0;
	overflow-wrap: anywhere;
}
.nk-header nav.wp-block-navigation {
	max-width: 100%;
}
.nk-header .wp-block-site-title,
.nk-header .wp-block-image {
	white-space: nowrap;
}
.nk-header .nk-header__inner,
.nk-header .nk-header__top {
	min-height: var(--nk-burger-size-h, 52px); /* 固定配置の開閉ボタンと高さを揃える */
}

/* ヘッダー内の CTA（Buttons）。狭幅では小さく */
.nk-header .nk-header__cta {
	margin: 0;
}
.nk-header .nk-header__cta .wp-block-button__link {
	padding: 0.55em 1.2em;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}
@media (max-width: 599px) {
	.nk-header .nk-header__cta .wp-block-button__link {
		padding: 0.45em 0.9em;
	}
}

/* header-cta: 狭幅は [CTA][≡] の順で右端に */
.nk-header--cta .nk-header__nav {
	gap: var(--wp--preset--spacing--40);
}
.nk-header--cta .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
}
@media (max-width: 599px) {
	.nk-header--cta .nk-header__nav {
		gap: var(--wp--preset--spacing--20);
	}
	.nk-header--cta .nk-header__nav nav.wp-block-navigation {
		order: 2;
	}
	.nk-header--cta .nk-header__nav .nk-header__cta {
		order: 1;
	}
}

/* header-stacked: 上段ロゴ・電話・CTA、下段ナビ中央。狭幅は上下段の箱を解いて 1 行に畳み、電話は 2 行目
   （display: contents にした Group は読み順が DOM 順＝ロゴ→電話→CTA→ナビのまま。見た目と違うので注意） */
.nk-header--stacked .nk-header__contact {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}
.nk-header--stacked .nk-header__tel {
	margin: 0;
	line-height: 1.3;
	text-align: right;
	color: var(--wp--preset--color--secondary);
}
.nk-header--stacked .nk-header__tel strong {
	color: var(--wp--preset--color--contrast);
	font-size: 1.1em;
}
.nk-header--stacked .nk-header__bottom {
	border-top: 1px solid var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--30);
}
.nk-header--stacked .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--50);
}
@media (max-width: 599px) {
	.nk-header--stacked {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
	}
	.nk-header--stacked .nk-header__top,
	.nk-header--stacked .nk-header__contact,
	.nk-header--stacked .nk-header__bottom {
		display: contents;
	}
	.nk-header--stacked .wp-block-image,
	.nk-header--stacked .wp-block-site-title {
		order: 1;
		margin-right: auto;
	}
	.nk-header--stacked .nk-header__cta {
		order: 2;
	}
	.nk-header--stacked nav.wp-block-navigation {
		order: 3;
	}
	.nk-header--stacked .nk-header__tel {
		order: 4;
		flex-basis: 100%;
		text-align: left;
		font-size: var(--wp--preset--font-size--small);
	}
	.nk-header--stacked .nk-header__tel br {
		display: none;
	}
	.nk-header--stacked .nk-header__tel strong::after {
		content: "　";
	}
}

/* header-burger: 常時ハンバーガー。開いたら全画面・項目を大きく中央に。配色はブロック属性（contrast / base） */
.nk-header--burger .nk-header__nav {
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}
.nk-header--burger .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(3rem, 10vh, 6rem) var(--wp--style--root--padding-right) clamp(2rem, 8vh, 4rem) var(--wp--style--root--padding-left);
}
.nk-header--burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}
.nk-header--burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
.nk-header--burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
}
.nk-header--burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.nk-header--burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
}
@media (prefers-reduced-motion: no-preference) {
	.nk-header--burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		animation: nk-nav-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	.nk-header--burger .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.05s; }
	.nk-header--burger .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.1s; }
	.nk-header--burger .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.15s; }
	.nk-header--burger .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.2s; }
	.nk-header--burger .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.25s; }
	.nk-header--burger .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.3s; }
	.nk-header--burger .is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 0.35s; }
	.nk-header--burger .is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: 0.4s; }
}
@keyframes nk-nav-in {
	from { opacity: 0; transform: translateY(0.6em); }
	to { opacity: 1; transform: none; }
}

/* header-cta / header-stacked の狭幅オーバーレイ: 余白と文字だけ（配色はブロック属性） */
.nk-header--cta .wp-block-navigation__responsive-container.is-menu-open,
.nk-header--stacked .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(3rem, 10vh, 6rem) var(--wp--style--root--padding-right) clamp(2rem, 8vh, 4rem) var(--wp--style--root--padding-left);
}
.nk-header--cta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.nk-header--stacked .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}
.nk-header--cta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.nk-header--stacked .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

/* =========================================================
   header-hero-nav（0.16.0・DF-07 の還元）: 先頭にアイキャッチのヒーロー、その下に中央揃えのナビ。
   スクロールでナビが上に固定され、帯が半透明＋影になりロゴが左から現れる。JS なし。
   - パーツの箱と最外 Group を display: contents にして、ヒーローと帯を .wp-site-blocks 直下の流れに置く
     （sticky は「親の箱の中」でしか粘着しないため。README「固定ヘッダー」注記と同じ理由）
   - 固定状態の切り替えは view timeline（ヒーローの退場）。未対応ブラウザは追従だけ＋ロゴ常時表示
   - 矢印（アンカーの示唆）はナビ項目の下に mask で描く。狭幅では出さない
   ========================================================= */
.wp-site-blocks > header.wp-block-template-part:has(> .nk-header--hero-nav),
.nk-header--hero-nav {
	display: contents;
}
.editor-styles-wrapper .nk-header--hero-nav {
	display: block; /* サイトエディタでは箱として選べるようにする */
}
.nk-header--hero-nav .nk-header__hero.wp-block-cover {
	margin: 0;
	padding-block: var(--wp--preset--spacing--50);
}
.nk-header--hero-nav .nk-header__hero .wp-block-cover__image-background {
	object-position: center;
}
.nk-header--hero-nav .nk-header__title {
	color: var(--wp--preset--color--base);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
	margin: 0;
}
/* アイキャッチ無し: 淡い帯＋濃色の題名（templates/page.html の .nk-page-hero と同じ考え方） */
.nk-header--hero-nav .nk-header__hero.wp-block-cover:not(:has(.wp-block-cover__image-background)) {
	min-height: 0 !important;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}
.nk-header--hero-nav .nk-header__hero.wp-block-cover:not(:has(.wp-block-cover__image-background)) .wp-block-cover__background {
	background: var(--wp--preset--color--muted, var(--wp--preset--color--surface)) !important;
	opacity: 1;
}
.nk-header--hero-nav .nk-header__hero.wp-block-cover:not(:has(.wp-block-cover__image-background)) .nk-header__title {
	color: var(--wp--preset--color--contrast);
	text-shadow: none;
}
/* ナビの帯: 追従 */
.nk-header--hero-nav .nk-header__bar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--20);
	min-height: var(--nk-burger-size-h, 52px);
}
body.admin-bar .nk-header--hero-nav .nk-header__bar {
	top: var(--wp-admin--admin-bar--height, 32px);
}
html:has(.nk-header--hero-nav) {
	scroll-padding-top: var(--nk-hero-nav-offset, 5rem); /* アンカー着地の余白。帯の高さに合わせて案件で上書き */
}
.nk-header--hero-nav .nk-header__inner {
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}
.nk-header--hero-nav .nk-header__inner > .wp-block-image,
.nk-header--hero-nav .nk-header__inner > .wp-block-site-title {
	margin: 0;
	flex: none;
}
.nk-header--hero-nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	justify-content: center;
}
.nk-header--hero-nav .wp-block-navigation-item__content {
	display: block;
	text-align: center;
	font-weight: 500;
}
@media (min-width: 600px) {
	/* 項目の下の矢印（旧 FontAwesome arrow-circle-down 相当を mask で） */
	.nk-header--hero-nav .wp-block-navigation-item__content::after {
		content: "";
		display: block;
		width: 1em;
		height: 1em;
		margin: 0.15em auto 0;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 8.6-3 3.2a.7.7 0 0 1-1 0l-3-3.2a.7.7 0 0 1 1-1L7.3 9.5V4a.7.7 0 0 1 1.4 0v5.5l1.8-1.9a.7.7 0 0 1 1 1z'/></svg>") center / contain no-repeat;
		mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 8.6-3 3.2a.7.7 0 0 1-1 0l-3-3.2a.7.7 0 0 1 1-1L7.3 9.5V4a.7.7 0 0 1 1.4 0v5.5l1.8-1.9a.7.7 0 0 1 1 1z'/></svg>") center / contain no-repeat;
		opacity: 0.85;
	}
}
/* 固定状態（ヒーローが画面から出たとき）: 帯を半透明＋影に、ロゴを左から出す */
@supports (animation-timeline: view()) {
	.wp-site-blocks {
		timeline-scope: --nk-hero;
	}
	.nk-header--hero-nav .nk-header__hero {
		view-timeline: --nk-hero block;
	}
	.nk-header--hero-nav .nk-header__bar {
		animation: nk-hero-nav-stuck linear both;
		animation-timeline: --nk-hero;
		animation-range: exit 85% exit 100%;
	}
	@keyframes nk-hero-nav-stuck {
		to {
			background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}
	}
	.nk-header--hero-nav .nk-header__inner > .wp-block-image,
	.nk-header--hero-nav .nk-header__inner > .wp-block-site-title {
		max-width: 0;
		overflow: hidden;
		transform: scaleX(0);
		transform-origin: left center;
		animation: nk-hero-nav-logo linear both;
		animation-timeline: --nk-hero;
		animation-range: exit 85% exit 100%;
	}
	@keyframes nk-hero-nav-logo {
		to { max-width: 240px; transform: scaleX(1); }
	}
	@media (prefers-reduced-motion: reduce) {
		.nk-header--hero-nav .nk-header__inner > .wp-block-image,
		.nk-header--hero-nav .nk-header__inner > .wp-block-site-title {
			max-width: none;
			transform: none;
			animation: none;
		}
	}
}
/* 狭幅: ロゴ左・開閉ボタン右の 1 行（ナビ本体はオーバーレイ）。ロゴは常時表示。
   開くボタンは帯の中に置く（nekonote-nav の既定は画面右上に固定＝ヒーローの下にある帯と離れてしまう・0.16.2）。
   閉じるボタンはオーバーレイ（全画面）の右上のまま */
@media (max-width: 599px) {
	.nk-header--hero-nav .nk-header__inner {
		justify-content: space-between;
	}
	.nk-header--hero-nav .nk-header__bar .wp-block-navigation .nk-burger--open {
		position: absolute;
		top: 50%;
		right: 0; /* 基準は nav（プレースホルダ・帯の右端に接する）。0 で右余白＝帯の padding＝ロゴの左余白と揃う（0.16.3） */
		transform: translateY(-50%);
	}
	.nk-header--hero-nav .nk-header__inner > .wp-block-image,
	.nk-header--hero-nav .nk-header__inner > .wp-block-site-title {
		max-width: none !important;
		transform: none !important;
		animation: none !important;
	}
	.nk-header--hero-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: clamp(3rem, 10vh, 6rem) var(--wp--style--root--padding-right) clamp(2rem, 8vh, 4rem) var(--wp--style--root--padding-left);
	}
	.nk-header--hero-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: center;
		gap: var(--wp--preset--spacing--30);
	}
	.nk-header--hero-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--large);
		font-weight: 700;
	}
}
/* 下層用の変種（0.16.1）: ヒーロー無しで帯だけ＝トップの「固定状態」と同じ見た目（半透明の帯・影・ロゴ常時表示）。
   parts/header.html を「最外 Group（nk-header nk-header--hero-nav nk-header--bar-only）→ 帯 Group」だけで組む。Cover は置かない */
.nk-header--hero-nav.nk-header--bar-only .nk-header__bar {
	background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	animation: none;
}
.nk-header--hero-nav.nk-header--bar-only .nk-header__inner > .wp-block-image,
.nk-header--hero-nav.nk-header--bar-only .nk-header__inner > .wp-block-site-title {
	max-width: none;
	transform: none;
	animation: none;
}