/* ============================================================
   お問い合わせフォーム（Contact Form 7 の出力に載せる意匠）

   このファイルはテーマ側にあり、Contact Form 7 を更新しても消えない。
   プラグイン同梱の styles.css は inc/contact-form.php で外し、
   ここで置き換える。万一プラグインの CSS が読まれても、
   同じ選択子をより強い詳細度で上書きするように書いてある。

   内容は三つ。
     1. 版面（.form / .field / .choice …）── 雛形の側のクラス
     2. Contact Form 7 が生む要素（.wpcf7-*）の見た目
     3. 送信の状態（入力不備・送信中・送信完了・失敗）の見せ方

   色・寸法はすべて style.css 冒頭のトークンを参照する。
   このファイルに生の値を書かないこと。
   ============================================================ */

/* ------------------------------------------------------------
   1. 版面
   ------------------------------------------------------------ */

.wpcf7 { display: block; min-width: 0; }

.form,
.wpcf7-form { display: grid; gap: 30px; min-width: 0; }

/* CF7 は input に size="40"、textarea に cols="40" を付ける。
   その固有幅がグリッドの列を押し広げ、SP で右にはみ出す。
   欄と包みの最小幅を 0 にして、width: 100% を効かせる。 */
.field,
.field-row,
.field > *,
.wpcf7-form-control-wrap,
.wpcf7-form-control { min-width: 0; }

.field { display: grid; gap: 10px; }

/* 選択肢の群は fieldset で組む。ブラウザ既定の枠と legend の食い込みを消す。
   legend は float を指定すると「枠の見出し」扱いから外れ、普通の子として並ぶ */
fieldset.field {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

fieldset.field > legend {
  float: left;
  width: 100%;
  padding: 0;
}

.field__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  letter-spacing: .16em;
}

.field__req,
.field__any {
  flex: none;
  padding: 2px 9px;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  line-height: 1.7;
}

.field__req { border: 1px solid var(--c-accent); color: var(--c-accent-2); }
.field__any { border: 1px solid var(--c-line-soft); color: var(--c-text-dim); }

.field__note {
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--c-text-dim);
}

/* 二つ並べる */
.field-row { display: grid; gap: 30px; }

@media (min-width: 600px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 入力欄 ------------------------------------------------- */

:is(.form, .wpcf7-form) :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  select,
  textarea
) {
  width: 100%;
  max-width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-line-soft);
  border-radius: 0;
  background: var(--c-veil-soft);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-md);
  line-height: 1.8;
  letter-spacing: .04em;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

:is(.form, .wpcf7-form) textarea { min-height: 210px; resize: vertical; line-height: 1.95; }

:is(.form, .wpcf7-form) :is(input, textarea)::placeholder { color: var(--c-text-dim); }

:is(.form, .wpcf7-form) :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  select,
  textarea
):hover { border-color: var(--c-line); }

:is(.form, .wpcf7-form) :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  select,
  textarea
):focus {
  outline: none;
  border-color: var(--c-accent);
  background: rgba(6, 14, 9, .4);
}

/* 選択欄の矢印 */
:is(.form, .wpcf7-form) select {
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-accent-2) 50%),
    linear-gradient(135deg, var(--c-accent-2) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  background-color: var(--c-veil-soft);
}

:is(.form, .wpcf7-form) select option { background: var(--c-bg-1); color: var(--c-text); }

/* 添付 */
:is(.form, .wpcf7-form) input[type="file"] {
  width: 100%;
  padding: 10px 0;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  cursor: pointer;
}

:is(.form, .wpcf7-form) input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 16px;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-text);
  font-family: var(--f-serif);
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  cursor: pointer;
}

/* 選択肢（種別・教室・同意） ------------------------------ */

.choice { display: grid; gap: 10px; }

.choice > label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--c-line-soft);
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1.7;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.choice > label:hover { border-color: var(--c-line); background: rgba(6, 14, 9, .2); }

.choice > label:has(input:checked) {
  border-color: var(--c-accent);
  background: rgba(201, 105, 79, .09);
}

.choice input[type="radio"],
.choice input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: .35em 0 0;
  border: 1px solid var(--c-line);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease);
}

.choice input[type="radio"],
.choice .wpcf7-exclusive-checkbox input { border-radius: 50%; }   /* 一つだけ選ぶ checkbox は radio と同じ丸で */

.choice input:checked { border-color: var(--c-accent); }

.choice input:checked::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 4px;
  background: var(--c-accent);
}

.choice input[type="radio"]:checked::after,
.choice .wpcf7-exclusive-checkbox input:checked::after { border-radius: 50%; }

.choice input:focus-visible { outline: 2px solid var(--c-accent-2); outline-offset: 2px; }

.choice__text { display: block; min-width: 0; }

.choice__sub {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  line-height: 1.75;
}

/* Contact Form 7 のタグは選択肢を何重にも span で包む。
   すべて素通しにして、外側の label が直接 input を並べる形にする。
   雛形では文言を .choice__text で添えるため、タグ側の文言は隠す。 */
.choice > label > .wpcf7-form-control-wrap,
.choice > label .wpcf7-radio,
.choice > label .wpcf7-checkbox,
.choice > label .wpcf7-acceptance,
.choice > label .wpcf7-list-item { display: contents; }

.choice > label .wpcf7-list-item-label { display: none; }

/* 種別に応じて出し入れする欄。JavaScript を使わない。
   雛形では id が Contact Form 7 の包み（span）に付くため、
   その中の input を見る。素の HTML（モック）は input に id が付く。 */
.cond { display: none; }

:is(.form, .wpcf7-form):has(#type-school:checked, #type-school input:checked)     .cond--school   { display: grid; }
:is(.form, .wpcf7-form):has(#type-order:checked, #type-order input:checked)       .cond--order    { display: grid; }
:is(.form, .wpcf7-form):has(#type-purchase:checked, #type-purchase input:checked) .cond--purchase { display: grid; }

/* 送信 ---------------------------------------------------- */

.form__foot {
  display: grid;
  gap: 20px;
  justify-items: center;
  padding-top: 8px;
}

/* 送信ボタンと送信中の印を同じ行に置く。印は絶対配置で、ボタンを動かさない */
.form__action {
  position: relative;
  display: inline-block;
}

.form__note {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--c-text-dim);
  text-align: center;
}

/* 送信ボタン。
   Contact Form 7 は <input type="submit"> を出すため、擬似要素で
   塗りを走らせる .btn の仕掛けが効かない。塗りの変化で代える。 */
.form__submit,
:is(.form, .wpcf7-form) .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  min-height: 56px;
  padding: 15px 34px;
  border: 1px solid var(--c-accent);
  border-radius: 0;
  background: var(--c-accent);
  color: var(--c-text);
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  appearance: none;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    opacity var(--dur-1) var(--ease);
}

.form__submit:hover,
:is(.form, .wpcf7-form) .wpcf7-submit:hover {
  background: var(--c-accent-2);
  border-color: var(--c-accent-2);
  color: var(--c-on-cream);
}

.form__submit:focus-visible,
:is(.form, .wpcf7-form) .wpcf7-submit:focus-visible {
  outline: 2px solid var(--c-accent-2);
  outline-offset: 3px;
}

/* 同意の前は押せない（Contact Form 7 が disabled を付ける） */
.form__submit:disabled,
:is(.form, .wpcf7-form) .wpcf7-submit:disabled {
  opacity: .42;
  cursor: not-allowed;
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-text);
}

/* ------------------------------------------------------------
   2. Contact Form 7 が生む要素
   ------------------------------------------------------------ */

/* 読み上げ用の応答。画面には出さない */
.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
  word-break: normal !important;
}

.wpcf7 .hidden-fields-container { display: none; }

.wpcf7-form-control-wrap { position: relative; display: block; }

/* 欄ごとの不備の指摘を受ける場所。中身がないときは場所を取らない */
.field__tip:empty { display: none; }

/* 欄の並びをそのまま使う場合（雛形を使わず素のタグだけで組んだとき）も
   同じ意匠になるようにしておく */
:is(.form, .wpcf7-form) :is(.wpcf7-radio, .wpcf7-checkbox):not(.choice > label *) {
  display: grid;
  gap: 10px;
}

:is(.form, .wpcf7-form) .wpcf7-list-item:not(.choice > label *) { display: block; margin: 0; }

:is(.form, .wpcf7-form) .wpcf7-list-item:not(.choice > label *) > label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--c-line-soft);
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1.7;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

:is(.form, .wpcf7-form) .wpcf7-list-item:not(.choice > label *) > label:hover {
  border-color: var(--c-line);
  background: rgba(6, 14, 9, .2);
}

:is(.form, .wpcf7-form) .wpcf7-list-item:not(.choice > label *) > label:has(input:checked) {
  border-color: var(--c-accent);
  background: rgba(201, 105, 79, .09);
}

:is(.form, .wpcf7-form) .wpcf7-list-item:not(.choice > label *) input:is([type="radio"], [type="checkbox"]) {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: .35em 0 0;
  border: 1px solid var(--c-line);
  background: transparent;
  cursor: pointer;
}

:is(.form, .wpcf7-form) .wpcf7-list-item:not(.choice > label *) input[type="radio"] { border-radius: 50%; }
:is(.form, .wpcf7-form) .wpcf7-list-item:not(.choice > label *) input:checked { border-color: var(--c-accent); }

:is(.form, .wpcf7-form) .wpcf7-list-item:not(.choice > label *) input:checked::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 4px;
  background: var(--c-accent);
}

:is(.form, .wpcf7-form) .wpcf7-list-item:not(.choice > label *) input[type="radio"]:checked::after { border-radius: 50%; }

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after { content: none; }

/* 送信中の印。プラグインの灰色の円を、細い輪に置き換える */
.wpcf7-spinner {
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: calc(100% + 18px);
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-line);
  border-top-color: var(--c-cream);
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  transform: translateY(-50%);
}

.wpcf7-spinner::before { content: none; }

/* 狭い画面ではボタンの右外に余白がない。ボタンの内側の端に重ねる */
@media (max-width: 599px) {
  .wpcf7-spinner { left: auto; right: 14px; }
}

form.submitting .wpcf7-spinner { visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  form.submitting .wpcf7-spinner { animation: bonji-spin 1s linear infinite; }
}

@media (prefers-reduced-motion: reduce) {
  form.submitting .wpcf7-spinner {
    border-color: var(--c-cream);
    animation: bonji-blink 1.6s ease-in-out infinite;
  }
}

@keyframes bonji-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

@keyframes bonji-blink {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}

/* 送信中は触れない。プラグインが inert を付ける */
.wpcf7 [inert] { opacity: .5; }

:is(.form, .wpcf7-form).submitting .form__submit,
:is(.form, .wpcf7-form).submitting .wpcf7-submit {
  opacity: .6;
  cursor: progress;
  pointer-events: none;
}

/* 欧文の欄は左から右へ */
.wpcf7 :is(input[type="url"], input[type="email"], input[type="tel"]) { direction: ltr; }

/* 反映欄（[reflection] タグ） */
.wpcf7-reflection > output { display: list-item; list-style: none; }
.wpcf7-reflection > output[hidden] { display: none; }

/* ------------------------------------------------------------
   3. 送信の状態
   ------------------------------------------------------------ */

/* 欄ごとの不備の指摘。朱の短い線を頭に置き、文字は明るい朱 */
.wpcf7-not-valid-tip {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .06em;
  color: var(--c-accent-2);
}

.wpcf7-not-valid-tip::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--c-accent);
  transform: translateY(-.35em);
}

/* 選択肢の中には出さず、群の下の .field__tip にまとめて出す */
.choice > label .wpcf7-not-valid-tip { display: none; }

/* 不備のある欄は朱の輪郭にする */
:is(.form, .wpcf7-form) :is(input, select, textarea).wpcf7-not-valid,
:is(.form, .wpcf7-form) :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--c-accent);
  background: rgba(201, 105, 79, .06);
}

/* 選択肢の群に不備があるときは、枠を薄い朱にする */
.choice:has(.wpcf7-not-valid) > label,
.choice:has([aria-invalid="true"]) > label { border-color: rgba(201, 105, 79, .45); }

.choice:has(.wpcf7-not-valid) > label:has(input:checked),
.choice:has([aria-invalid="true"]) > label:has(input:checked) { border-color: var(--c-accent); }

/* 送信後の応答。
   送信完了は上下の細い罫だけで静かに伝え、
   不備や失敗は朱の枠で囲って目に留める。 */
.wpcf7 form .wpcf7-response-output {
  display: block;
  margin: 8px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--c-line);
  font-family: var(--f-serif);
  font-size: var(--fs-md);
  line-height: 1.9;
  letter-spacing: .08em;
  text-align: center;
  color: var(--c-text);
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output:empty { display: none; }

/* 送信完了 */
.wpcf7 form.sent .wpcf7-response-output {
  padding: 24px 0;
  border-width: 1px 0;
  border-color: var(--c-line);
  color: var(--c-text);
}

/* 入力の不備・同意の不足 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: var(--c-accent);
  color: var(--c-accent-2);
}

/* 送信の失敗・中断・迷惑判定 */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--c-accent);
  background: rgba(201, 105, 79, .07);
  color: var(--c-accent-2);
}

/* Contact Form 7 の「浮かせる」表示は使わない。付いていても同じ見た目にする */
.use-floating-validation-tip .wpcf7-not-valid-tip {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}