/*
 * Heading Style Variants
 * body に class="mct-h2-{slug}" 等を付与してスコープ管理
 */

/* ============================================================
   共通：余白・行高
   ============================================================ */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 2.4em;
  margin-bottom: .8em;
  line-height: 1.6;
  position: relative;
}

/* ============================================================
   H2 共通リセット
   ============================================================ */
.entry-content h2 {
  border: none; background: none; padding: 0;
  box-shadow: none; color: var(--color-body-text);
  overflow: visible;
}
.entry-content h2::before,
.entry-content h2::after { content: none; }

/* 装飾なし */
.mct-h2-none .entry-content h2 { /* そのまま */ }

/* 帯：上にアクセント線・下にボーダー線 */
.mct-h2-obi .entry-content h2 {
  border-top: 4px solid var(--color-heading-key);
  border-bottom: 1px solid var(--color-border);
  padding: .45em .1em .35em;
}

/* 塗り潰し */
.mct-h2-fill .entry-content h2 {
  background: var(--color-heading-key);
  color: #fff;
  padding: .45em .85em;
  border-radius: var(--radius);
}

/* 左に縦線 */
.mct-h2-border-left .entry-content h2 {
  border-left: 6px solid var(--color-heading-key);
  padding-left: .65em;
}

/* 左に2色のブロック：上半分濃・下半分薄の縦2段 */
.mct-h2-block2 .entry-content h2 {
  padding-left: .75em;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.mct-h2-block2 .entry-content h2::before,
.mct-h2-block2 .entry-content h2::after {
  content: '';
  position: absolute;
  left: 0;
  width: 4px;
}
.mct-h2-block2 .entry-content h2::before {
  top: 0;
  height: 50%;
  background: var(--color-heading-key);
}
.mct-h2-block2 .entry-content h2::after {
  bottom: 0;
  height: 50%;
  background: color-mix(in srgb, var(--color-heading-key) 30%, transparent);
}

/* 付箋風 */
.mct-h2-sticky .entry-content h2 {
  background: color-mix(in srgb, var(--color-heading-key) 15%, transparent);
  border-bottom: 3px solid var(--color-heading-key);
  padding: .5em .85em .4em;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* 付箋風（ストライプ） */
.mct-h2-sticky-stripe .entry-content h2 {
  border-left: 6px solid var(--color-heading-key);
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--color-heading-key) 7%, transparent) 0px,
    color-mix(in srgb, var(--color-heading-key) 7%, transparent) 4px,
    transparent 4px,
    transparent 10px
  );
  padding: .45em .85em;
}

/* ステッチ */
.mct-h2-stitch .entry-content h2 {
  border: 2px dashed var(--color-heading-key);
  padding: .4em .85em;
  border-radius: var(--radius);
}

/* ステッチ（薄） */
.mct-h2-stitch-light .entry-content h2 {
  border-bottom: 2px dotted color-mix(in srgb, var(--color-heading-key) 60%, transparent);
  padding-bottom: .35em;
}

/* ふきだし風 */
.mct-h2-balloon .entry-content h2 {
  background: var(--color-heading-key);
  color: #fff;
  padding: .45em .85em;
  border-radius: var(--radius);
  margin-bottom: .9em;
}
.mct-h2-balloon .entry-content h2::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -10px;
  left: 1.2em;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--color-heading-key);
}

/* 上下に線 */
.mct-h2-border-both .entry-content h2 {
  border-top: 2px solid var(--color-heading-key);
  border-bottom: 2px solid var(--color-heading-key);
  padding: .4em .1em;
  text-align: center;
}

/* 1文字目にアクセント */
.mct-h2-first-char .entry-content h2 {
  display: block;
}
.mct-h2-first-char .entry-content h2::first-letter {
  color: var(--color-heading-key);
  font-size: 3em;
  font-weight: 900;
  line-height: .75;
  vertical-align: baseline;
  margin-right: .04em;
}

/* ============================================================
   H3 共通リセット
   ============================================================ */
.entry-content h3 {
  border: none; background: none; padding: 0;
  color: var(--color-body-text);
  position: relative;
}
.entry-content h3::before,
.entry-content h3::after { content: none; }

/* 装飾なし */
.mct-h3-none .entry-content h3 { /* そのまま */ }

/* 2色の下線（メイン・グレー）：太いアクセント線＋細いグレー線を重ねる */
.mct-h3-underline-2color-gray .entry-content h3 {
  border-bottom: 3px solid var(--color-border);
  padding-bottom: .3em;
  position: relative;
}
.mct-h3-underline-2color-gray .entry-content h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 3em; height: 3px;
  background: var(--color-heading-key);
}

/* 2色の下線（メイン・薄メイン）：太いアクセント線＋薄いアクセント線 */
.mct-h3-underline-2color-light .entry-content h3 {
  border-bottom: 3px solid color-mix(in srgb, var(--color-heading-key) 25%, transparent);
  padding-bottom: .3em;
  position: relative;
}
.mct-h3-underline-2color-light .entry-content h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 3em; height: 3px;
  background: var(--color-heading-key);
}

/* 下線（メインカラー）：シンプルなアクセント色の下線 */
.mct-h3-underline .entry-content h3 {
  border-bottom: 2px solid var(--color-heading-key);
  padding-bottom: .3em;
}

/* 下線（グラデーション）：アクセント色から透明へのグラデーション */
.mct-h3-underline-grad .entry-content h3 {
  border-bottom: none;
  padding-bottom: .32em;
  background-image: linear-gradient(to right, var(--color-heading-key), transparent);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: left bottom;
}

/* 下線（ストライプ）：斜線パターンの下線 */
.mct-h3-underline-stripe .entry-content h3 {
  padding-bottom: .32em;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-heading-key) 0px, var(--color-heading-key) 2px,
    transparent 2px, transparent 5px
  );
  background-repeat: no-repeat;
  background-size: 100% 4px;
  background-position: left bottom;
}

/* 左に縦線 */
.mct-h3-border-left .entry-content h3 {
  border-left: 4px solid var(--color-heading-key);
  padding-left: .6em;
}

/* 左に2色のブロック */
.mct-h3-block2 .entry-content h3 {
  border-left: 6px solid var(--color-heading-key);
  background: color-mix(in srgb, var(--color-heading-key) 10%, transparent);
  padding: .35em .7em;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ============================================================
   H4 共通リセット
   ============================================================ */
.entry-content h4 {
  border: none; background: none; padding: 0;
  color: var(--color-body-text);
}
.entry-content h4::before { content: none; }

/* 装飾なし */
.mct-h4-none .entry-content h4 { /* そのまま */ }

/* 左ボーダー（細） */
.mct-h4-border-left .entry-content h4 {
  border-left: 3px solid var(--color-heading-key);
  padding-left: .55em;
}

/* 下線（細） */
.mct-h4-underline .entry-content h4 {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: .25em;
}

/* アイコン（▷） */
.mct-h4-icon-arrow .entry-content h4::before {
  content: '▷';
  color: var(--color-heading-key);
  font-size: .7em;
  margin-right: .35em;
  vertical-align: middle;
}

/* 背景（薄色） */
.mct-h4-bg-light .entry-content h4 {
  background: color-mix(in srgb, var(--color-heading-key) 8%, transparent);
  padding: .3em .6em;
  border-radius: var(--radius);
}

/* 太字＋アクセント色 */
.mct-h4-accent-color .entry-content h4 {
  color: var(--color-heading-key);
  font-weight: 700;
}