/*
 Theme Name: Kazy Stork19 Child
 Theme URI: https://kazy-style.com/
 Description: Stork19 child theme with modern UI polish (cards, spacing, progress bar, dark mode opt-in).
 Author: You
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: kazy-stork19-child
 Tags: blog, responsive, minimal
*/
Template: jstork19

/* ===== Global tokens ===== */
:root {
  --space: clamp(12px, 2.5vw, 22px);
  --space-2: calc(var(--space) * 2);
  --radius: 16px;
  --shadow: 0 8px 28px rgba(15, 23, 42, 0.10);
  --ink: #0f172a;
  --paper: #f8fafc;
  --brand: #3b82f6;
}

/* Base */
body {
  background: var(--paper);
  color: var(--ink);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links & buttons */
a { text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover { text-decoration: underline; }
button, .btn, .wp-block-button__link, .entry-content a.btn {
  border-radius: 9999px;
  padding: .7em 1.1em;
  font-weight: 700;
}

/* Containers */
.container, .wrap, .l-container {
  padding-left: var(--space);
  padding-right: var(--space);
}

/* Cards */
.entry-card, .entry, .p-entry, .related-entry, .card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.entry-card:hover, .related-entry:hover, .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(15,23,42,.16);
}

/* Thumbnails */
.entry-card .eyecatch img, .c-eyecatch img, .thumb img {
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
}

/* Content width */
.single .entry-content, .page .entry-content {
  max-width: 70ch;
  margin-inline: auto;
}

/* Headings */
.entry-content h2 { font-weight: 800; margin-top: var(--space-2); margin-bottom: .6em; }
.entry-content h3 { font-weight: 700; margin-top: var(--space); margin-bottom: .5em; }

/* TOC */
.toc, .p-toc, nav.toc {
  border:1px solid #e5e7eb; border-radius: 12px; background:#fff;
  padding: 16px; margin: 0 0 var(--space);
}
.toc ol, .p-toc ol { margin:0; padding-left: 1.2em; }
.toc a { text-decoration: none; }

/* Header/footer */
.header, .l-header, .l-footer, .footer { backdrop-filter: saturate(180%) blur(2px); }

/* Progress bar */
#kazy-progress {
  position: fixed; inset: 0 auto auto 0; height: 3px; width: 0;
  background: var(--brand); z-index: 9999; transition: width .1s ease;
}

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body { background: #0b1020; color: #e5e7eb; }
  .entry-card, .related-entry, .card { background:#0f172a; border-color:#243142; }
  .toc, .p-toc, nav.toc { background:#0f172a; border-color:#243142; }
}

/* 進捗バーの微調整 */
#kazy-progress{
  background: #16a34a;   /* ← 好きな色に（例: 緑） */
  height: 4px;           /* ← 太さ */
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
}
/* 固定ヘッダーと重なる場合は少し下げる */
.has-sticky-header #kazy-progress{ top: 60px; }

/* 一覧カードをリッチに */
.entry-card, .related-entry {
  border-radius: 18px;
  overflow: clip;
  box-shadow: 0 12px 28px rgba(15,23,42,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.entry-card:hover, .related-entry:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
}
/* サムネを丸める */
.entry-card .eyecatch img { border-radius: 14px; }

/* === カード強制適用（Stork19の色々な構造にヒットする広めの指定） === */
.archive article,
.blog article,
.related-posts li a,
.entry-card,
.p-entry,
.c-entry,
.post-list .post,
.related-entry {
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.12) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
  overflow: clip !important;
}
.archive article:hover,
.blog article:hover,
.related-posts li a:hover,
.entry-card:hover,
.p-entry:hover,
.c-entry:hover,
.post-list .post:hover,
.related-entry:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.18) !important;
}

/* サムネイルも丸める（当たりやすいように広めに） */
.entry-card .eyecatch img,
.c-eyecatch img,
a .thumb img,
figure img {
  border-radius: 14px !important;
}

/* === 読みやすさのための文字色改善 === */

/* 全体の基本文字色を少し濃く（しっかり黒寄り） */
body, .entry-content, .entry-content p, article p {
  color: #1a1a1a !important;  /* #000まで行くと強すぎるので、#1a1a1aがベストバランス */
  line-height: 1.9;           /* 行間も読みやすい値に統一（Storkは行詰め気味） */
}

/* 見出しの色も強めてコントラストをはっきり */
.entry-content h2, .entry-content h3 {
  color: #0f172a !important;  /* 深い黒（slate系） */
  font-weight: 800 !important;
}

/* リンクは読みやすさを維持しつつ強調 */
.entry-content a {
  color: var(--brand) !important;
  font-weight: 600;
  text-decoration-thickness: 0.1em;
}

/* モバイルでコントラスト弱くならないように補正 */
@media (max-width: 768px){
  body, .entry-content p {
    color: #111 !important;
  }
}

/* === 背景をほぼ白＋青みのある色に === */
body {
  background: #f7fbff !important;
}

/* === 文字色・可読性を調整（黒く、読みやすく） === */
body, .entry-content p, .entry-content {
  color: #1a1a1a !important;
  line-height: 1.9;
}

/* === 見出し（Bタイプ：シンプル＋左ライン） === */
.entry-content h2 {
  color: #0f172a !important;
  border-left: 6px solid var(--brand);
  padding-left: .6em;
  margin-top: 2.4rem;
  margin-bottom: 1.2rem;
  background: none !important;
  border-radius: 0;
}
.entry-content h3 {
  color: #0f172a !important;
  border-left: 4px solid var(--brand);
  padding-left: .5em;
  margin-top: 2rem;
  margin-bottom: 1rem;
  background: none !important;
  border-radius: 0;
}