/* ==========================================================================
   brand-header.css — Membo brand-unified header V5
   正本パス: WEB版/test/DocumentRoot/assets/css/brand-header.css
   バンドル外・個別 SCP 必須（spots.css と同規律）

   V5 (2026-06-29 ナミオ明示・3要望反映):
     - 1. 幅・位置を /spots/ と完全統一 (max-width:1280px 中央寄せ・height:64px)
     - 2. 本文タイトルが header に詰まらないよう body { padding-top:64px } 追加
     - 3. ロゴ・「メンボ」クリックは / (ホーム) に統一 (toolbar.php 側は既に /?lang=)
   V4 (2026-06-29):
     - /spots/ V3 のロゴ + 「メンボ」あしらいを blog/固定ページ全体に統一
     - 既存 Elements/toolbar.php の .toolbar を上書き
     - メンバー募集 CTA をハンバーガーの左に追加
     - 不具合修正: pc.css @media(>=768): .toolbar { margin:0 10% 0 10% } を !important で kill
     - 適用対象: blog全記事 + /recruits /help /howto_push /pwa /news /terms /privacy /company /datadeletion 等
     - 非対象  : /membo (SPA 動的 toolbar / app.js 生成)
   ========================================================================== */

/* ===== Membo ブランド変数 (spots.css と完全共通) ===== */
:root {
  --membo-blue: #4A90E2;
  --membo-blue-dark: #1976d2;
  --membo-blue-deep: #1565c0;
  --membo-border: #e0e0e0;
  --membo-text-light: #555;
  --membo-text-muted: #888;
  --membo-header-h: 64px;  /* /spots/ --header-h と完全一致 */
  --font-en: 'Josefin Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ja: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
}

/* ===== 本文を fixed header 下に押し下げる (要望 2) ===== */
/* body#home / 通常固定ページ / blog記事 — すべて fixed header 分の余白を確保
   /membo SPA は brand-header.css を読まないので影響なし */
body { padding-top: var(--membo-header-h) !important; }

/* custom.css の body { max-width:1600px } と共存 (body 全体が中央寄せ・toolbar は viewport 全幅) */
/* ※toolbar は viewport 全幅で固定するので body max-width に追随しない (背景白を edge-to-edge) */

/* ===== .toolbar 全体 (V5: /spots/ 完全互換・centered inner via padding-calc) ===== */
.toolbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* レガシー rule の打ち消し: width:80% / left:10% / max-width:1100px / margin:0 10% */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  /* V5: /spots/ と同一寸法 — height 64px・inner content を 1280px max-width 中央 */
  height: var(--membo-header-h) !important;
  /* padding-calc で inner content を中央 1280px に揃える (spots.css .spots-header-inner と完全一致) */
  padding-left: max(20px, calc((100vw - 1280px) / 2)) !important;
  padding-right: max(20px, calc((100vw - 1280px) / 2)) !important;
  /* レイアウト */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* custom.css の flex-end を打ち消す */
  gap: 0 !important;
  background: #fff !important;
  border: none !important;
  border-bottom: 1px solid var(--membo-border) !important;
  /* 既存 glassmorphism を打ち消す */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.04);
  z-index: 1000 !important;
}

/* 旧 .toolbar-title (absolute 配置・SPA 互換) は非表示。新 .toolbar-brand に置換 */
.toolbar > .toolbar-title { display: none !important; }
.toolbar h1 { display: none !important; }

/* ===== 左: Membo ロゴ + 「メンボ」あしらい (spots.css .spots-logo と完全統一) ===== */
.toolbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--membo-blue) !important;
  text-decoration: none !important;
  flex-shrink: 0;
  height: 100%;
  padding: 0;
}
.toolbar-brand:hover {
  text-decoration: none !important;
  opacity: .85;
}
.toolbar-brand-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: block;
  flex-shrink: 0;
}
.toolbar-brand-mark {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: var(--membo-blue);
  line-height: 1;
}
.toolbar-brand-sub {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 13px;
  color: var(--membo-text-muted);
  padding: 2px 8px;
  background: #eef4fc;
  border-radius: 999px;
  margin-left: 4px;
  line-height: 1;
  white-space: nowrap;
}

/* ===== 中央スペーサー (右寄せ用) ===== */
.toolbar-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

/* ===== 右: メンバー募集 CTA pill (spots.css .spots-header-cta と完全互換) ===== */
.toolbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--membo-blue);
  color: #fff !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ja);
  text-decoration: none !important;
  flex-shrink: 0;
  white-space: nowrap;
  margin-right: 6px;
  transition: background .15s ease;
}
.toolbar-cta:hover,
.toolbar-cta:focus {
  background: var(--membo-blue-dark);
  color: #fff !important;
  text-decoration: none !important;
}
.toolbar-cta .fas {
  font-size: 13px;
  color: #fff;
}

/* ===== 既存 Globe / Hamburger ボタンのスタイル統一 ===== */
.toolbar .toolbar-hamburger-btn {
  /* web.css の position:absolute; right:1rem を打ち消し、flex フローに戻す */
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  color: var(--membo-blue) !important;
  cursor: pointer;
  font-size: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  right: auto !important;
  left: auto !important;
  top: auto !important;
}
.toolbar .toolbar-hamburger-btn:hover {
  background: #f0f6fd !important;
}
.toolbar .toolbar-hamburger-btn .fas {
  color: var(--membo-blue) !important;
  font-size: 18px;
}
/* web.css の #hamburgerGlobeBtn { right: 3rem } を明示リセット */
.toolbar #hamburgerGlobeBtn.toolbar-hamburger-btn,
.toolbar #hamburgerBtn.toolbar-hamburger-btn {
  right: auto !important;
}

/* body#home でロゴ・CTA が消えないようガード (custom.css の display:none を打ち消し) */
body#home .toolbar-brand,
body#home .toolbar-brand-mark,
body#home .toolbar-brand-sub,
body#home .toolbar-cta {
  display: inline-flex !important;
}
body#home .toolbar-brand-img { display: block !important; }
body#home .toolbar-hamburger-btn .fas { color: var(--membo-blue) !important; }

/* ===== SP 調整 (768px 未満) ===== */
@media (max-width: 767px) {
  .toolbar {
    /* SP: padding 圧縮 (spots.css の spots-header-inner SP と同値) */
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .toolbar-brand-sub { display: none; }       /* 「Membo」サブピルは省略 */
  .toolbar-brand-mark { font-size: 19px; }
  .toolbar-cta { padding: 7px 10px; font-size: 12px; margin-right: 4px; }
  .toolbar-cta-label { display: none; }       /* SP は虫眼鏡アイコンのみ */
}