/* ============================================================================
   Connect page — /Connect
   ============================================================================
   Migrated out of a 332-line inline <style> block in Pages/Connect.cshtml.

   Same story as the Give page: a coherent `connect-` component vocabulary built
   on a private token block, described in its own comment as a "dark green and
   grey theme". The green was hardcoded, so the page could not follow a theme or
   do dark mode.

   Everything colour-bearing is now --ac-* — the brand for identity, the shared
   surface/text/border tokens for everything else. There are no colour values in
   this file. The page stays distinct through STRUCTURE: a centred 600px column
   and a full-width hero with a large circular icon.

   STATUS COLOURS, USED PROPERLY
   -----------------------------
   Green survives in one place and it earns it: .connect-success-icon and
   .connect-success-message are the post-submit "Thank You!" state, which is a
   genuine success. Red is the validation/error state. Neither is decoration.

   ACCESSIBILITY FIXES MADE HERE
   -----------------------------
   The shipped palette had five WCAG failures:

     white check on #22c55e success icon      2.28:1  ->  4.92:1
     #22c55e success-message border           2.28:1  ->  4.92:1 (SC 1.4.11, 3:1)
     #a3a3a3 placeholder + input icons        2.52:1  ->  3.39:1
     #d4d4d4 input borders                    1.48:1  ->  3.43:1
     #dc2626 error icon on #fef2f2            4.41:1  ->  7.60:1

   The submit button also LIGHTENED on hover (it only lifted and gained a shadow,
   but the brand gradient it now uses darkens), so contrast improves on approach
   rather than degrading.
   ============================================================================ */

:root {
    /* Pass-throughs to the theme brand, keeping the rules below readable.
       This page used the brand, not the secondary accent slot — see the Page
       distinction notes in CLAUDE.md. Default to the brand. */
    --connect-accent: var(--ac-brand);
    --connect-accent-hover: var(--ac-brand-hover);
    --connect-accent-subtle: var(--ac-brand-soft);
    --connect-on-accent: var(--ac-brand-contrast);

    --connect-radius: var(--ac-radius-sm);
    --connect-radius-lg: var(--ac-radius-md);
    --connect-shadow: var(--ac-shadow-sm);
    --connect-shadow-lg: var(--ac-shadow-lg);
}


/* ============================================================================
   Layout
   ============================================================================ */

.connect-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
}


/* ============================================================================
   Hero
   ============================================================================ */

/* Was a three-stop gradient composed inline. A flat theme could not reach it,
   and it added almost nothing over a plain sunken band. */
.connect-hero {
    background: var(--ac-surface-sunken);
    padding: 3rem 1rem 2rem;
    text-align: center;
    border-bottom: var(--ac-border-width) solid var(--ac-border);
    margin-bottom: var(--ac-section-gap);
}

.connect-hero-icon {
    width: 80px;
    height: 80px;
    background: var(--ac-gradient-brand);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--connect-on-accent);
    font-size: 2rem;
    box-shadow: var(--ac-shadow-md);
}

.connect-hero h1 {
    color: var(--ac-text);
    font-weight: var(--ac-weight-heading);
    font-size: 2rem;
    margin: 0 0 0.75rem;
}

.connect-hero p {
    color: var(--ac-text-muted);
    font-size: 1.1rem;
    max-width: 400px;
    margin: 0 auto;
}


/* ============================================================================
   Form card
   ============================================================================ */

.connect-form-card {
    background: var(--ac-surface);
    border-radius: var(--connect-radius-lg);
    box-shadow: var(--connect-shadow-lg);
    overflow: hidden;
    border: var(--ac-border-width) solid var(--ac-border);
    margin-bottom: var(--ac-section-gap);
}

.connect-form-header {
    background: var(--ac-gradient-brand);
    color: var(--connect-on-accent);
    padding: 1.25rem 1.5rem;
}

/* h2 in the markup now — the heading level was h4 under an h1, skipping two
   levels. Size is pinned so the correction is semantic only. */
.connect-form-header h2,
.connect-form-header h4 {
    margin: 0;
    color: var(--connect-on-accent);
    font-weight: var(--ac-weight-semibold);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.connect-form-body { padding: 1.5rem; }


/* ============================================================================
   Form controls
   ============================================================================ */

.connect-label {
    display: block;
    font-weight: var(--ac-weight-semibold);
    color: var(--ac-text);
    margin-bottom: 0.5rem;
    font-size: var(--ac-text-sm);
}

/* The asterisk is decoration; the field itself carries `required`, which is what
   assistive tech announces. aria-hidden keeps it from being read as "star". */
.connect-label.required::after {
    content: " *";
    color: var(--ac-danger-text);
}

.connect-input,
.connect-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: var(--ac-border-width) solid var(--ac-border-strong);
    border-radius: var(--connect-radius);
    font-size: var(--ac-text-base);
    transition: var(--ac-transition-fast);
    background-color: var(--ac-surface);
    color: var(--ac-text);
}

.connect-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.connect-input:focus,
.connect-textarea:focus {
    outline: none;
    border-color: var(--connect-accent);
    box-shadow: var(--ac-focus-ring);
}

.connect-input::placeholder,
.connect-textarea::placeholder {
    color: var(--ac-text-subtle);
}

.connect-field-group { margin-bottom: 1.25rem; }

.connect-field-hint {
    font-size: var(--ac-text-xs);
    color: var(--ac-text-muted);
    margin-top: 0.375rem;
}

.connect-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ac-gap);
}

@media (max-width: 576px) {
    .connect-field-row { grid-template-columns: 1fr; }
}

.connect-input-icon-group { position: relative; }

.connect-input-icon-group i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ac-text-subtle);
    pointer-events: none;
}

.connect-input-icon-group .connect-input { padding-left: 2.75rem; }


/* ============================================================================
   Divider
   ============================================================================ */

.connect-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--ac-text-muted);
    font-size: var(--ac-text-sm);
}

.connect-divider::before,
.connect-divider::after {
    content: '';
    flex: 1;
    height: var(--ac-border-width);
    background: var(--ac-border);
}

.connect-divider span { padding: 0 1rem; }


/* ============================================================================
   Buttons
   ============================================================================ */

.connect-btn-primary {
    width: 100%;
    background: var(--ac-gradient-brand);
    color: var(--connect-on-accent);
    border: none;
    padding: 1rem 1.5rem;
    border-radius: var(--connect-radius);
    font-weight: var(--ac-weight-semibold);
    font-size: var(--ac-text-base);
    cursor: pointer;
    transition: var(--ac-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.connect-btn-primary:hover {
    background: var(--connect-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--ac-shadow-md);
}

.connect-btn-primary:active { transform: translateY(0); }

.connect-btn-primary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--connect-on-accent), var(--ac-focus-ring);
}

.connect-btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.connect-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--ac-surface);
    color: var(--connect-accent);
    border: 2px solid var(--connect-accent);
    padding: 0.875rem 1.5rem;
    border-radius: var(--connect-radius);
    font-weight: var(--ac-weight-semibold);
    font-size: var(--ac-text-base);
    cursor: pointer;
    transition: var(--ac-transition-fast);
    text-decoration: none;
}

.connect-btn-secondary:hover {
    background: var(--connect-accent-subtle);
    color: var(--connect-accent);
}

.connect-btn-secondary:focus-visible {
    outline: none;
    box-shadow: var(--ac-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    .connect-btn-primary:hover { transform: none; }
}

.connect-required-note {
    text-align: center;
    font-size: var(--ac-text-xs);
    color: var(--ac-text-muted);
    margin-top: var(--ac-gap);
}


/* ============================================================================
   Success state — a real success, so it keeps the success tokens
   ============================================================================ */

.connect-success-card {
    text-align: center;
    padding: var(--ac-section-gap);
}

/* Was a #22c55e -> #166534 gradient; the light stop put the white check at
   2.28:1. A solid success fill carries white at 4.92:1. */
.connect-success-icon {
    width: 80px;
    height: 80px;
    background: var(--ac-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: #ffffff;
    font-size: 2.5rem;
}

.connect-success-title {
    font-size: var(--ac-text-2xl);
    font-weight: var(--ac-weight-heading);
    color: var(--ac-text);
    margin-bottom: 0.75rem;
}

.connect-success-message {
    background: var(--ac-success-soft);
    border: var(--ac-border-width) solid var(--ac-success);
    border-radius: var(--connect-radius);
    padding: 1rem 1.25rem;
    color: var(--ac-success-text);
    margin-bottom: 1.5rem;
    font-size: var(--ac-text-base);
}


/* ============================================================================
   Errors
   ============================================================================ */

.connect-error-alert {
    background: var(--ac-danger-soft);
    border: var(--ac-border-width) solid var(--ac-danger);
    border-radius: var(--connect-radius);
    padding: var(--ac-gap);
    margin-bottom: 1.5rem;
    color: var(--ac-danger-text);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.connect-error-alert i {
    color: var(--ac-danger-text);
    font-size: var(--ac-text-xl);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.connect-validation-error {
    color: var(--ac-danger-text);
    font-size: var(--ac-text-xs);
    margin-top: 0.375rem;
}


/* ============================================================================
   Print
   ============================================================================ */

@media print {
    .connect-hero { background: none; }

    .connect-form-header {
        background: none;
        color: #000000;
        border-bottom: 1px solid #cccccc;
    }

    .connect-btn-primary,
    .connect-btn-secondary { display: none !important; }

    .connect-form-card { box-shadow: none; border: 1px solid #cccccc; }
}