/**
 * NKR SEO — Mobile menu (independent drawer) v0.2.2
 *
 * v0.2.0 / v0.2.1 の親テーマ `.nt-menu-toggle` 補助 JS/CSS では
 * 実機モバイルタップで開閉できないケースがあったため、方針変更:
 *   - 親テーマのハンバーガー / nav overlay は使わない
 *   - `nkr-seo` から独立したボタン `.nkr-mobile-menu-toggle` +
 *     ドロワー `.nkr-mobile-menu-drawer` + backdrop を出す
 *   - モバイル幅のみ表示、PC は完全非表示
 *
 * 親テーマ `.nt-menu-toggle` / `.nt-header__nav` はモバイル幅で
 * 非表示化して二重表示を防ぐ。
 */

/* PC 幅では独自 UI 完全非表示 */
.nkr-mobile-menu-toggle,
.nkr-mobile-menu-drawer,
.nkr-mobile-menu-backdrop {
	display: none;
}

@media (max-width: 900px) {

	/*
	 * 親テーマの既存ハンバーガー / mobile nav を非表示化
	 * （二重表示 + 実機タップ問題の元となっていた overlay を排除）
	 */
	.nt-menu-toggle {
		display: none !important;
	}
	.nt-header__nav {
		position: static !important;
		display: none !important;
	}

	/* 独自ハンバーガーボタン（画面右上、固定表示） */
	.nkr-mobile-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 12px;
		right: 12px;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid rgba(0, 0, 0, 0.15);
		border-radius: 6px;
		background: #fff;
		color: #222;
		cursor: pointer;
		z-index: 100001;
		pointer-events: auto;
		touch-action: manipulation;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}
	/* ボタン内アイコン */
	.nkr-mobile-menu-toggle__bar,
	.nkr-mobile-menu-toggle__bar::before,
	.nkr-mobile-menu-toggle__bar::after {
		display: block;
		width: 22px;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
		pointer-events: none;
	}
	.nkr-mobile-menu-toggle__bar {
		position: relative;
	}
	.nkr-mobile-menu-toggle__bar::before,
	.nkr-mobile-menu-toggle__bar::after {
		content: "";
		position: absolute;
		left: 0;
		transition: transform 0.18s;
	}
	.nkr-mobile-menu-toggle__bar::before { top: -7px; }
	.nkr-mobile-menu-toggle__bar::after  { top:  7px; }
	body.nkr-mobile-menu-open .nkr-mobile-menu-toggle__bar { background: transparent; }
	body.nkr-mobile-menu-open .nkr-mobile-menu-toggle__bar::before {
		transform: translateY(7px) rotate(45deg);
	}
	body.nkr-mobile-menu-open .nkr-mobile-menu-toggle__bar::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Backdrop（ドロワー背後のクリック閉じレイヤー） */
	.nkr-mobile-menu-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transition: opacity 0.2s;
		z-index: 99998;
	}
	body.nkr-mobile-menu-open .nkr-mobile-menu-backdrop {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
	}

	/* ドロワー（右からスライドイン） */
	.nkr-mobile-menu-drawer {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 82%;
		max-width: 320px;
		background: #fff;
		color: #222;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
		transform: translateX(100%);
		transition: transform 0.22s ease;
		z-index: 99999;
		overflow-y: auto;
		padding: 72px 20px 24px;
		box-sizing: border-box;
	}
	body.nkr-mobile-menu-open .nkr-mobile-menu-drawer {
		transform: translateX(0);
	}
	.nkr-mobile-menu-drawer ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.nkr-mobile-menu-drawer li {
		margin: 0;
	}
	.nkr-mobile-menu-drawer a {
		display: block;
		padding: 14px 8px;
		font-size: 15px;
		line-height: 1.5;
		color: #222;
		text-decoration: none;
		border-bottom: 1px solid #eee;
		touch-action: manipulation;
	}
	.nkr-mobile-menu-drawer a:hover,
	.nkr-mobile-menu-drawer a:focus {
		background: #f7f7f7;
	}

	/* Scroll lock when drawer open */
	body.nkr-mobile-menu-open {
		overflow: hidden;
	}
}