/* ============================================================
 * SWELL ヘッダー上書き — sundayfolk-child
 *
 * HTML/index.html L17-47 の見た目を SWELL ヘッダー構造に移植。
 * SWELL の透過モード (.l-header.-transparent) を活用。
 *
 * 構造マッピング:
 *   .site-header        → .l-header / .l-fixHeader (追従)
 *   .site-logo img      → .c-headLogo__img
 *   .nav-links a span   → .ttl (英)
 *   .nav-link__ja       → .c-smallNavTitle.desc (日)
 *   .nav-sns / .btn-contact → .sf-header-sns / .sf-header-contact
 *                            (ブログパーツ #4370 内で記述)
 *
 * SWELL は通常ヘッダー (#header.l-header) と追従ヘッダー
 * (#fix_header.l-fixHeader) を別要素として生成するため、
 * 両方に効くよう .l-header / .l-fixHeader をカンマで並列指定。
 * （:where() は詳細度0になり SWELL に負けるため使わない）
 *
 * SP ハンバーガーは独自ボタン (sp-drawer.php の #hamburger) を採用:
 * - SWELL のハンバーガー (.l-header__menuBtn) は visibility:hidden で消す
 * - 独自 #hamburger は #content 直下にあるため position:fixed で右上配置
 * - 線色は見認性確保のため黒固定
 * - SWELL の SP メニュー本体 (#sp_menu) も display:none で消す
 *
 * ホバーアニメは SWELL カスタマイザー「背景明るく」設定に乗り、
 * 色だけオレンジ系に揃える。下線アニメ (::after) は付けない
 * （SWELL の .c-gnav a::after と二重発生するため）。
 * ============================================================ */

/* ──── ヘッダー幅を常に画面いっぱいに（SWELL のサイト幅制約を解除）──── */
#header .l-header__inner.l-container,
#fix_header .l-fixHeader__inner.l-container {
  max-width: none;
  width: 100%;
  padding-left: 32px;
  padding-right: 32px;
}

/* ──── ロゴサイズ ──── */
.l-header .c-headLogo__img,
.l-fixHeader .c-headLogo__img {
  height: 52px;
  width: auto;
}

/* ──── ナビ：英＋日2段の縦並び ────
 * font-size に !important を付ける理由:
 * SWELL の親テーマ CSS が build/css/main.css 内で .c-gnav .ttl 系に
 * font-size を指定しており、子テーマからの通常上書きで負ける。
 * ヘッダーは親テーマと最終決着を取る必要があるため !important を許容。
 */
.l-header .c-gnav > li > a,
.l-fixHeader .c-gnav > li > a {
  position: relative;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  transition: color .25s ease, background .25s ease;
}
.l-header .c-gnav .ttl,
.l-fixHeader .c-gnav .ttl {
  font-family: 'Montserrat', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
}
.l-header .c-gnav .c-smallNavTitle.desc,
.l-fixHeader .c-gnav .c-smallNavTitle.desc {
  font-family: 'Montserrat', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-top: 2px;
  opacity: 1;
}

/* ──── 透過モード時の文字色（上部スクロール前）──── */
.l-header.-transparent .c-gnav .ttl,
.l-header.-transparent .c-gnav .c-smallNavTitle.desc,
.l-fixHeader.-transparent .c-gnav .ttl,
.l-fixHeader.-transparent .c-gnav .c-smallNavTitle.desc {
  color: #333;
}
.l-header.-transparent .sf-header-sns a,
.l-header.-transparent .sf-header-sns .sf-header-search,
.l-fixHeader.-transparent .sf-header-sns a,
.l-fixHeader.-transparent .sf-header-sns .sf-header-search {
  color: #555;
}

/* ──── ホバー：SWELL の「背景明るく」 + 独自下線 (::before) ────
 * SWELL カスタマイザーが「背景明るく」設定の場合、SWELL 側 ::after は出ない。
 * 元デザインは下線あり前提なので、::before で独自下線を出す。
 * （SWELL の .c-gnav a::after と分離するため ::before を使用）
 */
.l-header .c-gnav > li:hover > a,
.l-fixHeader .c-gnav > li:hover > a {
  background: rgba(224,85,49,.10);
}
.l-header .c-gnav > li:hover > a .ttl,
.l-fixHeader .c-gnav > li:hover > a .ttl,
.l-header .c-gnav > li:hover > a .c-smallNavTitle.desc,
.l-fixHeader .c-gnav > li:hover > a .c-smallNavTitle.desc {
  color: #E05531;
}
.l-header .c-gnav > li > a::before,
.l-fixHeader .c-gnav > li > a::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #E05531;
  transform: translateX(-50%);
  transition: width .25s ease;
  pointer-events: none;
}
.l-header .c-gnav > li:hover > a::before,
.l-fixHeader .c-gnav > li:hover > a::before {
  width: 100%;
}

/* ──── ヘッダー右ウィジェット：SNS+CONTACT 全体 ──── */
.sf-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ──── SNS アイコン ──── */
.sf-header-sns {
  display: flex;
  gap: 8px;
}
.sf-header-sns a,
.sf-header-sns .sf-header-search {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #555;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.sf-header-sns a:hover,
.sf-header-sns .sf-header-search:hover {
  color: #E05531;
  background: rgba(224,85,49,.08);
}
#search_modal .c-searchForm__submit {
  color: #fff;
  background: #E05531 !important;
}
#search_modal .c-searchForm__submit:hover {
  opacity: 1;
  background: #C44424 !important;
}
#search_modal .c-searchForm__submit:focus-visible {
  outline: 2px solid rgba(224,85,49,.28);
  outline-offset: 2px;
}
/* X アイコン (SVG) サイズ */
.sf-header-sns a .sf-header-x-icon {
  width: 14px;
  height: 14px;
  display: block;
}

/* ──── CONTACT ボタン ──── */
.sf-header-contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #E05531;
  color: #fff !important;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  transition: background .3s, box-shadow .3s, transform .3s;
}
.sf-header-contact:hover {
  background: #C44424;
  box-shadow: 0 6px 18px rgba(224,85,49,.3);
  transform: translateY(-1px);
}

/* ──── 中間幅（960〜1300px）でナビを詰める ──── */
@media (min-width: 960px) and (max-width: 1300px) {
  .l-header .c-gnav,
  .l-fixHeader .c-gnav { gap: 8px; }
  .l-header .c-gnav .ttl,
  .l-fixHeader .c-gnav .ttl { font-size: 11px !important; letter-spacing: .08em; }
  .l-header .c-gnav .c-smallNavTitle.desc,
  .l-fixHeader .c-gnav .c-smallNavTitle.desc { font-size: 9px !important; }
  .sf-header-contact { font-size: 11px; padding: 9px 16px; }
}

/* ──── SP（959px以下）──── */
@media (max-width: 959px) {
  .l-header .c-headLogo__img,
  .l-fixHeader .c-headLogo__img {
    height: 42px;
  }
  #header .l-header__inner.l-container,
  #fix_header .l-fixHeader__inner.l-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ──── 独自ハンバーガーを SP 右上に固定 ────
   * sp-drawer.php は wp_footer フックで body 末尾に出力される。
   * 位置とサイズは top-orange-navy.css の .sp-nav__close と完全一致させ、
   * 開閉ボタン (#hamburger) と閉じるボタン (#sp-nav-close) のズレを解消。
   *
   * --max-w は top-orange-navy.css で :root に 1200px 定義されるが、
   * このCSSは全ページ enqueue のためトップ以外で未定義の可能性あり。
   * CSS 変数フォールバック (var(--max-w, 1200px)) で安全化。
   *
   * z-index 9999: SWELL の追従ヘッダー .l-fixHeader より上を確保。
   */
  #hamburger {
    display: flex !important;
    position: fixed !important;
    top: calc((86px - 42px) / 2 - 3px) !important;
    right: calc(max(0px, (100vw - min(var(--max-w, 1200px), 100vw)) / 2) + 32px) !important;
    z-index: 9999 !important;
    width: 42px;
    height: 42px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
  }

  #hamburger .hamburger__line {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #111;
    transition: transform .3s ease, opacity .3s ease, width .3s ease, background .3s ease;
    transform-origin: center;
  }
  /* スクロール状態に関わらず、SPヘッダー上で見えるよう黒固定。 */
  html[data-scrolled="false"] #hamburger .hamburger__line { background: #111; }
  html[data-scrolled="true"]  #hamburger .hamburger__line { background: #111; }
}

/* ──── SP（599px以下）でハンバーガー位置を ヘッダー高 68px ベースに ────
 * top-orange-navy.css の .sp-nav__close と同じ計算式に揃える。
 */
@media (max-width: 599px) {
  #hamburger {
    top: calc((68px - 42px) / 2 - 3px) !important;
    right: calc(max(0px, (100vw - min(var(--max-w, 1200px), 100vw)) / 2) + 20px) !important;
  }
}

/* ──── Tablet（600〜959px）も SP ヘッダー高 68px ベースに揃える ──── */
@media (min-width: 600px) and (max-width: 959px) {
  #hamburger {
    top: calc((68px - 42px) / 2 - 3px) !important;
    right: calc(max(0px, (100vw - min(var(--max-w, 1200px), 100vw)) / 2) + 20px) !important;
  }
}

@media (max-width: 959px) {
  /* ドロワー開時はハンバーガー自体を隠す（✕は #sp-nav-close に任せる） ────
   * 元 HTML 静的版では #hamburger が <header> 内 / ドロワーが後出しオーバーレイ
   * の構造上、✕変形ハンバーガーはドロワー裏に隠れて見えなかった。
   * 現状は body 直下＋z-index 9999 で前面表示されるため、ドロワー開時に
   * 完全非表示にして #sp-nav-close (ドロワー右上 ✕) と重複させない。
   * is-open アニメ (3本線→✕変形) の CSS は残しているが、表示はしない。
   */
  #hamburger.is-open { display: none !important; }
  #hamburger.is-open .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #hamburger.is-open .hamburger__line:nth-child(2) { opacity: 0; width: 0; }
  #hamburger.is-open .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ──── SWELL ハンバーガー非表示（独自 #hamburger を採用） ────
 * 他案件流儀の visibility + pointer-events 方式。
 * display:none だと SWELL の SPヘッダー JS で位置計算がズレる可能性あるため
 * visibility で領域は残しつつ見せない方が安全。
 */
.l-header__menuBtn {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ──── SWELL SP メニュー本体を非表示（既存 #sp-nav を使うため）──── */
#sp_menu { display: none !important; }

/* ──── SP ドロワーを SWELL 追従ヘッダーより前面に ────
 * top-orange-navy.css 側の .sp-nav { z-index: 1000 } では
 * SWELL の #fix_header.l-fixHeader に負けるため上書き。
 * NOTE: .sp-nav 系スタイル本体は top-orange-navy.css にあり現在は
 * is_front_page() 限定 enqueue。トップ以外でハンバーガーを開くと
 * 装飾が当たらない可能性 → Step 10-9 でドロワー CSS を全ページ
 * enqueue 化する TODO（HANDOVER 参照）。
 */
.sp-nav { z-index: 100000 !important; }