/* =========================================================
 * Nissera Content – typography & components
 * 文章全体のタイポグラフィ（font-family / font-size / line-height）
 * + 見出し / 箇条書き / 引用 / 表 / 画像 / インライン装飾 など
 * スコープ：.entry-content, .wp-block-post-content, .nissera-content
 * ======================================================= */

/* ===== 基本トークン ===== */
:root{
  --brand:#FFD400;
  --ink:#0f172a;         /* 本文色（やや青みの黒） */
  --muted:#64748b;       /* 補助テキスト */
  --paper:#ffffff;

  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP",
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", "Noto Sans Mono", monospace;

  /* アクセント色（ブランドの少し濃いめ/薄め） */
  --brand-ink: color-mix(in oklab, var(--brand) 75%, #000 25%);
  --brand-soft: color-mix(in oklab, var(--brand) 16%, #0000 84%);
}

/* ===== 本文の強調（フロント側） ===== */
.nissera-marker{
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--brand, #FFD400) 40%, #fff 60%) 0%,
    color-mix(in oklab, var(--brand, #FFD400) 30%, #fff 70%) 70%,
    transparent 70%);
  padding:.05em .12em; border-radius:.15em; font-weight:600;
}
.nissera-box{
  display:block; padding:.75em 1em; margin:1.2em 0;
  background: color-mix(in oklab, var(--brand, #FFD400) 16%, #fff 84%);
  border-left:6px solid var(--brand, #FFD400); border-radius:6px;
  font-weight:600; line-height:1.7; color:var(--ink, #0f172a);
  box-shadow: inset 0 3px 8px rgba(2,6,23,.06);
}

/* =========================================================
 *  タイポグラフィ（本文ベース）
 * ======================================================= */

/* 記事本文のスコープ（テーマに合わせて調整） */
.entry-content,
.wp-block-post-content,
.nissera-content{
  color:var(--ink);
  font-family: var(--font-sans);
  /* ビューポートに応じた読みやすい本文サイズ（おおむね 15.5–17px 相当） */
  font-size: clamp(.98rem, .94rem + .20vw, 1.06rem);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 段落・基本余白 */
.entry-content p,
.wp-block-post-content p,
.nissera-content p{
  margin: 0 0 1.15em;
}

/* 強調 */
.entry-content strong{ font-weight: 800; color: var(--ink); }
.entry-content em{ font-style: italic; }

/* リンク */
.entry-content a{
  color: var(--brand-ink);
  text-decoration-thickness: .08em;
  text-underline-offset: .15em;
}
.entry-content a:hover{
  color: color-mix(in oklab, var(--brand) 65%, var(--ink) 35%);
}

/* 水平線 */
.entry-content hr{
  border:0; height:1px; margin:2.2em 0;
  background: linear-gradient(90deg, #0000, rgba(2,6,23,.15), #0000);
}

/* 画像・キャプション */
.entry-content img{ max-width:100%; height:auto; border-radius:12px; }
.entry-content figure{ margin:1.6em 0; }
.entry-content figcaption{
  margin-top:.45em; color:var(--muted); font-size:.92em; text-align:center;
}

/* 引用 */
.entry-content blockquote{
  margin:1.4em 0; padding: .9em 1.1em;
  border-left:6px solid color-mix(in oklab, var(--brand) 55%, #fff 45%);
  background: color-mix(in oklab, var(--brand) 10%, #fff 90%);
  border-radius:8px;
  color:#111827;
}
.entry-content blockquote p:last-child{ margin-bottom: 0; }
.entry-content blockquote cite{
  display:block; margin-top:.4em; color:var(--muted); font-style:normal; font-size:.92em;
}

/* コード */
.entry-content code{
  font-family: var(--font-mono);
  background:#f3f4f6; border:1px solid #e5e7eb; padding:.1em .35em; border-radius:6px;
}
.entry-content pre{
  font-family: var(--font-mono);
  background:#0b1220; color:#e5e7eb; border-radius:12px; padding:1em 1.2em;
  overflow:auto; line-height:1.65;
}
.entry-content pre code{ background:transparent; border:none; padding:0; color:inherit; }

/* 表 */
.entry-content table{ width:100%; border-collapse: collapse; margin:1.6em 0; font-variant-numeric: tabular-nums; }
.entry-content th, .entry-content td{ padding:.7em .8em; border:1px solid #e5e7eb; }
.entry-content thead th{
  background: color-mix(in oklab, var(--brand) 14%, #fff 86%);
  text-align:left; font-weight:800;
}
.entry-content tbody tr:nth-child(odd){ background:#fafafa; }

/* =========================================================
 *  見出し
 * ======================================================= */

/* H2：Glow Line（控えめver） */
.entry-content h2{
  margin:2.2em 0 .9em;
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1.15;
  font-size:clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem);
  position:relative;
}
.entry-content h2::after{
  content:"";
  display:block;
  margin-top:.35rem;
  width:clamp(120px,40%,320px);
  height:9px;
  border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--brand) 70%, #fff 30%),
    color-mix(in oklab, var(--brand) 0%, #0000 100%));
  opacity:.65;
  filter:drop-shadow(0 2px 6px color-mix(in oklab, var(--brand) 40%, #0000 60%));
}

/* H3/H4：階層感を落とし込み */
.entry-content h3{
  margin:1.8em 0 .7em;
  font-weight:800;
  line-height:1.22;
  font-size:clamp(1.25rem, 1rem + .8vw, 1.6rem);
}
.entry-content h4{
  margin:1.6em 0 .6em;
  font-weight:800;
  line-height:1.22;
  font-size:clamp(1.1rem, .95rem + .6vw, 1.35rem);
  color:#1f2937;
}
.entry-content h5{
  margin:1.3em 0 .5em;
  font-weight:700;
  line-height:1.25;
  font-size:clamp(1.02rem, .96rem + .45vw, 1.18rem);
  color:#334155;
}
.entry-content h6{
  margin:1.2em 0 .5em;
  font-weight:700;
  line-height:1.25;
  font-size:clamp(.98rem, .94rem + .35vw, 1.08rem);
  color:#475569;
}

/* =========================================================
 *  リスト
 * ======================================================= */

/* UL：ブランド感のあるカスタム丸 */
.entry-content ul{
  list-style:none;
  padding-left:1.2em;
  margin:1em 0 1.2em;
}
.entry-content ul li{
  position:relative;
  margin:.35em 0;
  padding-left:.25em;
}
.entry-content ul li::before{
  content:"";
  position:absolute;
  left:-1.1em; top:.6em;
  width:.55em; height:.55em; border-radius:999px;
  background:radial-gradient(circle at 30% 30%,
    color-mix(in oklab, var(--brand) 90%, #fff 10%) 0 55%,
    color-mix(in oklab, var(--brand) 35%, #fff 65%) 56% 100%);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 18%, #0000 82%);
}
/* ネストのときは少し小粒に */
.entry-content ul ul li::before{ transform:scale(.8); left:-1em; }

/* OL：番号の視認性UP（太めのマーカー） */
.entry-content ol{
  margin:1em 0 1.2em;
  padding-left:1.4em;
}
.entry-content ol li{ margin:.35em 0; }
.entry-content ol li::marker{
  font-weight:800;
  color: var(--brand-ink);
}

/* きっちり詰めたいときのバリアント */
.entry-content .nissera-compact-list li{ margin:.15em 0; }

/* =========================================================
 *  補助ユーティリティ
 * ======================================================= */

.entry-content .muted{ color: var(--muted); }
.entry-content .lead{
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.85; color:#111827;
}
.entry-content .t-center{ text-align:center; }
.entry-content .t-right{ text-align:right; }
.entry-content .small{ font-size:.92em; }

/* 余白ユーティリティ（必要なら） */
.entry-content .mt-0{ margin-top:0!important; }
.entry-content .mb-0{ margin-bottom:0!important; }


/* ===== H1：ストライプ背景＋吹き出しテール ===== */
/* Post Title ブロックも対象に */
.wp-block-post-title,
.entry-content h1,
.nissera-content h1{
  position: relative;
  margin: 0 0 1rem;
  padding: 0.6em;
  border-radius: 7px;

  font-weight: 900;
  letter-spacing: -.012em;
  line-height: 1.18;
  font-size: clamp(2rem, 1.1rem + 3vw, 3rem);
  color: var(--ink, #0f172a);

  /* デフォは指定色。必要なら --h1-bg1 / --h1-bg2 で上書き可 */
  background: -webkit-repeating-linear-gradient(
    -45deg,
    var(--h1-bg1, #fff5df), var(--h1-bg1, #fff5df) 4px,
    var(--h1-bg2, #ffe4b1), var(--h1-bg2, #ffe4b1) 8px
  );
  background: repeating-linear-gradient(
    -45deg,
    var(--h1-bg1, #fff5df), var(--h1-bg1, #fff5df) 4px,
    var(--h1-bg2, #ffe4b1), var(--h1-bg2, #ffe4b1) 8px
  );

  /* ほんのり影（任意） */
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
}

/* 吹き出しテール（左30pxから） */
.wp-block-post-title::after,
.entry-content h1::after,
.nissera-content h1::after{
  content: '';
  position: absolute;
  top: 100%;
  left: var(--h1-tail-left, 30px);
  width: 0; height: 0;
  border: 15px solid transparent;
  border-top-color: var(--h1-tail, #ffebbe);

  /* 影（任意） */
  filter: drop-shadow(0 2px 2px rgba(2,6,23,.05));
}

/* 直後の詰まり軽減（任意） */
.wp-block-post-title + *,
.entry-content h1 + *,
.nissera-content h1 + *{
  margin-top: clamp(.5rem, .4rem + .6vw, 1rem);
}

/* ===== Post Title(H1) を本文と同じ幅に揃える（強制版） ===== */

/* 読書幅の基準。任意に調整（例: 1200px） */
:root{
  --reading-width: 1200px; /* var(--wp--style--global--content-size) があればそちらが効く場合も */
}

/* 幅を直接指定（max-width ではなく width）。!important で上書き */
.wp-block-post-title,
.wp-block-post-content .wp-block-post-title,
.entry-content > h1,
.nissera-content > h1{
  box-sizing: border-box;
  width: min(var(--reading-width), 92vw) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* alignwide / alignfull でも読書幅に抑える */
.wp-block-post-title.alignwide,
.wp-block-post-title.alignfull{
  width: min(var(--reading-width), 92vw) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* タイル（三角のしっぽ）が画面左に寄らないよう、H1幅に追随 */
.wp-block-post-title::after,
.entry-content h1::after,
.nissera-content h1::after{
  left: clamp(24px, 4%, 40px); /* しっぽの位置。お好みで */
}