/* ============================================================
 * 記事ページ：ヒーローの色味をリニューアル版にそろえる差分
 * ============================================================
 * 記事本文のレイアウトは本番の css/site.css をそのまま使っている。
 * ただしヒーロー（見出し帯）だけは、本の紙をイメージした
 * クリーム色（#fdfbf7 → #f6f1e9）で、リニューアル版の
 * 「白＋うすい緑」と並べると浮いてしまう。
 * そこで色に関わる指定だけを、このファイルで上書きする。
 * 高さ・余白・文字サイズなど、レイアウトには手を付けていない。
 *
 * ★本番化のときは、この内容を src/site.src.css に取り込み、
 *   このファイルは無くす（上書きを重ねたままにしない）。
 * ============================================================ */

/* 面の色：クリームの紙 → 上がうすい緑の白 */
.lib-hero,
[data-layout="hero"]{
  background:radial-gradient(78% 120% at 50% 0%,var(--teal-pale) 0%,#fff 62%);
  border-bottom:1px solid var(--line);
}
/* 紙の粒（点々の地紋）は、白い面には合わないので消す */
.lib-hero__paper{display:none}
/* 左端の背表紙。グラデーションをやめ、棚の色そのままの帯にする */
.lib-hero::before{background:var(--spine,#0d9488)}
/* 背表紙の隣にあった「紙の束」の縞は消す */
.lib-hero::after{display:none}

/* 文字：見出しはテーマカラーの緑、リード文は本文と同じ中間色 */
.lib-hero__title{color:var(--teal)}
.lib-hero__lead{color:var(--ink-mid)}

/* パンくずの帯：境界線の色を本文と同じ薄いグレーにそろえる */
.lib-crumbbar,
div[data-layout="crumbs"]{border-bottom:1px solid var(--line)}
.hero-crumbs{color:var(--ink-dim)}
.hero-crumbs a:hover{color:var(--teal)}
.hero-updated{color:var(--ink-dim)}
/* カテゴリの札。棚の色で塗るのは元のままだが、角と太さをリニューアル版に合わせる */
/* 白抜きの小さい文字なので、棚の色を18%暗くしてコントラストを確保する */
.hero-cat{font-weight:800;letter-spacing:.06em;
  background:color-mix(in srgb,var(--spine,#0d9488) 82%,#000)}

/* ------------------------------------------------------------
 * 記事末のCTA（「日々の観察が出発点になります」など）
 * ------------------------------------------------------------
 * 元は黒い面（bg-stone-900）＋白文字＋オレンジのボタンだった。
 * 白基調のリニューアル版では黒い面が浮くため、
 * うすい緑の面と、トップページと同じ緑のボタンにそろえる。
 * 余白や並びは元のまま（色に関わるところだけを変えている）。 */
.lib-cta{
  background:linear-gradient(160deg,var(--teal-pale),#fff 70%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.lib-cta h2{color:var(--ink)}
.lib-cta__lead{color:var(--ink-mid)}

/* ボタン。トップページの .btn--fill / .btn--line と同じ見え方にする。
   daisyUI の .btn の指定を上書きするので、!important で確実に効かせる。 */
.lib-btn{
  font-weight:800;
  border-width:1px;
  transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s;
}
.lib-btn:hover{transform:translateY(-2px)}
.lib-btn--fill{
  /* 白抜き文字なので --teal（白との比 3.74）ではなく --teal-text（5.47）を使う */
  background:var(--teal-text)!important;
  border-color:var(--teal-text)!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(13,148,136,.22);
}
.lib-btn--fill:hover{
  background:var(--teal-deep)!important;
  border-color:var(--teal-deep)!important;
  box-shadow:0 12px 28px rgba(13,148,136,.34);
}
.lib-btn--line{
  background:#fff!important;
  border-color:var(--line)!important;
  color:var(--ink)!important;
}
.lib-btn--line:hover{
  background:var(--teal-pale)!important;
  border-color:var(--teal)!important;
  color:var(--teal-dark)!important;
  box-shadow:0 10px 24px rgba(13,148,136,.14);
}

/* ------------------------------------------------------------
 * 長いURL・メールアドレスの折り返し
 * ------------------------------------------------------------
 * 記事の出典欄には長いURLが並ぶ。本番は break-all クラスで対処しているが、
 * 付け忘れても枠からはみ出さないよう、本文全体に保険をかけておく。 */
.art__body, .prose, main{overflow-wrap:break-word}

/* ------------------------------------------------------------
 * ページ内の移動
 * ------------------------------------------------------------
 * 記事の目次を押したときも、スクロールして移動する。
 * ヘッダーが固定なので、飛んだ先が隠れないよう余白を確保する。
 * （本番の js/toc.js は scrollIntoView を使うため、こちらの指定が効く） */
/* ★scroll-behavior:smooth は入れない（別ページから #付きで来たときにも動くため）。
   記事の目次からの移動は、本番の js/toc.js と headscript.js が受け持つ。 */
:target{scroll-margin-top:92px}