/*
Theme Name:horsejapan
Theme URI:
Description:for HorseJapan Theme
Template:shapely
Author:Design Site 7110
Author URI:https://ds7110.jp/
Version:1.00
*/


/* =========================================
   Mobile menu toggle: FA icon + OPEN/CLOSE
   PCでは非表示
   モバイル（〜991px）のみ有効
   ========================================= */


/* ===== PC表示（992px以上）は非表示 ===== */
@media screen and (min-width: 992px){
  #site-navigation .mobile-toggle{
    display: none !important;
  }
}


/* ===== モバイル表示（991px以下）のみ有効 ===== */
@media screen and (max-width: 991px){

  /* 元の横長ロゴ(img)は隠す */
  #site-navigation .site-title-container .custom-logo{
    display: none !important;
  }

  /* ロゴリンク(a)をシンボル背景で表示 */
  #site-navigation .site-title-container .custom-logo-link{
    display: block;
    background-image: url("https://test.ds7110.jp/wp-content/uploads/2026/02/horse-japan_symbol.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* モバイルでロゴが主張しすぎないサイズ感（可変＋上限下限） */
    width: 10vw;
    max-width: 44px;
    min-width: 32px;
    aspect-ratio: 1 / 1;
  }


  
  /* ヘッダーを折り返しOKにして、2段構成にする */
  #site-navigation .flex-row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* ロゴ（1行目の左） */
  #site-navigation .site-title-container{
    order: 1;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* ハンバーガー（1行目の右） */
  #site-navigation .mobile-toggle{
    order: 2;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* メニュー領域は “必ず2行目” に落とす（これが超重要） */
  #site-navigation .module-group.right{
    order: 3;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }



  /* 縦並び */
  #site-navigation .mobile-toggle{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    line-height: 1 !important;
  }

  /* 疑似要素はブロック化 */
  #site-navigation .mobile-toggle::before,
  #site-navigation .mobile-toggle::after{
    display: block;
    color: #fff;
  }

  /* 元の <i> は消す */
  #site-navigation .mobile-toggle i{
    display: none !important;
  }

  /* 閉：bars + OPEN */
  #site-navigation .mobile-toggle::before{
    content: "\f0c9"; /* bars */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
  }

  #site-navigation .mobile-toggle::after{
    content: "OPEN";
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    margin-top: 4px;
  }

  /* 開：xmark + CLOSE */
  #site-navigation .nav-bar.nav-open .mobile-toggle::before{
    content: "\f00d"; /* xmark */
  }

  #site-navigation .nav-bar.nav-open .mobile-toggle::after{
    content: "CLOSE";
  }
}

/* =========================================
   パララックス（parallax-window）: モバイル縦だけ調整
   ========================================= */
@media screen and (max-width: 991px) and (orientation: portrait){

  /* 高さの主導権を parallax-window 側に持たせる */
  .shapely_home_parallax .parallax-window.fullscreen{
    height: 60svh !important;     /* 60〜80svhで調整 */
    min-height: 60svh !important;
  }

  /* 親sectionが102.6vhとかを持ってても暴れないように */
  .shapely_home_parallax section.cover.fullscreen{
    height: auto !important;
    min-height: 0 !important;
  }

  /* 背景として描画されている場合の中心（効く環境だけ効く） */
  .shapely_home_parallax .parallax-window{
    background-position: 50% 50% !important;  /* 左右が切れるなら、まずここは触らず高さを詰める */
    background-size: cover !important;
  }
}