/* ============================================================
   となりの英語 — Headings (H2 / H3 / H4) — FINAL MIX
   Selection:
     H2 → B (Watercolor Mark)        V1ヘッダーとの連続性
     H3 → A (Brushed Underline 3px)  反復耐性 + ティール左ボーダー
     H4 → A (Brushed Underline dot)  細部の温かさ + サーモンドット

   Apply by wrapping article body in `.te-content`, OR explicitly with
   `.te-h2 / .te-h3 / .te-h4` classes (preferred for WordPress widgets).
   ============================================================ */


/* ===== Shared base ===== */
.te-content h2:not(.te-toc__title):not(.te-toc *):not(.te-author *),
.te-content h3:not(.te-toc *):not(.te-author *),
.te-content h4:not(.te-toc *):not(.te-author *),
.te-h2,
.te-h3,
.te-h4 {
  color: var(--te-deep-green);
  font-family: var(--te-font-serif);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  position: relative;
  text-wrap: pretty;
}


/* ============================================================
   H2 — Watercolor Mark (Variation B)
   水彩ブルームの円 + ヘアラインアンダー
   ============================================================ */
.te-content h2:not(.te-toc__title):not(.te-toc *):not(.te-author *),
.te-h2 {
  font-family: var(--te-font-display);
  font-size: var(--te-h2-size);
  font-weight: 600;
  line-height: 1.45;
  margin: var(--te-space-h2-top) 0 var(--te-space-h2-bot);

  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.2em 0 0.55em;
  border-bottom: 1px solid var(--te-hairline);
}

/* Watercolor bloom — pseudo or .te-h2-bloom span both work.
   On plain <h2> inside .te-content, ::before draws the bloom. */
.te-content h2:not(.te-toc__title):not(.te-toc *):not(.te-author *)::before,
.te-h2 .te-h2-bloom {
  content: "";
  flex: 0 0 auto;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  background:
    radial-gradient(circle at 35% 35%, rgba(59,135,117,0.55), rgba(59,135,117,0.18) 55%, transparent 72%),
    radial-gradient(circle at 65% 60%, rgba(207,224,227,0.7), transparent 65%),
    radial-gradient(circle at 70% 45%, rgba(232,165,152,0.32), transparent 55%);
  filter: blur(0.4px);
}
/* For explicit markup, hide pseudo to avoid double bloom */
.te-h2:has(.te-h2-bloom)::before { display: none; }


/* ============================================================
   H3 — Brushed Underline accent (Variation A)
   Teal 3px 左ボーダー
   ============================================================ */
.te-content h3:not(.te-toc *):not(.te-author *),
.te-h3 {
  font-size: var(--te-h3-size);
  margin: var(--te-space-h3-top) 0 var(--te-space-h3-bot);
  padding-left: 0.85em;
  position: relative;
}
.te-content h3:not(.te-toc *):not(.te-author *)::before,
.te-h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  bottom: 0.45em;
  width: 3px;
  background: var(--te-primary-teal);
  border-radius: 2px;
}


/* ============================================================
   H4 — Brushed Underline dot (Variation A)
   Salmon 7px ドット + 18%halo
   ============================================================ */
.te-content h4:not(.te-toc *):not(.te-author *),
.te-h4 {
  font-size: var(--te-h4-size);
  margin: var(--te-space-h4-top) 0 var(--te-space-h4-bot);
  color: var(--te-ink);
  padding-left: 1.2em;
  position: relative;
  font-weight: 600;
}
.te-content h4:not(.te-toc *):not(.te-author *)::before,
.te-h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--te-salmon);
  box-shadow: 0 0 0 3px rgba(232,165,152,0.18);
}


/* ============================================================
   Hover anchor (#) — optional, common to all H levels
   Add <a class="te-heading-anchor" href="#id">#</a> inside the heading.
   ============================================================ */
.te-heading-anchor {
  color: var(--te-salmon);
  font-family: var(--te-font-body);
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.18s ease;
  text-decoration: none;
  font-size: 0.78em;
  margin-left: 0.4em;
  vertical-align: 0.1em;
}
.te-content h2:hover .te-heading-anchor,
.te-content h3:hover .te-heading-anchor,
.te-content h4:hover .te-heading-anchor,
.te-h2:hover .te-heading-anchor,
.te-h3:hover .te-heading-anchor,
.te-h4:hover .te-heading-anchor { opacity: 1; }


/* ============================================================
   Mobile (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
  .te-content h2:not(.te-toc__title):not(.te-toc *):not(.te-author *),
  .te-h2 { font-size: 1.5rem; gap: 0.55em; }
  .te-content h3:not(.te-toc *):not(.te-author *),
  .te-h3 { font-size: 1.2rem; }
  .te-content h4:not(.te-toc *):not(.te-author *),
  .te-h4 { font-size: 1.05rem; }
}