/* ==========================================================================
   kw-site-header — ヘッダー & ナビゲーション
   ========================================================================== */

/* --------------------------------------------------
   1. 配置スタイル（Block Style 選択）
   -------------------------------------------------- */
.kw-site-header.is-style-sticky {
	position: sticky;
	top: var(--wp--preset--spacing--size-24);
	inset-inline: 0;
}

.kw-site-header.is-style-fixed {
	position: fixed;
	top: var(--wp--preset--spacing--size-24);
	inset-inline: 0;
}

.kw-site-header {
	z-index: 100;
	padding: var(--wp--preset--spacing--size-24);
}

/* --------------------------------------------------
   2. ピル型ナビ本体
   -------------------------------------------------- */
.kw-nav-pill {
	position: relative;
	border-radius: 9999px;
	box-shadow: 0 0 8px rgba(73, 185, 208, 0.5);
	padding: var(--wp--preset--spacing--size-16) var(--wp--preset--spacing--size-32);
}

/* backdrop-filter を ::before に移動。本体に置くと stacking context が生まれ、
   子孫の position:fixed（ナビオーバーレイ）がビューポート基準にならなくなるため */
.kw-nav-pill::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	background: rgba(255 255 255 / .85);
	backdrop-filter: blur(8px);
	z-index: -1;
}

/* --------------------------------------------------
   3. 右側グループ（ナビ + CTA）の gap
   -------------------------------------------------- */
.kw-nav-right {
	gap: var(--wp--preset--spacing--size-16);
}

/* --------------------------------------------------
   4. ナビリンク（PC）
   -------------------------------------------------- */
:root .kw-nav-menu .wp-block-navigation__container {
	gap: .5rem;
}

/* リンクのテキストスタイル */
:root .kw-nav-menu .wp-block-navigation-item__content {
	padding: 0.5em var(--wp--preset--spacing--size-12);
	font-size: var(--wp--preset--font-size--font-16);
	font-weight: 700;
	color: var(--wp--preset--color--base-text);
	transition: color 0.2s ease;
	text-decoration: none;
}

/* グラデーション下線 — li::after で position:absolute（参考コードと同方式） */
@media (width > 950px) {
	:root .kw-nav-menu .wp-block-navigation-item::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 9999px;
		background: linear-gradient(to right,
				var(--wp--preset--color--primary-500),
				var(--wp--preset--color--primary-800));
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--duration-base) var(--ease-base);
	}

	:root .kw-nav-menu .wp-block-navigation-item:hover::before,
	:root .kw-nav-menu .current-menu-item::before,
	:root .kw-nav-menu .current-page-ancestor::before {
		transform: scaleX(1);
	}

	:root .kw-nav-menu .wp-block-navigation-item {
		position: relative;
	}
}

/* ホバー・カレント: テキスト色 */
:root .kw-nav-menu .wp-block-navigation-item:hover .wp-block-navigation-item__content,
:root .kw-nav-menu .current-menu-item .wp-block-navigation-item__content,
:root .kw-nav-menu .current-page-ancestor .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-primary);
}

/* --------------------------------------------------
   5. CTAボタン（is-style-cv）のサイズ調整
   -------------------------------------------------- */
:root .kw-nav-cta-btn .wp-block-button__link {
	padding: var(--wp--preset--spacing--size-12) var(--wp--preset--spacing--size-16);
	font-size: var(--wp--preset--font-size--font-14);
}

/* --------------------------------------------------
   6. ハンバーガーボタン — SVG アイコンで再現
   -------------------------------------------------- */

/* WP デフォルトの SVG を非表示 */
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
	display: none;
}

/* 開くボタン — MENU テキスト(::before) + 三本線SVG(::after) */
.kw-nav-menu .wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	gap: 8px;
	border: none;
	padding: 0;
	background: none;
	cursor: pointer;
	line-height: 1;
	margin-top: -9px;
	/* アイコンとテキストの垂直位置微調整 */
}

/* 閉じるボタン */
.kw-nav-menu .wp-block-navigation__responsive-container-close {
	align-self: flex-end;
	display: flex;
	align-items: center;
	gap: 8px;
	border: none;
	padding: 1rem;
	padding-right: 5vw;
	background: none;
	cursor: pointer;
	margin-bottom: 2rem;
	font-size: 0;
	/* WPネイティブテキストを非表示 */
	color: transparent;
}

/* WP デフォルトのテキストは小さくして位置調整（完全に消すとアクセシビリティが低下するため残す） 
.kw-nav-menu .wp-block-navigation__responsive-container-open::before {
	content: "MENU";
	color: var(--wp--preset--color--text-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}
*/
.kw-nav-menu .wp-block-navigation__responsive-container-open::before {
	content: "MENU";
	color: var(--wp--preset--color--text-primary);
	font-size: 8px;
	font-weight: 700;
	line-height: 1;
	position: absolute;
	bottom: -14px;
}

:root .kw-nav-menu .wp-block-navigation__responsive-container-close::before {
	content: "CLOSE";
	color: var(--wp--preset--color--text-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.kw-nav-menu .wp-block-navigation__responsive-container-open::after {
	content: "";
	display: block;
	width: 26px;
	height: 21px;
	background-image: url("../images/hamburger-open.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

:root .kw-nav-menu .wp-block-navigation__responsive-container-close::after {
	content: "";
	display: block;
	width: 25px;
	height: 25px;
	background-image: url("../images/hamburger-close.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* ハンバーガーサイズ調整 */
.kw-nav-menu {
	gap: 0;
}

/* --------------------------------------------------
   7. オーバーレイメニュー（展開後）— 全画面
   WP 6.5以降: has-modal-open + dialog 構造
   -------------------------------------------------- */

/* コンテナ自体: 背景色・overflow だけ上書き（position はWPJSが管理） */
:root .kw-nav-menu .wp-block-navigation__responsive-container.has-modal-open {
	overflow: hidden !important;
	background-color: rgba(255, 255, 255, 0.8) !important;
	backdrop-filter: blur(12px);
}

/* dialog ラッパー: 全画面・flex縦並び */
:root .kw-nav-menu .wp-block-navigation__responsive-container-dialog {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 2rem;
	box-sizing: border-box;
}



/* --------------------------------------------------
   8. ハンバーガー制御（950px 境界）
   -------------------------------------------------- */

/* 600px 以上でハンバーガーを表示 */
@media (min-width: 600px) {
	.kw-nav-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* 950px 超でハンバーガーを非表示 */
@media (width > 950px) {
	.kw-nav-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;
	}
}

/* SP（950px 以下）: PC ナビ非表示・CTA ボタン非表示 */
@media (width <=950px) {
	.kw-nav-menu .wp-block-navigation__container {
		display: none;
	}

	.kw-site-header .kw-nav-cta {
		display: block;
	}

	.kw-site-header .wp-block-site-logo img {
		width: 123px !important;
		height: auto;
	}

	/* オーバーレイ内のリンク縦並び */
	:root .kw-nav-menu .wp-block-navigation__responsive-container-content {
		align-items: flex-start;
		padding-left: 5vw;
		row-gap: 1.5em;
		column-gap: 0;
	}

	/* オーバーレイ内の下線疑似要素はリセット */
	:root .kw-nav-menu .wp-block-navigation__responsive-container-content .wp-block-navigation-item::after {
		display: none !important;
	}

	/* ハンバーガー展開時のメニュー整列*/
	:root .kw-nav-menu .wp-block-navigation__container {
		align-items: flex-start !important;
	}
}

/* --------------------------------------------------
   9. ロゴ
   -------------------------------------------------- */
.wp-block-site-logo {
	transition: filter var(--duration-base) var(--ease-base);
}

.wp-block-site-logo:hover {
	filter: brightness(110%);
}

/* --------------------------------------------------
   10. サブメニュー（wp:navigation-submenu ドロップダウン）
   -------------------------------------------------- */
:root .kw-nav-menu .wp-block-navigation__submenu-container {
	border: none;
	border-radius: var(--wp--preset--border-radius--radius-md);
	box-shadow: 0 4px 16px rgba(20, 30, 40, 0.12);
	background-color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--size-8) 0;
}

:root .kw-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--size-8) var(--wp--preset--spacing--size-16);
}

:root .kw-nav-menu .wp-block-navigation-submenu__toggle svg {
	transition: transform var(--duration-base) var(--ease-base);
}

:root .kw-nav-menu .wp-block-navigation-submenu:hover .wp-block-navigation-submenu__toggle svg,
:root .kw-nav-menu .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}