/* ============================================================
   ヘッダー・ナビだけを index.html と揃えるためのレイヤー
   2026-08-03

   なぜこのファイルが要るか
   ── ヘッダーの見た目は renewal-framework.css が作っているが、
      その中身は全部 `.renewal-framework 〜` で書かれている。
      body にクラスが無いページ（power / healy）では1行も効かず、
      ロゴ・検索ボタン・LINE登録・トップへ戻るが旧 style.css のまま出ていた。
   ── かといって renewal-framework.css を丸ごと読み込ませると、
      見出し・本文・ボタン・セクションまで全部作り替わってしまう。
      power.html は「変えない核」、healy.html も本文は現状維持なので、
      ヘッダーとナビに関わる分だけをここへ切り出して当てる。

   読み込み位置
   ── warhol-taro-theme.css の後、nav-poster.css の前。
      index.html における renewal-framework.css と同じ位置に置くことで、
      カスケードの順番まで index と同じにしている。

   ★保守上の注意
   ── ここは renewal-framework.css（543〜701行・762〜801行）と
      nav-poster.css（88〜96行）の写しである。
      ヘッダーの見た目を変えるときは両方直すこと。
      将来まとめるなら、renewal-framework.css 側から該当ブロックを抜いて
      このファイルを全ページで読む形にする。
   ============================================================ */

/* renewal-framework の変数のうち、ヘッダーが使う分だけを定義する。
   index などクラスを持つページでは `.renewal-framework` 側が
   同じ値で上書きするため、二重に読み込んでも競合しない。 */
:root {
  --rf-body-fill:     #D92B1F;
  --rf-paper:         #FFFDF6;
  --rf-ink:           #16130F;
  --rf-consciousness: #FFC400;
  --rf-display: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
}

/* ------------------------------------------------------------
   ロゴ
   既定は 13px の明朝ライト＋小さな上付きの「8」で、本文と見分けがつかない。
   丸ゴシックの太字・角ゼロ・2〜3pxの墨罫・硬い影で組み直し、
   「8」は判子として独立させる。
   ------------------------------------------------------------ */
#site-header .logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--rf-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--rf-ink);
  transition: none;
}
#site-header .logo:hover { opacity: 1; }

#site-header .logo span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin-left: 8px;
  vertical-align: baseline;
  font-family: var(--rf-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: var(--rf-paper);
  background: var(--rf-body-fill);
  border: 2px solid var(--rf-ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--rf-ink);
  transition: background .14s, box-shadow .14s, transform .14s;
}
#site-header .logo:hover span,
#site-header .logo:focus-visible span {
  background: var(--rf-ink);
  box-shadow: 1px 1px 0 var(--rf-ink);
  transform: translate(2px, 2px);
}

@media (max-width: 768px) {
  #site-header .logo { font-size: 15px; }
  #site-header .logo span {
    width: 22px; height: 22px; font-size: 14px;
    margin-left: 6px; box-shadow: 2px 2px 0 var(--rf-ink);
  }
}

/* ------------------------------------------------------------
   ナビ内のボタン（既存CSSの衝突を解く）

   サイト内検索：warhol-taro-theme が
     #site-nav a:not(.nav-cta) { color: var(--wt-paper) !important; }
   で白を当てるため、紙地に白文字で消える。
   .btn-header-search は .nav-cta を持たないので :not() をすり抜ける。

   LINE登録：style.css は緑（#06C755）だが warhol-taro-theme が黄へ上書きし、
   文字色だけ style.css の #fff !important が残るため「黄地に白文字」になる。
   ブランド色の緑へ戻す。
   ------------------------------------------------------------ */
#site-nav .btn-header-search,
.header-actions .btn-header-search {
  background: var(--rf-paper) !important;
  color: var(--rf-ink) !important;
  border: 2px solid var(--rf-ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--rf-ink);
  font-family: var(--rf-display);
  font-weight: 700;
  padding: 8px 14px;
  transition: background .14s, color .14s, box-shadow .14s, transform .14s;
}
#site-nav .btn-header-search:hover,
#site-nav .btn-header-search:focus-visible {
  background: var(--rf-ink) !important;
  color: var(--rf-paper) !important;
  box-shadow: 2px 2px 0 var(--rf-ink);
  transform: translate(2px, 2px);
}

#site-nav .nav-cta--line,
.nav-cta--line {
  background: #06C755 !important;
  color: #fff !important;
  border: 2px solid var(--rf-ink) !important;
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--rf-ink);
  font-family: var(--rf-display);
  font-weight: 700;
  transition: background .14s, box-shadow .14s, transform .14s;
}
#site-nav .nav-cta--line:hover,
#site-nav .nav-cta--line:focus-visible {
  background: #04833A !important;
  opacity: 1 !important;
  box-shadow: 2px 2px 0 var(--rf-ink);
  transform: translate(2px, 2px);
}

/* nav-poster.css 88〜96行と同じ最終上書き。
   影を墨から紙色へ。index では nav-poster.css が後から当てているので、
   ここでも最後に置いて同じ結果にする。 */
#site-nav .nav-cta--line { box-shadow: 4px 4px 0 var(--wt-paper); }
#site-nav .btn-header-search:hover,
#site-nav .btn-header-search:focus-visible,
#site-nav .nav-cta--line:hover,
#site-nav .nav-cta--line:focus-visible { box-shadow: 2px 2px 0 var(--wt-paper); }

@media (prefers-reduced-motion: reduce) {
  #site-header .logo:hover span,
  #site-nav .btn-header-search:hover,
  #site-nav .nav-cta--line:hover { transform: none; }
}

/* ------------------------------------------------------------
   トップへ戻るボタン
   既定は透明地＋1pxのティール罫で、紙の上ではほぼ見えない。
   他のボタンと同じ作法（角ゼロ・3pxの墨罫・硬い影・押し込み）に揃えて、
   赤の面塗りで出す。
   ------------------------------------------------------------ */
#back-to-top {
  width: 56px;
  height: 56px;
  bottom: 28px;
  right: 28px;
  border-radius: 0;
  background: var(--rf-body-fill);
  color: var(--rf-paper);
  border: 3px solid var(--rf-ink);
  box-shadow: 5px 5px 0 var(--rf-ink);
  transition: opacity .3s ease, visibility .3s ease,
              transform .14s, background .14s, box-shadow .14s;
}
#back-to-top svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}
#back-to-top.visible { transform: translateY(0); }
#back-to-top:hover,
#back-to-top:focus-visible {
  background: var(--rf-ink);
  color: var(--rf-paper);
  box-shadow: 2px 2px 0 var(--rf-ink);
  transform: translate(3px, 3px);
}

@media (max-width: 768px) {
  #back-to-top {
    width: 48px; height: 48px;
    bottom: 18px; right: 18px;
    box-shadow: 4px 4px 0 var(--rf-ink);
  }
  #back-to-top svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  #back-to-top:hover { transform: none; }
}

/* ------------------------------------------------------------
   「AIに渡す」のコピー完了トースト
   ボタンはヘッダーにあるが、トーストの見た目は renewal-framework.css
   にしか無かったため、このページ群では素の状態で出ていた。
   ボタンと対になる表示なのでここへ含める。
   ------------------------------------------------------------ */
.toast--action {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: min(92vw, 460px);
  padding: 12px 14px 12px 18px;
  background: var(--rf-ink);
  color: var(--rf-paper);
  border: 2px solid var(--rf-ink);
  box-shadow: 5px 5px 0 var(--rf-body-fill);
  border-radius: 0;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
}
.toast--action a {
  flex-shrink: 0;
  margin-left: auto;
  padding: 8px 14px;
  background: var(--rf-paper);
  color: var(--rf-ink);
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  border: 2px solid var(--rf-ink);
}
.toast--action a:active { background: var(--rf-consciousness); }

@media (max-width: 480px) {
  .toast--action { bottom: 84px; gap: 10px; }
  .toast--action a { margin-left: 0; width: 100%; text-align: center; }
}