/* Block: application-form
 *
 * The designer application on /apply/. Deliberately a plain form, not the
 * violet enquiry panel: labels over bordered fields on a white card, which
 * sits under the page's .legal-page title like a policy card.
 */
.legal-page > .wp-block-tgc-application-form {
    margin-top: var(--tgc-heading-gap);
}

/* .block-page is a flex column, so the page would shrink to the thank-you line. */
.block-page > .legal-page:has(> .wp-block-tgc-application-form) {
    width: 100%;
}

.application-form {
    padding: calc(70 * var(--tgc-u)) calc(80 * var(--tgc-u));
    border-radius: var(--tgc-radius);
    background-color: var(--tgc-card);
    font-size: var(--tgc-text-ui);
    line-height: 1.5;
    color: var(--tgc-ink);
}

/* A gap, not margins: the hidden inputs ahead of the first field take no space. */
.application-form__form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.application-form__intro,
.application-form__hint {
    color: var(--tgc-ink-muted);
}

.application-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.application-form__field > label,
.application-form__portfolio legend {
    font-weight: 600;
}

.application-form__portfolio {
    margin-inline: 0;
    padding: 0;
    border: 0;
}

.application-form__portfolio legend {
    padding: 0;
    margin-bottom: 8px;
}

.application-form__sublabel {
    margin-top: 6px;
    font-size: 14px;
    color: var(--tgc-ink-muted);
}

.application-form__hint {
    font-size: 14px;
}

.application-form input[type="text"],
.application-form input[type="email"],
.application-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #C9C4BA;
    border-radius: 6px;
    background-color: var(--theme-white);
    font: inherit;
    color: inherit;
}

.application-form textarea {
    min-height: 140px;
    resize: vertical;
}

.application-form input::placeholder,
.application-form textarea::placeholder {
    color: #8A8A8A;
}

.application-form input[type="file"] {
    font: inherit;
    font-size: 14px;
}

.application-form input:focus-visible,
.application-form textarea:focus-visible {
    outline: 2px solid var(--tgc-violet);
    outline-offset: 1px;
    border-color: var(--tgc-violet);
}

.application-form [aria-invalid="true"] {
    border-color: #B3261E;
}

.application-form__error {
    font-size: 14px;
    font-weight: 500;
    color: #B3261E;
}

.application-form__notice {
    margin-bottom: 28px;
    padding: 14px 18px;
    border-radius: 6px;
    background-color: var(--tgc-violet-soft);
}

.application-form__notice:last-child {
    margin-bottom: 0;
}

.application-form__notice--error {
    background-color: #FCEDEC;
    color: #8C1D18;
}

.application-form__notice a {
    color: inherit;
    text-decoration: underline;
}

.application-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.application-form__submit {
    padding: 14px 32px;
    border: 0;
    border-radius: 6px;
    background-color: var(--tgc-violet);
    font: inherit;
    font-weight: 600;
    color: var(--theme-white);
    cursor: pointer;
}

.application-form__submit:hover {
    background-color: var(--tgc-violet-dark);
}

.application-form__submit:focus-visible {
    outline: 2px solid var(--tgc-violet);
    outline-offset: 2px;
}

.application-form__submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

@media (max-width: 768px) {
    .legal-page > .wp-block-tgc-application-form {
        margin-top: 32px;
    }

    .application-form {
        padding: 28px 20px;
    }
}