@layer components {
	/* ============================================================
	 * ヘッダー（parts/header.html・追従バー）
	 * .nexray-header＝全幅の白バー（sticky）。.nexray-header__inner＝内側シェル
	 * （移植元 .nav__inner＝max 1472 中央寄せ）。ロゴは primary で塗る。
	 * ============================================================ */
	/*
	 * sticky はテンプレートパートのラッパ（.wp-site-blocks 直下＝全高コンテナの子）に付与する。
	 * .nexray-header 自体に付けても、親ラッパの高さがヘッダーと同一で粘着余地が無く効かない。
	 */
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 100;
	}

	/* ログイン中は管理バー（fixed）の下に潜らないよう offset（本番は .admin-bar 無し＝無効）。 */
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 32px;
	}

	/*
	 * ★例外：ここは正規BP（min-width 統一）から外して max-width:782 据え置き。
	 *   782px は WordPress コア管理バーが 32px→46px に切り替わる規定 breakpoint で、
	 *   デザイン用 BP ではなく WP 挙動のミラーだから（→ tokens.css 冒頭コメント参照）。
	 */
	@media (max-width: 782px) {
		.admin-bar .wp-site-blocks > header.wp-block-template-part {
			top: 46px;
		}
	}

	/* 全幅の白バー。左右パディングはバー側に持たせ、inner は max-width で中央寄せのみ。 */
	.nexray-header {
		width: 100%;
		padding-inline: var(--nexray-shell-gutter);
		background: var(--wp--preset--color--base);
	}

	.nexray-header__inner {
		max-width: var(--nexray-shell-max);
		min-height: var(--nexray-nav-height);
		margin-inline: auto;
		gap: var(--wp--preset--spacing--40);
	}

	/* ロゴは <a>＝ theme.json elements.link（wp 層）に対し components 層の通常宣言で確定。 */
	.nexray-header .nexray-logo {
		color: var(--wp--preset--color--primary); /* #003c8a */
	}

	/*
	 * ロゴの高さ。先方FB「ヘッダーのロゴを2まわりほど大きくする」で 32→44px / 40→56px（+40%）へ。
	 * 横幅は viewBox 256×78 比で高さ×3.28 ＝ SP 144px / PC 184px になる。
	 * バー高（--nexray-nav-height）も 72 / 96px へ追随させてある（tokens.css）。
	 * フッターロゴ（48px）は指示範囲外のため据え置き＝ヘッダーだけが大きい状態を正とする。
	 */
	/*
	 * 高さの段階はナビの形（ハンバーガー / 横並び）に合わせる。境界は site-nav ドロワーの
	 * max-width:960 の厳密補集合＝961px（md=769 ではない）。
	 *   ≤960px  … ハンバーガー。ロゴ横 144px＋トグル 44px で余裕があるため 44px。
	 *   ≥961px  … 横並びナビ（実測 554px 固定）。inner 869px に対し 184＋gap32＋554＝770px で
	 *             99px の逃げが残るため 56px が収まる。
	 * 769〜960px を 56px にしないのはこの帯が横並びナビだった時に衝突していたためだが、
	 * その帯自体をドロワーへ寄せたので現在は単に「ハンバーガー帯は 44px」という切り分けになる。
	 */
	.nexray-header .nexray-logo__mark {
		height: 44px; /* ハンバーガー帯（≤960px）。961px〜で拡大。 */
	}

	@media (min-width: 961px) {
		.nexray-header .nexray-logo__mark {
			height: 56px;
		}
	}

	/* ロゴは詰まっても圧縮させない。flex 化で高さをロゴ実寸に一致（行ボックス余白を排除）。 */
	.nexray-header__logo {
		display: flex;
		flex-shrink: 0;
	}

	/* 右側の縦2段群（上＝タグライン／下＝グローバルナビ）。右端に揃える。
	 * gap は WP レイアウトサポート :root :where(.is-layout-flex)（blockGap 既定 24px・wp 層）を
	 * components 層の通常宣言で上書きする。 */
	.nexray-header__meta {
		align-items: flex-end;
		gap: 4px;
	}

	/* タグライン。ナビ真上に小さく右寄せで載せる（移植元 .nav__logo-divider の縦区切り線は廃止）。
	 * 基準は非表示（移植元同様＝ナビがハンバーガーの間は隠す）。961px〜で表示する。
	 * 境界は site-nav ドロワー（max-width:960）の厳密補集合。ここを md=769 のままにすると
	 * 769〜960px で「ハンバーガー＋デスクトップ用タグライン」が同時表示される衝突が起きる。 */
	.nexray-header__tagline {
		display: none;
		margin: 0;
		font-size: 0.75rem;
		color: var(--wp--preset--color--slate-500);
		line-height: 1;
		white-space: nowrap;
	}

	/* HULIC Group サイトへの外部リンク。色は据え置き（親の slate-500 を継承）、
	 * 下線は hover 時のみ出す。 */
	.nexray-header__tagline a {
		color: inherit;
		text-decoration: none;
	}

	.nexray-header__tagline a:hover,
	.nexray-header__tagline a:focus-visible {
		text-decoration: underline;
	}

	/* 961px〜：ナビ上のタグラインを表示（ハンバーガー帯は base で非表示・ナビと連動）。 */
	@media (min-width: 961px) {
		.nexray-header__tagline {
			display: block;
		}
	}
}