/* ============================================================
   ponova Web — お問い合わせフォーム専用スタイル
   contact/index.html からのみ読み込む（style.css は 800 行超のため分離。
   D-2 参照）。:root のカラー変数（style.css）を利用する。
   ============================================================ */

/* --- コントラスト補正用ローカル変数 ---------------------------
   style.css の --c-primary（#FF7F7F・白文字で約2.4:1）と --c-error
   （#E57373・白背景で約2.9:1）は WCAG AA（通常文字 4.5:1）を満たさない。
   本ページ内でのみ、同系色でコントラスト比 4.5:1 以上を確保した色を
   定義して使う（style.css 側の共通変数は他画面へ影響するため変更しない）。 */
:root {
  --contact-strong-red: #C0392B; /* white(#FFF)/--c-surface(#FFF) との比で約5.4:1 */
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* --- カテゴリ選択（fieldset / ラジオ） ---------------------- */
.contact-form__fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.contact-form__legend {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
  padding: 0;
}

.contact-form__radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.contact-form__radio-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border: 1px solid var(--c-divider);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

/* border-color は選択状態の視認性（WCAG UI コンポーネント基準 3:1）を満たす必要がある。
   --c-primary は背景 --c-primary-light に対し約2.4:1で未達のため、--contact-strong-red
   （約4.5:1）を使う（レビュー指摘・要修正/実害あり）。 */
.contact-form__radio-item:has(input:checked) {
  border-color: var(--contact-strong-red);
  background: var(--c-primary-light);
}

.contact-form__radio-input {
  margin-top: 0.1875rem;
  accent-color: var(--c-primary);
  flex-shrink: 0;
}

.contact-form__radio-label {
  font-size: 0.9375rem;
  color: var(--c-text);
  line-height: 1.6;
}

/* --- 診断情報（ユーザーID・OS・機種・バージョン） ---------------
   フラグメントあり（アプリ経由）の場合のみ表示する。フラグメントなしの
   場合は領域自体を表示しない（人間の仕様決定）。表示テキストは送信内容を
   伝える重要情報のため --c-text-secondary（約2.89:1、WCAG AA未達）ではなく
   --c-text（約9.3:1）を使う。新色は発明しない。 */
.contact-form__diagnostics-display {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* [hidden] の既定表示は同じ要素に付く author スタイルシートの display: flex に
   上書きされるため、明示的に display: none を定義し直す（.contact-form__field[hidden] と同じ理由）。 */
.contact-form__diagnostics-display[hidden] {
  display: none;
}

.contact-form__diagnostics-hint {
  font-size: 0.8125rem;
  color: var(--c-text);
}

.contact-form__diagnostics-line {
  font-size: 0.8125rem;
  color: var(--c-text);
  line-height: 1.6;
}

/* --- 汎用フィールド（ラベル + 入力） -------------------------- */
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* [hidden] の既定表示（UA スタイルシートの display: none）は同じ要素に付く
   `.contact-form__field { display: flex }`（author スタイルシート）に上書きされるため、
   明示的に display: none を定義し直す。 */
.contact-form__field[hidden] {
  display: none;
}

.contact-form__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-text);
}

.contact-form__required {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--contact-strong-red);
}

.contact-form__textarea {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-divider);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  resize: vertical;
}

/* --- 問診用セレクト（不具合報告カテゴリ） ---------------------- */
/* .contact-form__field は flex column（既定 align-items: stretch）のため、
   width を明示指定しないセレクトも本来はクロス軸いっぱいに引き伸ばされる。
   .terms-layout--single（776px）の本文幅いっぱいまで伸びると選択肢の短い
   セレクトではネイティブ矢印が右端に離れて見えるため、align-self で
   ストレッチを外し、内容に応じた自然な幅（intrinsic width）にする。
   固定の px/rem 値は発明せず、ブラウザ既定の sizing に委ねる。 */
.contact-form__select {
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-divider);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

/* --- 注意ボックス（返信なしカテゴリ等） ----------------------- */
.contact-form__notice {
  background: var(--c-bg);
  border: 1px solid var(--c-warning);
  border-radius: 10px;
  padding: 0.875rem 1rem;
}

.contact-form__notice p {
  font-size: 0.875rem;
  color: var(--c-text);
}

/* --- 返信あり誘導の確認ボックス（不具合報告カテゴリ） -----------
   自動でカテゴリを切り替えず、ここでの明示クリックを経てから切り替える
   （レビュー指摘: 説明なしの自動切替・選択クリアの禁止）。切替後も
   「不具合報告」カテゴリを選び直せば通常の操作で戻せる。 */
.contact-form__redirect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--c-bg);
  border: 1px solid var(--c-divider);
  border-radius: 10px;
  padding: 0.875rem 1rem;
}

/* [hidden] の既定表示（UA スタイルシートの display: none）は同じ要素に付く
   `.contact-form__redirect { display: flex }`（author スタイルシート）に上書きされるため、
   明示的に display: none を定義し直す（.contact-form__field[hidden] と同じ理由）。 */
.contact-form__redirect[hidden] {
  display: none;
}

.contact-form__redirect-text {
  font-size: 0.875rem;
  color: var(--c-text);
  line-height: 1.7;
}

/* 320-375px幅では「〇〇でお問い合わせする」の文言がボタン幅を超えうるため、コンテナ幅を
   超えず折り返せるようにする（レビュー指摘・要修正/実害あり）。 */
.contact-form__redirect-button {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--contact-strong-red);
  background: var(--c-surface);
  border: 1px solid var(--contact-strong-red);
  border-radius: 999px;
  padding: 0.625rem 1.5rem;
  cursor: pointer;
  transition: background 0.15s;
}

.contact-form__redirect-button:hover {
  background: var(--c-primary-light);
}

/* --- 送信ボタン ------------------------------------------------ */
.contact-form__submit-row {
  display: flex;
  justify-content: center;
}

.contact-form__submit {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text-on-primary);
  background: var(--contact-strong-red);
  border-radius: 999px;
  padding: 0.875rem 2.5rem;
  text-align: center;
  transition: filter 0.15s;
}

.contact-form__submit:hover {
  /* opacity ではなく filter で暗くする（opacity は背景と混ざり白文字との
     コントラスト比を下げてしまうため） */
  filter: brightness(0.92);
}

/* aria-disabled 時は href 除去 + tabindex="-1" も付与し、ポインタ操作・
   キーボード操作の両方で無効状態に到達不能にする（assets/js/contact.js 側で制御）。 */
.contact-form__submit[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.4;
}