/* EX REDESiGN — assets/css/mobile-nav.css
 *
 * ドロワー型スライドインメニュー。
 * DOM 階層: responsive-container > responsive-close > responsive-dialog > responsive-container-content
 * デザイン: container はビューポート全体(背景スクリム)、dialog をパネルとして右付け。
 */

/* ── ハンバーガーボタン（ヘッダー内） ── */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 20px; height: 20px; }
.wp-block-navigation__responsive-container-open {
  padding: 8px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 200ms ease;
  align-self: center;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* WP コアの 2 本線アイコンを上書きし 3 本線を ::before で描画するための位置コンテキスト */
  position: relative;
}
/* WP 本体が出力する 2 本線 SVG を隠し、幅・高さはそのままボタンのクリック領域に使わせる */
.wp-block-navigation__responsive-container-open svg { visibility: hidden; }
/* CSS だけで 3 本線を描画。中央棒 + box-shadow で上下にもコピーを出す。
   color: currentColor でボタンの文字色を引き継ぐため、ホバー色連動もそのまま動く。 */
.wp-block-navigation__responsive-container-open::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 1.5px;
  background: currentColor;
  box-shadow:
    0 -6px 0 currentColor,
    0  6px 0 currentColor;
  pointer-events: none;
}
.wp-block-navigation__responsive-container-open:hover {
  border-color: var(--color-text-primary);
  background: var(--color-surface-raised);
}

/* ── コンテナー = 背景スクリム(ビューポート全体) ── */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  background: rgba(0, 0, 0, 0.45) !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 1000 !important;
  display: block !important;
  animation: exr-fade-in 250ms ease both;
}
@keyframes exr-fade-in {
  from { background: rgba(0, 0, 0, 0); }
  to   { background: rgba(0, 0, 0, 0.45); }
}

/* responsive-close: 透明ブロックパススルー */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative !important;
}

/* ── responsive-dialog = パネル本体(右側、ビューポート幅 80%、最大 --exr-mobile-nav-max-width デフォルト 380px) ── */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  position: fixed !important;          /* ビューポート直接位置決め */
  top: 0 !important;
  inset-inline-end: 0 !important;
  bottom: 0 !important;
  inset-inline-start: auto !important;
  inset-block-start: 0 !important;
  inset-block-end: 0 !important;
  inset-inline-start: auto !important;
  inset-inline-end: 0 !important;       /* 論理プロパティでも右揃え */
  width: 80% !important;
  max-width: var(--exr-mobile-nav-max-width, 380px) !important;
  min-width: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 4rem 0 2rem !important;
  /* v1.4.3: fallback を hardcoded #F1F5F9 から palette 連動の surface-raised に変更。
     Dark preset 時にオーバーレイが light gray のまま残って文字が見えなくなる事故を防ぐ。 */
  background: var(--exr-overlay-menu-bg, var(--color-surface-raised, #F1F5F9)) !important;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: block !important;
  z-index: 1001 !important;             /* 背景スクリムより上 */
  animation: exr-slide-in-right 350ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes exr-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* responsive-container-content: パネル内コンテナー(フル幅) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
  flex-direction: initial !important;
  justify-content: initial !important;
  overflow: visible !important;
}

/* ── 閉じるボタン（パネル右上） ── */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 0.875rem !important;
  inset-inline-end: 0.875rem !important;
  inset-inline-start: auto !important;
  color: var(--color-text-primary, #1f2937) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0.5rem !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 2;
  transition: opacity 200ms ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus {
  opacity: 0.6;
}

/* ── メニューリスト ── */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: block !important;
  flex-direction: initial !important;
  gap: 0 !important;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: inherit !important;
}

/* トップレベルアイテム(区切り線) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: transparent !important;
  display: block !important;
  width: 100% !important;
}

/* メニューリンク(全体共通) ── 左揃え */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation-item__content {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--color-text-primary, #1f2937) !important;
  text-decoration: none !important;
  padding: 1.125rem 1.25rem !important;
  border: 0 !important;
  background: transparent !important;
  width: 100% !important;
  text-align: start !important;
  transition: background 200ms ease, color 200ms ease;
  cursor: pointer;
  box-shadow: none !important;
}

/* 全メニュー項目の左に > アイコン */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
  content: '›';
  margin-inline-end: 0.75rem;
  font-size: 1.1em;
  font-weight: 300;
  color: var(--color-text-secondary, var(--wp--preset--color--text-secondary));
  flex-shrink: 0;
}

/* ホバー / フォーカス */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* 現在ページハイライト */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .current-page-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent, #2271b1) !important;
  font-weight: 500 !important;
}

/* ── サブメニュー親項目(.has-child) のレイアウト (CSS Grid で明示配置) ── */
/* グリッド: 1fr 56px × 2 行。上行に [リンク][トグル]、下行にサブメニューをスパン */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
  display: grid !important;
  grid-template-columns: 1fr 56px !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    'link toggle'
    'submenu submenu' !important;
  align-items: stretch !important;
  position: relative !important;
}
/* リンク: 上行左セル (link) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > a.wp-block-navigation-item__content {
  grid-area: link !important;
  width: auto !important;
  min-width: 0 !important;
  flex: initial !important;
}
/* トグルボタン: 上行右セル (toggle)、56px 固定 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
  grid-area: toggle !important;
  width: 100% !important;
  height: auto !important;
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text-secondary, var(--wp--preset--color--text-secondary)) !important;
  transition: transform 200ms ease;
  flex: initial !important;
  align-self: stretch !important;
}
/* サブメニューコンテナー: 下行をスパン、デフォルト隠す */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
  grid-area: submenu !important;
  width: 100% !important;
  display: none !important;
}
/* トグルボタンの aria-expanded=true で隣接サブメニューを表示 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"] + .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
  display: block !important;
}

/* 開いている状態でシェブロンを反転 */
.wp-block-navigation__responsive-container.is-menu-open [aria-expanded="true"].wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.is-menu-open [aria-expanded="true"] .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
}

/* toggle ボタンの SVG サイズ */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor;
  fill: none;
}

/* ── サブメニュー(インライン展開) ── */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 0 !important;
  box-shadow: none !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  /* display は上の .has-child ルールで制御 (default は none、aria-expanded=true で block) */
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::after {
  display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding: 0 !important;
  display: block !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
  border-bottom: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 0.875rem !important;
  padding: 0.875rem 1.25rem 0.875rem 2rem !important;
  color: var(--color-text-primary, #1f2937) !important;
}