/* ============================================================
 * Sound Collective — Header / Footer (方式B / Figma 1:1移植)
 * Header 1675:402 / Mega 1914:11220 / Footer 1543:12254 の実数値に一致。
 * トークンは sc-design-tokens.css の :root を使用。
 * ============================================================ */

/* ===== HEADER ===== */
/* #22: 常時 position:fixed でビューポート上端に固定。背景ブラー値(backdrop-filter:blur(22px) / rgba(16,16,16,.4))は
 * Figma (PC 1514-39793 / SP 2686-81434) の実測値と一致(get_design_context で確認済み)。
 * reveal-on-scroll: 下スクロールでヘッダー高さ超え→.is-hidden(transform:translateY(-100%))/上スクロール・最上部→表示。
 * 判定・スロットルは sc_header_shortcode() 内の <script>(rAFで間引き)を参照。 */
.sc-hdr {
  position:fixed; top:0; left:0; right:0; width:100%; display:flex; align-items:center;
  min-height:64px; padding:0 8px 0 8px;
  background:rgba(16,16,16,.4); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  font-family:var(--sc-font); z-index:1000;
  transform:translateY(0); transition:transform .3s ease; will-change:transform;
}
.sc-hdr.is-hidden { transform:translateY(-100%); }

/* 固定ヘッダー分のオフセット(ヘッダーは Theme Builder で常時表示のため)。
 * SP はヘッダー高さ分(64px)を確保。
 * #33: PC はヘッダーが半透明+reveal-on-scrollのため、余白を確保せずページのダークなヒーローに重ねる(白い隙間を除去)。 */
#main-container { padding-top:64px; }
/* ⚠️ #232(2026-07-28): この 1025px は **意図的にヘッダーの切替閾値(1250px)と揃えていない**。
 *   これは「ヘッダーの PC/SP」ではなく「ページ本文を固定ヘッダーの下に潜らせるか / 64px 空けるか」の
 *   判定で、各ページ側のレイアウト(ヒーロー等)のブレークポイントが 1024px のままだからである。
 *   1251px に上げると 1025〜1250px で本文が 64px 下がり、PC ヒーローに重ねる #33 の設計が崩れる
 *   (= このレンジの見た目が変わる)。ヘッダーは常時 fixed + 半透明なので切替閾値とは独立。 */
@media (min-width:1025px) {
  #main-container { padding-top:0; }
}
.sc-hdr__logo { flex:0 0 auto; display:inline-flex; align-items:center; }
.sc-hdr__logo img { width:52px; height:52px; display:block; }

/* ナビはヘッダー中央に絶対配置(Figma: left-1/2 translateX(-50%)) */
.sc-hdr__nav { position:absolute; left:50%; top:0; height:100%; transform:translateX(-50%); display:flex; align-items:center; }
.sc-hdr__menu { display:flex; align-items:center; gap:56px; list-style:none; margin:0; padding:0; height:100%; }
.sc-hdr__item { display:flex; align-items:center; height:100%; }
.sc-hdr__link {
  position:relative; display:inline-flex; align-items:center; gap:6px; height:48px; padding:0 12px;
  color:var(--sc-fg); font-weight:var(--sc-fw-bold); font-size:14px; line-height:1.4;
  text-decoration:none; white-space:nowrap;
}
.sc-hdr__link i { font-size:14px; }
.sc-hdr__link:hover::after, .sc-hdr__link.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px;
  background:var(--sc-primary); border-radius:8px 8px 0 0;
}

/* メガメニュー(2カラム) */
.sc-hdr__mega {
  position:absolute; top:calc(100% - 4px); left:0; display:none; gap:24px; padding:12px 20px 20px;
  min-width:720px; background:var(--sc-bg-bright); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.sc-hdr__item--mega { position:relative; }
.sc-hdr__item--mega:hover .sc-hdr__mega,
.sc-hdr__item--mega.is-open .sc-hdr__mega { display:flex; }
.sc-hdr__mega-cats { display:flex; flex-direction:column; gap:0; flex:1 0 0; min-width:320px; }
.sc-hdr__mega-cats--right { gap:4px; }
.sc-hdr__cat {
  display:flex; align-items:center; justify-content:space-between; gap:12px; height:48px; padding:0 4px;
  color:var(--sc-fg); font-weight:var(--sc-fw-bold); font-size:14px; text-decoration:none; border-radius:8px;
}
/* #31(b): ホバーは背景を付けずテキスト色のみ変化させる(mega/dropdown 行共通) */
.sc-hdr__cat:hover { background:transparent; color:var(--sc-primary); }
.sc-hdr__cat i { color:var(--sc-fg-secondary); }
.sc-hdr__cat-label { display:inline-flex; align-items:center; }

/* 右カラム(Online Only): ラベル+バッジを2段に積む */
.sc-hdr__cat--stacked { height:auto; min-height:48px; align-items:center; padding:8px 4px; }
.sc-hdr__cat-stack { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }

/* Get in Touch ドロップダウン(Explore Classesメガと同じ開閉パターン、パネルは簡易リスト) */
.sc-hdr__item--dropdown { position:relative; }
.sc-hdr__dropdown {
  position:absolute; top:calc(100% - 4px); right:0; display:none; flex-direction:column; gap:0;
  min-width:260px; padding:12px; background:var(--sc-bg-bright); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.sc-hdr__item--dropdown:hover .sc-hdr__dropdown,
.sc-hdr__item--dropdown.is-open .sc-hdr__dropdown { display:flex; }

/* 🔴 #260-4: 以前は `:focus-within` で開いた状態を保っていたため、**トップレベル項目をクリックすると
 * リンクにフォーカスが残り、マウスを離してもメガメニューが開いたまま**になっていた
 * (クライアント指摘「the dropdowns being persistent」。**2 つが同時に開いて重なる**状態も再現した)。
 * 開閉の単一ソースを `.is-open`(JS が付与)に変え、**クリックはトグル**にした(sc_header_shortcode)。
 * `.is-closed` は「クリックで閉じた直後」の一時状態で、**マウスがまだ項目の上にあるため上の :hover が
 * 効いてしまう**のを打ち消す(mouseleave で JS が外す)。:hover と同 specificity なので順序で勝たせる。 */
.sc-hdr__item--mega.is-closed .sc-hdr__mega,
.sc-hdr__item--dropdown.is-closed .sc-hdr__dropdown { display:none; }

/* プロモカード(Figma node 2694:63009: bg #121212 / rounded8 / 写真コラージュ背景 + ONLINE画像 + サブ) */
.sc-hdr__promo {
  /* #34: flex-basis:auto でコンテンツ分の高さを確保(overflow:hidden併用時に flex-basis:0 だと高さ0まで縮み、
   * ロゴ/サブテキストが欠けるため)。 */
  position:relative; flex:1 1 auto; min-width:300px; min-height:107px; display:flex; flex-direction:column; justify-content:flex-start;
  gap:8px; padding:16px; border-radius:8px; background:var(--sc-bg); overflow:hidden; text-decoration:none;
}
/* #34: 背景コラージュ(2段×3枚 / 回転-7.45deg / screen合成 / 20%不透明)。ロゴ/テキストより背面(z-index:0)。 */
.sc-hdr__promo-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; border-radius:inherit; }
.sc-hdr__promo-row {
  position:absolute; left:-30px; width:457px; height:86px; display:flex; gap:12px;
  opacity:.2; mix-blend-mode:screen; transform:rotate(-7.45deg); transform-origin:center;
}
.sc-hdr__promo-row--1 { top:-27px; }
.sc-hdr__promo-row--2 { top:70px; }
.sc-hdr__promo-row i { flex:1 0 0; min-width:0; aspect-ratio:1024/576; background-size:cover; background-position:center; display:block; }
.sc-hdr__promo-logo, .sc-hdr__promo-brand { position:relative; z-index:1; width:139px; height:auto; display:block; }
.sc-hdr__promo-sub { position:relative; z-index:1; margin-top:auto; color:var(--sc-fg); font-size:14px; }
.sc-hdr__promo-arrow { position:absolute; right:8px; bottom:16px; color:var(--sc-fg); z-index:1; }

/* 右ユーティリティ(Figma: right-16 top-14 gap-4) */
.sc-hdr__utils { flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:4px; }
.sc-hdr__icon {
  display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 12px;
  border-radius:32px; color:var(--sc-fg); font-size:20px; text-decoration:none;
}
.sc-hdr__icon:hover { background:rgba(255,255,255,.10); }
.sc-hdr__login {
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px;
  border-radius:32px; border:1px solid var(--sc-white); color:var(--sc-fg);
  font-weight:var(--sc-fw-bold); font-size:14px; text-decoration:none; white-space:nowrap;
}
.sc-hdr__login i { font-size:20px; }
.sc-hdr__login:hover { background:rgba(255,255,255,.10); }
.sc-hdr__toggle { display:none; }

/* Online Only バッジ(Figma Chip: bg 白10% / rounded54 / 14px Bold) */
.sc-badge-online {
  display:inline-flex; align-items:center; gap:4px; margin-left:8px;
  font-size:14px; font-weight:var(--sc-fw-bold); color:var(--sc-fg);
  background:rgba(255,255,255,.10); padding:2px 8px; border-radius:54px; white-space:nowrap;
}
.sc-badge-online i { font-size:14px; }

/* ===== SP (≤1250px) =====
 * #232(2026-07-28): PC→SP の切り替えを 1024px → **1250px** へ引き上げ。
 *   理由: PC ナビは中央絶対配置(`.sc-hdr__nav` translateX(-50%) / 5項目 + `gap:56px`×4 ≈ 879px)で
 *   flex の並びに参加しないため、幅が足りなくなると押し出されず**無音で右ユーティリティに重なる**。
 *   重なり開始は `ナビ幅 + 2×右ユーティリティ幅`(中央寄せのため)= 未ログイン(Login ピル≈95px)で
 *   **W≈1278px** / ログイン時(丸アイコン36px・#211)で **W≈1159px**(Montserrat 700 14px の実 advance から算出)。
 *   → issue 指定の 1250px を採用したが、**未ログインの 1251〜1277px には重なりが残り得る**(#232 §5 で報告)。
 *   ナビ項目を増やす/ラベルを長くするときは上式を再計算すること。
 * ⚠️ **このブロックがヘッダーの PC/SP 切り替えの単一ソース**。
 *   ヘッダーは Elementor Theme Builder テンプレ #629499(dev)/#629536(local)だが、
 *   中身は `[sc_header]` ショートコード 1 個だけで `hide_desktop`/`hide_tablet`/`hide_mobile` も
 *   レスポンシブ設定も持たない(2026-07-28 dev 実測: `_elementor_data` 303B / hide_* 0件)。
 *   よって Elementor のブレークポイント設定(kit 55: viewport_lg=1025 / viewport_md=768)は
 *   ヘッダーの切り替えに一切関与しない。**ここを変えるだけで切り替わる。**
 *   閾値を動かすときは下の footer 用ブロック(意図的に 1024 のまま)と混同しないこと。 */
@media (max-width:1250px) {
  .sc-hdr { padding:0 16px; }
  /* #211 追いFB(2026-07-27): SP はドロワー内にログイン後のメニュー
   * (ユーザー名 / Student Dashboard / Log Out)を持つので、ヘッダー右端の
   * アカウントアイコンは不要 → 未ログイン時の .sc-hdr__login と同じ扱いで隠す。 */
  .sc-hdr__nav, .sc-hdr__icon--search, .sc-hdr__login, .sc-hdr__acct { display:none; }
  .sc-hdr__toggle {
    display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
    background:none; border:none; color:var(--sc-fg); font-size:20px; cursor:pointer;
  }
}

/* SP ドロワー(全画面) */
.sc-drawer { position:fixed; inset:0; z-index:2000; background:var(--sc-bg); display:flex; flex-direction:column; padding:0 16px 24px; overflow:auto; font-family:var(--sc-font); }
.sc-drawer[hidden] { display:none; }
.sc-drawer__bar { display:flex; align-items:center; justify-content:space-between; height:64px; }
.sc-drawer__bar-right { display:flex; align-items:center; gap:8px; }
.sc-drawer__close { background:none; border:none; color:var(--sc-fg); font-size:22px; width:36px; height:36px; cursor:pointer; }
/* #86: Search ボックスを Figma (SP nav 3931:32087 / InputParts 1822:33475) に一致。
 *  bg 白10% / border 0.5px #5d6164(Figma border/border) / radius8 / padding8-12 / gap12 / icon20px。
 *  Blocksy の input[type=search](詳細度 0,1,1)に勝つため input 指定は .sc-drawer 子孫スコープ(#84実証)。 */
.sc-drawer__search { display:flex; align-items:center; gap:12px; padding:8px 12px; border:0.5px solid #5d6164; border-radius:8px; background:rgba(255,255,255,.10); color:var(--sc-fg-secondary); margin-bottom:8px; }
.sc-drawer__search > i, .sc-drawer__search > svg { flex:0 0 auto; width:20px; font-size:20px; line-height:1; color:var(--sc-fg); text-align:center; }
/* #15: 死に入力だった検索を <form> 化。虫眼鏡は submit ボタンなので Blocksy の button 装飾
 *  (詳細度 0,1,1 相当)を .sc-drawer 子孫スコープ(0,2,0)で打ち消す。見た目は旧アイコンと同一。 */
.sc-drawer .sc-drawer__search-btn { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:20px; height:20px; min-height:0; margin:0; padding:0; border:none; border-radius:0; background:none; box-shadow:none; color:var(--sc-fg); font-size:20px; line-height:1; cursor:pointer; }
.sc-drawer .sc-drawer__search-btn > i, .sc-drawer .sc-drawer__search-btn > svg { width:20px; font-size:20px; line-height:1; color:inherit; }
.sc-drawer .sc-drawer__search input[type="search"] { flex:1 1 auto; min-width:0; height:20px; margin:0; padding:0; border:none; background:none; box-shadow:none; color:var(--sc-fg); font-family:var(--sc-font); font-size:14px; line-height:20px; outline:none; }
.sc-drawer .sc-drawer__search input[type="search"]::placeholder { color:var(--sc-fg-secondary); opacity:1; }

/* ドリルイン: ルート/Explore Classes/Get in Touch をパネル切替(JSで .is-active をトグル) */
.sc-drawer__panels { display:flex; flex-direction:column; flex:1; }
.sc-drawer__panel { display:none; flex-direction:column; }
.sc-drawer__panel.is-active { display:flex; }

.sc-drawer__nav { display:flex; flex-direction:column; }
.sc-drawer__link {
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:16px 4px;
  background:none; border:none;
  color:var(--sc-fg); font-family:var(--sc-font); font-weight:var(--sc-fw-bold); font-size:20px;
  text-align:left; text-decoration:none; cursor:pointer; list-style:none;
}
.sc-drawer__link--stacked { align-items:center; }
.sc-drawer__link-text { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.sc-drawer__back {
  display:flex; align-items:center; gap:6px; padding:10px 4px; margin-bottom:4px;
  background:none; border:none; color:var(--sc-fg); font-family:var(--sc-font);
  font-weight:var(--sc-fw-medium); font-size:14px; cursor:pointer;
}
.sc-drawer__promo { margin-top:16px; }
.sc-drawer__divider { height:1px; background:var(--sc-border-dim); margin:8px 0; }
.sc-drawer__label { color:var(--sc-fg-secondary); font-size:12px; padding:8px 4px; }

/* ===== FOOTER (#37 リデザイン: Figma PC 2704:64718 / SP 2670:79529) ===== */
/* #168-revert(2026-07-23): Figma 2704-62764 準拠でリンク列を復元 → brand 左/links 右の space-between に戻す。 */
.sc-ftr { display:flex; align-items:center; justify-content:space-between; gap:48px; padding:32px 80px; background:var(--sc-bg); font-family:var(--sc-font); color:var(--sc-white); }
.sc-ftr__brand { display:flex; flex-direction:column; align-items:flex-start; gap:12px; flex:0 0 auto; }
.sc-ftr__logo { width:300px; height:90px; object-fit:contain; display:block; }
.sc-ftr__details { display:flex; flex-direction:column; gap:4px; text-align:center; width:300px; }
.sc-ftr__muted { color:var(--sc-white); font-weight:var(--sc-fw-medium); font-size:14px; line-height:1.4; margin:0; }
.sc-ftr__addr { color:var(--sc-white); font-weight:var(--sc-fw-bold); font-size:16px; line-height:1.4; text-decoration:none; }
/* #37: ソーシャルアイコン(白丸32px + FontAwesome / Avada awb-icon-fontには依存しない) */
.sc-ftr__social { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sc-ftr__social a {
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; min-height:32px;
  border-radius:32px; background:var(--sc-white); color:#121212; text-decoration:none; font-size:16px; flex:0 0 auto;
}
.sc-ftr__social a:hover { background:var(--sc-primary); color:var(--sc-white); }

/* #37: リンクセクション(Education / NYC Space & Studio単独見出し / Information の縦積み) */
.sc-ftr__links { display:flex; flex-direction:column; gap:20px; flex:1 1 auto; max-width:843px; }
.sc-ftr__section { display:flex; flex-direction:column; gap:8px; }
.sc-ftr__heading { color:var(--sc-fg); font-weight:var(--sc-fw-bold); font-size:18px; line-height:1.4; margin:0; text-decoration:none; }
a.sc-ftr__heading--link { display:block; }
.sc-ftr__linklist { display:flex; flex-wrap:wrap; gap:8px 32px; }
.sc-ftr__linklist a { color:var(--sc-white); font-weight:var(--sc-fw-medium); font-size:16px; line-height:1.4; text-decoration:none; white-space:nowrap; }
.sc-ftr__linklist a:hover, a.sc-ftr__heading--link:hover { color:var(--sc-primary); }

/* ⚠️ #232: フッターの SP 化は **1024px のまま**(ヘッダーの 1250px と揃えない)。
 *   ヘッダーは横並びが物理的に破綻するので上げたが、フッターは 1025〜1250px でも
 *   `.sc-ftr__linklist { flex-wrap:wrap }` で折り返して収まる(はみ出しは起きない)ため、
 *   1250px に上げると「PC 幅で SP レイアウト」になるだけの改悪になる。 */
@media (max-width:1024px) {
  .sc-ftr { flex-direction:column; align-items:center; gap:16px; padding:32px 30px; }
  .sc-ftr__brand { align-items:center; text-align:center; width:100%; }
  .sc-ftr__social { justify-content:center; }
  .sc-ftr__links { align-items:flex-start; width:100%; max-width:348px; gap:16px; }
  .sc-ftr__heading { font-size:16px; }
  .sc-ftr__linklist { flex-direction:column; flex-wrap:nowrap; gap:12px; }
  .sc-ftr__linklist a { font-size:14px; white-space:normal; }
}

/* ============================================================
 * リデザインページ: ヘッダー直下の想定外の白い隙間を除去
 *  - Blocksy の .ct-container-full が padding-top:60px を持つ + body背景が白
 *  → 対象テンプレ(Elementorフルワイド / コース・講師単一 / 検索)で上部余白0・暗色背景に
 * ============================================================ */
body.page-template-elementor_full_width,
body.single-courses,
body.single-instructor,
body.single-sc_event,
body.post-type-archive-sc_event,
body.single-sc_space,
body.post-type-archive-sc_space,
body.search {
  background-color: var(--sc-bg, #121212);
}
body.page-template-elementor_full_width .ct-container-full,
body.single-courses .ct-container-full,
body.single-instructor .ct-container-full,
body.single-sc_event .ct-container-full,
body.post-type-archive-sc_event .ct-container-full,
body.single-sc_space .ct-container-full,
body.post-type-archive-sc_space .ct-container-full,
body.search .ct-container-full {
  padding-top: 0 !important;
}

/* ============================================================
 * #211 ログイン後のアカウントメニュー
 * 未ログイン時は .sc-hdr__login(既存)のまま。ログイン時のみ以下が出る。
 * 既存ヘッダーのトークン(白枠 pill / bg-bright / 14px Bold)に揃えている。
 * ============================================================ */
/* PC: Login ボタン位置のアカウントアイコン(円形) */
.sc-hdr__acct { position:relative; }
.sc-hdr__acct-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border-radius:50%;
  border:1px solid var(--sc-white); background:transparent; color:var(--sc-fg);
  cursor:pointer;
}
.sc-hdr__acct-btn i { font-size:18px; }
.sc-hdr__acct-btn:hover,
.sc-hdr__acct .is-open .sc-hdr__acct-btn { background:rgba(255,255,255,.10); }
/* PC: クリックで開くドロップダウン(Student Dashboard / Log Out) */
.sc-hdr__acct-menu {
  position:absolute; top:calc(100% + 8px); right:0; z-index:10;
  display:flex; flex-direction:column; min-width:220px; padding:8px;
  background:var(--sc-bg-bright, #272727); border:1px solid var(--sc-border-dim, #353c45);
  border-radius:8px; box-shadow:0 4px 26px rgba(0,0,0,.55);
}
.sc-hdr__acct-menu[hidden] { display:none; }
.sc-hdr__acct-name {
  display:flex; align-items:center; gap:8px; padding:8px 12px 10px;
  border-bottom:1px solid var(--sc-border-dim, #353c45); margin-bottom:6px;
  color:var(--sc-fg); font-size:14px; font-weight:var(--sc-fw-bold);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sc-hdr__acct-name i { font-size:16px; color:var(--sc-fg-secondary, #adb3bb); }
.sc-hdr__acct-item {
  padding:10px 12px; border-radius:6px; color:var(--sc-fg); font-size:14px;
  font-weight:var(--sc-fw-medium); text-decoration:none; white-space:nowrap;
}
.sc-hdr__acct-item:hover { background:rgba(255,255,255,.10); color:var(--sc-fg); }
/* SP ドロワー: nav 最下部のユーザー名行(項目ではないのでリンクにしない) */
.sc-drawer__user {
  display:flex; align-items:center; gap:8px; padding:12px 0;
  color:var(--sc-fg); font-size:16px; font-weight:var(--sc-fw-bold);
}
.sc-drawer__user i { font-size:18px; color:var(--sc-fg-secondary, #adb3bb); }