/* width: 100% er nødvendig: <body> er en flex-kolonne, og et element med margin: auto i en flex-kolonne
   bliver ellers kun så bredt som sit indhold - så formularen var klemt helt sammen */
#apply-form {
    width: 100%;
    max-width: 46rem;
    margin: 3rem auto;
    padding: 0 1rem;
}

#apply-form h1 {
    margin-bottom: 1.5rem;
}

#application-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* display: flex ovenfor ville ellers overskrive "hidden" */
#application-form[hidden] {
    display: none;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-field label {
    font-size: 1.05rem;
    font-weight: 600;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 0.9rem 1rem;
    font: inherit;
    font-size: 1.05rem;
    border: 2px solid var(--input-border);
    color: inherit;
    background-color: var(--surface);
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

.form-field textarea {
    min-height: 9rem; /* plads til et par afsnit, før man skal scrolle */
    line-height: 1.5;
    resize: vertical; /* kun op/ned, så layoutet ikke går i stykker */
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-field [aria-invalid="true"] {
    border-color: var(--secondary-color);
}

.form-counter {
    font-size: 0.8rem;
    color: var(--text-color-dark-tp);
    text-align: right;
}

.form-counter.is-enough {
    color: var(--success);
}

.form-error {
    font-size: 0.875rem;
    color: var(--secondary-color);
}

#application-form button[type="submit"] {
    align-self: flex-start;
    cursor: pointer;
}

#application-form button:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Besked over formularen */
.form-message {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    border: 2px solid;
}

.form-message-error {
    color: var(--danger);
    background-color: var(--danger-bg);
}

.form-message-success {
    color: var(--success);
    background-color: var(--success-bg);
}

.form-message a {
    color: inherit;
    font-weight: bold;
}

/* Skelettet, mens spørgsmålene hentes: samme afstand som felterne */
.form-skeleton {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}