/**
 * User Profile — shared field styling.
 *
 * Loaded by BOTH surfaces (the front-end profile card and wp-login.php?action=register)
 * so a field looks identical wherever the spec renders it. Anything specific to one
 * surface belongs in profile.css or registration.css, not here.
 *
 * KidWind brand system: Montserrat (inherited), dark-purple text and labels,
 * light-gray borders that go light-purple on hover, teal focus ring, coral for
 * required markers and errors. See .claude/skills/kidwind-brand-style.
 *
 * Everything is scoped under `.kwp` so core's login stylesheet and the theme cannot
 * reach in, and so these rules beat Global CSS's `.page-template-page-edit-profile
 * input` / `label` rules, which would otherwise tie on specificity.
 */

/* ---- Sections ----------------------------------------------------------- */
.kwp .kwp-section {
    padding: 0;
    margin: 0 0 2.25rem;
    border: 0;
}

.kwp .kwp-section__title {
    display: block;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0 0 0.5rem;
    float: none;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--darkpurple, #4d40b2);
    border-bottom: 1.5px solid var(--lightgray, rgb(240, 240, 240));
}

/* ---- Grid --------------------------------------------------------------- */
/* Twelve columns so the width tokens divide evenly: full 12, half 6, third 4. */
.kwp .kwp-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.kwp .kwp-field {
    display: flex;
    flex-direction: column;
    grid-column: span 12;
    margin: 0;
}

.kwp .kwp-field--half {
    grid-column: span 6;
}

.kwp .kwp-field--third {
    grid-column: span 4;
}

/* A section holding a single field would otherwise leave half or two thirds of its
   row empty, which reads as an unfinished form. Let it fill the row instead. */
.kwp .kwp-grid > .kwp-field:only-child {
    grid-column: span 12;
}

/* ---- Labels ------------------------------------------------------------- */
.kwp .kwp-field label {
    display: block;
    margin: 0 0 0.24rem;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--darkpurple, #4d40b2);
}

/* Required marker, coral per the brand rule for required-field markers. */
.kwp .kwp-req {
    color: var(--coral, #ff5e5e);
    font-weight: 700;
}

/* ---- Controls ----------------------------------------------------------- */
.kwp .kwp-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0.667rem 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--darkpurple, #4d40b2);
    background: var(--white, #fff);
    border: 1.5px solid var(--lightgray, rgb(240, 240, 240));
    border-radius: 0.24rem;
    box-shadow: none;
    transition: 0.3s ease-out;
}

.kwp textarea.kwp-input {
    min-height: 5rem;
    resize: vertical;
}

.kwp select.kwp-input {
    /* Keep the native arrow but stop Safari shrinking the control. */
    height: auto;
    appearance: auto;
}

.kwp .kwp-input::placeholder {
    color: var(--lightpurple50, rgba(108, 89, 255, 0.5));
    opacity: 1;
}

.kwp .kwp-input:hover {
    border-color: var(--lightpurple50, rgba(108, 89, 255, 0.5));
}

.kwp .kwp-input:focus {
    border-color: var(--lightpurple, #6c59ff);
    outline: var(--green, #00deab) auto 1px;
    box-shadow: none;
}

/* ---- Validation --------------------------------------------------------- */
.kwp .kwp-field--invalid .kwp-input {
    border-color: var(--coral, #ff5e5e);
}

.kwp .kwp-field__error {
    margin: 0.24rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--coral, #ff5e5e);
}

/* ---- Small screens ------------------------------------------------------ */
@media only screen and (max-width: 600px) {
    .kwp .kwp-field,
    .kwp .kwp-field--half,
    .kwp .kwp-field--third {
        grid-column: span 12;
    }
}