/* ==========================================================================
   MarlSystem — TOPページのヘッダー（トップページのみ読み込み）
   WIDE（641px以上）
     A：FV（ヒーロー写真）の上に重なる透明ヘッダー
     B：「対応工事」セクション以降で上から降りてくるベージュの固定ヘッダー（.is-sticky / .is-shown）
     状態の切り替えは assets/js/front-header.js。
   NARROW（640px以下）
     ベージュの帯をなくして FV を画面上端まで広げ、ハンバーガーメニューを画面左上に常に固定する。
   WIDE/NARROW の境界は既存の 640px（ハンバーガーメニューへの切り替え）を使用する。
   ========================================================================== */

/* 横長ロゴは固定ヘッダー（B）でのみ表示する。それ以外（A・NARROW）では非表示 */
.header-logo{ display: none; }

@media (min-width: 641px){

  /* ---------- A：FV 上の透明ヘッダー ---------- */
  body.home header.site{
    position: absolute;
    top: var(--wp-admin--admin-bar--height, 0px); /* ログイン中の管理バーの下に配置 */
    left: 0;
    right: 0;
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
    transition: transform .3s var(--ease);
  }

  /* 写真の上でも読めるよう濃い文字色＋控えめな明るい縁取り（ベタ背景は使わない） */
  body.home header.site:not(.is-sticky) nav.site a{
    color: var(--paper);
    text-shadow: 0 0 2px rgba(250,247,240,.9), 0 0 8px rgba(250,247,240,.85);
  }
  body.home header.site:not(.is-sticky) nav.site a:hover,
  body.home header.site:not(.is-sticky) nav.site a:focus-visible,
  body.home header.site:not(.is-sticky) nav.site a.active{
    color: var(--brass);
    border-bottom-color: var(--brass);
  }

  /* FV 写真をヘッダーの下（画面最上部）まで広げる。
     ヘッダーの高さ分だけ高さと上余白を足し、キャッチコピーと下のセクションの位置は従来どおりにする */
  body.home .hero{
    min-height: calc(82vh + var(--ms-header-h, 75px));
    padding-top: calc(clamp(90px, 12vw, 130px) + var(--ms-header-h, 75px));
  }

  /* ---------- B：「対応工事」以降の固定ヘッダー ---------- */
  body.home header.site.is-sticky{
    position: fixed;
    background: rgba(250,247,240,.96);
    backdrop-filter: blur(6px);
    border-bottom-color: var(--line);
    transform: translateY(-100%);
    visibility: hidden; /* 画面外にある間はフォーカスさせない */
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  body.home header.site.is-sticky.is-shown{
    transform: none;
    visibility: visible;
    transition: transform .3s var(--ease), visibility 0s linear 0s;
  }
  /* 初期表示・状態の付け替え時はアニメーションさせない */
  body.home header.site.no-anim{ transition: none; }

  body.home header.site.is-sticky .header-inner{
    justify-content: space-between;
    gap: clamp(20px, 3vw, 32px); /* WIDE の狭い幅でもメニューが折り返さないよう、幅に応じて縮める */
  }
  body.home header.site.is-sticky nav.site a{ white-space: nowrap; }
  body.home header.site.is-sticky .header-logo{
    display: block;
    flex-shrink: 0;
  }
  .header-logo img{
    display: block;
    width: clamp(120px, 14vw, 180px);
    height: auto;
  }
}

@media (max-width: 640px){

  /* ---------- NARROW：ハンバーガーメニューを画面左上に固定 ---------- */
  /* ヘッダーを画面に固定し、ベージュの帯（global-menu.css の ::before）は表示しない。
     ヘッダー自体はクリックを通し、ボタンとメニューだけ操作できるようにする（下の本文を覆わない） */
  body.home header.site{
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px); /* ログイン中の管理バーの下に配置 */
    left: 0;
    right: 0;
    pointer-events: none;
    border-bottom-color: transparent; /* 帯がないため、スクロール時（.scrolled）の下罫線も出さない */
  }
  body.home header.site::before{ display: none; }
  body.home header.site .nav-toggle,
  body.home header.site nav.site{ pointer-events: auto; }

  /* ボタンは3本線だけを表示する（背景・枠なし）。写真・本文の上でも判別できるよう線は濃い色。
     見えない余白でタップ領域を約44×44pxにする（線の位置は従来どおり）。
     キーボード操作時のフォーカス枠はサイト共通の :focus-visible で表示される */
  body.home .nav-toggle{
    box-sizing: content-box;
    padding: 11px 7px;
    margin: -11px -7px;
    background: transparent;
    -webkit-tap-highlight-color: transparent; /* タップ時の四角いハイライトを出さない */
  }
  body.home .nav-toggle span{
    background: var(--paper);
  }
  /* 3本線 ⇔ × の変形は全ページ共通（assets/css/global-menu.css） */

  /* FV 写真を画面上端まで広げる。ヘッダーの高さ分だけ高さと上余白を足し、
     ロゴ・キャッチコピー・下のセクションの位置は従来どおりにする */
  body.home .hero{
    min-height: calc(82vh + var(--ms-header-h, 67px));
    padding-top: calc(clamp(90px, 12vw, 130px) + var(--ms-header-h, 67px));
  }
}