/* request-a-call.css - the intake form

   Loaded from the page's own HeadContent, so no other page carries these
   bytes. Everything that could live in the design system already does: the
   fields use .field, .input, .textarea and .select from 03-components.css, and
   the submit button is .btn .btn-primary. What is here is only what is
   specific to this one page.

   The visual job of this page is to be calm. Somebody filling this in may be
   doing it at eleven at night after putting it off for a month, and a form
   that shouts, jumps or animates is working against them. */

.intake {
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-block: var(--space-6) var(--space-8);
}

/* ---------------------------------------------------------------------------
   THE CRISIS NOTICE. Above the form, always visible, never dismissible.

   It reuses the shape of the footer crisis block but not its colours: .crisis
   is painted for the deep footer ground and would be invisible here. It is
   deliberately NOT red and NOT a modal. It is information, not an alarm
   (DESIGN.md section 5): red framing reads as danger to somebody already
   frightened, and a dismissible banner is a banner that gets dismissed by the
   one person who needed it.
   --------------------------------------------------------------------------- */

.intake-crisis {
    background-color: var(--bg-sage);
    border: 1px solid var(--rule-strong);
    border-left: 4px solid var(--violet);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.intake-crisis__title {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink-strong);
    margin-bottom: var(--space-2);
}

.intake-crisis p {
    max-width: 52ch;
    font-size: var(--fs-small);
    /* Roomier than the body default, because the numbers below are padded
       into real tap targets and a 1.65 line box would let two of them
       collide. */
    line-height: 2;
}

/* The numbers here are targets too, for the same reason as in the footer and
   on the service pages: a bold 19px run inside a sentence is not something a
   thumb can reliably hit, and this is the page where somebody in trouble is
   most likely to be reaching for one. */
.intake-crisis a {
    display: inline-block;
    font-weight: 600;
    min-height: 24px;
    padding: var(--space-1);
    margin-inline: calc(var(--space-1) * -1);
    border-radius: var(--radius);
}

.intake-crisis p + p {
    margin-top: var(--space-2);
}

/* ---------------------------------------------------------------------------
   THE FORM
   --------------------------------------------------------------------------- */

.intake-form {
    margin-top: var(--space-6);
}

/* The helper text under the note label sits ABOVE the box, because it is an
   instruction about what to type rather than a comment on what was typed.
   .field__hint carries a top margin for the below-the-input case, so it is
   reset here rather than a second hint class being invented. */
.intake-hint {
    margin-top: 0;
    margin-bottom: var(--space-2);
    max-width: 52ch;
}

/* The failed-submission summary is .error-summary in 03-components.css, part
   of the shared form vocabulary rather than a shape invented on this page. It
   replaced .intake-alert, which was a single sentence reporting one problem at
   a time with nothing marked on the field it was about. */

/* The no-JavaScript notice. Same shape as the privacy notice below the button,
   because it is the same kind of statement: quiet, factual, and not an alarm.
   It is the only <noscript> on the site. */
.intake-noscript {
    margin-bottom: var(--space-5);
    border-left-color: var(--error);
}

/* Radio groups. A fieldset has a default border and padding in every browser;
   both are cleared so the group looks like the rest of the fields. */
.intake-choices {
    border: 0;
    padding: 0;
    margin-inline: 0;
}

.intake-choices legend {
    padding: 0;
    margin-bottom: var(--space-2);
    font-weight: 600;
    color: var(--ink);
}

.intake-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    /* 48px of target, so the option is tappable on a phone rather than being a
       16px circle next to some words. */
    min-height: 48px;
    padding-right: var(--space-5);
    font-weight: 400;
    cursor: pointer;
}

.intake-choice input {
    width: 20px;
    height: 20px;
    accent-color: var(--teal-deep);
}

.intake-choice input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.intake-privacy {
    margin-top: var(--space-5);
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   THE HONEYPOT

   Off screen, not display:none and not hidden. A field that is display:none is
   skipped by a fair number of form bots and by nothing else; a field pushed
   out of the viewport is filled in by most of them. aria-hidden and tabindex
   keep it away from anybody using a screen reader or a keyboard, and
   autocomplete is off so a browser never helpfully fills it in and gets a
   real person quarantined.
   --------------------------------------------------------------------------- */

.intake-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   THE CONFIRMATION. Rendered in place of the form, never at a new URL.
   --------------------------------------------------------------------------- */

.intake-confirmation {
    background-color: var(--bg-raised);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--success);
    border-radius: var(--radius-card);
    padding: var(--space-5);
}

.intake-confirmation:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.intake-confirmation h1 {
    font-size: var(--fs-h2);
    margin-bottom: var(--space-3);
}

.intake-confirmation p {
    max-width: 60ch;
}