/*
 * 追加スタイル(theme.jsonだけでは表現できない細部のみ)
 * 配色・フォント・余白などのデザイントークンは theme.json 側で管理する方針のため、
 * ここには疑似要素(::after)などtheme.jsonでは表現できないスタイルのみを置く。
 */

/*
 * 日本語と半角英数字の間の視覚的な間隔をブラウザに自動処理させる。
 * これにより本文中で「40cm」のような表記に手動で半角スペースを
 * 入れる/入れないを執筆時に迷う必要がなくなる(README「執筆時の表記ルール」参照)。
 * 非対応ブラウザでは単に無視され、現状と同じ表示になる(後方互換あり)。
 */
body {
  text-autospace: normal;
}

/*
 * 記事内 h2: 深緑の帯見出しスタイル。
 * 以前は theme.json の elements.h2 でサイト全体の<h2>に適用していたが、
 * コメント欄の見出し(「◯件のフィードバック」等、WordPressが自動生成するh2)
 * にまで同じ帯スタイルが付いてしまう副作用があったため、記事本文の中の
 * h2だけに絞ってここで指定する。
 */
.entry-content h2,
.wp-block-post-content h2 {
  color: var(--wp--preset--color--base);
  background: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--x-large);
  padding: 0.8rem 1.2rem;
  margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
  border-radius: 4px;
}

/* 記事内 h3: 見出し直下に短いアクセントの下線を出す */
.entry-content h3,
.wp-block-post-content h3 {
  position: relative;
  padding-bottom: 0.6rem;
}

.entry-content h3::after,
.wp-block-post-content h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--wp--preset--color--accent);
}

/* おすすめカード(patterns/recommend-card) 内のボタンは幅いっぱいにしない */
.kobayashi-recommend-card .wp-block-buttons {
  justify-content: center;
}

/*
 * Contact Form 7 のフォーム要素は素のHTML(input/textarea/button)を
 * そのまま出力するため、theme.jsonのブロック向けスタイルが当たらない。
 * サイトのトーンに合わせて最低限の見た目だけ揃える。
 */
.wpcf7-form p {
  margin-bottom: var(--wp--preset--spacing--20);
}

.wpcf7-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
  width: 100%;
  max-width: 480px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--wp--preset--color--muted);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--wp--preset--color--base);
}

.wpcf7-form textarea {
  max-width: 100%;
  min-height: 8rem;
}

.wpcf7-form input[type="submit"] {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.8rem;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
  opacity: 0.9;
}

.wpcf7-not-valid-tip {
  color: #b3261e;
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

.wpcf7 .wpcf7-response-output {
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-top: var(--wp--preset--spacing--20);
}

/*
 * 広告枠(patterns/ad-slot)。
 *
 * 忍者AdMax等の広告コードは、貼り付けた瞬間にどんなサイズのiframe/divを
 * 差し込んでくるか完全には制御できないため、枠側で強制的に幅の上限を
 * かける。ここだけは第三者コードの想定外の出力を抑え込む目的のため、
 * 詳細度の弱い!importantをあえて使う(他の箇所では使わない方針)。
 */
.kobayashi-ad-slot {
  max-width: 300px; /* レクタングル広告(300x250)の実寸に合わせた最大幅 */
  margin: var(--wp--preset--spacing--30) auto;
  text-align: center;
  overflow: hidden; /* 想定外に縦長のクリエイティブが来た場合の保険 */
}

.kobayashi-ad-slot iframe,
.kobayashi-ad-slot img,
.kobayashi-ad-slot ins,
.kobayashi-ad-slot object,
.kobayashi-ad-slot > div {
  max-width: 100% !important;
  max-height: 280px !important; /* 300x250相当+余白程度に抑え、記事の圧迫感を減らす */
  width: auto !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* レスポンシブ型の広告(横長バナー)を使う場合は、この修飾クラスを併用して横幅の上限を広げる */
.kobayashi-ad-slot.is-wide {
  max-width: 100%;
}

/*
 * カテゴリーアーカイブ(category-travel.html / category-bonsai.html)の
 * 見出し直前に置く小さなバッジ。カテゴリごとの専用ページであることを
 * 視覚的に示す(配色は共通のaccentのままにして、サイト全体の統一感は崩さない)。
 */
.kobayashi-category-eyebrow {
  display: inline-block;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}

/*
 * 記事執筆用パターン(旅行メモ/育成メモ)内の定義リスト風レイアウト。
 * dtとddを横並びにして、項目名と内容を見やすく整理する。
 */
.kobayashi-info-box dl {
  display: grid;
  grid-template-columns: 6rem 1fr;
  row-gap: 0.5rem;
  column-gap: 1rem;
  margin: 0;
}

.kobayashi-info-box dt {
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}

.kobayashi-info-box dd {
  margin: 0;
}