/* Caregiver page layout. Loaded after home.css, so it reuses .wrap, .section,
   .section-head, .split, .duties and the footer. This file only adds what the
   caregiver page needs. Tokens only; no new colors. */

/* 1 Why Kokoro. Same ground and spacing as the home hero. */
.join { padding-top: var(--rhythm-block); background: var(--surface-deep); }
.join h1 { font-size: var(--text-h1); line-height: calc(var(--text-h1) + 8px); font-weight: 500; max-width: 18em; }
/* The promises are h2s here (they are the page's main points), styled like the home page's h3 duties. */
.duty h2 { margin: 0 0 var(--space-2); font-size: var(--text-h3); line-height: 1.35; font-weight: 700; }
/* Three promises, so one row of three from tablet up (the home page's .duties has four). */
@media (min-width: 720px) {
  .join .duties { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 2 The form. One column; fields keep the 420px width from .k-field, the button matches it. */
.apply__form, .apply__done, .apply__off, .apply__next { max-width: 420px; }
.apply__submit { margin-top: var(--space-8); min-height: 52px; }
/* A failed send: above the button, in the error color, like a field error. */
.apply__error { margin: var(--space-6) 0 0; font-size: var(--text-body); line-height: 1.5; font-weight: 700; color: var(--error); }
.apply__error + .apply__submit { margin-top: var(--space-4); }
/* Under the button: what we do with the details, and the reCAPTCHA notice. */
.apply__privacy { margin: var(--space-4) 0 0; font-size: var(--text-small); line-height: 1.5; color: var(--ink-2); }
/* The honeypot field: off screen, out of the tab order (tabindex in the HTML). */
.apply__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Google's floating reCAPTCHA badge would cover the sticky "Talk to Kokoro" bar.
   Hiding it is allowed because .apply__privacy carries the required notice. */
.grecaptcha-badge { visibility: hidden; }
.apply__done:focus { outline: none; }
.apply__done:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.apply [hidden] { display: none; }
/* What happens next, under the form or the thank-you. */
.apply__next { display: flex; gap: var(--space-3); margin-top: var(--space-6); font-size: var(--text-body); line-height: 1.6; color: var(--ink); }
.apply__next .k-icon { flex: none; margin-top: 4px; }
/* The last section: a chapter break before the footer, like the home page. */
.apply { padding-bottom: var(--rhythm-chapter); }