/* ==========================================================================
   お問い合わせページ（/contact）
   ==========================================================================

   全部 .ct の中に閉じ込めてある。`.card` / `.field` / `.hint` のような一般名が
   テーマ側（Tailwind の style.css）とぶつからないようにするため。
   page-contact.php の <main class="site-main ct"> を外さないこと。

   .ct-field / .ct-label / .ct-req / .ct-hint / .ct-choices / .ct-submit などは
   **CF7 が管理画面のテンプレートから吐くマークアップ**に当たる。
   テンプレートを組み立てているのは theme/inc/contact-helpers.php なので、
   クラス名を変えるときは両方を直すこと（tests/test-contact-ledger.php が突き合わせる）。

   font-size の下限は 16px（1rem）。これより小さい font-size を書かない。
   tests/test-contact-ledger.php が走査して、16px 未満があれば落とす。
   階層は大きさではなく、太さ・色・余白で作る。
   ========================================================================== */

.ct {
  --ct-primary: #0ea5e9;
  --ct-primary-600: #0284c7;
  --ct-primary-50: #f0f9ff;
  --ct-primary-100: #e0f2fe;
  --ct-slate-800: #1e293b;
  --ct-slate-700: #334155;
  --ct-slate-600: #475569;
  --ct-slate-500: #64748b;
  --ct-slate-300: #cbd5e1;
  --ct-slate-200: #e2e8f0;
  --ct-slate-100: #f1f5f9;
  --ct-danger: #b91c1c;
  --ct-danger-50: #fef2f2;
  --ct-danger-200: #fecaca;
  --ct-ok: #047857;
  --ct-ok-50: #ecfdf5;
  --ct-ok-200: #a7f3d0;
  --ct-radius: 0.75rem;
}

/* テーマ側のリセット次第で [hidden] が効かないことがあるので明示する */
.ct [hidden] {
  display: none;
}

/* ---- 用件の2択 ---------------------------------------------------------- */

.ct-chooser {
  margin: 0 0 2.5rem;
  padding: 0;
  border: 0;
}

.ct-chooser__heading {
  display: block;
  width: 100%;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ct-slate-800);
  text-align: center;
  line-height: 1.5;
}

.ct-chooser__note {
  margin: 0.5rem 0 1.5rem;
  font-size: 1rem;
  color: var(--ct-slate-600);
  text-align: center;
}

.ct-chooser__cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .ct-chooser__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* カード全体がクリック領域。ラジオは残す（何を選んでいるかが一目で分かるため、
   見た目だけのカードにしてラジオを隠さない） */
.ct-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--ct-slate-200);
  border-top: 4px solid var(--ct-slate-300);
  border-radius: var(--ct-radius);
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}

.ct-card:hover {
  border-color: var(--ct-primary);
  border-top-color: var(--ct-primary);
  background: var(--ct-primary-50);
}

.ct-card input[type="radio"] {
  margin: 0.35rem 0 0;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  accent-color: var(--ct-primary);
  cursor: pointer;
}

/* 選択状態は JS でクラスを足さず CSS だけで出す */
.ct-card:has(input:checked) {
  border-color: var(--ct-primary);
  border-top-color: var(--ct-primary);
  background: var(--ct-primary-50);
  box-shadow: inset 0 0 0 1px var(--ct-primary-100);
}

.ct-card:focus-within {
  outline: 2px solid var(--ct-primary-600);
  outline-offset: 2px;
}

.ct-card__body {
  display: block;
}

.ct-card__label {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ct-slate-800);
  line-height: 1.6;
}

.ct-card__text {
  display: block;
  margin-top: 0.35rem;
  font-size: 1rem;
  color: var(--ct-slate-600);
  line-height: 1.7;
}

/* ---- 用件ごとのパネル --------------------------------------------------- */

.ct-panel {
  margin-top: 2rem;
}

.ct-panel__heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ct-slate-800);
  line-height: 1.5;
  margin: 0 0 1rem;
}

@media (min-width: 768px) {
  .ct-panel__heading {
    font-size: 1.875rem;
  }
}

/* 読み手が自分を重ねるための例。かぎ括弧はCSSで足す（台帳に記号を持たせない） */
.ct-quotes {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0 0 0 1rem;
  border-left: 4px solid var(--ct-primary-100);
}

.ct-quotes__item {
  font-size: 1rem;
  color: var(--ct-slate-700);
  line-height: 1.9;
}

.ct-quotes__item::before { content: "「"; }
.ct-quotes__item::after { content: "」"; }

.ct-panel__text {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: var(--ct-slate-600);
  line-height: 1.9;
}

.ct-panel__form {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--ct-radius);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .ct-panel__form {
    padding: 2.5rem;
  }
}

/* ---- CF7 のテンプレートが吐く中身 --------------------------------------- */

.ct-form > *:last-child {
  margin-bottom: 0;
}

.ct-field {
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
}

/* 選択肢が複数の部品に散るもの。fieldset なのでブラウザ既定の余白を消す */
.ct-field--group {
  min-width: 0;
}

/* 入力欄。全ページ共通の .wpcf7 の見た目に頼らず、この画面ぶんはここで完結させる */
.ct input.ct-input,
.ct textarea.ct-input,
.ct select.ct-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: var(--ct-slate-800);
  background: #fff;
  border: 1px solid var(--ct-slate-300);
  border-radius: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ct textarea.ct-input {
  min-height: 10rem;
  line-height: 1.8;
  resize: vertical;
}

.ct .ct-input:focus {
  outline: none;
  border-color: var(--ct-primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.ct-label {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ct-slate-700);
  line-height: 1.6;
}

.ct-req,
.ct-opt {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0.25rem;
  vertical-align: 1px;
}

.ct-req {
  color: var(--ct-danger);
  background: var(--ct-danger-50);
}

.ct-opt {
  color: var(--ct-slate-500);
  background: var(--ct-slate-100);
}

.ct-hint {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--ct-slate-500);
  line-height: 1.7;
}

.ct-warn {
  margin: 0 0 0.6rem;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  color: var(--ct-danger);
  background: var(--ct-danger-50);
  border-left: 4px solid var(--ct-danger-200);
  line-height: 1.7;
}

/* 選択肢。CF7 の class: は .wpcf7-form-control（選択肢を包む span）に付くので、
   .ct-choices そのものがグリッドの器になる。
   1列だと15個が縦に伸びすぎるので、幅があれば2列に折る */
.ct .ct-choices {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .ct .ct-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ct .ct-choices .wpcf7-list-item {
  display: block;
  margin: 0;
}

.ct .ct-choices .wpcf7-list-item label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ct-slate-700);
  line-height: 1.7;
  border: 1px solid var(--ct-slate-200);
  border-radius: 0.5rem;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}

.ct .ct-choices .wpcf7-list-item label:hover {
  border-color: var(--ct-primary);
  background: var(--ct-primary-50);
}

.ct .ct-choices .wpcf7-list-item label:has(input:checked) {
  border-color: var(--ct-primary);
  background: var(--ct-primary-50);
  box-shadow: inset 0 0 0 1px var(--ct-primary-100);
  font-weight: 700;
}

.ct .ct-choices .wpcf7-list-item input[type="checkbox"] {
  margin: 0.35rem 0 0;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  accent-color: var(--ct-primary);
}

/* ---- 添付 --------------------------------------------------------------- */

.ct-field--file {
  padding: 1.25rem;
  background: var(--ct-slate-100);
  border-radius: var(--ct-radius);
}

.ct input.ct-file {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  background: #fff;
  border: 1px dashed var(--ct-slate-300);
  border-radius: 0.5rem;
}

.ct input.ct-file::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--ct-primary);
  border: 0;
  border-radius: 0.375rem;
  cursor: pointer;
}

.ct input.ct-file::file-selector-button:hover {
  background: var(--ct-primary-600);
}

.ct-file-name {
  margin: 0.6rem 0 0;
  font-size: 1rem;
  color: var(--ct-slate-600);
  word-break: break-all;
}

.ct-file-error {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ct-danger);
  background: var(--ct-danger-50);
  border-radius: 0.5rem;
  line-height: 1.7;
}

/* ---- 同意チェックと送信 ------------------------------------------------- */

.ct-field--consent {
  margin-bottom: 1.5rem;
}

.ct-submit-row {
  margin-top: 2rem;
}

.ct .ct-submit,
.ct input.ct-submit {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  background: var(--ct-primary);
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.ct input.ct-submit:hover {
  background: var(--ct-primary-600);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ct input.ct-submit:active {
  transform: translateY(0);
}

.ct-submit-note {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  color: var(--ct-slate-600);
  text-align: center;
  line-height: 1.7;
}

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

.ct-thanks {
  margin-top: 1.5rem;
  padding: 1.75rem;
  background: var(--ct-ok-50);
  border: 1px solid var(--ct-ok-200);
  border-radius: var(--ct-radius);
}

.ct-thanks:focus {
  outline: 2px solid var(--ct-ok);
  outline-offset: 2px;
}

.ct-thanks__heading {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ct-ok);
  line-height: 1.5;
}

.ct-thanks__text {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--ct-slate-700);
  line-height: 1.9;
}

.ct-thanks__text:last-child {
  margin-bottom: 0;
}