/**
 * ONEsta — Mega Menu
 *
 * PC: hover dropdown（position: fixed で viewport 全幅）
 * Mobile + Drawer: accordion
 *
 * JS が --onesta-header-h をセットし、パネルはその下に展開する。
 * position: fixed なので WP core の position: relative チェーンに影響されない。
 */

/* ==========================================================================
 * 1. Parent item
 * ========================================================================== */

.wp-block-navigation .onesta-has-mega {
	position: static;
}

/* ==========================================================================
 * 2. Panel — PC dropdown（position: fixed, viewport 全幅）
 * ========================================================================== */

.onesta-mega-panel {
	position: fixed;
	top: var(--onesta-header-h, 60px);
	left: 0;
	width: 100vw;
	transform: translateY(8px);

	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;

	background: var(--onesta-header-bg, var(--wp--preset--color--neutral-900, #1f2937));
	color: var(--onesta-header-color, inherit);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	border-radius: 0 0 var(--onesta-radius, 0) var(--onesta-radius, 0);
	padding: var(--wp--preset--spacing--40, 2rem);
	z-index: 999;

	font-size: 0.9375rem;
}

/* --- パネル内リセット --- */
.onesta-mega-panel :where(h2, h3, h4) {
	font-size: 1rem;
	font-weight: 600;
	color: inherit;
}
.onesta-mega-panel :where(p, li) {
	font-size: 0.875rem;
}
.onesta-mega-panel .wp-block-button {
	font-size: 0.875rem;
}
.onesta-mega-panel :where(.wp-block-column > *) {
	height: auto;
}
/* パネル上方の透明ブリッジ: ナビ→パネル間のhover切れを防止 */
/* パネルは li の子要素なので、::before にカーソルが乗れば li:hover が維持される */
@media (min-width: 769px) {
	.onesta-mega-panel::before {
		content: "";
		position: absolute;
		top: -20px;
		left: 0;
		right: 0;
		height: 20px;
	}
}
.onesta-mega-panel a {
	color: inherit;
	text-decoration: none;
}
.onesta-mega-panel a:hover {
	opacity: 0.7;
}

/* ==========================================================================
 * 3. PC hover（≥769px）
 *
 * ナビアイテムをヘッダー高さまで引き伸ばし、
 * リンク下端〜パネル上端の隙間を無くして hover が切れないようにする。
 * ========================================================================== */

@media (min-width: 769px) {
	/* ナビ全体をヘッダー高さに引き伸ばす */
	.wp-block-navigation:has(.onesta-has-mega) {
		align-self: stretch;
	}
	.wp-block-navigation:has(.onesta-has-mega) .wp-block-navigation__responsive-container,
	.wp-block-navigation:has(.onesta-has-mega) .wp-block-navigation__responsive-close,
	.wp-block-navigation:has(.onesta-has-mega) .wp-block-navigation__responsive-dialog,
	.wp-block-navigation:has(.onesta-has-mega) .wp-block-navigation__responsive-container-content,
	.wp-block-navigation:has(.onesta-has-mega) .wp-block-navigation__container {
		height: 100%;
	}

	/* 全ナビアイテム: ヘッダー高さいっぱいに引き伸ばしてクリッカブル領域を最大化 */
	.wp-block-navigation:has(.onesta-has-mega) .wp-block-navigation__container {
		align-items: stretch;
	}
	.wp-block-navigation:has(.onesta-has-mega) .wp-block-navigation-item {
		display: flex;
		align-items: stretch;
	}
	.wp-block-navigation:has(.onesta-has-mega) .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
	}

	.onesta-has-mega:hover > .onesta-mega-panel,
	.onesta-has-mega:focus-within > .onesta-mega-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}
}

/* ==========================================================================
 * 4. Accordion — モバイル + ドロワー
 * ========================================================================== */

@media (max-width: 768px) {
	.onesta-mega-panel {
		position: static;
		transform: none;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		opacity: 1;
		visibility: visible;
		transition: max-height 0.3s ease, padding 0.3s ease;
		box-shadow: none;
		background: transparent;
		border-radius: 0;
		padding: 0;
	}
	.onesta-has-mega.onesta-mega-open > .onesta-mega-panel {
		max-height: 2000px;
		padding: var(--wp--preset--spacing--20, 1rem) 0;
	}
}

:where(.wp-block-navigation__responsive-container.is-menu-open) .onesta-mega-panel {
	position: static;
	transform: none;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	transition: max-height 0.3s ease, padding 0.3s ease;
	box-shadow: none;
	background: transparent;
	border-radius: 0;
	padding: 0;
}
:where(.wp-block-navigation__responsive-container.is-menu-open) .onesta-has-mega.onesta-mega-open > .onesta-mega-panel {
	max-height: 2000px;
	padding: var(--wp--preset--spacing--20, 1rem) 0;
}

/* ==========================================================================
 * 5. Submenu icon
 * ========================================================================== */

@media (min-width: 769px) {
	.onesta-has-mega > .wp-block-navigation__submenu-icon {
		display: none;
	}
	.onesta-has-mega > a::after {
		content: "";
		display: inline-block;
		width: 0.4em;
		height: 0.4em;
		margin-left: 0.35em;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translateY(-0.15em);
		transition: transform 0.2s ease;
		vertical-align: middle;
	}
	.onesta-has-mega:hover > a::after {
		transform: rotate(-135deg) translateY(-0.1em);
	}
}

.onesta-has-mega > .wp-block-navigation__submenu-icon {
	cursor: pointer;
}
.onesta-has-mega > .wp-block-navigation__submenu-icon svg {
	transition: transform 0.2s ease;
}
.onesta-has-mega.onesta-mega-open > .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* ==========================================================================
 * 6. Reduced motion
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.onesta-mega-panel,
	.onesta-has-mega > .wp-block-navigation__submenu-icon svg {
		transition: none;
	}
}