/*
 * X-T9 カスタムドロワーメニュー - フロントエンド用CSS
 *
 * ここに書かれている値のうち var(--x-t9-...) の部分は、
 * 管理画面（設定 > X-T9 ドロワーメニュー）で入力した値が
 * PHP側で動的に生成する <style> によって差し込まれます。
 * （幅・高さ・ブレイクポイントは x-t9-custom-drawer-menu.php を参照）
 */

/* --------------------------------------------------------------------
   1. コアのナビゲーションブロック標準の見た目・挙動を打ち消す
   -------------------------------------------------------------------- */

/* 標準アイコン（SVG）とWP標準の閉じるボタンは非表示にする。
   display だけでなく複数のプロパティで多重に指定し、キャッシュ系プラグインや
   他のCSSの影響で一部が上書きされても確実に非表示になるようにする。
   （このSVGが隠れきっていないと、自前のアイコンと重なって表示され、
   　線の太さが場所によって異なって見える主な原因になる） */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-close {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	pointer-events: none !important;
}

/* ハンバーガーボタン本体：常に表示し、常に最前面（最上位）に固定 */
.wp-block-navigation__responsive-container-open {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: fixed !important;
	top: var(--x-t9-hb-top, 20px) !important;
	right: var(--x-t9-hb-right, 20px) !important;
	bottom: var(--x-t9-hb-bottom, auto) !important;
	left: var(--x-t9-hb-left, auto) !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	z-index: 999999 !important; /* 常に最上位 */
}

/* --------------------------------------------------------------------
   2. 自前のハンバーガーアイコン（JSで3本のspanを挿入して制御）
   -------------------------------------------------------------------- */

/* テーマ側が独自に付与している可能性のある背景・枠線・疑似要素を
   ボタンごと明示的に無効化する（他の線と太さが異なって見える主な原因の対策） */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-open *,
.wp-block-navigation__responsive-container-open *::before,
.wp-block-navigation__responsive-container-open *::after {
	box-sizing: border-box !important;
}

.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after {
	content: none !important;
	display: none !important;
}

.x-t9-hamburger-icon {
	position: relative;
	display: inline-block;
	width: var(--x-t9-hb-width);
	height: calc(var(--x-t9-hb-thickness) * 3 + var(--x-t9-hb-gap) * 2);
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
	transform: translateZ(0);
}

.x-t9-hamburger-icon::before,
.x-t9-hamburger-icon::after {
	content: none !important;
}

.x-t9-hamburger-icon .x-t9-hb-line {
	position: absolute;
	left: 0;
	width: 100% !important;
	height: var(--x-t9-hb-thickness) !important;
	min-height: 0;
	max-height: none;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	outline: none !important;
	background-color: var(--x-t9-hb-color);
	background-image: none !important;
	box-shadow: none !important;
	border-radius: 1px;
	/* OSの拡大縮小（125%・150%など）が100%以外の環境で、Chrome/Firefoxが
	   細い横線をにじませて描画してしまうことがあるため、GPUレイヤーに
	   昇格させて端数（サブピクセル）の丸め方を安定させる */
	transform: translateZ(0);
	backface-visibility: hidden;
	transition:
		transform var(--x-t9-transition-duration) ease,
		opacity var(--x-t9-transition-duration) ease,
		top var(--x-t9-transition-duration) ease;
}

.x-t9-hamburger-icon .x-t9-hb-line::before,
.x-t9-hamburger-icon .x-t9-hb-line::after {
	content: none !important;
}

.x-t9-hamburger-icon .x-t9-hb-line1 { top: 0; }
.x-t9-hamburger-icon .x-t9-hb-line2 { top: calc(var(--x-t9-hb-thickness) + var(--x-t9-hb-gap)); }
.x-t9-hamburger-icon .x-t9-hb-line3 { top: calc((var(--x-t9-hb-thickness) + var(--x-t9-hb-gap)) * 2); }

/* クリック後：✕（バツ印）に変形。中央の線を軸に上下の線が回転して重なる */
.wp-block-navigation__responsive-container-open.x-t9-is-active .x-t9-hb-line1 {
	top: calc(var(--x-t9-hb-thickness) + var(--x-t9-hb-gap));
	transform: rotate(var(--x-t9-hb-x-angle, 45deg)) translateZ(0);
}
.wp-block-navigation__responsive-container-open.x-t9-is-active .x-t9-hb-line2 {
	opacity: var(--x-t9-hb-line2-active-opacity, 0);
}
.wp-block-navigation__responsive-container-open.x-t9-is-active .x-t9-hb-line3 {
	top: calc(var(--x-t9-hb-thickness) + var(--x-t9-hb-gap));
	transform: rotate(calc(var(--x-t9-hb-x-angle, 45deg) * -1)) translateZ(0);
}

/* --------------------------------------------------------------------
   3. ドロワー本体：画面外右側に配置し、開いたときだけスライドイン
   -------------------------------------------------------------------- */

.wp-block-navigation__responsive-container {
	display: flex !important;
	flex-direction: column !important;
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	width: var(--x-t9-drawer-width) !important;
	height: var(--x-t9-drawer-height) !important;
	max-width: 100vw !important;
	max-height: 100vh !important;
	background-color: var(--x-t9-drawer-bg, #ffffff) !important;
	color: var(--x-t9-drawer-color, #333333) !important;
	overflow-y: auto !important;
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);

	/* 初期状態は画面外（右側）に隠しておく */
	transform: translateX(100%);
	visibility: hidden;
	transition:
		transform var(--x-t9-transition-duration) ease,
		visibility var(--x-t9-transition-duration) ease;

	z-index: 999990 !important; /* ハンバーガーボタンの次に高い階層 */
}

/* ハンバーガークリックでこのクラスが付き、画面内へスライドイン */
.wp-block-navigation__responsive-container.x-t9-drawer-open {
	transform: translateX(0);
	visibility: visible;
}

/* WP標準のダイアログ・ラッパー類はレイアウトをリセットしつつ、
   ドロワー本体と同じ背景色を直接塗る（透明にして親の背景を透かす方式だと、
   環境によって親の background-color が反映されないケースがあったための対策） */
.wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container-content {
	display: block !important;
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--x-t9-drawer-bg, #ffffff) !important;
	color: var(--x-t9-drawer-color, #333333) !important;
	box-shadow: none !important;
}

.wp-block-navigation__responsive-container-content {
	padding: 80px 24px 24px !important; /* 上部は固定ハンバーガーボタンとの被り防止 */
	box-sizing: border-box !important;
	overflow-y: auto;
	height: 100%;
}

/* --------------------------------------------------------------------
   4. メニュー項目：ドロワーになるよう縦並びに組み替える
   -------------------------------------------------------------------- */

.wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100% !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 4px !important;
	background: transparent !important;
}

.wp-block-navigation-item {
	width: 100% !important;
}

.wp-block-navigation-item__content {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 4px !important;
	color: inherit !important;
}

/* サブメニュー（子メニュー）も、ドロップダウンではなく
   その場に展開する縦並びの入れ子として表示する */
.wp-block-navigation__submenu-container {
	position: static !important;
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	box-shadow: none !important;
	background: transparent !important;
	padding-left: 16px !important;
}

/* --------------------------------------------------------------------
   5. ドロワー表示中は背面のスクロールを止める（<html>に付与）
   -------------------------------------------------------------------- */

html.x-t9-drawer-locked {
	overflow: hidden !important;
}