/* ==========================================================================
   見出しデザインパターン (8種類)
   .heading-style-{N} をbodyクラスで適用。各h2-h6に対応。
   ========================================================================== */

/* ===== Type 1: 左ボーダー + 背景色 ===== */
.heading-style-1 .post-content h2 {
  padding: 0.8em 1em 0.8em 1.2em;
  border-left: 4px solid var(--pb-primary);
  background: var(--pb-bg-secondary);
  border-radius: 0 var(--pb-radius-md) var(--pb-radius-md) 0;
}

.heading-style-1 .post-content h3 {
  padding: 0.5em 0 0.5em 1em;
  border-left: 3px solid var(--pb-primary);
}

.heading-style-1 .post-content h4 {
  padding: 0.4em 0 0.4em 0.8em;
  border-left: 3px solid var(--pb-primary-light);
}

/* ===== Type 2: 下線のみ（メインカラー） ===== */
.heading-style-2 .post-content h2 {
  padding-bottom: 0.6em;
  border-bottom: 3px solid var(--pb-primary);
}

.heading-style-2 .post-content h3 {
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--pb-primary-light);
}

.heading-style-2 .post-content h4 {
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--pb-border-color);
}

/* ===== Type 3: 全幅背景色（メインカラー） ===== */
.heading-style-3 .post-content h2 {
  padding: 0.8em 1.2em;
  background: var(--pb-primary);
  color: #ffffff;
  border-radius: var(--pb-radius-md);
}

.heading-style-3 .post-content h3 {
  padding: 0.6em 1em;
  background: var(--pb-bg-secondary);
  border-radius: var(--pb-radius-sm);
}

.heading-style-3 .post-content h4 {
  padding: 0.4em 0.8em;
  background: var(--pb-bg-tertiary);
  border-radius: var(--pb-radius-sm);
}

/* ===== Type 4: ストライプ背景 + 左ボーダー ===== */
.heading-style-4 .post-content h2 {
  padding: 0.8em 1em 0.8em 1.2em;
  border-left: 4px solid var(--pb-primary);
  background: repeating-linear-gradient(
    -45deg,
    var(--pb-bg-secondary),
    var(--pb-bg-secondary) 4px,
    transparent 4px,
    transparent 8px
  );
  border-radius: 0 var(--pb-radius-sm) var(--pb-radius-sm) 0;
}

.heading-style-4 .post-content h3 {
  padding: 0.5em 0 0.5em 1em;
  border-left: 3px solid var(--pb-primary);
  background: var(--pb-bg-secondary);
}

.heading-style-4 .post-content h4 {
  padding: 0.4em 0 0.4em 0.8em;
  border-left: 2px solid var(--pb-primary-light);
}

/* ===== Type 5: 吹き出し風 ===== */
.heading-style-5 .post-content h2 {
  padding: 0.8em 1.2em;
  background: var(--pb-primary);
  color: #ffffff;
  border-radius: var(--pb-radius-md);
  position: relative;
  margin-bottom: 1.5em;
}

.heading-style-5 .post-content h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--pb-primary);
}

.heading-style-5 .post-content h3 {
  padding: 0.6em 1em;
  background: var(--pb-bg-secondary);
  border-radius: var(--pb-radius-sm);
  position: relative;
  margin-bottom: 1.3em;
}

.heading-style-5 .post-content h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 25px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--pb-bg-secondary);
}

.heading-style-5 .post-content h4 {
  padding: 0.4em 0.8em;
  border: 2px solid var(--pb-primary);
  border-radius: var(--pb-radius-sm);
}

/* ===== Type 6: ステップ番号付き ===== */
.heading-style-6 .post-content {
  counter-reset: heading-counter;
}

.heading-style-6 .post-content h2 {
  counter-increment: heading-counter;
  padding: 0.8em 1em 0.8em 3.5em;
  background: var(--pb-bg-secondary);
  border-radius: var(--pb-radius-md);
  position: relative;
}

.heading-style-6 .post-content h2::before {
  content: counter(heading-counter);
  position: absolute;
  left: 0.8em;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  height: 2em;
  background: var(--pb-primary);
  color: #ffffff;
  border-radius: var(--pb-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--pb-font-size-lg);
  font-weight: var(--pb-font-weight-bold);
}

.heading-style-6 .post-content h3 {
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--pb-border-color);
}

.heading-style-6 .post-content h4 {
  padding-left: 0.8em;
  border-left: 3px solid var(--pb-primary-light);
}

/* ===== Type 7: リボン風 ===== */
.heading-style-7 .post-content h2 {
  padding: 0.8em 1.2em 0.8em 1.5em;
  background: var(--pb-primary);
  color: #ffffff;
  position: relative;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: 0;
}

.heading-style-7 .post-content h2::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  border-top: 8px solid var(--pb-primary-dark);
  border-left: 10px solid transparent;
}

.heading-style-7 .post-content h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 0;
  border-top: 8px solid var(--pb-primary-dark);
  border-right: 10px solid transparent;
}

.heading-style-7 .post-content h3 {
  padding: 0.6em 1em;
  background: var(--pb-bg-secondary);
  border-left: 4px solid var(--pb-primary);
}

.heading-style-7 .post-content h4 {
  padding-bottom: 0.4em;
  border-bottom: 2px dotted var(--pb-primary);
}

/* ===== Type 8: グラデーション下線 ===== */
.heading-style-8 .post-content h2 {
  padding-bottom: 0.6em;
  position: relative;
}

.heading-style-8 .post-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--pb-primary), var(--pb-primary-light), transparent);
  border-radius: var(--pb-radius-full);
}

.heading-style-8 .post-content h3 {
  padding-bottom: 0.5em;
  position: relative;
}

.heading-style-8 .post-content h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, var(--pb-primary-light), transparent);
  border-radius: var(--pb-radius-full);
}

.heading-style-8 .post-content h4 {
  padding-left: 1em;
  position: relative;
}

.heading-style-8 .post-content h4::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  background: linear-gradient(180deg, var(--pb-primary), var(--pb-primary-light));
  border-radius: var(--pb-radius-full);
}