/* contact.css — お問い合わせフォーム
 * Consumes tokens.css. Shares the document chrome (nav / .l-doc / footer) with legal.css;
 * this file only adds the form-specific styles. Brand: cork paper · deep-green · gold thread.
 */

.c-intro { margin-top: var(--space-lg); color: var(--color-ink-soft); }

/* ---- Form ---- */
.c-form { margin-top: var(--space-2xl); display: grid; gap: var(--space-lg); }
.c-field { display: grid; gap: var(--space-2xs); }
.c-field label { font-weight: 600; color: var(--color-green); font-size: var(--text-sm); letter-spacing: 0.01em; }
.c-field .req { color: var(--color-accent-strong); margin-left: 0.15em; }
.c-field .opt { color: var(--color-ink-faint); font-weight: 400; font-size: var(--text-xs); margin-left: 0.25em; }

.c-input, .c-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink);
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.85em;
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
.c-textarea { resize: vertical; min-height: 9.5rem; }
.c-input::placeholder, .c-textarea::placeholder { color: var(--color-ink-faint); }
.c-input:focus, .c-textarea:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-selection);
}
.c-input:user-invalid, .c-textarea:user-invalid { border-color: var(--color-error); }

/* honeypot — kept in the flow but hidden from people (bots tend to fill it) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.c-consent { margin: 0; color: var(--color-ink-faint); font-size: var(--text-sm); line-height: 1.8; }
.c-consent a { color: var(--color-green); }

.c-actions { margin-top: var(--space-2xs); }
.c-submit {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-md);
  color: var(--color-on-green); background: var(--color-green);
  border: 0; border-radius: var(--radius-pill);
  padding: 0.85em 2.2em; cursor: pointer; min-height: 44px;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.c-submit .arr { transition: transform var(--dur-short) var(--ease-out); display: inline-block; }
@media (hover: hover) {
  .c-submit:hover { background: var(--color-green-mid); }
  .c-submit:hover .arr { transform: translateX(4px); }
}
.c-submit:active { transform: translateY(1px); }
.c-submit:disabled { opacity: 0.6; cursor: progress; transform: none; }

.c-status { margin: var(--space-xs) 0 0; font-size: var(--text-sm); min-height: 1.2em; color: var(--color-ink-soft); }
.c-status.is-error { color: var(--color-error); font-weight: 500; }

/* ---- Success panel (shown after a successful send) ---- */
.c-success { margin-top: var(--space-2xl); padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--color-paper-3); border: var(--rule); border-radius: var(--radius-sm); }
.c-success h2 { font-family: var(--font-display); color: var(--color-green); font-weight: 700;
  font-size: var(--text-lg); margin: 0 0 var(--space-sm); }
.c-success p { margin: 0 0 var(--space-sm); color: var(--color-ink-soft); }
.c-success p:last-child { margin-bottom: 0; }
.c-success .c-note { color: var(--color-ink-faint); font-size: var(--text-sm); }
.c-success a { color: var(--color-green); }
.c-success__home { display: inline-flex; align-items: center; gap: var(--space-2xs);
  margin-top: var(--space-xs); color: var(--color-green); text-decoration: none; font-weight: 600; }
.c-success__home .arr { display: inline-block; transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) { .c-success__home:hover .arr { transform: translateX(-3px); } }

/* ---- Direct-email fallback (and for no-JS) ---- */
.c-fallback { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule);
  color: var(--color-ink-faint); font-size: var(--text-sm); line-height: 1.9; }
.c-fallback a { color: var(--color-green); }