/* =========================================================
   Navbar override
   ---------------------------------------------------------
   本来 navbar-expand-xl は 1200px 以上で横並びになるが、
   この CSS では 992px（lg）以上を XL と同じ扱いにする
   ========================================================= */

/* 992px（lg）以上で PC 用ナビゲーションに切り替える */
@media (min-width: 992px) {

  /* -----------------------------------------------------
     collapse 領域を常時展開状態にする
     -----------------------------------------------------
     Bootstrap の collapse は JS により
     display / height / visibility を制御するため、
     それらを明示的に上書きする
  ----------------------------------------------------- */
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;   /* display:none を打ち消す */
    flex-basis: auto;
    height: auto !important;    /* 高さ 0 を防ぐ */
    visibility: visible;        /* 念のため表示状態を固定 */
  }

  /* 開閉アニメーション中（collapsing）も非表示にしない */
  .navbar-expand-xl .navbar-collapse.collapsing {
    display: flex !important;
  }

  /* -----------------------------------------------------
     ナビゲーション項目を横並びにする
     -----------------------------------------------------
     1200px 未満では navbar-nav が
     flex-direction: column（縦並び）になるため、
     row（横並び）に戻す
  ----------------------------------------------------- */
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }

  /* モバイル用に付与される縦方向マージンを解除 */
  .navbar-expand-xl .nav-item {
    margin-top: 0;
  }

  /* モバイル用の全幅リンクを解除 */
  .navbar-expand-xl .nav-link {
    width: auto;
  }

  /* -----------------------------------------------------
     ハンバーガーボタンを非表示
     -----------------------------------------------------
     PC レイアウトでは不要なため隠す
  ----------------------------------------------------- */
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }

  /* -----------------------------------------------------
     ドロップダウンを PC 向け挙動に戻す
     -----------------------------------------------------
     モバイルでは position: static になるため、
     absolute に戻して通常のドロップダウン表示にする
  ----------------------------------------------------- */
  .navbar-expand-xl .dropdown-menu {
    position: absolute;
  }
}

/* =========================================================
   補足
   ---------------------------------------------------------
   ・1200px 以上では Bootstrap 本来の navbar-expand-xl の
     スタイルがそのまま適用される
   ・992px 未満では通常通りハンバーガーメニューになる
   ・HTML を一切変更せず挙動だけを lg 相当に変更できる
   ========================================================= */