/**
 * css/layout/header.css
 * ============================================================
 * A LEGEND 2：Site Header Layout
 * ============================================================
 *
 * 役割：
 * - template-parts/layout/site-header.php の共通ヘッダーを装飾します。
 * - ロゴ、サイト名、タグライン、メニューボタンの配置を担当します。
 * - ヘッダー内にあるPCナビとモバイルメニューボタンの表示切り替えを一元管理します。
 *
 * 方針：
 * - PCナビそのものの見た目は global-nav.css に分離します。
 * - SPドロワー本体の見た目は mobile-nav.css に分離します。
 * - SPドロワー本体は header.php で site-header の兄弟要素として読み込みます。
 * - ここではヘッダー外枠、ブランド、ヘッダー内レスポンシブ導線を定義します。
 *
 * Header navigation breakpoint：
 * - 960px以下：PCナビを隠し、モバイルメニューボタンを表示します。
 * - 961px以上：PCナビを表示し、モバイルメニューボタンを隠します。
 * - CSS変数はmedia queryに直接利用しづらいため、ビルド導入まではこの値を
 *   ヘッダー導線の基準値としてコメントで明示管理します。
 *
 * 今回の改修：
 * - スクロール後ヘッダー背景の固定ダーク色を廃止し、
 *   --aleg2-glass-bg / --aleg2-color-border / --aleg2-shadow-soft へ接続します。
 * - ヘッダー高さを design.layout.header_height 由来の --aleg2-header-height へ接続します。
 * - ブランド文字・タグライン・メニューボタンを Design Token に追従させます。
 * - メニューボタンの固定白ガラス背景を --aleg2-glass-bg / --aleg2-glass-bg-strong へ置換します。
 * - PCナビ非表示とモバイルメニューボタン表示を同じmedia queryで管理し、
 *   レスポンシブ時に導線が同時に消える事故を防ぎます。
 * - ハンバーガー線の nth-of-type() 依存を廃止し、
 *   screen-reader-text や将来の補助要素追加でアイコンが崩れないようにします。
 * - SP幅ではヘッダー自動非表示をCSS側でも抑制し、
 *   モバイルメニュー導線がスクロール状態で消えないようにします。
 * - モバイルメニュー開中の復帰指定は transform: translate3d(0,0,0) ではなく
 *   transform: none に統一し、不要な containing block / stacking context を作りません。
 * - モバイルメニュー開中はsite-headerをdrawerより前面へ上げ、
 *   既存の三本線→×アニメーションを閉じる主導線として見える状態にします。
 * - モバイルメニュー開中のsite-headerは、通常のブランド表示レイヤーではなく、
 *   ×化したメニュートグルを前面に保つための操作レイヤーとして扱います。
 * - そのため、メニュー開中はブランドやPCナビなどの非操作要素を視覚的に退避し、
 *   mobile-nav側のMENUラベルやメニュー本文と重ならないようにします。
 * - 既存セレクタ・既存レイアウト構造は維持します。
 */

.aleg2-site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: var(--aleg2-z-header);
	color: var(--aleg2-color-text);
	pointer-events: none;
	transition:
		background var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

/**
 * スクロール後のヘッダー状態。
 *
 * 旧コードでは rgba(7, 9, 17, 0.78) の固定ダーク背景でした。
 * ここでは design.colors.surface / surface_2 由来のglass tokenを使い、
 * ライト系プリセットでもヘッダーだけ暗く残らないようにします。
 */
.aleg2-site-header.is-scrolled {
	background: var(--aleg2-glass-bg);
	border-bottom: 1px solid var(--aleg2-color-border);
	box-shadow: var(--aleg2-shadow-soft);
	backdrop-filter: var(--aleg2-backdrop-glass);
}

/**
 * JS側のスクロール制御で使う非表示状態。
 *
 * 既存挙動を維持します。
 */
.aleg2-site-header.is-hidden {
	transform: translate3d(0, -110%, 0);
}

.aleg2-site-header__inner {
	display: flex;
	gap: var(--aleg2-space-6);
	align-items: center;
	justify-content: space-between;
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-xl));
	min-height: var(--aleg2-header-height);
	margin-inline: auto;
	pointer-events: auto;
}

/**
 * ヘッダー直下のPCナビ。
 *
 * PCナビの装飾は global-nav.css 側で定義します。
 * ただし「ヘッダー内で表示するかどうか」は、
 * モバイルメニューボタンと同じ責務としてこのファイルで管理します。
 */
.aleg2-site-header > .aleg2-site-header__inner > .aleg2-global-nav {
	flex: 1 1 auto;
}

.aleg2-site-header__brand {
	flex: 0 0 auto;
	min-width: 0;
	transition:
		opacity var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		visibility var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-site-header__brand-link {
	display: inline-flex;
	gap: var(--aleg2-space-3);
	align-items: center;
	max-width: min(44vw, 360px);
	color: var(--aleg2-color-heading);
	text-decoration: none;
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		opacity var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-site-header__brand-link:hover {
	color: var(--aleg2-color-link-hover);
	text-decoration: none;
}

/**
 * ロゴ画像。
 *
 * drop-shadowは残しますが、固定の黒影が強すぎないように
 * 共通shadow tokenへ寄せます。
 */
.aleg2-site-header__logo {
	width: auto;
	max-width: min(220px, 42vw);
	max-height: 46px;
	object-fit: contain;
	filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.22));
}

.aleg2-site-header__name {
	display: block;
	overflow: hidden;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-latin);
	font-size: clamp(1rem, 0.86rem + 0.7vw, 1.35rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.aleg2-site-header__tagline {
	display: block;
	max-width: 220px;
	overflow: hidden;
	color: var(--aleg2-color-text-faint);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

/**
 * モバイルメニューボタン。
 *
 * 旧コードでは rgba(255, 255, 255, 0.06) の固定ガラス背景でした。
 * Design Tokenのglass / border / radiusへ寄せることで、
 * ライト・ダーク両方のプリセットに自然に追従します。
 */
.aleg2-site-header__menu-button {
	position: relative;
	z-index: 1;
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	color: var(--aleg2-color-text);
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-button);
	backdrop-filter: var(--aleg2-backdrop-glass);
	box-shadow: var(--aleg2-shadow-soft);
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		opacity var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-site-header__menu-button:hover {
	color: var(--aleg2-color-primary);
	background: var(--aleg2-glass-bg-strong);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-card);
}

/**
 * hover liftが有効な場合だけ、ボタンを少し持ち上げます。
 * 移動量は design.buttons.hover_amount 由来の --aleg2-button-hover-amount です。
 */
body.aleg2-buttons-hover-lift .aleg2-site-header__menu-button:hover {
	transform: translateY(calc(var(--aleg2-button-hover-amount) * -1));
}

/**
 * キーボード操作時のフォーカス表示。
 */
.aleg2-site-header__menu-button:focus-visible {
	outline: none;
	box-shadow:
		var(--aleg2-shadow-soft),
		var(--aleg2-focus-ring);
}

.aleg2-site-header__menu-line {
	position: absolute;
	left: 13px;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: var(--aleg2-radius-pill);
	transition:
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		top var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

/**
 * ハンバーガー線の位置。
 *
 * nth-of-type() は screen-reader-text など同じ span 要素の追加で順番がずれるため、
 * top / middle / bottom の役割classで制御します。
 * これにより、アクセシビリティ用テキストや将来の装飾要素が増えても、
 * アイコンの形状と開閉アニメーションが壊れません。
 */
.aleg2-site-header__menu-line--top {
	top: 15px;
}

.aleg2-site-header__menu-line--middle {
	top: 22px;
}

.aleg2-site-header__menu-line--bottom {
	top: 29px;
}

.aleg2-site-header__menu-button[aria-expanded="true"] .aleg2-site-header__menu-line--top {
	top: 22px;
	transform: rotate(45deg);
}

.aleg2-site-header__menu-button[aria-expanded="true"] .aleg2-site-header__menu-line--middle {
	opacity: 0;
}

.aleg2-site-header__menu-button[aria-expanded="true"] .aleg2-site-header__menu-line--bottom {
	top: 22px;
	transform: rotate(-45deg);
}

/**
 * モバイルメニュー開中に is-hidden が残った場合だけ、ヘッダーを画面内へ戻します。
 *
 * 重要：
 * - ドロワー本体は header の外へ分離しているため、header.css では
 *   mobile-nav の表示制御を行いません。
 * - translate3d(0, 0, 0) は見た目上の位置が同じでも transform 自体を生成し、
 *   fixed要素や stacking context 周りに副作用を作ります。
 * - ここでは「隠れていたheaderを戻す」目的だけに限定し、transform: none で
 *   余計な containing block を作らない状態へ戻します。
 */
html.aleg2-mobile-menu-open .aleg2-site-header.is-hidden,
body.aleg2-mobile-menu-open .aleg2-site-header.is-hidden {
	transform: none;
}

/**
 * モバイルメニュー開中のヘッダー階層。
 *
 * mobile-nav本体は header の外へ分離済みですが、開閉の主導線は
 * site-header側の三本線トグルボタンです。
 * ドロワー表示中だけheaderをdrawerより前面へ上げることで、
 * aria-expanded="true" による三本線→×アニメーションを隠さず、
 * 同じボタンを再タップして閉じられる導線として生かします。
 *
 * 固定値の z-index は使わず、tokens.css の drawer階層を基準にします。
 */
html.aleg2-mobile-menu-open .aleg2-site-header,
body.aleg2-mobile-menu-open .aleg2-site-header {
	z-index: calc(var(--aleg2-z-drawer) + 1);
}

/**
 * モバイルメニュー開中のヘッダー内要素の責務切り替え。
 *
 * ドロワー表示中の site-header は、通常時のようにブランドやPCナビを
 * 見せるためのレイヤーではなく、右上の三本線トグルを
 * 「×化した閉じるボタン」として前面に保つための操作レイヤーです。
 *
 * そのため、ドロワー本文側の MENU ラベルやメニュー項目と競合する
 * ブランド / PCナビは視覚的に退避させます。
 * display:none ではなく opacity を使うことで、DOM構造やレイアウトを
 * 急に壊さず、既存のレスポンシブ構造を維持します。
 * pointer-events:none を併用し、透明なブランドリンクがクリックを
 * 拾わないようにします。
 */
html.aleg2-mobile-menu-open .aleg2-site-header__brand,
body.aleg2-mobile-menu-open .aleg2-site-header__brand,
html.aleg2-mobile-menu-open .aleg2-site-header > .aleg2-site-header__inner > .aleg2-global-nav,
body.aleg2-mobile-menu-open .aleg2-site-header > .aleg2-site-header__inner > .aleg2-global-nav {
	opacity: 0;
	pointer-events: none;
}

/**
 * モバイルメニュー開中も、開閉主導線であるメニューボタンだけは
 * 表示・操作可能な状態を明示します。
 *
 * 将来ヘッダー内に検索・SNS・CTAなどの要素が増えた場合でも、
 * 「ドロワー開中に前面へ残す主操作はメニュートグル」という責務を
 * このセレクタで明確に保ちます。
 */
html.aleg2-mobile-menu-open .aleg2-site-header__menu-button,
body.aleg2-mobile-menu-open .aleg2-site-header__menu-button {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 960px) {
	.aleg2-site-header__inner {
		min-height: clamp(64px, 10vw, var(--aleg2-header-height));
	}

	/**
	 * SP幅ではメニューボタンが主要導線になるため、
	 * JS側のスクロール制御で is-hidden が残っていても画面外へ逃がしません。
	 */
	.aleg2-site-header.is-hidden {
		transform: none;
	}

	/**
	 * SP幅ではPCナビを隠し、同じ条件でメニューボタンを表示します。
	 *
	 * 以前はPCナビ非表示が global-nav.css に分散していたため、
	 * CSSの反映差や将来の変更時に「PCナビもボタンも見えない」状態が
	 * 起きやすい構造でした。
	 */
	.aleg2-site-header > .aleg2-site-header__inner > .aleg2-global-nav {
		display: none;
	}

	.aleg2-site-header__tagline {
		display: none;
	}

	.aleg2-site-header__menu-button {
		display: inline-flex;
	}
}

@media (max-width: 640px) {
	.aleg2-site-header__inner {
		width: min(100% - 32px, var(--aleg2-container-xl));
		min-height: 64px;
	}

	.aleg2-site-header__logo {
		max-height: 38px;
	}

	.aleg2-site-header__name {
		max-width: 62vw;
	}
}