/**
 * Navigation Block Style Extension - style.css
 *
 * core/navigation ブロックのカスタムスタイル定義。
 * フロントエンド・エディター共通。
 * WordPress のブロックスタイルは .is-style-{name} クラスで出力される。
 */

/* ─────────────────────────────────────────────────────
   スタイル: ホバーカラー (is-style-hover-color)
   横並び・縦積みどちらでも、ホバー時にリンク色を primary に変更する。
───────────────────────────────────────────────────── */
.wp-block-navigation.is-style-hover-color .wp-block-navigation-item__content:hover,
.wp-block-navigation.is-style-hover-color .wp-block-navigation-item__content:focus {
  color: var(--wp--preset--color--primary, #0d6efd) !important;
  transition: color var(--transition-base, 0.2s ease);
}

/* サブメニュー内のリンクにも適用 */
.wp-block-navigation.is-style-hover-color .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation.is-style-hover-color .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  color: var(--wp--preset--color--primary, #0d6efd) !important;
}

/* ─────────────────────────────────────────────────────
   スタイル: 区切り線 (is-style-divider)

   【横並び (horizontal)】
     各メニューアイテムの右辺に縦線を表示。
     最後のアイテムの縦線は非表示。

   【縦積み (vertical / ドロワー内)】
     横幅いっぱいに拡大。
     最上部アイテムの top、最下部アイテムの bottom、
     および各アイテム間に横区切り線を表示。
───────────────────────────────────────────────────── */

/* 横並び: アイテムに縦区切り線 (右辺) */
.wp-block-navigation.is-style-divider:not(.is-vertical) .wp-block-navigation-item {
  display: flex;
  align-items: center;
}

.wp-block-navigation.is-style-divider:not(.is-vertical) .wp-block-navigation-item::after {
  content: '';
  display: block;
  width: 1px;
  height: 1em;
  background-color: currentColor;
  opacity: 0.25;
  flex-shrink: 0;
}

.wp-block-navigation.is-style-divider:not(.is-vertical) .wp-block-navigation-item:last-child::after {
  display: none;
}

/* 縦積み: コンテナおよび各アイテムを横幅いっぱいに広げる */
.wp-block-navigation.is-style-divider.is-vertical,
.wp-block-navigation.is-style-divider.is-vertical .wp-block-navigation__container,
.wp-block-navigation.is-style-divider.is-vertical .wp-block-navigation-item {
  width: 100%;
}

/* 縦積み: 各アイテムに横区切り線 (下辺) */
.wp-block-navigation.is-style-divider.is-vertical .wp-block-navigation-item {
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

/* 縦積み: 一番上の要素の top（上辺）にも区切り線を入れる */
.wp-block-navigation.is-style-divider.is-vertical .wp-block-navigation-item:first-child {
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

/* 縦積み: リンク自体を横幅いっぱい（width: 100%）に広げてパディングを調整 */
.wp-block-navigation.is-style-divider.is-vertical .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}