/* apply.css — the public volunteer application form.
   Standalone: this page is seen by people who have never met Volunteer Ledger,
   arriving from a hospice's own website. It borrows landing.css for tokens and
   buttons and adds only what a long form needs. Calm, wide line-height, big
   tap targets — a lot of applicants fill this in on a phone. */

.ap-page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.ap-card {
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 18px;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);
}

/* ---- header ---- */
.ap-head { text-align: center; margin-bottom: 2rem; }
.ap-logo { max-height: 64px; width: auto; margin: 0 auto 1rem; display: block; }
.ap-eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal, #0F766E); margin: 0 0 .35rem;
}
.ap-title {
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.15; margin: 0;
}
.ap-intro {
  margin: .9rem auto 0; max-width: 34rem; color: var(--text-muted, #6b7280); line-height: 1.6;
  white-space: pre-wrap;
}

/* ---- fields ---- */
.ap-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.ap-field--wide, .ap-fields > .ap-field--wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .ap-fields { grid-template-columns: 1fr; } }

.ap-field { display: flex; flex-direction: column; min-width: 0; }
.ap-label { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.ap-req { color: #b42318; font-weight: 700; }
.ap-opt { color: var(--text-muted, #6b7280); font-weight: 400; font-size: .85em; }

.ap-card input[type=text], .ap-card input[type=email], .ap-card input[type=tel],
.ap-card input[type=date], .ap-card select, .ap-card textarea {
  width: 100%; padding: .7rem .8rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--line, #d0d5dd); border-radius: 10px; background: #fff;
  color: inherit; transition: border-color .12s, box-shadow .12s;
}
.ap-card input:focus, .ap-card select:focus, .ap-card textarea:focus {
  outline: none; border-color: var(--teal, #0F766E);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}
.ap-card textarea { resize: vertical; min-height: 5rem; }

.ap-invalid { border-color: #b42318 !important; }
.ap-fielderr { color: #b42318; font-size: .84rem; margin-top: .3rem; min-height: 1em; }

/* ---- blocks ---- */
.ap-block { margin-top: 2rem; border: 0; padding: 0; }
.ap-legend {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.05rem;
  padding: 0; margin-bottom: .3rem;
}
.ap-hint { color: var(--text-muted, #6b7280); font-size: .88rem; margin: 0 0 .85rem; line-height: 1.5; }
.ap-privacy { margin-top: .5rem; }

.ap-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem .9rem; }
.ap-check {
  display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px; cursor: pointer;
  font-size: .94rem; transition: border-color .12s, background-color .12s;
}
.ap-check:hover { border-color: var(--teal, #0F766E); background: rgba(15, 118, 110, .03); }
.ap-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--teal, #0F766E); flex: none; }

/* ---- honeypot: off-screen, never display:none (bots skip hidden fields) ---- */
.ap-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---- actions + states ---- */
.ap-actions { margin-top: 2rem; }
.ap-actions .btn { width: 100%; }
.ap-err {
  margin-top: 1rem; padding: .75rem .9rem; border-radius: 10px;
  background: #fef3f2; border: 1px solid #fda29b; color: #b42318; font-size: .92rem;
}
.ap-foot {
  margin: 1.1rem 0 0; text-align: center; font-size: .85rem; color: var(--text-muted, #6b7280);
}

.ap-state { text-align: center; padding: 2rem 0; }
.ap-state-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.5rem; margin: 0 0 .6rem; }
.ap-state-body { color: var(--text-muted, #6b7280); max-width: 32rem; margin: 0 auto; line-height: 1.6; }
.ap-tick {
  width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; border-radius: 50%;
  background: rgba(15, 118, 110, .1); color: var(--teal, #0F766E);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700;
}

.ap-loading { text-align: center; padding: 3rem 0; color: var(--text-muted, #6b7280); }
.ap-spinner {
  width: 1.75rem; height: 1.75rem; margin: 0 auto 1rem; border-radius: 50%;
  border: 3px solid rgba(15, 118, 110, .18); border-top-color: var(--teal, #0F766E);
  animation: ap-spin .8s linear infinite;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ap-spinner { animation-duration: 2.4s; } }

.ap-badge { text-align: center; margin: 1.5rem 0 0; font-size: .82rem; }
.ap-badge a { color: var(--text-muted, #6b7280); text-decoration: none; }
.ap-badge a:hover { text-decoration: underline; }

/* ---- texting opt-in beside the phone number (never pre-checked) ---- */
.ap-sms-check { align-items: flex-start; font-size: .9rem; line-height: 1.45; }
.ap-sms-check input { margin-top: .15rem; }
.ap-sms-links { margin: .4rem 0 0; font-size: .84rem; }
.ap-sms-links a { color: var(--teal, #0F766E); }

/* The agency's own intro, its custom-field labels and any message that quotes an
   applicant's address are text this page does not control. A long link in the
   intro ran the form off the edge of a phone; anywhere breaks only what cannot fit
   and, being a plain block flow, crushes nothing. */
.ap-page, .ap-page :is(p, label, li, .hint) { overflow-wrap: anywhere; }