/* EX REDESiGN — assets/css/submenu.css
 *
 * グローバルメニューのサブメニュー。
 * 3 バリエント（default = カード型 / minimal / underline）と、
 * どれにも適用される「グローバルメニュー行の下にドロップダウンさせる」行ストレッチ CSS。
 *
 * 仕様:
 *   - どのバリエントでも、ドロップダウンは<li>の下ではなく
 *     グローバルメニュー行全体のボトムに揃うようにする
 *   - <li> を align-self:stretch でナビ行の高さいっぱいに伸ばし、
 *     top:100% がナビ行のボトムに収束するようにする
 *   - WP の responsive-container 関係は display:contents でフラット化し、
 *     デスクトップでは stretch がうまく伝擭されるようにする
 *
 * Selectors: body.exr-submenu-default / body.exr-submenu-minimal / body.exr-submenu-underline
 */

@keyframes exr-submenu-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   構造：どのバリエントでも適用される位置付け
   ================================================================ */

/* <li> に position: relative を付与して、サブメニューの 位置コンテキストを
   ヘッダーナビアイテムにする。 */
.wp-block-navigation .wp-block-navigation-item { position: relative; }

/* サブメニュートリガーとして表示される下向きシェブロン（∨）アイコンを隠す。
   ホバー / フォーカスで開けるため、見た目上不要。 */
.wp-block-navigation .wp-block-navigation-item__submenu-icon,
.wp-block-navigation .wp-block-navigation__submenu-icon {
  display: none !important;
}

/* デスクトップ用の stretch 伝播ルール。インラインナビ（横並びメニュー）が表示されている
   ときだけ作用させる。ハンバーガー表示中は .ex-header-actions / nav に align-items:stretch
   を掛けない（掛けるとハンバーガーボタン本体が行高さいっぱいに引き伸ばされて崩れる）。

   - body.exr-nav-breakpoint-smartphone: 768px 以上でインラインナビ表示
   - body.exr-nav-breakpoint-tablet:    1025px 以上でインラインナビ表示 */

@media (min-width: 601px) {
  /* smartphone モード時のみ、768px 以上でデスクトップ用ルールを適用 */
  body.exr-nav-breakpoint-smartphone header .ex-header-actions {
    align-self: stretch !important;
  }
  body.exr-nav-breakpoint-smartphone .wp-block-navigation__responsive-container,
  body.exr-nav-breakpoint-smartphone .wp-block-navigation__responsive-close,
  body.exr-nav-breakpoint-smartphone .wp-block-navigation__responsive-dialog,
  body.exr-nav-breakpoint-smartphone .wp-block-navigation__responsive-container-content {
    display: contents !important;
  }
  body.exr-nav-breakpoint-smartphone header nav.wp-block-navigation {
    align-self: stretch !important;
    align-items: stretch !important;
  }
  body.exr-nav-breakpoint-smartphone header .wp-block-navigation__container {
    align-items: stretch !important;
  }
  /* v1.4.13: Page List ブロック使用時は <ul class="wp-block-page-list"> という中間 ul が
     入り、直下の <li> stretch CSS が届かず、<li> はコンテンツ高さしかなくなる。
     結果 top:100% (= <li> 下端) がヘッダー行中ほどになり、サブメニューがメニュー行内から
     出る事故が発生していた (理想 = ヘッダー行下端から落ちる)。中間 ul も flex stretch 化
     して <li> をヘッダー行いっぱいに伸ばす。 */
  body.exr-nav-breakpoint-smartphone header .wp-block-navigation__container > .wp-block-page-list {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap;
  }
  body.exr-nav-breakpoint-smartphone header .wp-block-navigation__container > .wp-block-navigation-item,
  body.exr-nav-breakpoint-smartphone header .wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
  }
}

@media (min-width: 1025px) {
  /* tablet モード時のみ、1025px 以上でデスクトップ用ルールを適用 */
  body.exr-nav-breakpoint-tablet header .ex-header-actions {
    align-self: stretch !important;
  }
  body.exr-nav-breakpoint-tablet .wp-block-navigation__responsive-container,
  body.exr-nav-breakpoint-tablet .wp-block-navigation__responsive-close,
  body.exr-nav-breakpoint-tablet .wp-block-navigation__responsive-dialog,
  body.exr-nav-breakpoint-tablet .wp-block-navigation__responsive-container-content {
    display: contents !important;
  }
  body.exr-nav-breakpoint-tablet header nav.wp-block-navigation {
    align-self: stretch !important;
    align-items: stretch !important;
  }
  body.exr-nav-breakpoint-tablet header .wp-block-navigation__container {
    align-items: stretch !important;
  }
  /* v1.4.13: tablet 版でも同じ対策 (Page List 中間 ul を flex 化) */
  body.exr-nav-breakpoint-tablet header .wp-block-navigation__container > .wp-block-page-list {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap;
  }
  body.exr-nav-breakpoint-tablet header .wp-block-navigation__container > .wp-block-navigation-item,
  body.exr-nav-breakpoint-tablet header .wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ドロップダウン本体の基本位置。トップと修飾だけだし、水平位置は body クラスで上書き。
   WP はビューポート右端付近のサブメニューを「is-flipped」クラスで右アンカーにするが、
   テーマオプションでアラインメントを明示指定したいため、is-flipped クラスをセレクタと
   して含めて上書きする。トランスフォームも align ごとに定義。

   v1.4.12: Page List block を使うと WP は <ul class="wp-block-navigation__container">
   の直下に <ul class="wp-block-page-list"> という中間 ul を挿入する。direct child
   セレクタ (>) が破壊されて alignment override が効かず、WP の is-flipped (auto right
   anchor) が代わりに発動して「左寄せ設定なのに右寄せ表示」事故が発生していた。
   両 DOM パターン (page-list 有無) をカバーするセレクタペアに修正。 */
.wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container,
.wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container.is-flipped,
.wp-block-navigation__container > .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container,
.wp-block-navigation__container > .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container.is-flipped {
  position: absolute;
  top: 100%;
  z-index: 200;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

/* サブメニューアラインメント：左（デフォルト）　親 <li> の左端に揃える。 */
body.exr-submenu-align-left .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container,
body.exr-submenu-align-left .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container.is-flipped,
body.exr-submenu-align-left .wp-block-navigation__container > .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container,
body.exr-submenu-align-left .wp-block-navigation__container > .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container.is-flipped {
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  transform: translateY(4px);
}
body.exr-submenu-align-left .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
body.exr-submenu-align-left .wp-block-navigation .wp-block-navigation-item.open-on-click > .wp-block-navigation__submenu-container,
body.exr-submenu-align-left .wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* サブメニューアラインメント：中央　親 <li> の中央に揃える。中央と同時に Y スライドインも行うため、
   transform を合成して伝える。 */
body.exr-submenu-align-center .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container,
body.exr-submenu-align-center .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container.is-flipped,
body.exr-submenu-align-center .wp-block-navigation__container > .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container,
body.exr-submenu-align-center .wp-block-navigation__container > .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container.is-flipped {
  inset-inline-start: 50% !important;
  inset-inline-end: auto !important;
  transform: translateX(-50%) translateY(4px);
}
body.exr-submenu-align-center .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
body.exr-submenu-align-center .wp-block-navigation .wp-block-navigation-item.open-on-click > .wp-block-navigation__submenu-container,
body.exr-submenu-align-center .wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* サブメニューアラインメント：右　親 <li> の右端に揃える。 */
body.exr-submenu-align-right .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container,
body.exr-submenu-align-right .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container.is-flipped,
body.exr-submenu-align-right .wp-block-navigation__container > .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container,
body.exr-submenu-align-right .wp-block-navigation__container > .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container.is-flipped {
  inset-inline-start: auto !important;
  inset-inline-end: 0 !important;
  transform: translateY(4px);
}
body.exr-submenu-align-right .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
body.exr-submenu-align-right .wp-block-navigation .wp-block-navigation-item.open-on-click > .wp-block-navigation__submenu-container,
body.exr-submenu-align-right .wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* v1.4.23: has-child の親メニュー項目を hover / focus / open 中にハイライト。
   v1.4.22 では bg に var(--color-surface) を使っていたが、1 段モードのメニュー行も
   surface 色 (.ex-site-header から継承) のため「surface 同士で同色 → コントラスト 0」
   で highlight が見えない事故が発生 (Slate Dark preset で発覚)。
   surface-raised に変更して全 preset / 全 layout で確実に 1 段の elevation 差を確保。
   両 DOM 経路 (page-list 中間 ul の有無) を網羅。 */
.wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content,
.wp-block-navigation__container > .wp-block-navigation-item.has-child.open-on-click > .wp-block-navigation-item__content,
.wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content,
.wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content,
.wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item.has-child.open-on-click > .wp-block-navigation-item__content,
.wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

/* hover ヒットエリアをサブメニューとナビ行の間に架けるための透明ブリッジ。
   margin-top で余白をとった際、マウスオフしないようにする。 */
.wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--exr-submenu-drop, 0px));
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: var(--exr-submenu-drop, 0px);
  background: transparent;
  pointer-events: auto;
}

/* ================================================================
   Variant: default (カード型)  — 新規デフォルト

   白地 + ハイライン区切り + 薄いドロップシャドー。
   位置はナビ行の下に揃える。
   ================================================================ */
/* サブメニュー最小幅: --exr-submenu-min-width で 3 variant 一括上書き可。
   デフォルトは variant ごとに異なる (default 240 / minimal 220 / underline 240) 。 */
body.exr-submenu-default .wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--color-surface, var(--wp--preset--color--surface));
  /* v1.4.12: border を palette-aware に変更 (border-subtle / accent slot)。
     旧 hardcoded rgba(17,24,39,X%) は Dark preset の暗背景上で完全に invisible で
     「輪郭のないただの四角」になっていた。border-subtle は preset 連動で両モードで可視。
     上部アクセントは text-primary (Dark で白い太線が浮く) → accent (ブランド色) に変更。 */
  border: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle, rgba(17, 24, 39, 0.06)));
  border-top: 2px solid var(--color-accent, var(--wp--preset--color--accent, #1f2937));
  border-radius: 0;
  box-shadow: var(--wp--preset--shadow--dropdown);
  padding: 0;
  min-width: var(--exr-submenu-min-width, 240px);
  animation: exr-submenu-fade-in 0.18s ease-out;
}

/* サブメニュー項目間の区切り：palette 連動の border-subtle (両 preset で適切に可視) */
body.exr-submenu-default .wp-block-navigation .wp-block-navigation__submenu-container > li {
  border-bottom: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle, rgba(17, 24, 39, 0.05)));
}
body.exr-submenu-default .wp-block-navigation .wp-block-navigation__submenu-container > li:last-child {
  border-bottom: none;
}

body.exr-submenu-default .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
  display: block;
  padding: 14px 22px;
  font-size: var(--exr-fs-sm);
  line-height: 1.5;
  letter-spacing: 0;
  /* v1.4.12: parent nav-item の text-transform:uppercase を上書きしてリセット。
     ブランド名 (EX REDESiGN / POSTRiA 等) の小文字 "i" を大文字化させない。 */
  text-transform: none;
  color: var(--color-text-primary, #1f2937);
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.exr-submenu-default .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover,
body.exr-submenu-default .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus-visible {
  background: var(--color-surface-raised, var(--wp--preset--color--bg-base));
  color: var(--color-text-primary, #1f2937);
  text-decoration: none !important;
}
body.exr-submenu-default .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--color-text-primary, #1f2937);
  outline-offset: -2px;
}

/* ================================================================
   Variant: minimal (薄い影付きカード)
   ================================================================ */
body.exr-submenu-minimal .wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--color-surface, var(--wp--preset--color--surface));
  border: 1px solid var(--color-border-subtle, rgba(17, 24, 39, 0.08));
  border-radius: 8px;
  box-shadow: var(--wp--preset--shadow--dropdown-tight);
  padding: 0.6rem 0.5rem 0.5rem;
  min-width: var(--exr-submenu-min-width, 220px);
  animation: exr-submenu-fade-in 0.18s ease-out;
}
body.exr-submenu-minimal .wp-block-navigation .wp-block-navigation__submenu-container > li > a {
  display: block;
  padding: 0.6rem 0.9rem;
  border-radius: 5px;
  font-size: var(--exr-fs-sm);
  letter-spacing: 0.02em;
  color: var(--color-text-primary, #1f2937);
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.exr-submenu-minimal .wp-block-navigation .wp-block-navigation__submenu-container > li > a:hover {
  background: var(--color-surface-raised, var(--wp--preset--color--bg-base));
  color: var(--color-text-primary, #1f2937);
}
body.exr-submenu-minimal .wp-block-navigation .wp-block-navigation__submenu-container > li > a:focus-visible {
  outline: 2px solid var(--color-text-primary, #1f2937);
  outline-offset: -2px;
}

/* ================================================================
   Variant: underline (左アクセントライン + 区切りリスト)
   ================================================================ */
body.exr-submenu-underline .wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--color-surface, var(--wp--preset--color--surface));
  border: 1px solid var(--color-border-subtle, rgba(17, 24, 39, 0.08));
  border-radius: 2px;
  padding: 0;
  min-width: var(--exr-submenu-min-width, 240px);
  box-shadow: var(--wp--preset--shadow--dropdown-strong);
  animation: exr-submenu-fade-in 0.2s ease-out;
}
body.exr-submenu-underline .wp-block-navigation .wp-block-navigation__submenu-container > li {
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}
body.exr-submenu-underline .wp-block-navigation .wp-block-navigation__submenu-container > li:last-child {
  border-bottom: none;
}
body.exr-submenu-underline .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
  position: relative;
  padding: 0.9rem 1.25rem 0.9rem 2rem;
  font-size: var(--exr-fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--color-text-primary, #1f2937);
  transition: background-color 0.15s ease;
}
body.exr-submenu-underline .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover,
body.exr-submenu-underline .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus-visible {
  background: var(--color-surface-raised, var(--wp--preset--color--bg-base));
  text-decoration: none !important;
}
body.exr-submenu-underline .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: var(--color-text-primary, #1f2937);
  transition: width 0.2s ease;
  pointer-events: none;
}
body.exr-submenu-underline .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover::before,
body.exr-submenu-underline .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus-visible::before {
  width: 0.75rem;
}

/* ================================================================
   ヘッダー行関連の隅間設定（その他のブロックギャップをつぶす）
   ================================================================ */

/* ヘッダー内部のグループ間隅間をゼロにして、アナウンスバーとナビ行とヒーローを
   せり上げる。 */
header > .wp-block-group > * + *,
header.wp-block-template-part > .wp-block-group > * + * {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* テンプレートパートとその直下の要素（ヒーローカバー等）の間のスポットもつぶす。 */
.wp-site-blocks > header.wp-block-template-part + * {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* ヘッダーのナビ / ロゴ フレックス行の左右パディングを、本文（.ex-section-inner）の
   水平パディングと揃える（--exr-section-x を参照）。 */
header.wp-block-template-part > .wp-block-group > .wp-block-group.is-layout-flex {
  padding-inline-start: var(--exr-section-x) !important;
  padding-inline-end: var(--exr-section-x) !important;
}


/* ================================================================
   ハンバーガーメニューの切り替えブレイクポイント

   - body.exr-nav-breakpoint-smartphone : 768px 未満でハンバーガー
   - body.exr-nav-breakpoint-tablet     : 1024px 未満でハンバーガー

   WP は overlayMenu: mobile の際、デフォルトで 600px 未満にオーバーレイを
   表示する。本テーマでは閾値を上書きして、768px または 1024px
   を境にハンバーガー / 横並びナビを切り替える。
   ================================================================ */

/* === Smartphone breakpoint (デフォルト): < 768px でハンバーガー === */
@media (max-width: 600px) {
  body.exr-nav-breakpoint-smartphone .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  body.exr-nav-breakpoint-smartphone .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}
@media (min-width: 601px) {
  body.exr-nav-breakpoint-smartphone .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }
  body.exr-nav-breakpoint-smartphone .wp-block-navigation__responsive-container,
  body.exr-nav-breakpoint-smartphone .wp-block-navigation__responsive-close,
  body.exr-nav-breakpoint-smartphone .wp-block-navigation__responsive-dialog,
  body.exr-nav-breakpoint-smartphone .wp-block-navigation__responsive-container-content {
    display: contents !important;
  }
}

/* === Tablet breakpoint: < 1024px でハンバーガー === */
@media (max-width: 1024px) {
  body.exr-nav-breakpoint-tablet .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  body.exr-nav-breakpoint-tablet .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  body.exr-nav-breakpoint-tablet .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }
  body.exr-nav-breakpoint-tablet .wp-block-navigation__responsive-container,
  body.exr-nav-breakpoint-tablet .wp-block-navigation__responsive-close,
  body.exr-nav-breakpoint-tablet .wp-block-navigation__responsive-dialog,
  body.exr-nav-breakpoint-tablet .wp-block-navigation__responsive-container-content {
    display: contents !important;
  }
}

/* ================================================================
   @section level-3-cascade
   Level 3 (孫メニュー) — 右にカスケード
   全 3 バリアント (default / minimal / underline) 共通。
   ビジュアル (背景・色・パディング) は Level 2 をそのまま継承
   — 仕様 (Q1=A, Q2=A, Q3=hover/focus, Q4=is-flipped に利てる)
   ================================================================ */

/* 位置: Level-2 の has-child 項目の右隣に張り付ける
   「100% - 1px」で Level-2 の右枠線と Level-3 の左枠線を重ね、視覚的な隙間を消す
   top: -2px / min-height: calc(100% + 3px)で Level-2 の outer top/bottom と揃える
   (-2px = Level-2 の border-top 2px を補正、+3px = Level-2 の border 2px+1px 分だけ伸ばす)
   → グローバルナビと接する上辺が Level-2 のダークラインと同一になり、cover 画像が透ける現象が消える */
.wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container {
  position: absolute !important;
  top: -2px !important;
  inset-inline-start: calc(100% - 1px) !important;
  inset-inline-end: auto !important;
  margin: 0 !important;
  min-height: calc(100% + 3px) !important;
  z-index: 201;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  box-sizing: border-box;
}

/* WP の auto-flip (ビューポート右端ではみ出し) → 左カスケードに反転 (Q4=A) */
.wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container.is-flipped {
  inset-inline-start: auto !important;
  inset-inline-end: calc(100% - 1px) !important;
  transform: translateX(-6px);
}

/* Level-2 項目を hover/focus すると Level-3 を表示
   !important で body.exr-submenu-align-* の transform: translateY(0) を上書き (Q3) */
.wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation__submenu-container .wp-block-navigation-item.open-on-click > .wp-block-navigation__submenu-container,
.wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container.is-flipped,
.wp-block-navigation__submenu-container .wp-block-navigation-item.open-on-click > .wp-block-navigation__submenu-container.is-flipped,
.wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container.is-flipped {
  transform: translateX(0) !important;
}

/* hover ヒットエリアブリッジ — Level-2 と Level-3 の隙間でホバーオフを防ぐ */
.wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: -8px;
  width: 8px;
  height: 100%;
  background: transparent;
  pointer-events: auto;
}
.wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container.is-flipped::before {
  inset-inline-start: auto;
  inset-inline-end: -8px;
}

/* ハンバーガーモード時は Level-3 をインライン (アコーディオン) 化 */
@media (max-width: 600px) {
  body.exr-nav-breakpoint-smartphone .wp-block-navigation.is-menu-open .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container,
  body.exr-nav-breakpoint-smartphone .wp-block-navigation.is-menu-open .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container.is-flipped {
    position: static !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-inline-start: 1.5rem !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }
}
@media (max-width: 1024px) {
  body.exr-nav-breakpoint-tablet .wp-block-navigation.is-menu-open .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container,
  body.exr-nav-breakpoint-tablet .wp-block-navigation.is-menu-open .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container.is-flipped {
    position: static !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-inline-start: 1.5rem !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }
}