/* ============================================================================
 * Ikebanadoctor — サイト共通ヘッダー / 下部タブバー
 * ----------------------------------------------------------------------------
 * ここが唯一の正本。index.html のヘッダーを基準に切り出した。
 * 各ページの <head> の最後で読み込むこと（ページ内 <style> より後 = 上書きできる）。
 *
 * 重要:
 *  - 色は必ず var(--x, #fallback) で書く。gear/frames/journal 系のページは
 *    --line / --blue-soft / --accent-* を持たないため、fallback が無いと色が消える。
 *  - --fs（文字サイズ倍率）も var(--fs, 1) で書く。未定義ページでも 1 になる。
 *  - マークアップは scripts/sync-site-headers.js が生成する。手で書き換えないこと。
 * ========================================================================== */

/* ── 上部ユーティリティバー ── */
.site-header .topbar {
  background: var(--blue-soft, #D4E8FF);
  color: var(--ink-soft, #5C5042);
  font-size: calc(13px * var(--fs, 1));
  padding: 6px 0;
}
.site-header .topbar-inner {
  max-width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.site-header .topbar-delivery {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.site-header .topbar-free { color: var(--accent-pink-deep, #D67890); white-space: nowrap; }
.site-header .topbar a { color: inherit; }

/* ── 文字サイズ切替 ── */
.site-header .font-ctrl { display: flex; align-items: center; gap: 8px; }
.site-header .font-radio {
  display: flex;
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.site-header .font-radio button {
  border: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft, #5C5042);
  font-weight: 600;
  font-size: calc(13px * var(--fs, 1));
  font-family: var(--font, system-ui, sans-serif);
  min-width: 36px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.site-header .font-radio button.active {
  background: var(--ink, #2B241A);
  color: var(--bg-cream, #FBF4E0);
}

/* ── ヘッダー本体 ── */
header.site-header {
  background: var(--bg-cream, #FBF4E0);
  border-bottom: 1px solid var(--line, #E8DECA);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 12px;
  margin: 0 auto;
  /* ヘッダーだけコンテナを広げる（本文の 1120px はそのまま）。
     ロゴ271px + ナビ906px + gap12px = 1189px が 1120px に収まらず
     ロゴが「Ikebanad」で切れていた不具合の修正 2026-08-10 */
  max-width: min(1280px, 100%);
}

/* ── ロゴ ── */
.site-header .logo-btn {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.site-header .logo-text-main {
  font-family: var(--font-display, var(--font, system-ui, sans-serif));
  font-weight: 700;
  font-size: calc(22px * var(--fs, 1));
  color: var(--ink, #2B241A);
  line-height: 1.1;
  text-align: left;
}
.site-header .logo-text-sub {
  font-size: calc(12px * var(--fs, 1));
  color: var(--ink-mute, #908371);
  letter-spacing: .08em;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.site-header .mascot-img {
  width: 56px; height: 56px;
  object-fit: contain;
  border-radius: 50%;
  background: #FFEDBA;
  flex-shrink: 0;
}
.site-header .mascot-fallback {
  width: 56px; height: 56px; border-radius: 50%; background: #FFEDBA;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0;
}

/* ── ナビ ── */
.site-header nav { display: flex; align-items: center; gap: 6px; }
.site-header .nav-link {
  background: transparent;
  border: 0;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--ink, #2B241A);
  font-weight: 600;
  font-size: calc(15px * var(--fs, 1));
  font-family: var(--font, system-ui, sans-serif);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.site-header .nav-link:hover,
.site-header .nav-link.active { background: var(--bg-cream-deep, #F4E8C9); }

/* デスクトップではロゴを最優先で確保し、絶対に切らない（スマホは従来どおり縮む）。
   文字サイズ「大」など想定外に膨らんだ時だけ nav 側が横スクロールして、
   カート等がページ外へはみ出さないようにする */
@media (min-width: 769px) {
  .site-header .logo-btn { flex-shrink: 0; }
  .site-header nav { min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .site-header nav::-webkit-scrollbar { display: none; }
}
/* ナビ項目が6つあるため、中間幅では詰めて1行に収める（折り返し防止）。
   ヘッダーが 1280px まで広がるので、それ未満の帯（〜1279px）は詰める */
@media (max-width: 1279px) {
  .site-header nav { gap: 2px; }
  .site-header .nav-link { padding: 10px 10px; font-size: calc(13.5px * var(--fs, 1)); }
}
@media (max-width: 1130px) {
  /* さらに狭い幅: 余白と文字を詰め、絵文字とロゴ副題を隠して1行を死守 */
  .site-header nav { gap: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header .nav-link { padding: 8px 6px; font-size: calc(12px * var(--fs, 1)); }
  .site-header .nav-emoji { display: none; }
  .site-header .logo-text-sub { display: none; }
}

/* ── 言語切替 ── */
.site-header #lang-switch {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 11px 18px;
  border: 2px solid var(--ink, #2B241A);
  border-radius: 999px;
  font-size: calc(14px * var(--fs, 1));
  font-weight: 700;
  color: var(--ink, #2B241A);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  transition: background .15s, transform .1s;
  /* nav の詰め(gap:0〜2px)はナビ項目どうしの折り返し防止用。
     EN/カートは意味の異なる要素なので、ここだけ左に余白を確保する 2026-08-11 */
  margin-left: 10px;
}
.site-header #lang-switch:hover { background: var(--accent-yellow-soft, #FFF1B8); transform: translateY(-1px); }
.site-header #lang-switch:active { transform: translateY(0); }
.site-header #lang-switch span[aria-hidden] { font-size: 1.15em; line-height: 1; }

/* ── カート ── */
.site-header .cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid var(--ink, #2B241A);
  background: var(--ink, #2B241A);
  color: var(--bg-cream, #FBF4E0);
  font-weight: 700;
  font-size: calc(15px * var(--fs, 1));
  font-family: var(--font, system-ui, sans-serif);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
  margin-left: 8px;
}
.site-header .cart-btn:hover { background: #1F1B14; }
.site-header .cart-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-pink, #FFB3C6);
  color: var(--ink, #2B241A);
  font-size: calc(12px * var(--fs, 1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ── スマホ・タブレット（〜920px）── */
/* 上部のテキストナビは隠すが、項目は下部タブバーに全部出す（隠さない・減らさない）。 */
@media (max-width: 920px) {
  .site-header nav .nav-link { display: none !important; }
  .mobile-tabbar { display: flex !important; }

  /* 淡い青の上部バーはスクロールで流し、ロゴ／EN／カートの行だけを上端に貼り付ける。
     ヘッダー全体を貼ると 375px で画面の2割強を常時占有してしまうため（2026-08-11 オーナー承認）。
     やり方: ヘッダーは1つの sticky ボックスのままにして、top を「上部バーの高さぶんマイナス」に
     すると、上部バーだけが画面の外へ押し出され、header-inner が top:0 に揃う。
     マークアップを分割しないので、日英132ページの構造は共通のまま。
     --site-topbar-h は assets/site-header.js が実測して入れる（未実行時は 0px = 従来どおり全体固定）。
     921px以上は従来どおり top:0（ヘッダー全体が貼り付く）。 */
  header.site-header { top: calc(-1 * var(--site-topbar-h, 0px)); }
}
@media (max-width: 768px) {
  .site-header .header-inner { padding: 10px 12px; gap: 8px; }
  .site-header .topbar-inner { padding: 0 12px; }
  .site-header .topbar-delivery { font-size: 10px; flex-wrap: wrap; row-gap: 2px; column-gap: 4px; justify-content: center; }
  .site-header .topbar-free { flex-basis: auto; }
  .site-header .font-ctrl { gap: 6px; font-size: 10px; }
  .site-header .font-radio button { padding: 3px 9px; min-width: 30px; font-size: 11px; }
  .site-header .logo-text-sub { font-size: 10px; letter-spacing: 0; }
  .site-header .logo-text-main { font-size: calc(18px * var(--fs, 1)); }
  .site-header .mascot-img, .site-header .mascot-fallback { width: 44px; height: 44px; }
  .site-header .logo-btn { gap: 8px; min-width: 0; }
  .site-header .logo-btn > div { min-width: 0; flex: 1; }
  .site-header .logo-text-main, .site-header .logo-text-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-header #lang-switch {
    padding: 7px 10px;
    font-size: 12px;
    gap: 2px;
    border-width: 1px;
    /* モバイルはナビ項目が消えて EN/カートの2つだけになるため、詰め過ぎ対策の余白は不要。
       header-inner の gap(8px)だけで十分離れるので相殺する */
    margin-left: 0;
  }
  .site-header #lang-switch .lang-text { display: none; }
  .site-header .cart-btn { padding: 10px 12px; gap: 6px; font-size: 0; }
  .site-header .cart-btn .cart-text { display: none; }
  .site-header .cart-btn .cart-icon { font-size: 18px; }
  .site-header .cart-btn .cart-badge { font-size: 12px; }
}

/* ── 下部タブバー（〜920px でのみ表示） ── */
.mobile-tabbar {
  display: none;
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--line, #E8DECA);
  box-shadow: 0 -4px 16px rgba(0,0,0,.04);
  z-index: 40;
}
.mobile-tabbar .tab-item {
  /* 7項目（ホーム/お店/ガイド/機材/写真集/塗り絵/カート）が320px幅でも1行に収まるよう
     文字・アイコンを vw で上限クランプする。文字サイズ「大」(--fs:1.2)でも破綻しない。 */
  flex: 1 1 0; min-width: 0; background: transparent; border: 0; padding: 8px 1px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-mute, #908371); font-weight: 500; position: relative;
  font-size: min(calc(10px * var(--fs, 1)), 3.1vw);
  font-family: var(--font, system-ui, sans-serif);
  line-height: 1.15; text-align: center; word-break: keep-all; white-space: nowrap;
  text-decoration: none; cursor: pointer;
}
.mobile-tabbar .tab-item.active { color: var(--ink, #2B241A); font-weight: 700; }
.mobile-tabbar .tab-icon { font-size: min(calc(19px * var(--fs, 1)), 5.4vw); line-height: 1; }
.mobile-tabbar .tab-badge {
  position: absolute; top: 4px; right: 50%; margin-right: -15px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--accent-pink, #FFB3C6); color: var(--ink, #2B241A);
  font-size: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}

/* sticky なヘッダーの下に、ページ側の sticky 要素（撮影機材/撮影地ガイドの
   ジャンプナビ）が潜り込まないようにする。高さは site-header.js が実測して
   --site-header-h に入れる。 */
.jumpnav { top: var(--site-header-h, 0px) !important; }
/* アンカー(#id)へ飛んだとき、sticky ヘッダーの下に見出しが隠れないようにする。
   ジャンプナビ分は各ページの scroll-margin-top（62px）が従来どおり担当する。 */
html { scroll-padding-top: var(--site-header-h, 0px); }
