/* =============================================================================
   Module: contact-form  (modules/contact-form.php)
   -----------------------------------------------------------------------------
   The form on /praxis/kontakt, and the panel that replaces it once a message
   has gone out.

   THIS IS THE ONLY FORM ON THE SITE, so every control it needs is styled here
   as part of the block rather than as a set of element defaults in base/. The
   day a second form appears, the input, the label and the error move to
   base/components.css and this file keeps only the layout. Until then, one
   file is easier to read than two.

   The block sits in the right-hand column of a .section-head--split, so its
   width comes from the split ratio and not from the window. Its own layout is
   therefore auto-fit, like modules/contact-details.css - see the note there.
   ============================================================================= */

.contact-form__form {
    display: grid;
    gap: var(--space-md) var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

/* Everything except the e-mail address and the telephone number runs the full
   width of the form. Which fields those are is a decision about the copy, so it
   is marked in the markup with --wide rather than guessed at here with
   :first-of-type - a form-level error message is a <p> too, and would have
   quietly taken that place. */
.contact-form__field--wide,
.contact-form__field--challenge,
.contact-form__consent,
.contact-form__actions,
.contact-form__notice {
    grid-column: 1 / -1;
}

/* --- A field ---------------------------------------------------------------- */
.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin: 0;
}

.contact-form__label {
    color: var(--color-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.contact-form__optional {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
}

.contact-form__input {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2xs) var(--space-sm);
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form__input:hover {
    border-color: rgba(var(--rgb-blue), 0.4);
}

/* The global :focus-visible outline already marks the field; this is the
   quieter half of it, so a focused field reads as active and not only as
   outlined. */
.contact-form__input:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--rgb-blue-light), 0.25);
}

.contact-form__input:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.contact-form__textarea {
    min-height: 9rem;
    padding-block: var(--space-2xs);
    line-height: var(--line-height-base);
    resize: vertical;
}

/* The fallback question is answered with one or two characters; a field the
   width of the form would be asking for a sentence. */
.contact-form__input--short {
    max-width: 8rem;
}

.contact-form__input[aria-invalid='true'] {
    border-color: var(--color-error);
}

.contact-form__error {
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

/* --- What went wrong with the whole form ------------------------------------- */
.contact-form__notice {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-inline-start: 4px solid var(--color-error);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

/* --- The consent ------------------------------------------------------------
   The box sits on the first line of the label rather than centred against the
   whole paragraph, which is two or three lines long.
   -------------------------------------------------------------------------- */
.contact-form__consent {
    display: grid;
    gap: var(--space-3xs) var(--space-xs);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
}

.contact-form__checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;

    /* Puts the box on the middle of the first line at any type size, without a
       magic number: half a line, less half the box. */
    margin-block-start: calc((1em * var(--line-height-base) - 1.25rem) / 2);
    accent-color: var(--color-primary);
    flex: none;
}

.contact-form__consent-label {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

/* The error belongs under both, not beside the box. */
.contact-form__consent > .contact-form__error {
    grid-column: 1 / -1;
}

/* --- The trap ----------------------------------------------------------------
   A field a person never sees and a bot fills in. Moved off screen rather than
   display: none, because that is the first thing a crawler learns to skip. It
   is out of the tab order in the markup, which is what lets the container be
   aria-hidden without hiding anything a person could reach.
   -------------------------------------------------------------------------- */
.contact-form__trap {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Sending ----------------------------------------------------------------- */
.contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    margin-block-start: var(--space-2xs);
}

.contact-form__submit {
    padding-inline: var(--space-xl);
}

.contact-form__required-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* --- The confirmation --------------------------------------------------------
   Replaces the form after the redirect. A white panel on the grey section, so
   the thing that has changed is unmistakable at a glance.
   -------------------------------------------------------------------------- */
.contact-form__done {
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

/* It is focused by the fragment in the redirect; the outline that would draw
   around a whole panel says nothing, and the panel IS the message. */
.contact-form__done:focus {
    outline: none;
}

.contact-form__done-mark {
    display: block;
    margin-inline: auto;
    color: var(--color-accent);
}

.contact-form__done-mark > svg {
    margin-inline: auto;
}

.contact-form__done-title {
    margin: var(--space-md) 0 var(--space-2xs);
    font-size: var(--font-size-h3);
}

.contact-form__done-text {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--color-text-muted);
}

.contact-form__done-text + .contact-form__done-text {
    margin-block-start: var(--space-2xs);
}

.contact-form__done > .button {
    margin-block-start: var(--space-lg);
}