/**
 * core/navigation のブロックスタイル「サブメニュー（スマホはアコーディオン）」 is-style-submenu-accordion（サイト全体・ヘッダー用）
 *
 * 開き方は WordPress の標準の仕組みのまま：ナビゲーションのサブメニュー（Navigation Submenu）、
 * 「クリックで開く」はオフ（＝PC はマウスを乗せると開く。親の文字はリンクのまま、横の ∨ ボタンで Enter／Esc でも開閉できる）。
 * ここでは見た目だけを変える。
 *
 * - PC：一覧を白い角丸のパネルに（影・余白）。項目は1行で収める
 * - スマホ（メニューを開いた全画面）：標準では子の一覧が常に開いたまま右寄せで並ぶ → 1行ずつ区切り線の入った左寄せの行にし、
 *   親の行の右に ∨ のボタンを置いて、押すと子の一覧が開閉するアコーディオンにする。
 *   標準の全画面メニューでは、子の一覧は常に開いたままで、標準の ∨ ボタンも隠れ、開閉の状態（aria-expanded）もメニューが開いている間は常に「開」になる
 *   （WordPress の仕様：navigation の view.js の isSubmenuOpen）。標準のボタンは使えないので、全画面メニューのときだけ見える開閉ボタンを
 *   assets/js/navigation-accordion.js が足し、その状態（親の li の is-acc-open）で出し入れする。
 *
 * 2026-10-06（第16段階）新規。
 */

/* ---------- PC：ホバーで開く一覧 ---------- */
.wp-block-navigation.is-style-submenu-accordion .has-child .wp-block-navigation__submenu-container {
	padding: 8px 0;
	border: none;
	border-radius: var(--wp--preset--border-radius--m, 8px);
	box-shadow: var(--wp--preset--shadow--card);
	min-width: 0;
}

/* ヘッダーの白い帯（角丸の箱）の下に出す。すき間でマウスが外れて閉じないよう、親の項目の下に見えない当たり判定を足す */
.wp-block-navigation.is-style-submenu-accordion .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + 26px);
}

.wp-block-navigation.is-style-submenu-accordion .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 28px;
}

.wp-block-navigation.is-style-submenu-accordion .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 24px;
	white-space: nowrap;
}

.wp-block-navigation.is-style-submenu-accordion .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation.is-style-submenu-accordion .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--gray-light);
	color: var(--wp--preset--color--primary-dark);
}

/* ---------- スマホ：メニューを開いた全画面 ---------- */
.wp-block-navigation.is-style-submenu-accordion .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
}

.wp-block-navigation.is-style-submenu-accordion .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--gray);
}

/* 1行＝1項目。区切り線・左寄せ・押しやすい高さ */
.wp-block-navigation.is-style-submenu-accordion .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--gray);
}

.wp-block-navigation.is-style-submenu-accordion .is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 18px 20px;
	font-size: var(--wp--preset--font-size--medium, 16px);
	text-align: left;
}

/* 子を持つ行：左にリンク、右に開閉のボタン（∨・assets/js/navigation-accordion.js が足す）。子の一覧はその下に全幅で */
.wp-block-navigation.is-style-submenu-accordion .is-menu-open .wp-block-navigation__container > .has-child {
	display: grid;
	grid-template-columns: 1fr 56px;
}

/* 開閉のボタンは、スマホの全画面メニューのときだけ出す（PC は標準の ∨ ボタンとホバー） */
.wp-block-navigation.is-style-submenu-accordion .hpcode-nav-acc {
	display: none;
}

.wp-block-navigation.is-style-submenu-accordion .is-menu-open .has-child > .hpcode-nav-acc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	margin: 0;
	padding: 0;
	border: none;
	border-left: 1px solid var(--wp--preset--color--gray);
	background-color: var(--wp--preset--color--gray-light);
	color: inherit;
	cursor: pointer;
}

.wp-block-navigation.is-style-submenu-accordion .is-menu-open .has-child > .hpcode-nav-acc svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.wp-block-navigation.is-style-submenu-accordion .is-menu-open .has-child > .hpcode-nav-acc[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* 開いている親の行は薄いグレーで、どこが開いているか分かるように */
.wp-block-navigation.is-style-submenu-accordion .is-menu-open .has-child.is-acc-open > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--gray-light);
}

/* 子の一覧：閉じているときは出さない（標準の全画面メニューでは常に開いている） */
.wp-block-navigation.is-style-submenu-accordion .is-menu-open .has-child > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
	padding: 0;
	min-width: 0;
	border-radius: 0;
	box-shadow: none;
	border-top: 1px solid var(--wp--preset--color--gray);
}

.wp-block-navigation.is-style-submenu-accordion .is-menu-open .has-child:not(.is-acc-open) > .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation.is-style-submenu-accordion .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
}

.wp-block-navigation.is-style-submenu-accordion .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item + .wp-block-navigation-item {
	border-top: 1px solid var(--wp--preset--color--gray);
}

/* 子の行は一段下げ、頭にテーマのオレンジの短い線 */
.wp-block-navigation.is-style-submenu-accordion .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	position: relative;
	padding: 16px 20px 16px 44px;
	font-size: var(--wp--preset--font-size--small, 14px);
}

.wp-block-navigation.is-style-submenu-accordion .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 24px;
	width: 10px;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation.is-style-submenu-accordion .is-menu-open .has-child > .hpcode-nav-acc svg {
		transition: none;
	}
}