// ヘッダーおよびモバイルメニューの高さ・オフセットを更新
( function () {
  function updateHeaderMetrics() {
    const header = document.getElementById( 'header-container' );
    const mobileHeaderMenuButtons = document.querySelector(
      '.mobile-header-menu-buttons'
    );

    let offset = 0;

    // 1. ヘッダーコンテナのオフセット計算
    if ( header && header.classList.contains( 'fixed-header' ) ) {
      offset = header.offsetHeight;
    }

    // 2. モバイルヘッダーメニューボタンの処理
    if ( mobileHeaderMenuButtons ) {
      const computedStyle = window.getComputedStyle( mobileHeaderMenuButtons );
      const topValue = parseFloat( computedStyle.top );
      const menuHeight = mobileHeaderMenuButtons.offsetHeight;

      // CSS変数「--mobile-header-menu-height」を更新（jQuery側の処理を移植）
      document.documentElement.style.setProperty(
        '--mobile-header-menu-height',
        menuHeight + 'px'
      );

      if ( topValue >= 0 ) {
        // topが0以上の場合は、その要素の高さを反映
        offset += menuHeight;
      } else {
        // topが0未満の場合は、0pxとして扱う（offsetは変更しない）
      }
    }

    // CSS変数「--cocoon--header-container--position-offset」を更新
    document.documentElement.style.setProperty(
      '--cocoon--header-container--position-offset',
      offset + 'px'
    );
  }

  // 初回読み込み時に実行
  document.addEventListener( 'DOMContentLoaded', updateHeaderMetrics );

  // ブラウザサイズ変更時に更新（100msの間引き処理で負荷を軽減）
  let resizeTimer;
  window.addEventListener( 'resize', function () {
    clearTimeout( resizeTimer );
    resizeTimer = setTimeout( function () {
      updateHeaderMetrics();
    }, 100 );
  } );

  // スクロール時にも更新
  window.addEventListener( 'scroll', updateHeaderMetrics );
} )();