/*
 * ヘッダー行（ロゴ・グローバルメニュー・問い合わせ・SNS・三本線）、メガメニュー（PC 全画面オーバーレイ / SP ドロワー・同じ DOM）、問い合わせボタン。
 * ヘッダー行の見た目はサイトヘッダーとメガメニュー上部で共用し、開いても閉じてもアイコンの位置が動かない（グローバルメニューはサイトヘッダーだけ）。
 */
@layer components {
	/* ---------- ヘッダー行（中身は縦の中央。2026-09-28 先方修正指示） ---------- */
	.l-header {
		position: relative;
		z-index: var(--z-header);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-4);
		height: var(--h-header);
		padding-inline: var(--gutter);
		background: var(--c-white);
	}

	/* TOP: ヒーローに重ねる（透過）。sticky にはしない。ログイン中は管理バーの下から（html の margin-top でヒーローも同じだけ下がる） */
	.l-header--overlay {
		position: absolute;
		inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
		background: none;
	}

	/* メガメニュー上部: 紙の背景を透かす */
	.l-header--menu {
		background: none;
	}

	.l-header__actions {
		display: flex;
		flex: none;
		align-items: center;
		gap: var(--header-actions-gap);
	}

	.c-logo {
		min-width: 0; /* 320px 幅では縮めて三本線と重ならないようにする */
	}

	.c-logo__img {
		width: var(--logo-w);
	}

	.c-sns {
		display: flex;
		align-items: center;
		gap: var(--sp-4); /* XD: Instagram の右端 1736 → LINE 1752 */
	}

	.c-sns__link {
		display: block;
	}

	.c-sns__instagram {
		width: var(--sns-instagram);
		padding: calc((var(--sns-instagram) - var(--sns-instagram-glyph)) / 2); /* XD: 63×63 の画像枠の中央にグリフ 40 */
	}

	.c-sns__line {
		width: var(--sns-line);
	}

	/* 問い合わせ（メール）: LINE と同じ大きさの緑の角丸の正方形に白い封筒（2026-09-28 先方修正指示） */
	.c-sns__mail {
		display: grid;
		place-items: center;
		width: var(--sns-mail);
		aspect-ratio: 1;
		border-radius: var(--sns-mail-radius);
		background: var(--c-primary);
		transition: background-color var(--dur-fast);
	}

	.c-sns__mail-icon {
		width: var(--sns-mail-glyph);
	}

	@media (hover: hover) {
		.c-sns__mail:hover {
			background: var(--c-primary-hover);
		}
	}

	/* ---------- グローバルメニュー（1200 以上のサイトヘッダー。2026-09-28 先方修正指示・XD に無い）。ロゴと右のアイコン群の間の空きの中央に置く ---------- */
	/* 文字はボタンもリンク列も serif 500・--c-text-menu・折り返さない（メガメニューのリンク列と同じ） */
	.c-gnav {
		display: none;
		color: var(--c-text-menu);
		font-family: var(--font-serif);
		font-weight: 500;
		white-space: nowrap;
	}

	/* 出す幅の根拠は 00-tokens.css のグローバルメニューの節 */
	@media (min-width: 1200px) {
		.c-gnav {
			display: flex;
			flex: 1;
			align-self: stretch;
			justify-content: center;
		}
	}

	.c-gnav__list {
		display: flex;
		gap: var(--gnav-gap);
	}

	/* ボタンの当たり判定をヘッダーの高さいっぱいにし、真下のパネル（上端＝ヘッダーの下端）へポインタを動かしても途切れないようにする */
	.c-gnav__item {
		position: relative;
		display: flex;
	}

	.c-gnav__button {
		display: flex;
		align-items: center;
		gap: var(--gnav-icon-gap);
		font-size: var(--fs-gnav);
		line-height: var(--lh-heading);
		transition: color var(--dur-fast);
	}

	/* 開いている間のボタン・今いるページのリンクは緑（hover も同じ・下の @media） */
	.c-gnav__button[aria-expanded="true"],
	.c-gnav__link[aria-current="page"] {
		color: var(--c-primary);
	}

	.c-gnav__icon {
		width: var(--gnav-chevron);
		rotate: 90deg;
	}

	/* TOP（写真の上）: 写真の明るさがスライドごとに違うので、文字と山形に白いにじみを付ける。1 つでは 2 枚目（濃い木の天井）で読めないので 3 つ重ねて濃くする（2026-09-28 の 3 枚の撮影で確認） */
	.l-header--overlay .c-gnav__button {
		text-shadow: var(--gnav-glow), var(--gnav-glow), var(--gnav-glow);
	}

	.l-header--overlay .c-gnav__icon {
		filter: drop-shadow(var(--gnav-glow)) drop-shadow(var(--gnav-glow)) drop-shadow(var(--gnav-glow));
	}

	/*
	 * 開いたリスト: ボタンの真下に白いパネル。縦に伸びて開く（行の高さ 0fr → 1fr＋不透明度）。幅は中身に合わせる（折り返さない）。
	 * 開閉の状態はボタンの aria-expanded（assets/js/main.js）。閉じている間は visibility で隠し、中のリンクを Tab の対象から外す（閉じるときは動きが終わってから隠す）
	 */
	.c-gnav__panel {
		position: absolute;
		top: 100%;
		left: 50%;
		display: grid;
		grid-template-rows: 0fr;
		width: max-content; /* 基準の li（ボタンの幅）に縮められないように */
		background: var(--c-white);
		box-shadow: var(--gnav-shadow);
		opacity: 0;
		visibility: hidden;
		translate: -50% 0;
		transition: grid-template-rows var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
	}

	.c-gnav__button[aria-expanded="true"] + .c-gnav__panel {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
		transition: grid-template-rows var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s;
	}

	/* 行の高さが 0 のときに中身を切る（余白を持つリンク列を直接行に置くと、余白の分だけ高さが残る） */
	.c-gnav__inner {
		min-height: 0;
		overflow: hidden;
	}

	/* リンク列の文法はメガメニューと同じ（先頭の「-」・子項目の字下げ・行送り） */
	.c-gnav__links {
		padding: var(--gnav-panel-py) var(--gnav-panel-px);
		font-size: var(--fs-gnav-link);
		line-height: var(--lh-menu);
	}

	.c-gnav__children {
		padding-left: var(--menu-indent);
		line-height: var(--lh-menu-child);
	}

	.c-gnav__link::before {
		content: "-";
		display: inline-block;
		width: var(--sitemap-dash-w);
	}

	@media (hover: hover) {
		.c-gnav__button:hover,
		.c-gnav__link:hover {
			color: var(--c-primary);
		}
	}

	/* ---------- 三本線（開く）と ×（閉じる）。× は三本線と同じ箱に右寄せで描く ---------- */
	.c-hamburger {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: var(--hamburger-w);
		height: var(--hamburger-h);
		color: var(--c-primary);
	}

	.c-hamburger__line {
		height: var(--bw-icon);
		background: currentColor;
	}

	.c-mega-menu__close {
		display: grid;
		place-items: center end;
		width: var(--hamburger-w);
		height: var(--hamburger-h);
		color: var(--c-primary);
	}

	.c-mega-menu__close-icon {
		position: relative;
		width: var(--close-size);
		height: var(--close-size);
	}

	.c-mega-menu__close-icon::before,
	.c-mega-menu__close-icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: var(--hamburger-w);
		height: var(--bw-icon);
		background: currentColor;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.c-mega-menu__close-icon::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* ---------- メガメニュー ---------- */
	/* ログイン中は管理バー（z-index 99999）の下から始め、× が隠れないようにする */
	.c-mega-menu {
		position: fixed;
		inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
		z-index: var(--z-menu);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--c-white);
		color: var(--c-text-menu);
		visibility: hidden;
		transform: translateY(-100%);
		/* 閉じるときは動きが終わってから隠す */
		transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
	}

	/* 開くときはすぐ見せる（閉じるボタンへフォーカスを移せるように） */
	.c-mega-menu.is-open {
		visibility: visible;
		transform: none;
		transition: transform var(--dur) var(--ease), visibility 0s;
	}

	/* 紙の背景は中身の高さまで敷く（SP のドロワーは画面より長い） */
	.c-mega-menu__inner {
		position: relative;
		isolation: isolate;
		min-height: 100%;
	}

	.c-mega-menu__inner::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: var(--z-behind);
		background: var(--paper-img) center top / var(--paper-size) repeat-y;
		opacity: var(--op-paper);
		pointer-events: none;
	}

	.c-mega-menu__body {
		padding-block: var(--menu-pt) var(--menu-pb);
	}

	.c-mega-menu__sns {
		justify-content: center;
		margin-top: var(--menu-sns-gap);
	}

	.c-mega-menu__cta {
		margin-top: var(--menu-cta-gap);
	}

	/* SNS の行が無い（URL 未受領・先方確認 ⑤ の既定・2026-09-27）とき、SP の会社概要の行 → ボタンは「会社概要の行 → SNS の行」と同じ間にする（SP の --menu-cta-gap は SNS の行の下端から測った間なので、そのままだとボタンが詰まる）。PC はもともと会社概要 → ボタンで測っている */
	@media (max-width: 767px) {
		.c-sitemap--menu + .c-mega-menu__cta {
			margin-top: var(--menu-sns-gap);
		}
	}

	/* PC: メガメニューの問い合わせボタンだけ小さくする（先方修正 2026-09-27）。部品の CSS は変えず、部品のトークンをメガメニューの中でだけ差し替える（TOP の Contact・体感ショールーム・完了画面・記事のお問い合わせは XD の 573×145 のまま） */
	@media (min-width: 768px) {
		.c-mega-menu__cta {
			--cta-h: var(--menu-cta-h);
			--cta-gap: var(--menu-cta-col-gap);
			--cta-chip-w: var(--menu-cta-chip-w);
			--cta-chip-h: var(--menu-cta-chip-h);
			--cta-chip-top: var(--menu-cta-chip-top);
			--cta-icon-gap: var(--menu-cta-icon-gap);
			--cta-tel-icon-w: var(--menu-cta-tel-icon-w);
			--cta-mail-icon-w: var(--menu-cta-mail-icon-w);
			--fs-cta-chip: var(--fs-menu-cta-chip);
			--fs-tel: var(--fs-menu-cta-tel);
			--fs-cta-mail: var(--fs-menu-cta-mail);
			--fs-hours: var(--fs-menu-cta-hours);
			max-inline-size: var(--menu-cta-w);
			margin-inline: auto;
		}
	}

	.is-menu-open {
		overflow: hidden;
	}

	/* ---------- 問い合わせボタン ---------- */
	.c-contact-buttons {
		display: flex;
		flex-direction: column;
		gap: var(--cta-gap);
	}

	.c-contact-buttons__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: var(--cta-h);
		padding-top: var(--cta-chip-top);
		background: var(--c-primary);
		color: var(--c-white);
		transition: background-color var(--dur-fast);
	}

	.c-contact-buttons__chip {
		display: grid;
		place-items: center;
		min-width: var(--cta-chip-w);
		min-height: var(--cta-chip-h);
		padding-inline: var(--sp-1);
		background: var(--c-white);
		color: var(--c-primary);
		font-size: var(--fs-cta-chip);
		font-weight: 700;
		line-height: var(--lh-none);
		white-space: nowrap;
	}

	/* チップの下の残りの高さの中央に置く */
	.c-contact-buttons__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--sp-1);
	}

	.c-contact-buttons__main {
		display: flex;
		align-items: center;
		gap: var(--cta-icon-gap);
	}

	.c-contact-buttons__icon-tel {
		width: var(--cta-tel-icon-w);
	}

	.c-contact-buttons__icon-mail {
		width: var(--cta-mail-icon-w);
	}

	.c-contact-buttons__tel {
		font-family: var(--font-en);
		font-size: var(--fs-tel);
		line-height: var(--lh-none);
		font-variant-numeric: lining-nums tabular-nums;
	}

	.c-contact-buttons__mail {
		font-family: var(--font-serif);
		font-size: var(--fs-cta-mail);
		font-weight: 600;
		line-height: var(--lh-tight);
		letter-spacing: var(--ls-none);
	}

	.c-contact-buttons__hours {
		font-size: var(--fs-hours);
		font-weight: 500;
		line-height: var(--lh-tight);
		font-variant-numeric: tabular-nums;
	}

	@media (hover: hover) {
		.c-contact-buttons__item:hover {
			background: var(--c-primary-hover);
		}
	}

	@media (min-width: 768px) {
		/* PC は横 2 列で電話が左（DOM はメール → 電話） */
		.c-contact-buttons {
			flex-direction: row-reverse;
		}

		.c-contact-buttons__item {
			flex: 1 1 0;
		}
	}
}