/* Frontend Core Navigation Block Overrides & Drawer Slide Animations */

/* 1. ハンバーガーボタン領域の共通化 */
.wp-block-navigation__responsive-container-open,
.cnb-custom-toggle-btn {
	background: transparent;
	border: none;
	padding: 6px 10px;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--cnb-line-color);
	transition: color 0.2s ease, opacity 0.2s ease;
	outline: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.wp-block-navigation__responsive-container-open:hover,
.cnb-custom-toggle-btn:hover {
	color: var(--cnb-line-hover-color);
}

.wp-block-navigation__responsive-container-open:focus-visible,
.cnb-custom-toggle-btn:focus-visible {
	outline: 2px solid var(--cnb-line-hover-color);
	outline-offset: 2px;
}

/* デフォルトSVGの非表示 & カスタム線ラッパーのスタイリング */
.cnb-custom-lines-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: var(--cnb-line-width);
	height: calc( (var(--cnb-line-height) * 4) + (var(--cnb-line-gap) * 3) );
	max-height: 40px;
	position: relative;
}

.cnb-custom-line {
	display: block;
	width: var(--cnb-line-width);
	height: var(--cnb-line-height);
	background-color: var(--cnb-line-color);
	border-radius: calc(var(--cnb-line-height) / 2);
	margin-bottom: var(--cnb-line-gap);
	transition: transform var(--cnb-drawer-duration) var(--cnb-drawer-easing),
	            opacity var(--cnb-drawer-duration) ease,
	            background-color 0.2s ease;
	transform-origin: center center;
}

.cnb-custom-line:last-child {
	margin-bottom: 0;
}

.wp-block-navigation__responsive-container-open:hover .cnb-custom-line,
.cnb-custom-toggle-btn:hover .cnb-custom-line {
	background-color: var(--cnb-line-hover-color);
}

/* アクティブ (ドロワーオープン時) のハンバーガークロス変形 */
.wp-block-navigation__responsive-container-open.is-active .cnb-custom-line,
.cnb-custom-toggle-btn.is-active .cnb-custom-line,
.has-modal-open .wp-block-navigation__responsive-container-open .cnb-custom-line {
	background-color: var(--cnb-line-active-color);
}

/* 3本線時の変形 */
.cnb-custom-toggle-btn.line-count-3.fade-middle.is-active .line-1,
.has-modal-open .line-count-3.fade-middle .line-1 {
	transform: translateY(calc(var(--cnb-line-height) + var(--cnb-line-gap))) rotate(45deg);
}
.cnb-custom-toggle-btn.line-count-3.fade-middle.is-active .line-2,
.has-modal-open .line-count-3.fade-middle .line-2 {
	opacity: 0;
	transform: scaleX(0);
}
.cnb-custom-toggle-btn.line-count-3.fade-middle.is-active .line-3,
.has-modal-open .line-count-3.fade-middle .line-3 {
	transform: translateY(calc(-1 * (var(--cnb-line-height) + var(--cnb-line-gap)))) rotate(-45deg);
}

/* 3本線で真ん中の線を残す (keep-middle) */
.cnb-custom-toggle-btn.line-count-3.keep-middle.is-active .line-1,
.has-modal-open .line-count-3.keep-middle .line-1 {
	transform: translateY(calc(var(--cnb-line-height) + var(--cnb-line-gap))) rotate(45deg);
}
.cnb-custom-toggle-btn.line-count-3.keep-middle.is-active .line-2,
.has-modal-open .line-count-3.keep-middle .line-2 {
	opacity: 1;
	transform: scaleX(0.7);
}
.cnb-custom-toggle-btn.line-count-3.keep-middle.is-active .line-3,
.has-modal-open .line-count-3.keep-middle .line-3 {
	transform: translateY(calc(-1 * (var(--cnb-line-height) + var(--cnb-line-gap)))) rotate(-45deg);
}

/* 2本線時の変形 */
.cnb-custom-toggle-btn.line-count-2.is-active .line-1,
.has-modal-open .line-count-2 .line-1 {
	transform: translateY(calc((var(--cnb-line-height) + var(--cnb-line-gap)) / 2)) rotate(45deg);
}
.cnb-custom-toggle-btn.line-count-2.is-active .line-3,
.has-modal-open .line-count-2 .line-3 {
	transform: translateY(calc(-1 * (var(--cnb-line-height) + var(--cnb-line-gap)) / 2)) rotate(-45deg);
}

/* 4本線時の変形 */
.cnb-custom-toggle-btn.line-count-4.is-active .line-1,
.has-modal-open .line-count-4 .line-1 {
	transform: translateY(calc(1.5 * (var(--cnb-line-height) + var(--cnb-line-gap)))) rotate(45deg);
}
.cnb-custom-toggle-btn.line-count-4.is-active .line-2,
.cnb-custom-toggle-btn.line-count-4.is-active .line-3,
.has-modal-open .line-count-4 .line-2,
.has-modal-open .line-count-4 .line-3 {
	opacity: 0;
}
.cnb-custom-toggle-btn.line-count-4.is-active .line-4,
.has-modal-open .line-count-4 .line-4 {
	transform: translateY(calc(-1.5 * (var(--cnb-line-height) + var(--cnb-line-gap)))) rotate(-45deg);
}

/* 回転クロス modifier */
.cnb-custom-toggle-btn.anim-spin-cross.is-active .cnb-custom-lines-wrap,
.has-modal-open .anim-spin-cross .cnb-custom-lines-wrap {
	transform: rotate(180deg);
	transition: transform var(--cnb-drawer-duration) var(--cnb-drawer-easing);
}


/* ==========================================================================
   2. コアナビゲーションブロック ドロワーアニメーション & スタイル
   ========================================================================== */
.wp-block-navigation__responsive-container {
	transition: transform var(--cnb-drawer-duration) var(--cnb-drawer-easing),
	            opacity var(--cnb-drawer-duration) ease,
	            visibility var(--cnb-drawer-duration) ease !important;
	background-color: var(--cnb-drawer-bg) !important;
}

/* ドロワーオーバーレイ背景 */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--cnb-drawer-bg) !important;
}

/* スライドイン方向制御 (Slide In Animations) */
/* 右からスライドイン (Slide Right) */
.cnb-drawer-anim-slide-right .wp-block-navigation__responsive-container:not(.is-menu-open),
.wp-block-navigation__responsive-container:not(.is-menu-open) {
	transform: translateX(100%);
}

.cnb-drawer-anim-slide-right .wp-block-navigation__responsive-container.is-menu-open {
	transform: translateX(0) !important;
}

/* 左からスライドイン (Slide Left) */
.cnb-drawer-anim-slide-left .wp-block-navigation__responsive-container:not(.is-menu-open) {
	transform: translateX(-100%);
	left: 0 !important;
	right: auto !important;
}

.cnb-drawer-anim-slide-left .wp-block-navigation__responsive-container.is-menu-open {
	transform: translateX(0) !important;
	left: 0 !important;
	right: auto !important;
}

/* 上からスライドイン (Slide Top) */
.cnb-drawer-anim-slide-top .wp-block-navigation__responsive-container:not(.is-menu-open) {
	transform: translateY(-100%);
	top: 0 !important;
	bottom: auto !important;
}

.cnb-drawer-anim-slide-top .wp-block-navigation__responsive-container.is-menu-open {
	transform: translateY(0) !important;
	top: 0 !important;
	bottom: auto !important;
}

/* 下からスライドイン (Slide Bottom) */
.cnb-drawer-anim-slide-bottom .wp-block-navigation__responsive-container:not(.is-menu-open) {
	transform: translateY(100%);
	bottom: 0 !important;
	top: auto !important;
}

.cnb-drawer-anim-slide-bottom .wp-block-navigation__responsive-container.is-menu-open {
	transform: translateY(0) !important;
	bottom: 0 !important;
	top: auto !important;
}

/* フェード (Fade Only) */
.cnb-drawer-anim-fade .wp-block-navigation__responsive-container:not(.is-menu-open) {
	opacity: 0;
	transform: none !important;
}

.cnb-drawer-anim-fade .wp-block-navigation__responsive-container.is-menu-open {
	opacity: 1 !important;
	transform: none !important;
}