/* ---- Two-tone serif headline (dark word + coral word) ---- */
.wha-headline {
    font-family: "Newsreader", "Georgia", serif;
    font-weight: 400;
}

.wha-headline-accent {
    color: #E84931;
}

/* ---- Brand wordmark in the app bar ---- */
.wha-brand {
    font-family: "Newsreader", "Georgia", serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: #21211F;
}

.wha-brand-accent {
    color: #E84931;
}

/* ---- Pill buttons ---- */
.wha-pill-btn.mud-button-root {
    border-radius: 999px !important;
    text-transform: none;
    padding-left: 28px;
    padding-right: 28px;
    font-weight: 500;
}

/* ---- Unified pill search bar ---- */
.wha-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E3E1D6;
    border-radius: 999px;
    padding: 6px 6px 6px 24px;
}

    .wha-search-bar .mud-input:before,
    .wha-search-bar .mud-input:after {
        display: none !important;
    }

/* ---- Attribute tag pill ---- */
.wha-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F5F5ED;
    color: #21211F;
    border: 1px solid #E3E1D6;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.wha-tag--accent {
    background: #FDECE8;
    color: #C33A22;
    border-color: #F3C3B7;
    font-weight: 700;
}

/* ---- Soft flat job card ---- */
.wha-job-card {
    background: #FFFFFF;
    border: 1px solid #E3E1D6;
    border-radius: 16px;
    padding: 24px;
}

    .wha-job-title {
        font-family: "Newsreader", "Georgia", serif;
        font-size: 1.25rem;
        color: #21211F;
    }

        .wha-job-title a {
            color: inherit;
            text-decoration: none;
        }

        .wha-job-title a:hover {
            color: #E84931;
        }

/* ---- Three-state form field borders: neutral -> red (error) -> coral (valid/focused) ---- */
.wha-field .mud-input-outlined-border {
    border-color: #C9C6B8 !important;
    border-radius: 12px !important;
}

.wha-field.wha-field--valid .mud-input-outlined-border {
    border-color: #E84931 !important;
    border-width: 2px !important;
}

.wha-field.wha-field--error .mud-input-outlined-border {
    border-color: #D32F2F !important;
    border-width: 2px !important;
}

/* ---- Error summary banner ---- */
.wha-error-summary {
    border: 1px solid #D32F2F;
    background: #FDECEA;
    color: #611A15;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

    .wha-error-summary ul {
        margin: 8px 0 0;
        padding-left: 20px;
    }