/* Start a ministry application page. Shares colors and fonts with styles.css. */
.apply-top {
  width: min(100% - 2.5rem, 640px); margin-inline: auto; min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.apply-top img { width: 156px; height: auto; }
.apply-back { color: var(--muted); text-decoration: none; transition: color .2s; }
.apply-back:hover { color: var(--text); }

.apply { width: min(100% - 2.5rem, 640px); margin-inline: auto; padding-block: 28px 80px; }
.apply h1 { font-size: clamp(2.6rem, 6vw, 4rem); }

#applyForm { display: grid; gap: 32px; margin-top: 36px; }
#applyForm[hidden] { display: none; }
.field { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend {
  padding: 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.4;
}
.field > legend { margin-bottom: 10px; }
/* A fieldset's legend sits outside its grid, so its options need their own spacing */
fieldset.field > .option + .option { margin-top: 0; }

.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; min-height: 54px; padding: 14px 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r);
  font: 400 1.0625rem/1.4 "Barlow", system-ui, sans-serif;
  transition: border-color .2s, background-color .2s;
}
.field textarea { display: block; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: #4a4a52; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--text); }

/* Answer choices */
.option { display: block; cursor: pointer; }
.option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.option span {
  display: flex; align-items: center; min-height: 54px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  line-height: 1.3;
  transition: border-color .2s, background-color .2s;
}
.option:hover span { border-color: #4a4a52; }
.option input:checked + span {
  background: rgb(206 15 45 / .22); border-color: #e8243f; font-weight: 600;
}
.option input:focus-visible + span { outline: 3px solid var(--text); outline-offset: 2px; }

.field__error { margin: 0; color: #ff8d9c; font-size: 1rem; }
.is-invalid input[type="text"], .is-invalid input[type="email"], .is-invalid textarea,
.is-invalid .option span { border-color: #ff8d9c; }

.apply-fail { padding: 14px 16px; background: rgb(206 15 45 / .22); border-radius: var(--r); }
.apply-submit { width: 100%; cursor: pointer; }
.apply-submit:disabled { opacity: .7; cursor: default; }

/* Thank-you screen */
.apply-done {
  display: grid; justify-items: center; gap: 18px;
  padding-top: clamp(32px, 10vh, 96px); text-align: center; outline: none;
}
.apply-done[hidden] { display: none; }
.apply-done img { width: min(240px, 70%); }
.apply-done p { color: var(--muted); font-size: 1.15rem; }

@media (prefers-reduced-motion: no-preference) {
  .apply-done { animation: rise .8s var(--ease) both; }
}