/* =============================================================================
   LEAP モバイルナビ（ハンバーガー）— 見た目のみの調整
   -----------------------------------------------------------------------------
   対象: ヘッダーのナビゲーションブロックの「カスタムオーバーレイ」
         .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
         → その中の .wp-block-navigation__overlay-container（＝開いたときだけ表示）
   方針: LEAP TOP / ABOUT の世界観（アイボリー / 深緑 / 大きな余白 / Editorial / 静か）。
   制約: DOM 構造・Navigation Block の機能（開閉・aria・Interactivity API）は変更しない。
         CSS のみ。PC ヘッダー（>=768px）には一切影響させない。
   ============================================================================= */

:root{
  --leap-nav-ivory:#f5f1e9;   /* TOP/ABOUT の paper アイボリー */
  --leap-nav-green:#1c3327;   /* 深緑 */
  --leap-nav-ink:#211e1a;
  --leap-nav-line:rgba(28,51,39,.12);
  --leap-nav-serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --leap-nav-sans:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  --leap-nav-ease:cubic-bezier(.16,.7,.2,1);
}

/* モバイルのみ（PCヘッダーは >=768px。ここは touch/overlay の世界だけ） */
@media (max-width:767px){

  /* =========================================================================
     閉じた状態のヘッダー配置
     -------------------------------------------------------------------------
     ロゴとハンバーガーが中央寄りに集まって見える → 左右に完全分離する。
     ・.has-custom-color-1-background-color はページ内でヘッダーの深緑バーだけ
       （確認済み・1要素のみ）。左右 padding を 22px に統一（上下＝高さは不変）。
     ・その中の space-between 行（ハンバーガーを含む唯一の行）を
       display:flex / align-items:center / justify-content:space-between に固定。
     ロゴ・ハンバーガーのサイズ、ヘッダー高さ、PC(>=768px)、開いたメニューは無変更。
     ========================================================================= */
  .has-custom-color-1-background-color.has-global-padding{
    padding-left:22px !important;
    padding-right:22px !important;
    /* padding-top / padding-bottom はそのまま＝ヘッダー高さ維持 */
  }
  .wp-block-group.is-content-justification-space-between.is-nowrap:has(.wp-block-navigation__responsive-container-open){
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    width:100%;
    gap:16px;
  }
  /* 左＝ロゴ（サイズそのまま・左端）。中の空グループが折り返してヘッダーが
     縦に伸びるのを防ぐため nowrap（小さい画面での高さ増加を防止）。 */
  .wp-block-group.is-content-justification-space-between.is-nowrap:has(.wp-block-navigation__responsive-container-open) > :first-child{
    flex:0 1 auto;
    min-width:0;
    flex-wrap:nowrap !important;
  }
  /* 右＝nav→ハンバーガー（確実に右端へ） */
  .wp-block-group.is-content-justification-space-between.is-nowrap:has(.wp-block-navigation__responsive-container-open) > :last-child{
    flex:0 0 auto;
    margin-left:auto;
  }
  /* 右クラスター内の nav / ラッパーも右寄せ（中身はハンバーガー1個だが保険） */
  .wp-block-group.is-content-justification-space-between.is-nowrap:has(.wp-block-navigation__responsive-container-open) > :last-child,
  .wp-block-group.is-content-justification-space-between.is-nowrap:has(.wp-block-navigation__responsive-container-open) > :last-child .wp-block-navigation__responsive-container:not(.is-menu-open){
    justify-content:flex-end;
  }

  /* ---- オーバーレイの土台（全面パネル） ------------------------------------ */
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container > .wp-block-group.has-white-background-color{
    background-color:var(--leap-nav-ivory) !important;
    color:var(--leap-nav-green) !important;
    min-height:100svh;
    /* 4ブロック構成（閉じる → メニュー → ONLINE SHOP → Instagram）を縦に */
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:24px 26px 84px !important;   /* 下部は画面下まで十分な余白 */
    overflow-y:auto;
  }

  /* ---- 1. 閉じるボタン --------------------------------------------------- */
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-block-group.alignwide.is-content-justification-right{
    justify-content:flex-end;
    margin:0 0 26px 0 !important;
    min-height:0;
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation-overlay-close{
    width:44px;               /* タップ領域 44px 以上 */
    height:44px;
    margin:-8px -10px 0 0;     /* アイコン位置は動かさずヒット領域だけ拡張 */
    color:var(--leap-nav-green);
    border-radius:50%;
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation-overlay-close svg{
    width:22px;               /* アイコン自体は大きくしない */
    height:22px;
    fill:currentColor;
  }

  /* ---- 2. メニュー一覧 -------------------------------------------------- */
  /* 内側の縦ナビ: 背景を消してアイボリーを見せる。ul / buttons / social を縦積み */
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-block-navigation.is-vertical{
    background:transparent !important;
    color:var(--leap-nav-green) !important;
    margin:0 !important;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:0;
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container ul.wp-block-navigation__container{
    background:transparent !important;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:0;
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container li.wp-block-navigation-item{
    background:transparent !important;
    width:100%;
    margin:0;
  }
  /* 項目間だけの、ごく薄い 1px 線（Editorial。カード・太線は使わない） */
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container
    ul.wp-block-navigation__container > li.wp-block-navigation-item + li.wp-block-navigation-item{
    border-top:1px solid var(--leap-nav-line);
  }
  /* リンク: 左端を完全に揃える / 上下 padding 一定 / 文字サイズ・行間を統一 */
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-block-navigation-item__content{
    display:block;
    width:100%;
    padding:16px 0 !important;    /* 左右 0 = 左端揃え。タップ高さ ~56px */
    margin:0;
    font-family:var(--leap-nav-serif);
    font-size:19px;
    line-height:1.4;
    font-weight:500;
    letter-spacing:.06em;
    color:var(--leap-nav-green) !important;
    text-decoration:none;
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-block-navigation-item__label{
    font:inherit;
    letter-spacing:inherit;
  }
  /* サブメニュー矢印など余計な装飾は隠す（存在する場合） */
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-block-navigation__submenu-icon{
    display:none;
  }

  /* ---- 3. ONLINE SHOP（下部CTAゾーン） -------------------------------- */
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-block-buttons{
    width:100%;
    margin:26px 0 0 0 !important;
    padding-top:28px;
    border-top:1px solid rgba(28,51,39,.16);   /* CTA前だけの区切り */
    justify-content:flex-start;
    gap:0;
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-block-button{
    margin:0;
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-block-button__link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:200px;
    max-width:100%;
    min-height:52px;              /* タップ領域 48px 以上 */
    box-sizing:border-box;
    padding:15px 24px !important;
    background-color:var(--leap-nav-green) !important;  /* 深緑背景 / 白文字（比較の結果こちらを採用） */
    color:#fff !important;
    border:0 !important;
    border-radius:4px !important;
    font-family:var(--leap-nav-serif);
    font-size:13px;
    font-weight:600;
    line-height:1;
    letter-spacing:.16em;
    text-transform:uppercase;
    box-shadow:0 12px 24px -18px rgba(0,0,0,.38);
    transition:transform .4s var(--leap-nav-ease),background-color .4s var(--leap-nav-ease);
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-block-button__link:hover{
    background-color:#254a37 !important;
  }

  /* ---- 4. Instagram（ONLINE SHOP の下に。丸アイコンのみ） --------------- */
  /* social を包む navigation__container / li を縦積みの独立ブロックに */
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container ul.wp-block-navigation__container:has(.wp-block-social-links),
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container li:has(.wp-block-social-links){
    display:block;
    width:100%;
    margin:0;
    padding:0;
    background:transparent !important;
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-block-social-links{
    margin:18px 0 0 0 !important;
    padding:0;
    justify-content:flex-start;
    gap:0;
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-social-link{
    width:48px;
    height:48px;
    padding:0;
    background-color:transparent !important;
    border:1px solid rgba(28,51,39,.28);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-social-link a{
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
  }
  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
    .wp-block-navigation__overlay-container .wp-social-link svg{
    width:21px;
    height:21px;
    fill:var(--leap-nav-green);
  }

  /* ---- アニメーション（控えめ / 横からの飛び込みは禁止） ---------------- */
  @media (prefers-reduced-motion:no-preference){
    .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
      .wp-block-navigation__overlay-container > .wp-block-group.has-white-background-color{
      animation:leapNavPanelIn .34s var(--leap-nav-ease) both;
    }
    .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
      .wp-block-navigation__overlay-container .wp-block-navigation.is-vertical{
      animation:leapNavItemsIn .5s var(--leap-nav-ease) .06s both;
    }
  }
}

@keyframes leapNavPanelIn{ from{opacity:0} to{opacity:1} }
@keyframes leapNavItemsIn{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }