/* ─────────────────────────────────────────────
 * The shared contact form (components/contact/ContactForm.tsx) on
 * /contact, /ga/contact, /instructor/support and /student/support.
 *
 * ContactForm links this file itself, with React's `precedence`, so React
 * puts it in <head> and never shows the form before it has loaded: on a
 * first load it holds back the first paint (or the streamed-in form), and
 * on a client-side navigation React waits for it before showing the page.
 * These rules used to sit in site.css, which the support pages link from
 * the page body; there the browser could paint the form before site.css
 * applied (13px fields, no borders: iOS Safari zooms in on a field under
 * 16px). That is what PR #787's spec caught on preview at 1280px.
 *
 * React keeps a `precedence` stylesheet after the form unmounts, so every
 * rule here must only match the form's own markup, never the rest of a
 * page (__tests__/contact-form-fields-16px.test.ts). The tokens come from
 * app/globals.css (colors_and_type.css repeats them on marketing pages).
 * ─────────────────────────────────────────── */

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  box-shadow: var(--shadow-xs);
}
.contact-form .form-section { margin-bottom: 24px; }
.contact-form .form-section:last-of-type { margin-bottom: 28px; }
.contact-form label,
.contact-form .form-label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
  width: 100%;
  /* 16px: below that, iOS Safari zooms the page in when a field is tapped
     (/contact, and the instructor and student support pages). */
  font-family: inherit; font-size: 16px;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(5,150,105,0.15);
}
.contact-form textarea {
  resize: vertical; min-height: 120px; font-family: inherit;
}
.contact-form .form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.contact-form .help-text {
  font-size: 12.5px; color: var(--color-text-muted);
  margin-top: 6px; line-height: 1.45;
}
.form-segmented {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 8px;
}
.form-segmented input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.form-segmented label {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); cursor: pointer;
  font-size: 14.5px; font-weight: 500; color: var(--color-text);
  background: var(--color-surface);
  transition: border-color .15s, background .15s;
  margin-bottom: 0;
}
.form-segmented label:hover { border-color: var(--color-accent); background: var(--color-accent-light); }
.form-segmented input:checked + label {
  border-color: var(--color-accent); background: var(--color-accent-light); color: #047857;
}
.form-segmented .seg-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-accent-light);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-accent); flex-shrink: 0;
}
.form-segmented input:checked + label .seg-icon { background: var(--color-accent); color: #fff; }

.form-radio-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.form-radio-list label {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); cursor: pointer; font-weight: 500;
  font-size: 14.5px; color: var(--color-text);
  background: var(--color-surface);
  transition: border-color .15s, background .15s;
  margin-bottom: 0;
}
.form-radio-list label:hover { border-color: var(--color-accent); }
.form-radio-list input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--color-accent); margin: 0;
}
.form-radio-list .radio-content { display: flex; flex-direction: column; gap: 2px; }
.form-radio-list .radio-title { font-weight: 600; }
.form-radio-list .radio-hint { font-size: 12.5px; color: var(--color-text-muted); font-weight: 400; }

.contact-form .form-submit {
  display: flex; justify-content: flex-end; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--color-border);
}
.contact-form .btn[disabled],
.contact-form .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed;
}

.contact-success {
  background: var(--color-accent-light);
  border: 1px solid rgba(5,150,105,0.28);
  border-radius: var(--radius-lg);
  padding: 28px 32px; color: #047857;
}
/* The class is doubled on purpose. On /contact the thank-you panel sits in
   site.css's .subpage-body, whose `.subpage-body h3` and `.subpage-body p`
   rules have the same specificity as a single `.contact-success h3`. These
   two rules used to win by coming later in site.css; this file now comes
   before site.css, so they win by specificity instead. */
.contact-success.contact-success h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: inherit; }
.contact-success.contact-success p { margin: 0; font-size: 14.5px; color: inherit; opacity: 0.9; }

@media (max-width: 860px) {
  .contact-form { padding: 26px 22px; }
  .form-segmented { grid-template-columns: 1fr; }
  .contact-form .form-row { grid-template-columns: 1fr; }
}

/* The submit button is site.css's .btn.btn-primary. These copies only stand
   in until site.css applies (the support pages load it from the page body):
   :where() keeps them at site.css's specificity, and site.css comes later,
   so wherever it has loaded its own rules win. Same values as site.css
   (the vitest above checks), so nothing changes when it arrives. */
:where(.contact-form) .btn {
  font-family: inherit; cursor: pointer; font-weight: 600;
  border-radius: var(--radius-md); transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  text-decoration: none;
}
:where(.contact-form) .btn:hover { text-decoration: none; }
:where(.contact-form) .btn-primary {
  background: var(--color-accent); color: white; border: none;
  padding: 11px 20px; font-size: 14.5px;
  box-shadow: var(--shadow-xs);
}
:where(.contact-form) .btn-primary:hover { background: var(--color-accent-hover); }
@media (max-width: 640px) {
  :where(.contact-form) .btn-primary { padding: 9px 14px; font-size: 13.5px; }
  :where(main .contact-form) .btn { max-width: 100%; white-space: normal; text-align: center; text-wrap: balance; }
}