/*
 * 応募フォームページ（/recruit/entry/）専用。
 * Snow Monkey Forms が描画するフォームへ、姓名2ボックスの項目名と余白を足す。
 *
 * 項目名をHTMLで書けない理由:
 * `snow-monkey-forms/item` ブロックの中へ独自のラッパーを入れると、
 * save出力と一致しなくなりブロックが「壊れています」になる（2026-08-28に
 * wp.blocks.parse で検証。isValid=false）。そのため、SMFが自ら出力する
 * `.smf-placeholder[data-name]` を手がかりに、CSSで項目名と余白を与える。
 * 入力欄自体には placeholder（長谷川／淳 など）も入れてある。
 */

.smf-placeholder[data-name="last_name"],
.smf-placeholder[data-name="first_name"],
.smf-placeholder[data-name="kana_last"],
.smf-placeholder[data-name="kana_first"] {
  padding-top: 24px;
  position: relative;
}

/* 2つ目のボックスは、1つ目との間に余白を置く */
.smf-placeholder[data-name="first_name"],
.smf-placeholder[data-name="kana_first"] {
  margin-top: 14px;
}

.smf-placeholder[data-name="last_name"]::before,
.smf-placeholder[data-name="first_name"]::before,
.smf-placeholder[data-name="kana_last"]::before,
.smf-placeholder[data-name="kana_first"]::before {
  color: #005aa0;
  font-size: 13px;
  font-weight: 700;
  left: 0;
  line-height: 1.5;
  position: absolute;
  top: 0;
}

.smf-placeholder[data-name="last_name"]::before {
  content: "姓";
}

.smf-placeholder[data-name="first_name"]::before {
  content: "名";
}

/* ふりがなの欄は、入れてほしい文字種に合わせて項目名もひらがなにする */
.smf-placeholder[data-name="kana_last"]::before {
  content: "せい";
}

.smf-placeholder[data-name="kana_first"]::before {
  content: "めい";
}

/*
 * 必須・任意のバッジ。
 * ラベル欄（.smf-item__label）へHTMLで入れている。SMFのitemブロックは
 * ラベル列の中へ要素を足しても検証を通る（2026-08-28に wp.blocks.parse で
 * 確認）。入力欄を包むのは不可なので、そちらはCSSで対応している。
 * .smf-item__label の display は変えない。変えるとSMF側のラベル配置に影響する。
 */
.smf-item__label .hs-req,
.smf-item__label .hs-opt {
  border-radius: 3px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  margin-left: 8px;
  padding: 2px 7px;
  vertical-align: 2px;
}

.smf-item__label .hs-req {
  background: #c9151e;
  color: #fff;
}

.smf-item__label .hs-opt {
  background: #6b7280;
  color: #fff;
}

/* 姓名は横幅を揃え、長い入力欄と区別できるようにする */
@media (min-width: 600px) {
  .smf-placeholder[data-name="last_name"] .smf-text-control,
  .smf-placeholder[data-name="first_name"] .smf-text-control,
  .smf-placeholder[data-name="kana_last"] .smf-text-control,
  .smf-placeholder[data-name="kana_first"] .smf-text-control {
    max-width: 320px;
  }
}