/* ═══════════════════════════════════════════════════
   Weave HB Referral Form — Stylesheet
   Tone: clean government / social-services utility.
   Palette: deep teal primary, warm neutrals, clear red errors.
═══════════════════════════════════════════════════ */

:root {
    --wrf-primary:      #006b6b;
    --wrf-primary-dark: #004d4d;
    --wrf-primary-light:#e6f5f5;
    --wrf-accent:       #f4a03a;
    --wrf-text:         #1a2b2b;
    --wrf-muted:        #5a7070;
    --wrf-border:       #b0cece;
    --wrf-border-focus: #006b6b;
    --wrf-bg:           #f7fbfb;
    --wrf-white:        #ffffff;
    --wrf-error:        #c0392b;
    --wrf-error-bg:     #fdf2f2;
    --wrf-success:      #1e8449;
    --wrf-success-bg:   #eafaf1;
    --wrf-radius:       6px;
    --wrf-font:         'Georgia', 'Times New Roman', serif;
    --wrf-font-ui:      'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --wrf-shadow:       0 2px 12px rgba(0,107,107,.10);
    --wrf-transition:   .18s ease;
}

/* ─── Wrapper ────────────────────────────────────── */
.wrf-wrapper {
    font-family: var(--wrf-font-ui);
    color: var(--wrf-text);
    max-width: 820px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

/* ─── Notices ────────────────────────────────────── */
.wrf-notice {
    padding: 14px 18px;
    border-radius: var(--wrf-radius);
    font-size: .95rem;
    line-height: 1.5;
    margin-bottom: 24px;
    border-left: 5px solid currentColor;
}
.wrf-notice--success {
    background: var(--wrf-success-bg);
    color: var(--wrf-success);
}
.wrf-notice--error {
    background: var(--wrf-error-bg);
    color: var(--wrf-error);
}

/* ─── Fieldsets ──────────────────────────────────── */
.wrf-fieldset {
    border: 1px solid var(--wrf-border);
    border-radius: var(--wrf-radius);
    background: var(--wrf-white);
    box-shadow: var(--wrf-shadow);
    padding: 24px 28px;
    margin-bottom: 28px;
    min-inline-size: 0;
}
.wrf-fieldset + .wrf-fieldset {
    margin-top: 0;
}

.wrf-legend {
    font-family: var(--wrf-font);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wrf-primary);
    padding: 0 10px;
    letter-spacing: .015em;
    white-space: nowrap;
}

/* ─── Rows ───────────────────────────────────────── */
.wrf-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: start;
    gap: 8px 16px;
    padding: 10px 0;
    border-bottom: 1px solid #edf4f4;
}
.wrf-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.wrf-row--textarea {
    align-items: start;
}

@media (max-width: 600px) {
    .wrf-row {
        grid-template-columns: 1fr;
    }
    .wrf-fieldset {
        padding: 18px 16px;
    }
}

/* ─── Labels ─────────────────────────────────────── */
.wrf-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--wrf-muted);
    padding-top: 9px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.wrf-req {
    color: var(--wrf-error);
    margin-left: 2px;
}

/* ─── Inputs / Selects / Textarea ────────────────── */
.wrf-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wrf-input,
.wrf-select,
.wrf-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px !important;
    font-size: .95rem;
    font-family: var(--wrf-font-ui);
    color: var(--wrf-text);
    background: var(--wrf-bg);
    border: 1.5px solid var(--wrf-border);
    border-radius: var(--wrf-radius);
    transition: border-color var(--wrf-transition), box-shadow var(--wrf-transition), background var(--wrf-transition);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.wrf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23006b6b' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.wrf-input:focus,
.wrf-select:focus,
.wrf-textarea:focus {
    border-color: var(--wrf-border-focus);
    background: var(--wrf-white);
    box-shadow: 0 0 0 3px rgba(0,107,107,.15);
}

.wrf-input.wrf-invalid,
.wrf-select.wrf-invalid,
.wrf-textarea.wrf-invalid {
    border-color: var(--wrf-error);
    background: var(--wrf-error-bg);
}

.wrf-input.wrf-valid,
.wrf-select.wrf-valid,
.wrf-textarea.wrf-valid {
    border-color: #27ae60;
}

.wrf-textarea {
    resize: vertical;
    min-height: 100px;
}

/* ─── Hint & Error text ──────────────────────────── */
.wrf-hint {
    font-size: .78rem;
    color: var(--wrf-muted);
}
.wrf-error {
    font-size: .8rem;
    color: var(--wrf-error);
    font-weight: 600;
    min-height: 1rem;
    display: block;
    /* Hidden by default; JS and PHP both add --visible to show */
    visibility: hidden;
}
.wrf-error--visible {
    visibility: visible;
}

/* ─── Submit row ─────────────────────────────────── */
.wrf-submit-row {
    text-align: right;
    margin-top: 8px;
}

.wrf-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wrf-primary);
    color: var(--wrf-white);
    border: none;
    border-radius: var(--wrf-radius);
    padding: 13px 32px;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--wrf-font-ui);
    letter-spacing: .03em;
    cursor: pointer;
    transition: background var(--wrf-transition), transform var(--wrf-transition), box-shadow var(--wrf-transition);
    box-shadow: 0 3px 10px rgba(0,107,107,.30);
}
.wrf-submit-btn:hover:not(:disabled) {
    background: var(--wrf-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(0,107,107,.35);
}
.wrf-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}
.wrf-submit-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* ─── Spinner ────────────────────────────────────── */
.wrf-btn-spinner {
    display: inline-block;
    animation: wrf-spin 1s linear infinite;
    font-size: 1.1rem;
}
@keyframes wrf-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─── Shake animation for invalid submit ─────────── */
@keyframes wrf-shake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX( 6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX( 4px); }
}
.wrf-shake {
    animation: wrf-shake .4s ease;
}