/*
 * Site Header
 * design.md「4. コンポーネント > ヘッダー / ボタン（ヘッダー CTA）」に準拠。
 * PC: 高さ 80px 固定・ロゴ左・ナビ中央・電話ブロック＋CTA右
 * SP: ロゴのみ表示（ハンバーガーメニューは別タスクで実装）
 */

.l-header {
	position: sticky;
	top: 0;
	z-index: 200;
	/* 中間で白を 70% 残し、コンテンツに重なったときに透けすぎないようにする（下端は透明のまま） */
	background: linear-gradient(to bottom, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 70%, transparent) 50%, transparent 100%);
}

/* グラデーション→単色は transition が効かないため、白い層を重ねてフェードさせる */
.l-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-bg);
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
}

/* 管理バー表示中は、その下に固定する */
.admin-bar .l-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* ドロワー・メガメニュー表示中は白塗り（下方向グラデーションで下地が透けないように） */
body.is-drawer-open .l-header::before,
.l-header:has(.l-header__menu-item:not(.is-mega-closed):hover > .l-header__mega)::before,
.l-header:has(.l-header__menu-item:not(.is-mega-closed):focus-within > .l-header__mega)::before {
	opacity: 1;
}

/*
 * メガメニュー表示中はページ側を暗くし、白いパネルとの境界を分かりやすくする。
 * .l-header__mega は transform を持ち fixed の基準になってしまうため、幕はヘッダー側に置く。
 * 白塗り層（::before, z-index: -1）より後ろに重ねる。
 */
.l-header::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background: var(--color-overlay-dim);
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
}

.l-header:has(.l-header__menu-item:not(.is-mega-closed):hover > .l-header__mega)::after,
.l-header:has(.l-header__menu-item:not(.is-mega-closed):focus-within > .l-header__mega)::after {
	opacity: 1;
}

.l-header__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	height: 80px;
	padding-inline: 16px;
}

/* Logo */
.l-header__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.l-header__logo .custom-logo-link,
.l-header__logo-fallback {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--color-text);
	font-weight: var(--font-weight-bold);
}

.l-header__logo img,
.l-header__logo .custom-logo {
	width: 160px;
	height: auto;
}

/* Right group (nav + contact) — ロゴを左端、以降を右寄せ */
.l-header__right {
	display: flex;
	align-items: center;
	gap: 54px;
	margin-left: auto;
}

/* Nav */
.l-header__nav {
	display: flex;
}

.l-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 36px;
}

/* ヘッダーの高さいっぱいに広げ、リンクからパネルへ移る間もホバーを保つ */
.l-header__menu-item {
	display: flex;
	align-items: center;
	height: 80px;
}

.l-header__menu-link {
	position: relative;
	color: var(--color-text);
	font-size: var(--fs-base);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	line-height: var(--line-height-heading);
}

.l-header__menu-link::after {
	content: "";
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-primary);
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 200ms ease;
}

.l-header__menu-item:hover > .l-header__menu-link::after,
.l-header__menu-item:focus-within > .l-header__menu-link::after {
	opacity: 1;
}

/* Mega menu（sticky の .l-header を基準にヘッダー直下へ全幅表示） */
.l-header__mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	border-top: 1px solid var(--color-border);
	background: var(--color-bg);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 300ms ease, transform 300ms ease, visibility 0s linear 300ms;
}

.l-header__menu-item:not(.is-mega-closed):hover > .l-header__mega,
.l-header__menu-item:not(.is-mega-closed):focus-within > .l-header__mega {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0s;
}

.l-header__mega-inner {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	max-width: var(--container-max-wide);
	margin: 0 auto;
	padding: 32px 64px;
}

.l-header__mega-head {
	flex: 0 0 306px;
}

.l-header__mega-title {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
}

.l-header__mega-text {
	margin: 16px 0 0;
	font-size: var(--fs-button-sm);
	line-height: var(--line-height-body);
}

.l-header__mega-head .c-button {
	justify-content: flex-start;
	margin-top: 16px;
	width: 200px;
	padding-left: 16px;
}

.l-header__mega-list {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 孫を持つ子が並ぶときは2列にし、カードのタイトルが1行に収まる幅を取る */
.l-header__mega-list--grouped {
	grid-template-columns: repeat(2, 1fr);
}

.l-header__mega-group-title {
	display: block;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-primary);
	font-size: var(--fs-base);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
	text-decoration: none;
}

.l-header__mega-sublist {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.l-header__mega-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 80px;
	padding: 16px;
	background: var(--color-bg-muted);
	border-radius: 5px;
	color: var(--color-text);
	text-decoration: none;
	transition: background 200ms ease;
}

.l-header__mega-card:hover {
	background: var(--color-primary-hover);
}

.l-header__mega-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.l-header__mega-card-title {
	font-size: var(--fs-base);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
}

.l-header__mega-card-en {
	font-size: var(--fs-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-primary);
}

.l-header__mega-card-arrow {
	flex-shrink: 0;
	color: var(--color-primary);
}

/* Contact block (tel + CTA button) */
.l-header__contact {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.l-header__tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 16px;
	border: 1px solid var(--color-primary);
	border-radius: 5px;
	line-height: var(--line-height-heading);
}

.l-header__tel-number {
	color: var(--color-primary);
	font-size: var(--fs-base);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.l-header__tel-label {
	font-size: var(--fs-sm);
	font-weight: var(--font-weight-medium);
}

.l-header__tel-hours {
	margin: 2px 0 0;
	font-size: var(--fs-xs);
	color: var(--color-primary);
}

/* Header CTA button（design.md: 背景 --color-primary / 5px / 白 14px medium / メールアイコン 24×17） */
.l-header__cta {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 50px;
	padding: 4px 16px;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	font-size: var(--fs-button-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1;
}

.l-header__cta-icon {
	width: 18px;
	height: 13px;
	color: inherit;
}

/* Hamburger button（≤1023pxで表示） */
.l-header__hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-text);
	cursor: pointer;
}

.l-header__hamburger-icon {
	width: 24px;
	height: 12px;
}

.l-header__hamburger-icon--close {
	display: none;
	width: 24px;
	height: 24px;
}

.l-header__hamburger[aria-expanded="true"] .l-header__hamburger-icon--open {
	display: none;
}

.l-header__hamburger[aria-expanded="true"] .l-header__hamburger-icon--close {
	display: block;
}

/* ≤1023px: ナビを非表示（電話・CTAは残す）、ハンバーガーを表示 */
@media (max-width: 1023px) {
	.l-header__inner {
		gap: 16px;
	}

	.l-header__nav {
		display: none;
	}

	.l-header__hamburger {
		display: inline-flex;
	}
}

/* ≤767px: 電話・CTAも非表示、ヘッダー高さとロゴを縮小 */
@media (max-width: 767px) {
	.l-header__contact {
		display: none;
	}

	.l-header__inner {
		height: 60px;
	}

	.l-header__logo img,
	.l-header__logo .custom-logo {
		width: 120px;
	}
}

/* ヘッダー右の電話番号・お問い合わせの hover：塗りと白抜きを反転 */
.l-header__tel,
.l-header__tel-number,
.l-header__tel-hours {
	transition:
		background-color var(--motion-duration-hover) var(--motion-ease),
		color var(--motion-duration-hover) var(--motion-ease);
}

.l-header__cta {
	transition:
		background-color var(--motion-duration-hover) var(--motion-ease),
		color var(--motion-duration-hover) var(--motion-ease),
		box-shadow var(--motion-duration-hover) var(--motion-ease);
}

@media (hover: hover) {
	.l-header__tel:has(.l-header__tel-number:hover) {
		background-color: var(--color-primary);
	}

	.l-header__tel:has(.l-header__tel-number:hover) .l-header__tel-number,
	.l-header__tel:has(.l-header__tel-number:hover) .l-header__tel-hours {
		color: #fff;
	}

	.l-header__cta:hover {
		background-color: var(--color-bg);
		color: var(--color-primary);
		box-shadow: inset 0 0 0 1px currentColor;
	}
}

.l-header__tel:has(.l-header__tel-number:focus-visible) {
	background-color: var(--color-primary);
}

.l-header__tel:has(.l-header__tel-number:focus-visible) .l-header__tel-number,
.l-header__tel:has(.l-header__tel-number:focus-visible) .l-header__tel-hours {
	color: #fff;
}

.l-header__cta:focus-visible {
	background-color: var(--color-bg);
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1px currentColor;
}