/****************************************************** 
 * Navigation Styles
 */

 /*
// HTML hierarchy
.wp-block-navigation {
	.wp-block-navigation__responsive-container {
		.wp-block-navigation__responsive-close {
			.wp-block-navigation__responsive-dialog {
				.wp-block-navigation__responsive-container-content {
					:where(.wp-block-navigation__container, .wp-block-page-list) {
						.wp-block-navigation-item {
							.wp-block-navigation-item__content {}
						}
					}
				}
			}
		}
	}
}

Direction : horizontal ***********************
.wp-block-navigation.is-horizontal

Direction : vertical ***********************
.wp-block-navigation.is-vertical

Submenu Display : hover ***********************
.wp-block-navigation-submenu

Submenu Display : click ***********************
.wp-block-navigation-submenu.open-on-click

Submenu Display : always ***********************
.wp-block-navigation-submenu.open-always

Overlay : off ***********************
.wp-block-navigation
	& > ul.wp-block-navigation__container

Overlay : mobile ***********************
.wp-block-navigation
	& > .wp-block-navigation__responsive-container.has-modal-open
		.wp-block-navigation__responsive-container-content
			& > .wp-block-navigation__container.is-responsive

Overlay : allways ***********************
.wp-block-navigation
	& >.wp-block-navigation__responsive-container.has-modal-open
		.wp-block-navigation__responsive-container-content
			& > .wp-block-navigation__container.is-responsive
*/

// global-style で margin-block-start : 0 が出力されるが、
// theme.json でまだ上書きできないっぽいので応急措置で上書き
.admin-bar .wp-block-navigation-overlay-close{
	margin-block-start:var(--wp-admin--admin-bar--height, 0px);
}

.wp-block-navigation {

	// Cope with mobile menu in align right
	&.items-justified-right {
		&> :where(button) {
			float: right;
		}
	}

	--submenu-icon-size: 12px;
	--nav-top-item-padding-horizontal: 0.9em;

	:where( .wp-block-navigation-item__content ) {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}

	:where(.wp-block-navigation__container, .wp-block-page-list) {
		&>.wp-block-navigation-item {
			&>a {
				padding-right: var(--nav-top-item-padding-horizontal);
			}
		}
	}

	// PC Menu style /////////////////////
	// Overlay : mobile ( Wide screen )
	&__responsive-container:where(:not(.has-modal-open)) :is( .wp-block-navigation__container, .wp-block-page-list),
	// Overlay : off（ It is now positioned directly below .wp-block-navigation. ）
	& > :where( .wp-block-navigation__container, .wp-block-page-list) {
		&>.wp-block-navigation-item {
			// display: grid;
			position: relative;
			white-space: nowrap;

			&>a {
				grid-area: 1/-1;
			}

			&>:where(.wp-block-navigation__submenu-icon) {
				grid-area: 1/-1;
				justify-self: end;
				width: var(--submenu-icon-size);
				height: var(--submenu-icon-size);
				margin-right: var(--nav-top-item-padding-horizontal);
				display: block;

				&[aria-expanded=true] {
					svg {
						transform: rotate(180deg);
					}
				}
			}
		}
	}

	// Mobile menu open toggle button
	& &__responsive-container-open {
		border: 1px solid currentColor;
		padding: 2px;
	}
}

/****************************************************** 
 *  Navigation Item description
 */
.wp-block-navigation {
	.wp-block-navigation-item__description {
		display: block;
		font-size: 10px;
		opacity: 0.6;
	}
	.wp-block-navigation__submenu-container {
		// ２階層目以降の description は非表示
		// Descriptions are hidden beyond the second hierarchical level.
		.wp-block-navigation-item__description {
			display: none;
		}
	}
}

/****************************************************** 
 *  Navigation Alignments
 *  .wp-block-navigation は階層が違うのに複数あるので注意。ここでは一番外側の要素を対象にしている。
 */
  .wp-block-navigation {
	// Modal
	& .wp-block-navigation__responsive-container:where(:not(.has-modal-open)) ul:where(:not(:is(.is-vertical,[class*="is-style-nav--vertical"] ))):where(:not(.wp-block-navigation-submenu)),
	// No Modal
	&:where(:not(.is-vertical)) > .wp-block-navigation__container {
		// Not modal open & First level & Horizontal
		& > :where( li ) {
			& > .wp-block-navigation-item__content,
			& > .wp-block-navigation-item__description {
				text-align: center;
			}
		}
	}
 }

 /****************************************************** 
 *  Submenu always
 */
// 7.0 のサブメニュー常時表示で gap が付与されてしまうので打ち消し
// セレクタを弱くしてしまうとコアに負けるので注意
.wp-block-navigation .wp-block-navigation-submenu.open-always.has-child {
	gap:0;
	.wp-block-navigation__submenu-container {
		padding-left:0;
		padding-right:0;
		gap:0;
		.wp-block-navigation-submenu {
			gap:0;
		}
	}
}

/****************************************************** 
 *  Submenu Click
 */
 .wp-block-navigation .wp-block-navigation-item.open-on-click {
	// 詳細度を軽くするとエディタで WordPress コアの CSS に負けるので注意
	button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle),
	.wp-block-navigation-item__content {
		padding-right: calc( var(--nav-top-item-padding-horizontal) + 1.8em );
	}
	.wp-block-navigation-item__content+.wp-block-navigation__submenu-icon {
		margin-left:-1.8em;
	}
}

/****************************************************** 
 * Submenu Styles
 */
.wp-block-navigation{
	// Override the padding specified by WordPress 6.9
	&:where(:not(.has-modal-open)) .has-child  {
		.wp-block-navigation__submenu-container {
			& >.wp-block-navigation-item .wp-block-navigation-item__content {
				padding: 1em 1.5em;
			}
		}
	}
	&:not(.has-modal-open) {
		.wp-block-navigation__submenu-container {
			header & {
				z-index: 99999; // .crolled-header-fixed specified z-index: 9999; so If less than 9999 that submenu loses to the fix header in the edit screen
			}

			.wp-block-navigation-item {
				&__content {
					font-weight: normal;
				}
			}

		}
		.wp-block-navigation__submenu-container{
			&:where(.has-background){
				padding:unset; // Cancel the padding added by the WordPress core
			}
		}
	}
	&.has-modal-open{ // Adjusted to override WordPress core CSS. (for VK Pattern Library)
		&.has-background.has-vk-color-primary-background-color{
			background-color: var(--wp--preset--color--primary);
		}
	}
}

/****************************************************** 
 * Navigation Modal Styles
 */
.has-modal-open {
	:where(.wp-block-navigation__container, .wp-block-page-list) {
		--wp--style--block-gap: 0;
		gap: 0;
		&,
		li,
		li .wp-block-navigation-item__content {
			width: 100%;
			display: block;
		}

		li .wp-block-navigation-item__content {
			border-bottom: 1px solid var(--wp--preset--color--border-normal);
		}

		li.has-child .wp-block-navigation__submenu-container {
			width: 100%;
		}

		.current-menu-item .wp-block-navigation-item__content,
		.wp-block-navigation-item__content:hover {
			background-color: var(--wp--preset--color--bg-light-gray);
		}
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		.wp-block-navigation-item {
			.wp-block-navigation-item__content {
				padding: 1em;
				padding-left: var(--wp--custom--spacing--menu-indent);
			}

			li .wp-block-navigation-item__content {
				padding-left: calc(var(--wp--custom--spacing--menu-indent) * 2);
			}

			li li .wp-block-navigation-item__content {
				padding-left: calc(var(--wp--custom--spacing--menu-indent) * 3);
			}
		}

		:where(.wp-block-navigation__container, .wp-block-page-list) {

			.has-child .submenu-container,
			.has-child .wp-block-navigation__submenu-container {
				width: 100%;
				padding: 0;
			}
		}
	}

	// デフォルトモーダルでの色指定 ///////////
	// なぜ必要か？
	// フッターの背景に濃い色を指定した場合、必然的にユーザーは文字色を明るい色に設定する
	// しかしながら、WordPress がデフォルトのモーダルに対して背景に白を指定してくるため、文字も白指定では見えなくなる。
	// この問題を回避するため標準文字色を指定する
	// ちなみにデフォルトモーダルの背景色をフッターと同じにする手法については、
	// フッター背景色がカスタムカラーの場合に同じ色に指定する事が困難＆可能だったとしても指定がカオスになるため、白背景と割り切って余計な事をしない。
	.wp-block-navigation__responsive-container.has-modal-open:where(:not(.disable-default-overlay)){
		.wp-block-navigation-item__content.wp-block-navigation-item__content,
		.wp-block-navigation__responsive-container-close {
			color:var(--wp--preset--color--text-normal);
		}
	}
}

/****************************************************** 
 *  Horizontal Navigation common styles
 */
 // .is-horizontal is not applied on initial placement; it only takes effect after
 // switching to vertical and back to horizontal, so we target with :not(.is-vertical).
 // .is-horizontal は初期配置の時はつかず、一度 vertical にして horizontal 指定しないと
 // 効かないため、:not(.is-vertical) で指定している。
 .wp-block-navigation:where(:not(.is-vertical)) {
	// 横メニューのサブメニューでのみ文字サイズが小さくなるように
	&:where(:not(:has(.has-modal-open))) {
		:where(.wp-block-navigation__submenu-container) {
			:where(.wp-block-navigation-item) {
				font-size: var(--wp--preset--font-size--x-small);
			}
		}
	}
	.wp-block-navigation-item__content {
		padding-left: var(--nav-top-item-padding-horizontal);
	}

	// エディタでコアが出力するCSSを上書きするため
	.open-on-click .wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
		padding-left: var(--nav-top-item-padding-horizontal);
	}
	&:not(.has-background) .wp-block-navigation__submenu-container,
	.wp-block-navigation__submenu-container{
		border: none; // コアが border を付与してくるので打ち消す
	}
	// .is-horizontal の場合だけサブナビゲーションの背景に色をつける
	// overlay を使うと .is-horizontal の中に overlay-content で .is-vertical のナビが入るという
	// ふざけたケースが存在し、.is-vertical にも影響してしまうために、色をつける対象を限定している。
	// ブロック直下（オーバーレイ指定なし）
	& > .wp-block-navigation__container,
	// レスポンシブコンテナ内（PC用）のみ
	.wp-block-navigation__container.is-responsive {
		:where(.wp-block-navigation__submenu-container){
			&.has-vk-color-primary-background-color{ // Adjusted to override WordPress core CSS. (for VK Pattern Library)
				background-color: var(--wp--preset--color--primary);
			}
			&:where(:not(.has-background)) {
				:where(.wp-block-navigation-item) {
					background-color: var(--wp--preset--color--primary);
				}
			}
			:where(.wp-block-navigation-item) {
				border-bottom: 1px solid var(--wp--preset--color--border-normal-darkbg);
				&:where(:hover) {
					background-color: var(--wp--preset--color--primary-hover);
				}
			}
			&:where(:not(.has-text-color)) {
				.wp-block-navigation-item {
					color: #fff; // No relation under Bright BG and Dark BG
				}
			}
		}
	}
 }
/****************************************************** 
 *  Vertical Navigation common styles
 */
 :where( .wp-block-navigation.is-vertical ) {
	// エディタで open-on-click の時にコアが出力してくる padding:0 の上書き
	// ※ナビは処理が複雑で eidtor.scss に分けると影響関係がわからなくなるのでこちらに記載
	.wp-block-navigation-item.open-on-click {
		button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
			padding-top: 0.5em;
			padding-bottom: 0.5em;
		}
	}
}

