/* NekoNoTe Nav 1.1.0 — 開閉ボタン .nk-burger（見た目と開閉アニメ）。
   マークアップは includes/burger.php が core のボタンに差し込む:
   <button class="nk-burger nk-burger--open|close [nk-burger--fixed] …" aria-label="文言">
     <span class="nk-burger__bars"><i></i><i></i><i></i></span>
     <span class="nk-burger__label"><span class="nk-burger__label-open">メニュー</span><span class="nk-burger__label-close">とじる</span></span>
   </button>
   テーマ非依存。寸法・色は CSS 変数で上書きする（テーマの theme.json トークンがあればそれを既定にする）。 */

:root {
	--nk-burger-size-w: 56px;                       /* ボタンの幅 */
	--nk-burger-size-h: 52px;                       /* ボタンの高さ（線 24 + 間 5 + 文言 11 + 余白 6×2） */
	--nk-burger-w: 32px;                            /* 線の長さ */
	--nk-burger-gap: 9px;                           /* 線と線の間 */
	--nk-burger-line: 2px;                          /* 線の太さ */
	--nk-burger-label-size: 11px;                   /* キャプションの文字サイズ */
	--nk-burger-color: var(--wp--preset--color--contrast, currentColor);   /* 閉じているときの色 */
	--nk-burger-open-color: currentColor;                                   /* 開いているとき（オーバーレイ上）の色。既定はオーバーレイの文字色を継承 */
	--nk-burger-focus: var(--wp--preset--color--primary, currentColor);    /* focus-visible の輪郭 */
	--nk-burger-duration: 0.35s;
	--nk-burger-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wp-block-navigation .nk-burger {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: var(--nk-burger-size-w);
	height: var(--nk-burger-size-h);
	padding: 6px 0;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--nk-burger-color);
	cursor: pointer;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
}
.wp-block-navigation .nk-burger--close { color: var(--nk-burger-open-color); }
.wp-block-navigation .nk-burger:focus-visible {
	outline: 2px solid var(--nk-burger-focus);
	outline-offset: 2px;
}
/* core と同じ条件で、600px 以上では「常時」以外の開くボタンを隠す（自前の display が後勝ちしないように明示） */
@media (min-width: 600px) {
	.wp-block-navigation .nk-burger--open:not(.always-shown) { display: none; }
}

.wp-block-navigation .nk-burger__bars {
	position: relative;
	display: block;
	width: var(--nk-burger-w);
	height: calc(var(--nk-burger-line) * 3 + var(--nk-burger-gap) * 2);
}
.wp-block-navigation .nk-burger__bars i {
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--nk-burger-line);
	border-radius: 2px;
	background: currentColor;
	transform-origin: 50% 50%;
	transition: transform var(--nk-burger-duration) var(--nk-burger-ease), opacity 0.2s ease;
}
.wp-block-navigation .nk-burger__bars i:nth-child(1) { top: 0; }
.wp-block-navigation .nk-burger__bars i:nth-child(2) { top: calc(50% - var(--nk-burger-line) / 2); }
.wp-block-navigation .nk-burger__bars i:nth-child(3) { bottom: 0; }

.wp-block-navigation .nk-burger__label {
	position: relative;
	display: block;
	width: 100%;
	height: 1em;
	font-size: var(--nk-burger-label-size);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: center;
}
.wp-block-navigation .nk-burger__label > span {
	position: absolute;
	inset: 0;
	transition: opacity 0.25s ease, transform var(--nk-burger-duration) var(--nk-burger-ease);
}
.wp-block-navigation .nk-burger__label-close { opacity: 0; transform: translateY(0.6em); }

/* × の状態: 上下の線を中央へ寄せて ±45°、真ん中は消す。キャプションは「とじる」へ。
   閉じるボタンは常に ×（:has() を使わない規則に分けて、非対応ブラウザでも × のまま）。
   開くボタンはオーバーレイが開いている間だけ ×（閉じた瞬間に ×→線 が動く。:has() 非対応では線のまま）。 */
.wp-block-navigation .nk-burger--close .nk-burger__bars i:nth-child(1) {
	transform: translateY(calc(var(--nk-burger-gap) + var(--nk-burger-line))) rotate(45deg);
}
.wp-block-navigation .nk-burger--close .nk-burger__bars i:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}
.wp-block-navigation .nk-burger--close .nk-burger__bars i:nth-child(3) {
	transform: translateY(calc(-1 * (var(--nk-burger-gap) + var(--nk-burger-line)))) rotate(-45deg);
}
.wp-block-navigation .nk-burger--close .nk-burger__label-open {
	opacity: 0;
	transform: translateY(-0.6em);
}
.wp-block-navigation .nk-burger--close .nk-burger__label-close {
	opacity: 1;
	transform: none;
}
.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) .nk-burger--open .nk-burger__bars i:nth-child(1) {
	transform: translateY(calc(var(--nk-burger-gap) + var(--nk-burger-line))) rotate(45deg);
}
.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) .nk-burger--open .nk-burger__bars i:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}
.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) .nk-burger--open .nk-burger__bars i:nth-child(3) {
	transform: translateY(calc(-1 * (var(--nk-burger-gap) + var(--nk-burger-line)))) rotate(-45deg);
}
.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) .nk-burger--open .nk-burger__label-open {
	opacity: 0;
	transform: translateY(-0.6em);
}
.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) .nk-burger--open .nk-burger__label-close {
	opacity: 1;
	transform: none;
}

/* 開いた瞬間: 閉じるボタン側で 線→× を再生（display: none から現れるので keyframes で） */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-navigation__responsive-container.is-menu-open .nk-burger--close .nk-burger__bars i:nth-child(1) { animation: nk-burger-x1 0.4s var(--nk-burger-ease) both; }
	.wp-block-navigation__responsive-container.is-menu-open .nk-burger--close .nk-burger__bars i:nth-child(2) { animation: nk-burger-x2 0.25s ease both; }
	.wp-block-navigation__responsive-container.is-menu-open .nk-burger--close .nk-burger__bars i:nth-child(3) { animation: nk-burger-x3 0.4s var(--nk-burger-ease) both; }
	.wp-block-navigation__responsive-container.is-menu-open .nk-burger--close .nk-burger__label-open { animation: nk-burger-lbl-out 0.3s ease both; }
	.wp-block-navigation__responsive-container.is-menu-open .nk-burger--close .nk-burger__label-close { animation: nk-burger-lbl-in 0.35s var(--nk-burger-ease) both; }
}
@keyframes nk-burger-x1 { from { transform: none; } to { transform: translateY(calc(var(--nk-burger-gap) + var(--nk-burger-line))) rotate(45deg); } }
@keyframes nk-burger-x2 { from { opacity: 1; transform: none; } to { opacity: 0; transform: scaleX(0.2); } }
@keyframes nk-burger-x3 { from { transform: none; } to { transform: translateY(calc(-1 * (var(--nk-burger-gap) + var(--nk-burger-line)))) rotate(-45deg); } }
@keyframes nk-burger-lbl-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-0.6em); } }
@keyframes nk-burger-lbl-in { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .nk-burger__bars i,
	.wp-block-navigation .nk-burger__label > span { transition: none; }
}